accounting-rules.component.html

<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
  <!-- This button is only visible if the user has the permission to create accounting rules -->
  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
    <!-- Icon and button label -->
    <fa-icon icon="plus" class="m-r-10"></fa-icon>
    {{"labels.buttons.Add Rule" | translate}}
  </button>
</div>

<div class="container">

  <div fxLayout="row">
    <!-- Search bar for filtering accounting rules -->
    <mat-form-field fxFlex>
      <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)">
    </mat-form-field>
  </div>

  <div class="mat-elevation-z8">
    <!-- Table displaying accounting rules -->
    <table mat-table [dataSource]="dataSource" matSort>
      <!-- Column definitions for the table -->

      <!-- Name column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.name }} </td>
      </ng-container>

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

      <!-- Debit tags column -->
      <ng-container matColumnDef="debitTags">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Tags" | translate}} </th>
        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
      </ng-container>

      <!-- Debit account column -->
      <ng-container matColumnDef="debitAccount">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Debit Account" | translate}} </th>
        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
      </ng-container>

      <!-- Credit tags column -->
      <ng-container matColumnDef="creditTags">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Tags" | translate}} </th>
        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
      </ng-container>

      <!-- Credit account column -->
      <ng-container matColumnDef="creditAccount">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Credit Account" | translate}} </th>
        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
      </ng-container>

      <!-- Header row for the table -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <!-- Row definition for each accounting rule -->
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>

    </table>

    <!-- Pagination controls for the table -->
    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>

  </div>

</div>