groups.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<mat-card class="container">
  <div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
    <div class="search-box m-r-30">
      <mat-form-field class="search-box">
        <input matInput placeholder="{{ 'labels.text.SearchByName' | translate }}" [formControl]="name" />
      </mat-form-field>
      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()" class="m-r-10">{{
        'labels.inputs.Show Closed Groups' | translate
      }}</mat-checkbox>
    </div>
    <div class="action-button gap-25px">
      <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
        <fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
      </button>
      <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
        <fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
      </button>
    </div>
  </div>
  <div *ngIf="(dataSource?.records$ | async) === 0" class="empty-state-container">
    <div class="m-t-40 m-b-40 text-center">
      <fa-icon icon="users" size="6x" class="gray-text m-b-20"></fa-icon>
      <h2 class="mat-h2">{{ 'labels.text.No Groups Found' | translate }}</h2>
      <p class="gray-text">{{ 'labels.text.No Groups Found Description' | translate }}</p>
      <button mat-raised-button color="primary" [routerLink]="['create']">
        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Create Your First Group' | translate }}
      </button>
    </div>
  </div>

  <table *ngIf="(dataSource?.records$ | async) > 0" mat-table [dataSource]="dataSource" matSort class="bordered-table">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
      <td mat-cell *matCellDef="let group">{{ group.name }}</td>
    </ng-container>

    <ng-container matColumnDef="accountNo">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }} #</th>
      <td mat-cell *matCellDef="let group">{{ group.accountNo }}</td>
    </ng-container>

    <ng-container matColumnDef="externalId">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
      <td mat-cell *matCellDef="let group">{{ group.externalId }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
      <td mat-cell *matCellDef="let row">
        <div [ngClass]="row.status.code | statusLookup">
          <fa-icon icon="stop"></fa-icon>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="officeName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
      <td mat-cell *matCellDef="let group">{{ group.officeName }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      [routerLink]="[row.id, 'general']"
      class="select-row"
    ></tr>
  </table>

  <mat-paginator
    [length]="dataSource?.records$ | async"
    [pageSize]="10"
    [pageSizeOptions]="[10, 25, 50, 100]"
    showFirstLastButtons
  ></mat-paginator>
</mat-card>