cbsnexora/src/app/organization/employees/employees.component.html

<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">

  <div #buttonImportEmployees>
    <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
    <fa-icon icon="upload" class="m-r-10"></fa-icon>
    Import Employees
  </button>
  </div>
  <div #buttonCreateEmployee>
    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
    <fa-icon icon="plus" class="m-r-10"></fa-icon>
    Create Employee
  </button>
  </div>

</div>

<div class="container">

    <div #filter fxLayout="row" fxLayoutGap="20px">
        <mat-form-field fxFlex>
            <mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
            <input matInput (keyup)="applyFilter($event.target.value)">
        </mat-form-field>
    </div>

    <div #tableEmployees class="mat-elevation-z8">

        <table mat-table [dataSource]="dataSource" matSort>

            <ng-container matColumnDef="displayName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
                <td mat-cell *matCellDef="let employee"> {{ employee.displayName }} </td>
            </ng-container>

            <ng-container matColumnDef="isLoanOfficer">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Officer </th>
                <td mat-cell *matCellDef="let employee">
                    <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
                    </div>
                </td>
            </ng-container>

            <ng-container matColumnDef="officeName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
                <td mat-cell *matCellDef="let employees"> {{ employees.officeName }} </td>
            </ng-container>

            <ng-container matColumnDef="isActive">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
                <td mat-cell *matCellDef="let employee">
                    <div [className]="employee.isActive === true ? 'true' : 'false'">
                        <fa-icon matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
                    </div>
                </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 #templateButtonImportEmployees let-data let-popover="popover">
  <h2>Import Employees</h2>
  <p class="mw300">This button is used to import employee details from your local device.</p>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Next</button>
  </div>
</ng-template>

<ng-template #templateButtonCreateEmployee let-popover="popover">
  <h2>Create Employee</h2>
  <p class="mw300">This option allows you to create new employees in your organization.</p>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">Back</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Next</button>
  </div>
</ng-template>

<ng-template #templateFilter let-popover="popover">
  <h4>Search bar to filter employees.</h4>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">Next</button>
  </div>
</ng-template>

<ng-template #templateTableEmployees let-popover="popover">
  <h4>List of employees in the organization.</h4>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Back</button>
    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
  </div>
</ng-template>