124 lines
4.6 KiB
HTML
124 lines
4.6 KiB
HTML
<div class="content-area">
|
|
<div class="card">
|
|
<div *ngIf="remained === 0" class="d-flex justify-content-center">
|
|
<div class="card-block noapprovals-info-wrapper">
|
|
<clr-icon
|
|
shape="warning-standard"
|
|
size="60"
|
|
class="is-info icon-dc-fill"
|
|
></clr-icon>
|
|
<h3 class="text-center color-gray">There are no approvals remaining</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-header" [ngClass]="{ noBorder: !loaded }">
|
|
<h3
|
|
class="center clr-col-md-12 text-center"
|
|
*ngIf="loaded && remained !== 0"
|
|
>
|
|
REVIEW
|
|
</h3>
|
|
<p
|
|
class="text-center font-weight-700 color-dark-gray"
|
|
*ngIf="loaded && remained !== 0"
|
|
>
|
|
You have <span>{{ remained }} </span>approvals remaining
|
|
</p>
|
|
</div>
|
|
<div *ngIf="!loaded" class="approvals-list-wrapper">
|
|
<span class="spinner" *ngIf="!loaded"> Loading... </span>
|
|
<div *ngIf="!loaded">
|
|
<h3>Loading approvals list</h3>
|
|
</div>
|
|
</div>
|
|
<div class="clr-col-md-12" ng-if="loaded">
|
|
<div *ngIf="approveList && remained !== 0">
|
|
<clr-datagrid class="datagrid-compact datagrid-custom-footer">
|
|
<clr-dg-column [clrDgField]="'submitter'">SUBMITTER</clr-dg-column>
|
|
<clr-dg-column [clrDgField]="'baseTable'">BASE TABLE</clr-dg-column>
|
|
<clr-dg-column [clrDgField]="'submitted'">SUBMITTED</clr-dg-column>
|
|
<clr-dg-column [clrDgField]="'submitReason'"
|
|
>SUBMIT REASON</clr-dg-column
|
|
>
|
|
<clr-dg-column>ACTION</clr-dg-column>
|
|
<clr-dg-column>DOWNLOAD</clr-dg-column>
|
|
|
|
<clr-dg-row
|
|
*clrDgItems="let approveItem of approveList; let i = index"
|
|
>
|
|
<clr-dg-cell>{{ approveItem.submitter }}</clr-dg-cell>
|
|
<clr-dg-cell>{{ approveItem.baseTable }}</clr-dg-cell>
|
|
<clr-dg-cell>{{ approveItem.submitted }}</clr-dg-cell>
|
|
<clr-dg-cell>{{ approveItem.submitReason }}</clr-dg-cell>
|
|
<clr-dg-cell>
|
|
<div
|
|
class="clr-row"
|
|
role="tooltip"
|
|
class="d-flex justify-content-around"
|
|
>
|
|
<a
|
|
class="column-center links tooltip tooltip-md tooltip-bottom-left color-green"
|
|
(click)="getClicked(i)"
|
|
>
|
|
<clr-icon shape="check" size="24"></clr-icon>
|
|
<span class="tooltip-content">Go to review page screen</span>
|
|
</a>
|
|
<a
|
|
class="column-center links tooltip tooltip-md tooltip-bottom-left color-red"
|
|
(click)="!approveItem.rejectLoading ? rejecting(i) : ''"
|
|
>
|
|
<clr-icon
|
|
*ngIf="!approveItem.rejectLoading"
|
|
shape="ban"
|
|
size="22"
|
|
></clr-icon>
|
|
<clr-spinner
|
|
*ngIf="approveItem.rejectLoading"
|
|
[clrSmall]="true"
|
|
></clr-spinner>
|
|
<span class="tooltip-content">Reject</span>
|
|
</a>
|
|
<a
|
|
class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
|
|
(click)="getTable(approveItem.tableId)"
|
|
>
|
|
<clr-icon shape="code" size="28"></clr-icon>
|
|
<span class="tooltip-content">Go to staged data screen</span>
|
|
</a>
|
|
</div>
|
|
</clr-dg-cell>
|
|
<clr-dg-cell class="p-0 d-flex justify-content-center">
|
|
<button
|
|
class="btn btn-success"
|
|
[id]="approveItem.tableId"
|
|
(click)="
|
|
download(approveItem.tableId); $event.stopPropagation()
|
|
"
|
|
>
|
|
<clr-icon shape="download"></clr-icon>
|
|
</button>
|
|
</clr-dg-cell>
|
|
</clr-dg-row>
|
|
|
|
<clr-dg-footer class="d-flex justify-content-start">
|
|
<span>items per page</span>
|
|
<select [(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 }} approvals
|
|
</clr-dg-pagination>
|
|
</clr-dg-footer>
|
|
</clr-datagrid>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|