dc/client/src/app/review/history/history.component.html

<div class="content-area">
  <div
    *ngIf="noData"
    id="noDataContainer"
    class="card-block d-flex justify-content-center flex-column align-items-center"
  >
    <clr-icon shape="warning-standard" size="60" class="is-info"></clr-icon>
    <h3 class="text-center color-gray">There is no history to show</h3>
  </div>
  <clr-modal [(clrModalOpen)]="openModal" [clrModalSize]="'xl'">
    <h4 class="modal-title">Approval details</h4>
    <div class="modal-body">
      <table class="table">
        <thead>
          <tr>
            <th class="left">Name</th>
            <th class="left">Value</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let col of tableTitles; let ind = index">
            <td class="left">{{ col }}</td>
            <td class="left">
              <a
                *ngIf="ind < 1"
                (click)="getTable(approveData[col])"
                class="cursor-pointer"
                >{{ approveData[col] }}</a
              >
              <div *ngIf="ind < 2 && ind >= 1">
                <a
                  (click)="getBaseTable(approveData[col])"
                  class="cursor-pointer"
                  >VIEW</a
                >
                <span> / </span>
                <a
                  (click)="getEditTable(approveData[col])"
                  class="cursor-pointer"
                  >EDIT</a
                >
              </div>
              <span *ngIf="ind >= 2">{{ approveData[col] }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="openModal = false">
        OK
      </button>
    </div>
  </clr-modal>

  <div
    *ngIf="!loaded"
    class="h-70vh d-flex justify-content-center flex-column align-items-center"
  >
    <span class="spinner" *ngIf="!loaded"> Loading... </span>
    <div *ngIf="!loaded">
      <h3>Loading history</h3>
    </div>
  </div>

  <div *ngIf="!noData && loaded" class="card">
    <div class="card-header">
      <h3 class="center clr-col-md-12 text-center" *ngIf="loaded">HISTORY</h3>
      <p
        class="text-center font-weight-700 color-dark-gray"
        *ngIf="licenceState.value.history_rows_allowed !== Infinity"
      >
        To unlock more than
        {{ licenceState.value.history_rows_allowed }} records, contact
        support&#64;datacontroller.io
      </p>
    </div>

    <clr-datagrid
      class="datagrid-history datagrid-custom-footer"
      *ngIf="loaded"
    >
      <clr-dg-column [clrDgField]="'basetable'">BASE_TABLE</clr-dg-column>
      <clr-dg-column [clrDgField]="'status'">STATUS</clr-dg-column>
      <clr-dg-column [clrDgField]="'submitter'">SUBMITTER</clr-dg-column>
      <clr-dg-column [clrDgField]="'submittedReason'"
        >SUBMIT REASON</clr-dg-column
      >
      <clr-dg-column [clrDgField]="'submitted'">SUBMITTED</clr-dg-column>
      <clr-dg-column [clrDgField]="'reviewed'"
        >APPROVED / REJECTED</clr-dg-column
      >
      <clr-dg-column>DOWNLOAD</clr-dg-column>

      <clr-dg-row
        *clrDgItems="let historyItem of history"
        (click)="getApprIndex(historyItem)"
      >
        <clr-dg-cell class="verCenter">
          <a
            class="btn btn-sm btn-link m-0"
            (click)="getBaseTable(historyItem.basetable)"
            >{{ historyItem.basetable }}</a
          >
        </clr-dg-cell>
        <clr-dg-cell
          class="verCenter"
          [ngClass]="{
            rejected: historyItem.status === 'REJECTED',
            accepted: historyItem.status === 'APPROVED'
          }"
          >{{ historyItem.status }}</clr-dg-cell
        >
        <clr-dg-cell class="verCenter">{{ historyItem.submitter }}</clr-dg-cell>
        <clr-dg-cell class="verCenter">{{
          historyItem.submittedReason
        }}</clr-dg-cell>
        <clr-dg-cell class="verCenter">{{ historyItem.submitted }}</clr-dg-cell>
        <clr-dg-cell class="verCenter">{{ historyItem.reviewed }}</clr-dg-cell>
        <clr-dg-cell class="verCenter p-0 d-flex justify-content-center">
          <button
            class="btn btn-success"
            (click)="download(historyItem.tableId); $event.stopPropagation()"
          >
            <clr-icon shape="download"></clr-icon>
          </button>
        </clr-dg-cell>
      </clr-dg-row>

      <!-- Let's keep this part if in future we decide to do the paging instead of `load more` approach -->
      <!-- <clr-dg-footer class="d-flex justify-content-start">
        <span>items per page</span>

        <select class="mx-5" [(ngModel)]="itemsNum">
          <option [ngValue]="3">3</option>
          <option [ngValue]="5">5</option>
          <option [ngValue]="10">10</option>
          <option [ngValue]="15">15</option>
        </select>
        <clr-dg-pagination
          #pagination
          [clrDgPageSize]="itemsNum"
          class="center"
        >
          {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
          {{ pagination.totalItems }} updates
        </clr-dg-pagination>
      </clr-dg-footer> -->
    </clr-datagrid>

    <div
      class="load-more d-flex clr-justify-content-center clr-align-items-center"
    >
      <button
        *ngIf="
          this.licenceState.value.history_rows_allowed === Infinity &&
          rowsLeftToLoad > 0
        "
        (click)="loadData()"
        [clrLoading]="loadingMore"
        class="btn btn-success"
      >
        Load {{ rowsLeftToLoad }} more
      </button>
    </div>
  </div>
</div>