589 lines
20 KiB
HTML
589 lines
20 KiB
HTML
<clr-modal [(clrModalOpen)]="detailsOpen">
|
|
<h3 class="modal-title">Approval Details</h3>
|
|
<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 key of keysArray">
|
|
<td class="left">{{ key }}</td>
|
|
<td
|
|
*ngIf="key.includes('TABLE_ID')"
|
|
class="left link-it"
|
|
[routerLink]="'/stage/' + jsParams[key]"
|
|
>
|
|
{{ jsParams[key] }}
|
|
</td>
|
|
<td *ngIf="!key.includes('TABLE_ID')" class="left">
|
|
{{ jsParams[key] }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-primary"
|
|
(click)="detailsOpen = false"
|
|
>
|
|
Ok
|
|
</button>
|
|
</div>
|
|
</clr-modal>
|
|
|
|
<clr-modal [(clrModalOpen)]="tableFlag">
|
|
<h3 class="modal-title">All Details</h3>
|
|
<div class="modal-body">
|
|
<clr-tabs *ngIf="tableFlag">
|
|
<clr-tab>
|
|
<button clrTabLink>Submitted Table Details</button>
|
|
<clr-tab-content *clrIfActive="true">
|
|
<div class="overflow-auto">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="left">Name</th>
|
|
<th class="left">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let detail of submitArr">
|
|
<td class="left">{{ detail }}</td>
|
|
<td class="left">{{ submitDetails[detail] }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</clr-tab-content>
|
|
</clr-tab>
|
|
<clr-tab>
|
|
<button clrTabLink>Base Table Details</button>
|
|
<clr-tab-content>
|
|
<div class="overflow-auto">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="left">Name</th>
|
|
<th class="left">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let key of keysArray">
|
|
<td class="left">{{ key }}</td>
|
|
<td class="left">{{ jsParams[key] }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</clr-tab-content>
|
|
</clr-tab>
|
|
</clr-tabs>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-primary"
|
|
(click)="tableFlag = false"
|
|
>
|
|
Ok
|
|
</button>
|
|
</div>
|
|
</clr-modal>
|
|
|
|
<clr-modal [(clrModalOpen)]="rejectOpen">
|
|
<h3 class="modal-title">Reason Message</h3>
|
|
<div class="modal-body">
|
|
<form>
|
|
<section class="form-block">
|
|
<div class="form-group">
|
|
<label for="formFields_8">Reason for rejecting?</label>
|
|
<textarea
|
|
class="w-100"
|
|
id="formFields_8"
|
|
rows="5"
|
|
[(ngModel)]="submitReason"
|
|
[ngModelOptions]="{ standalone: true }"
|
|
[innerHTML]="submitReason"
|
|
></textarea>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline" (click)="rejectOpen = false">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
[clrLoading]="rejectLoading"
|
|
type="submit"
|
|
class="btn btn-success-outline"
|
|
(click)="rejecting()"
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</clr-modal>
|
|
|
|
<div class="content-area">
|
|
<div class="card" *ngIf="!submitted">
|
|
<div
|
|
class="card-header d-flex flex-column justify-content-center"
|
|
*ngIf="loaded"
|
|
>
|
|
<div class="card" *ngIf="loaded" class="mt-0">
|
|
<div class="card-header p-0">
|
|
<div class="clr-row">
|
|
<div class="clr-col-md-4 approvalBack">
|
|
<span
|
|
class="btn btn-sm btn-outline m-0"
|
|
(click)="goToApprovalsList()"
|
|
>
|
|
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
|
|
approvals list
|
|
</span>
|
|
</div>
|
|
<div class="clr-col-md-4 d-flex justify-content-center">
|
|
<h3 class="mt-0 font-weight-300">
|
|
{{ jsParams?.TABLE_NM }}
|
|
</h3>
|
|
</div>
|
|
<div class="clr-col-md-4 approvalInfo">
|
|
<a
|
|
(click)="getDetails()"
|
|
class="tooltip tooltip-sm tooltip-top-left"
|
|
>
|
|
<clr-icon shape="info-standard" size="28"></clr-icon>
|
|
<!-- <span *ngIf="!detailsOpen" class="tooltip-content">Approval Details</span> -->
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mt-10">
|
|
{{ jsParams?.TABLE_DESC }}
|
|
</p>
|
|
</div>
|
|
<div class="card-block p-0">
|
|
<div class="card-text" *ngIf="loaded">
|
|
<div class="clr-row font-size-15">
|
|
<div class="clr-col-md-5">
|
|
<p *ngIf="!tableDetails" class="text-center font-size-18">
|
|
There are no details to show
|
|
</p>
|
|
|
|
<ng-container *ngIf="tableDetails">
|
|
<div class="mt-15">
|
|
<span>Table Id:</span>
|
|
<strong
|
|
class="link-it"
|
|
[routerLink]="'/stage/' + tableDetails?.TABLE_ID"
|
|
>
|
|
{{ tableDetails?.TABLE_ID }}
|
|
</strong>
|
|
</div>
|
|
<div>
|
|
<span>Submitter:</span>
|
|
<span class="mt-10">
|
|
{{ tableDetails?.SUBMITTED_BY_NM }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span>Submitted on:</span>
|
|
<span class="mt-10">
|
|
{{ tableDetails?.SUBMITTED_ON_DTTM }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span>Submitted Reason:</span>
|
|
<span class="mt-10">
|
|
{{ tableDetails?.SUBMITTED_REASON_TXT }}
|
|
</span>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
<div class="clr-col-md-7">
|
|
<div class="card-block d-flex justify-content-center">
|
|
<div class="d-flex justify-content-center mt-0">
|
|
<div class="clr-row clr-gap-5 clr-gap-sm-0">
|
|
<button
|
|
class="btn btn-sm btn-outline text-center mt-5"
|
|
(click)="goToBase(jsParams?.TABLE_NM)"
|
|
>
|
|
Go to base table screen
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-success-outline text-center mt-5"
|
|
(click)="getTable(tableId)"
|
|
>
|
|
Go to edited screen
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-info-outline text-center mt-5"
|
|
(click)="goBack(jsParams?.TABLE_NM)"
|
|
>
|
|
Go back to editor
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="card-block d-flex justify-content-center clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0 clr-align-items-center"
|
|
>
|
|
<button
|
|
id="acceptBtn"
|
|
[clrLoading]="acceptLoading"
|
|
type="submit"
|
|
class="btn btn-sm btn-success"
|
|
(click)="approveTable()"
|
|
[disabled]="
|
|
!loadingTable || params?.ISAPPROVER === 'NO' || noChanges
|
|
"
|
|
>
|
|
ACCEPT
|
|
</button>
|
|
<button
|
|
id="rejectBtn"
|
|
class="btn btn-sm btn btn-danger mr-0"
|
|
(click)="rejectOpen = true"
|
|
[disabled]="
|
|
!loadingTable || params?.ISAPPROVER === 'NO' || noChanges
|
|
"
|
|
>
|
|
REJECT
|
|
</button>
|
|
|
|
<clr-toggle-container class="m-0 ml-20i">
|
|
<clr-toggle-wrapper>
|
|
<input
|
|
type="checkbox"
|
|
clrToggle
|
|
checked
|
|
[(ngModel)]="formattedValues"
|
|
(change)="formattingChanged()"
|
|
/>
|
|
<label class="formatted-values-toggle">{{
|
|
formattedValues ? 'Formatted' : 'Unformatted'
|
|
}}</label>
|
|
</clr-toggle-wrapper>
|
|
</clr-toggle-container>
|
|
</div>
|
|
|
|
<div
|
|
class="card-block d-flex clr-align-items-center clr-flex-column"
|
|
>
|
|
<span *ngIf="diffsLimit" class="rows-notice">
|
|
<clr-icon
|
|
class="mb-5 color-orange"
|
|
shape="exclamation-triangle"
|
|
></clr-icon>
|
|
Only the first 100 inserts, updates or deletes are displayed
|
|
</span>
|
|
<div class="clr-row">
|
|
<div
|
|
class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
|
|
>
|
|
<span class="label label-warning">
|
|
Changed Rows
|
|
<span class="badge badge-warning">{{
|
|
lens.updated
|
|
}}</span>
|
|
</span>
|
|
<span class="label label-success">
|
|
Added Rows
|
|
<span class="badge badge-success">{{ lens.new }}</span>
|
|
</span>
|
|
<span class="label label-danger">
|
|
Deleted Rows
|
|
<span class="badge badge-danger">{{
|
|
lens.deleted
|
|
}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="!loadingTable"
|
|
class="h-24vh d-flex flex-column justify-content-center align-items-center"
|
|
>
|
|
<span class="spinner"> Loading... </span>
|
|
<div *ngIf="!loadingTable">
|
|
<h3>Loading table</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tableCont mt-0">
|
|
<p *ngIf="loadingTable && noChanges" class="text-center font-size-18">
|
|
There are no changes to show
|
|
</p>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr class="d-flex">
|
|
<th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
class="d-flex"
|
|
*ngFor="let key of rowKeys; let i = index"
|
|
[ngClass]="{
|
|
addedRow: chArr[i] == 'added',
|
|
deletedRow: chArr[i] == 'deleted',
|
|
updatedRow: chArr[i] == 'updated'
|
|
}"
|
|
>
|
|
<ng-container *ngIf="chArr[i] === 'updated'">
|
|
<td
|
|
class="left"
|
|
*ngFor="let col of rowKeys[i]; let chIndex = index"
|
|
[ngClass]="{
|
|
'ch tooltip tooltip-md tooltip-top-right':
|
|
arrChanged[i][chIndex] == true && chArr[i] == 'updated'
|
|
}"
|
|
>
|
|
{{ diffTable.data[i][col] }}
|
|
<span
|
|
*ngIf="
|
|
arrChanged[i][chIndex] == true && chArr[i] == 'updated'
|
|
"
|
|
class="tooltip-content"
|
|
>Original value is: {{ arrOfChanges[i][chIndex] }}</span
|
|
>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container *ngIf="chArr[i] !== 'updated'">
|
|
<td
|
|
class="left"
|
|
*ngFor="let col of rowKeys[i]; let chIndex = index"
|
|
>
|
|
{{ diffTable.data[i][col] }}
|
|
</td>
|
|
</ng-container>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-auto mr-12">
|
|
<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 preview</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- submitted page layout -->
|
|
|
|
<div *ngIf="submitted">
|
|
<div class="d-flex flex-column justify-content-center" *ngIf="loaded">
|
|
<div class="card m-0" *ngIf="loaded">
|
|
<div class="card-header">
|
|
<div class="clr-row">
|
|
<div class="clr-col-md-4 approvalBack">
|
|
<span class="btn btn-sm btn-outline" (click)="goToSubmitList()">
|
|
<clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
|
|
submitted list
|
|
</span>
|
|
</div>
|
|
<div class="clr-col-md-4">
|
|
<h3 class="mt-0 font-weight-300 text-center">
|
|
{{ subObj.base }}
|
|
</h3>
|
|
</div>
|
|
<div class="clr-col-md-4 approvalInfo">
|
|
<a
|
|
(click)="tableFlag = true"
|
|
class="tooltip tooltip-sm tooltip-top-left"
|
|
>
|
|
<clr-icon shape="info-standard" size="28"></clr-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="m-0 text-center color-darker-gray">
|
|
{{ tableDescription }}
|
|
</p>
|
|
</div>
|
|
<div class="clr-row font-size-15">
|
|
<div class="clr-col-md-5">
|
|
<div class="mt-15">
|
|
<span>Table Id:</span>
|
|
<strong class="link-it" [routerLink]="'/stage/' + subObj.tableId">
|
|
<span> {{ subObj.tableId }}</span>
|
|
</strong>
|
|
</div>
|
|
<div>
|
|
<span>Submitted on:</span>
|
|
<span class="mt-10">
|
|
{{ subObj.submitted }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span>Submit Message:</span>
|
|
<span>
|
|
{{ subObj.submitReason }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="clr-col-md-7">
|
|
<div class="card-block d-flex justify-content-center">
|
|
<div class="d-flex justify-content-center mt-0">
|
|
<div class="clr-row clr-gap-5 clr-gap-sm-0">
|
|
<button
|
|
class="btn btn-sm btn-outline text-center mt-5"
|
|
(click)="goToBase(subObj.base)"
|
|
>
|
|
Go to base table screen
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-success-outline text-center mt-5"
|
|
(click)="getTable(subObj.tableId)"
|
|
>
|
|
Go to edited screen
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-info-outline text-center mt-5"
|
|
(click)="goBack(subObj.base)"
|
|
>
|
|
Go back to editor
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="card-block d-flex clr-align-items-center clr-flex-column"
|
|
>
|
|
<span *ngIf="diffsLimit" class="rows-notice">
|
|
<clr-icon
|
|
class="mb-5 color-orange"
|
|
shape="exclamation-triangle"
|
|
></clr-icon>
|
|
Only the first 100 inserts, updates or deletes are displayed
|
|
</span>
|
|
<div class="clr-row">
|
|
<div
|
|
class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
|
|
>
|
|
<span class="label label-warning">
|
|
Changed Rows
|
|
<span class="badge badge-warning">{{ lens.updated }}</span>
|
|
</span>
|
|
<span class="label label-success">
|
|
Added Rows
|
|
<span class="badge badge-success">{{ lens.new }}</span>
|
|
</span>
|
|
<span class="label label-danger">
|
|
Deleted Rows
|
|
<span class="badge badge-danger">{{ lens.deleted }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-block d-flex justify-content-center">
|
|
<clr-toggle-container class="m-0 ml-20-i">
|
|
<clr-toggle-wrapper>
|
|
<input
|
|
type="checkbox"
|
|
clrToggle
|
|
checked
|
|
[(ngModel)]="formattedValues"
|
|
(change)="formattingChanged()"
|
|
/>
|
|
<label>{{
|
|
formattedValues ? 'Formatted' : 'Unformatted'
|
|
}}</label>
|
|
</clr-toggle-wrapper>
|
|
</clr-toggle-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-block p-0 overflow-auto mr-12">
|
|
<div class="card-text" *ngIf="loaded"></div>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="!loadingTable"
|
|
class="h-25vh d-flex flex-column justify-content-center align-items-center"
|
|
>
|
|
<span class="spinner"> Loading... </span>
|
|
<div *ngIf="!loadingTable">
|
|
<h3>Loading table</h3>
|
|
</div>
|
|
</div>
|
|
<div class="tableCont">
|
|
<table class="table">
|
|
<thead>
|
|
<tr class="d-flex">
|
|
<th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
class="d-flex"
|
|
*ngFor="let key of rowKeys; let i = index"
|
|
[ngClass]="{
|
|
addedRow: chArr[i] == 'added',
|
|
deletedRow: chArr[i] == 'deleted',
|
|
updatedRow: chArr[i] == 'updated'
|
|
}"
|
|
>
|
|
<ng-container *ngIf="chArr[i] === 'updated'">
|
|
<td
|
|
class="left"
|
|
*ngFor="let col of rowKeys[i]; let chIndex = index"
|
|
[ngClass]="{
|
|
'ch tooltip tooltip-md tooltip-top-right':
|
|
arrChanged[i][chIndex] == true && chArr[i] == 'updated'
|
|
}"
|
|
>
|
|
{{ diffTable.data[i][col] }}
|
|
<span
|
|
*ngIf="
|
|
arrChanged[i][chIndex] == true && chArr[i] == 'updated'
|
|
"
|
|
class="tooltip-content"
|
|
>Original value is: {{ arrOfChanges[i][chIndex] }}</span
|
|
>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container *ngIf="chArr[i] !== 'updated'">
|
|
<td
|
|
class="left"
|
|
*ngFor="let col of rowKeys[i]; let chIndex = index"
|
|
>
|
|
{{ diffTable.data[i][col] }}
|
|
</td>
|
|
</ng-container>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-block" *ngIf="!loaded">
|
|
<div class="loader">
|
|
<span class="spinner"> Loading... </span>
|
|
<div *ngIf="!loaded">
|
|
<h3>Loading submitted table</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|