cbsnexora/src/app/system/manage-reports/manage-reports.component.html

<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
  <div #buttonCreateReport class="in-block">
    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_REPORT'">
      <fa-icon icon="plus" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Create Report' | translate }}
    </button>
  </div>
</div>

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

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

      <ng-container matColumnDef="reportType">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Type' | translate }}</th>
        <td mat-cell *matCellDef="let report">{{ report.reportType | translateKey: 'text' }}</td>
      </ng-container>

      <ng-container matColumnDef="reportSubType">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Sub Type' | translate }}</th>
        <td mat-cell *matCellDef="let report">{{ report.reportSubType | translateKey: 'text' }}</td>
      </ng-container>

      <ng-container matColumnDef="reportCategory">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Report Category' | translate }}</th>
        <td mat-cell *matCellDef="let report">{{ report.reportCategory | translateKey: 'catalogs' }}</td>
      </ng-container>

      <ng-container matColumnDef="coreReport">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Core Report' | translate }}</th>
        <td mat-cell *matCellDef="let report">
          <fa-icon
            *ngIf="report.coreReport"
            icon="check-circle"
            size="lg"
            class="true"
            [matTooltip]="'tooltips.Yes' | translate"
            matTooltipPosition="right"
          ></fa-icon>
          <fa-icon
            *ngIf="!report.coreReport"
            icon="times-circle"
            size="lg"
            class="false"
            [matTooltip]="'tooltips.No' | translate"
            matTooltipPosition="right"
          ></fa-icon>
        </td>
      </ng-container>

      <ng-container matColumnDef="userReport">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.User Report' | translate }}</th>
        <td mat-cell *matCellDef="let report">
          <fa-icon
            *ngIf="report.useReport"
            icon="check-circle"
            size="lg"
            class="true"
            [matTooltip]="'tooltips.Yes' | translate"
            matTooltipPosition="right"
          ></fa-icon>
          <fa-icon
            *ngIf="!report.useReport"
            icon="times-circle"
            size="lg"
            class="false"
            [matTooltip]="'tooltips.No' | translate"
            matTooltipPosition="right"
          ></fa-icon>
        </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 #templateButtonCreateReport let-popover="popover">
  <h2>{{ 'labels.buttons.Create Report' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Create new report' | translate }}</p>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="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.Filter reports by name' | translate }}</h4>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="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(templateButtonCreateReport, buttonCreateReport, 'bottom', true)"
    >
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="popover.close(); showPopover(templateReportsTable, reportsTable, 'top', true)"
    >
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateReportsTable let-popover="popover">
  <h4 class="mw300">
    {{ 'labels.heading.List of all currently available reports' | translate }}:
    <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">{{
      'labels.heading.Manage Reports' | translate
    }}</a>
  </h4>
  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="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>