133 lines
5.3 KiB
HTML
133 lines
5.3 KiB
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 align-end gap-20px">
|
|
<div #buttonCreateUser class="in-block">
|
|
<button mat-raised-button color="primary" [routerLink]="['create']">
|
|
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
|
{{ 'labels.buttons.Create User' | 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 #usersTable class="mat-elevation-z8">
|
|
<table mat-table [dataSource]="dataSource" matSort>
|
|
<ng-container matColumnDef="firstname">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.First Name' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">{{ user.firstname }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="username">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Login Name' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">{{ user.username }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="lastname">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Last Name' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">{{ user.lastname }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="email">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Email' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">{{ user.email }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="officeName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">{{ user.officeName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="isSelfServiceUser">
|
|
<th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Is Self Service' | translate }}</th>
|
|
<td mat-cell *matCellDef="let user">
|
|
<span
|
|
[ngClass]="user.isSelfServiceUser ? 'self-service-true' : 'self-service-false'"
|
|
class="self-service-indicator"
|
|
></span>
|
|
{{ user.isSelfServiceUser ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
|
|
</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 #templateButtonCreateUser let-popover="popover">
|
|
<h2>{{ 'labels.buttons.Create User' | translate }}</h2>
|
|
<p class="mw300">{{ 'labels.text.This option allows you to create new users in your organization' | 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 users' | 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(templateButtonCreateUser, buttonCreateUser, 'bottom', true)"
|
|
>
|
|
{{ 'labels.buttons.Back' | translate }}
|
|
</button>
|
|
<button
|
|
mat-raised-button
|
|
color="primary"
|
|
(click)="popover.close(); showPopover(templateUsersTable, usersTable, 'top', true)"
|
|
>
|
|
{{ 'labels.buttons.Next' | translate }}
|
|
</button>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #templateUsersTable let-popover="popover">
|
|
<h4>{{ 'labels.heading.List of Users with their details' | 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(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>
|