cbsnexora/src/app/system/roles-and-permissions/roles-and-permissions.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/.
-->

<div class="container m-b-20 layout-row layout-align-end gap-20px" [routerLink]="['add']">
  <div #buttonAddRole class="in-block">
    <button mat-raised-button color="primary">
      <fa-icon icon="plus" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Add Role' | translate }}
    </button>
  </div>
</div>

<div class="container">
  <div #filter class="layout-row gap-20px">
    <mat-form-field class="flex-fill">
      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
      <input matInput (keyup)="applyFilter($event.target.value)" />
    </mat-form-field>
  </div>

  <div #tableRolesandPermissions class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Name' | translate }}</th>
        <td mat-cell *matCellDef="let role">{{ role.name }}</td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
        <td mat-cell *matCellDef="let role">{{ role.description }}</td>
      </ng-container>

      <ng-container matColumnDef="disabled">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
        <td mat-cell *matCellDef="let role">
          <div [className]="role.disabled === true ? 'false' : 'true'">
            <fa-icon
              [matTooltip]="
                role.disabled === true ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate)
              "
              matTooltipPosition="right"
              icon="circle"
              size="lg"
            ></fa-icon>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
        <td mat-cell *matCellDef="let role">
          @if (role.name !== 'Super user') {
            <button mat-icon-button color="primary" (click)="routeEdit($event)" [routerLink]="[role.id, 'edit']">
              <fa-icon icon="edit"> {{ 'labels.buttons.Edit' | translate }} </fa-icon>
            </button>
          }
        </td>
      </ng-container>

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

    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
  </div>
</div>

<ng-template #templateButtonAddRole let-popover="popover">
  <h2>{{ 'labels.buttons.Add Role' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.To create a new role' | translate }}.</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
    >
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateFilter let-popover="popover">
  <h4>{{ 'labels.heading.Search bar to filter roles' | translate }}.</h4>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="popover.close(); showPopover(templateButtonAddRole, buttonAddRole, 'bottom', true)"
    >
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="popover.close(); showPopover(templateTableRolesandPermissions, tableRolesandPermissions, 'top', true)"
    >
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateTableRolesandPermissions let-popover="popover">
  <h4 class="mw300">
    {{ 'labels.heading.List of roles defined within the organization' | translate }}:
    <a [href]="'rolesAndPermissions' | documentationLink" target="_blank" rel="noopener noreferrer">{{
      'labels.inputs.Manage Roles and Permission' | translate
    }}</a>
  </h4>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="popover.close(); showPopover(templateFilter, filter, 'bottom', true)"
    >
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>