feat: implement product approval workflow updates
This commit is contained in:
@@ -6,108 +6,166 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
@if (isProductEditEntry) {
|
||||
<div class="container m-b-20">
|
||||
<div class="mat-elevation-z1" style="padding: 12px 16px; border-left: 4px solid #f59e0b; background: #fffbeb">
|
||||
This is a product edit awaiting approval. Approve or reject it from
|
||||
<strong>Approvals > Pending Product Edits</strong> instead — actioning it here would not release its lock.
|
||||
<div class="vci" [class.vci--dialog]="isDialog">
|
||||
<!-- The heading lives here in both modes, so a dialog does not end up showing it twice. -->
|
||||
<div class="vci-head">
|
||||
<span class="vci-head__title">{{ headingTitle }}</span>
|
||||
@if (isDialog) {
|
||||
<button type="button" class="vci-head__close" (click)="close()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
<span>{{ 'labels.buttons.Close' | translate }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- As a dialog the detail is fetched rather than resolved, so nothing below can render until it
|
||||
arrives — every field reads checkerInboxDetail.* directly. -->
|
||||
@if (loading) {
|
||||
<div class="vci-loading">
|
||||
<fa-icon icon="spinner" class="vci-loading__ic"></fa-icon>
|
||||
<span>{{ 'labels.heading.Loading' | translate }}…</span>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="layout-row align-end gap-1percent layout-lt-md-column container m-b-20">
|
||||
<button mat-raised-button color="success" (click)="approveChecker()">
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="deleteChecker()">
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="reject" (click)="rejectChecker()">
|
||||
<fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap responsive-column">
|
||||
<h2 class="mat-h2 flex-fill">{{ 'labels.heading.View Checker Inbox' | translate }}</h2>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.ID' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.id }}</span>
|
||||
@if (checkerInboxDetail) {
|
||||
<div class="vci-body">
|
||||
@if (isProductEditEntry) {
|
||||
<div class="vci-notice">
|
||||
This is a product edit awaiting approval. Approve or reject it from
|
||||
<strong>Approvals > Pending Product Edits</strong> instead — actioning it here would not release its lock.
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Status' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.processingResult }}</span>
|
||||
} @else {
|
||||
<div class="vci-actions">
|
||||
<button type="button" class="vci-btn vci-btn--approve" (click)="approveChecker()">
|
||||
<fa-icon icon="check"></fa-icon><span>{{ 'labels.buttons.Approve' | translate }}</span>
|
||||
</button>
|
||||
<button type="button" class="vci-btn vci-btn--reject" (click)="rejectChecker()">
|
||||
<fa-icon icon="times"></fa-icon><span>{{ 'labels.buttons.Reject' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.User' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.maker }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Action' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.actionName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Entity' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.entityName }}</span>
|
||||
</div>
|
||||
|
||||
@if (checkerInboxDetail.resourceId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Resource ID' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.resourceId }}</span>
|
||||
<div class="vci-section">
|
||||
<div class="vci-section__title">{{ 'labels.heading.Details' | translate }}</div>
|
||||
<!-- A real label/value grid rather than the global flex-40/flex-60 utilities, which are sized
|
||||
for a full-width page and collapse into one run-together line inside a dialog. -->
|
||||
<dl class="vci-grid">
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.ID' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.id }}</dd>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Date' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
@if (checkerInboxDetail.officeName) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.officeName }}</span>
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Status' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.processingResult || '—' }}</dd>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (checkerInboxDetail.savingsAccountNo) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.savingsAccountNo }}</span>
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.User' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.maker || '—' }}</dd>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (checkerInboxDetail.groupLevelName) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40"> {{ checkerInboxDetail.groupLevelName }}</span>
|
||||
<span class="flex-60">{{ checkerInboxDetail.groupName }}</span>
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Action' | translate }}</dt>
|
||||
<dd>
|
||||
<span class="vci-tag" [class.vci-tag--danger]="checkerInboxDetail.actionName === 'DELETE'">{{
|
||||
checkerInboxDetail.actionName
|
||||
}}</span>
|
||||
</dd>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (displayJSONData) {
|
||||
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Command' | translate }}</h3>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
@for (json of jsondata | keyvalue; track json) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ json.key }}:</span>
|
||||
<span class="flex-60">{{ json.value }}</span>
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Entity' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.entityName }}</dd>
|
||||
</div>
|
||||
@if (checkerInboxDetail.resourceId) {
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Resource ID' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.resourceId }}</dd>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Date' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.madeOnDate | dateFormat }}</dd>
|
||||
</div>
|
||||
@if (checkerInboxDetail.officeName) {
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Office' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.officeName }}</dd>
|
||||
</div>
|
||||
}
|
||||
@if (checkerInboxDetail.savingsAccountNo) {
|
||||
<div class="vci-kv">
|
||||
<dt>{{ 'labels.inputs.Savings Account Number' | translate }}</dt>
|
||||
<dd>{{ checkerInboxDetail.savingsAccountNo }}</dd>
|
||||
</div>
|
||||
}
|
||||
@if (checkerInboxDetail.groupLevelName) {
|
||||
<div class="vci-kv">
|
||||
<dt>{{ checkerInboxDetail.groupLevelName }}</dt>
|
||||
<dd>{{ checkerInboxDetail.groupName }}</dd>
|
||||
</div>
|
||||
}
|
||||
</dl>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@if (displayJSONData) {
|
||||
<div class="vci-section">
|
||||
<div class="vci-section__title">{{ 'labels.heading.Command' | translate }}</div>
|
||||
<dl class="vci-grid">
|
||||
@for (field of commandFields; track $index) {
|
||||
<ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
|
||||
}
|
||||
</dl>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Recursive renderer for one Command payload field. Scalars stay in the two-column grid; objects and
|
||||
arrays span the full width so their nested content has room instead of overflowing the dialog. -->
|
||||
<ng-template #commandField let-field>
|
||||
@switch (field.kind) {
|
||||
@case ('object') {
|
||||
<div class="vci-kv vci-kv--wide">
|
||||
<dt>{{ field.label }}</dt>
|
||||
<dd>
|
||||
<dl class="vci-subgrid">
|
||||
@for (child of field.fields; track $index) {
|
||||
<ng-container *ngTemplateOutlet="commandField; context: { $implicit: child }"></ng-container>
|
||||
}
|
||||
</dl>
|
||||
</dd>
|
||||
</div>
|
||||
}
|
||||
@case ('list') {
|
||||
<div class="vci-kv vci-kv--wide">
|
||||
<dt>
|
||||
{{ field.label }} <span class="vci-count">{{ field.items.length }}</span>
|
||||
</dt>
|
||||
<dd>
|
||||
@if (field.items.length === 0) {
|
||||
<span class="vci-none">None</span>
|
||||
}
|
||||
@for (item of field.items; track $index) {
|
||||
@if (item.kind === 'scalar') {
|
||||
<span class="vci-chip">{{ item.text }}</span>
|
||||
} @else {
|
||||
<div class="vci-entry">
|
||||
<div class="vci-entry__head">{{ item.label }}</div>
|
||||
<dl class="vci-subgrid">
|
||||
@for (child of item.kind === 'object' ? item.fields : item.items; track $index) {
|
||||
<ng-container *ngTemplateOutlet="commandField; context: { $implicit: child }"></ng-container>
|
||||
}
|
||||
</dl>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</dd>
|
||||
</div>
|
||||
}
|
||||
@default {
|
||||
<div class="vci-kv">
|
||||
<dt>{{ field.label }}</dt>
|
||||
<dd>{{ field.text }}</dd>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
@@ -6,19 +6,321 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
// ── Design tokens ─────────────────────────────────────────────────────────────
|
||||
$border: #e2e8f0;
|
||||
$bg-page: #f8fafc;
|
||||
$text-dark: #1e293b;
|
||||
$text-mid: #475569;
|
||||
$text-soft: #94a3b8;
|
||||
$success: #16a34a;
|
||||
$warning: #d97706;
|
||||
|
||||
.mat-elevation-z1 {
|
||||
margin: 1em 0 1.5em;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
.vci {
|
||||
background: #fff;
|
||||
|
||||
/* Opened as a popup rather than a full page: sized to its own content, capped so a long command
|
||||
payload scrolls inside the dialog instead of pushing it off screen. As a route it stays a
|
||||
normal page-width card. */
|
||||
&--dialog {
|
||||
width: min(680px, 92vw);
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:not(&--dialog) {
|
||||
max-width: 900px;
|
||||
margin: 20px auto;
|
||||
border: 1px solid $border;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Header ───────────────────────────────────────────────────────────────────
|
||||
.vci-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid $border;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
&__close {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: $text-soft;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
color: $text-mid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vci-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 48px 24px;
|
||||
font-size: 14px;
|
||||
color: $text-soft;
|
||||
|
||||
&__ic {
|
||||
animation: vci-spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vci-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.vci-body {
|
||||
padding: 16px 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
// ── Actions ──────────────────────────────────────────────────────────────────
|
||||
.vci-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vci-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 36px;
|
||||
padding: 0 18px;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid transparent;
|
||||
transition: all 0.15s;
|
||||
|
||||
&--approve {
|
||||
background: #f0fdf4;
|
||||
color: $success;
|
||||
border-color: #86efac;
|
||||
|
||||
&:hover {
|
||||
background: $success;
|
||||
color: #fff;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&--delete {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
border-color: #fdba74;
|
||||
|
||||
&:hover {
|
||||
background: #ea580c;
|
||||
color: #fff;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
}
|
||||
|
||||
&--reject {
|
||||
background: #fff;
|
||||
color: $text-mid;
|
||||
border-color: $border;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vci-notice {
|
||||
padding: 12px 16px;
|
||||
border-left: 4px solid $warning;
|
||||
background: #fffbeb;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
// ── Detail sections ──────────────────────────────────────────────────────────
|
||||
.vci-section {
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
padding: 10px 16px;
|
||||
background: $bg-page;
|
||||
border-bottom: 1px solid $border;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: $text-mid;
|
||||
}
|
||||
}
|
||||
|
||||
/* One label above its value, two pairs per row where there is room. This replaces the global
|
||||
flex-40/flex-60 utilities, which are sized for a full-width page and ran every field together
|
||||
onto a single line inside the dialog. */
|
||||
.vci-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 14px 24px;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0.5em 0;
|
||||
.vci-kv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
|
||||
dt {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: $text-soft;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $text-dark;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
// A nested object/array needs the full grid width, not one of the two columns, or its own
|
||||
// label/value pairs get squeezed into a sliver and wrap character by character.
|
||||
&--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nested object/array rendering inside the Command section. Reuses .vci-kv for the leaves, so a
|
||||
nested field looks like every other label/value pair, just indented under its parent. */
|
||||
.vci-subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px 20px;
|
||||
margin: 6px 0 0;
|
||||
padding: 10px 12px;
|
||||
border-left: 2px solid $border;
|
||||
background: $bg-page;
|
||||
border-radius: 0 6px 6px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* One element of an array of objects. */
|
||||
.vci-entry {
|
||||
margin-top: 8px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&__head {
|
||||
padding: 6px 12px;
|
||||
background: $bg-page;
|
||||
border-bottom: 1px solid $border;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $text-mid;
|
||||
}
|
||||
|
||||
.vci-subgrid {
|
||||
margin: 0;
|
||||
border-left: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Count badge next to an array's label. */
|
||||
.vci-count {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
padding: 0 7px;
|
||||
border-radius: 20px;
|
||||
background: $border;
|
||||
color: $text-mid;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* A scalar element of an array (e.g. a list of codes) - shown inline rather than as a card. */
|
||||
.vci-chip {
|
||||
display: inline-block;
|
||||
margin: 3px 6px 0 0;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
background: $bg-page;
|
||||
border: 1px solid $border;
|
||||
font-size: 12.5px;
|
||||
color: $text-dark;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.vci-none {
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
color: $text-soft;
|
||||
}
|
||||
|
||||
.vci-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: $bg-page;
|
||||
color: $text-mid;
|
||||
border: 1px solid $border;
|
||||
|
||||
&--danger {
|
||||
background: #fff1f2;
|
||||
color: #be123c;
|
||||
border-color: #fda4af;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-t {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import * as _ from 'lodash';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
|
||||
/** Custom Services */
|
||||
import { TasksService } from '../tasks.service';
|
||||
@@ -19,10 +19,62 @@ import { TasksService } from '../tasks.service';
|
||||
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { KeyValuePipe } from '@angular/common';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { DateFormatPipe } from '../../pipes/date-format.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { isTempTableProductEdit } from '../product-entities';
|
||||
|
||||
/**
|
||||
* One row of the rendered Command payload. The dialog turns the parsed command JSON into a tree of
|
||||
* these so the template can lay nested objects out as label/value pairs and arrays as repeated
|
||||
* entries, rather than dumping raw JSON at the checker. Purely a view model — the command data
|
||||
* itself (`jsondata`) is left exactly as the API returned it.
|
||||
*/
|
||||
export type CommandField =
|
||||
| { label: string; kind: 'scalar'; text: string }
|
||||
| { label: string; kind: 'object'; fields: CommandField[] }
|
||||
| { label: string; kind: 'list'; items: CommandField[] };
|
||||
|
||||
/**
|
||||
* Segments that read as initialisms in this domain, so `upiFacility` becomes "UPI Facility" rather
|
||||
* than "Upi Facility". Anything not listed just gets title-cased, so an unknown key still renders
|
||||
* sensibly - no per-product hard-coding.
|
||||
*/
|
||||
const LABEL_ACRONYMS = new Set([
|
||||
'upi',
|
||||
'id',
|
||||
'ids',
|
||||
'url',
|
||||
'api',
|
||||
'ifsc',
|
||||
'micr',
|
||||
'kyc',
|
||||
'ckyc',
|
||||
'aml',
|
||||
'pan',
|
||||
'gst',
|
||||
'cgst',
|
||||
'sgst',
|
||||
'igst',
|
||||
'tds',
|
||||
'gl',
|
||||
'neft',
|
||||
'rtgs',
|
||||
'imps',
|
||||
'nach',
|
||||
'ecs',
|
||||
'atm',
|
||||
'nri',
|
||||
'cif',
|
||||
'dob',
|
||||
'otp',
|
||||
'sms',
|
||||
'emi',
|
||||
'fd',
|
||||
'rd',
|
||||
'mis',
|
||||
'nef'
|
||||
]);
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-view-checker-inbox',
|
||||
@@ -31,8 +83,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatDivider,
|
||||
KeyValuePipe,
|
||||
NgTemplateOutlet,
|
||||
DateFormatPipe
|
||||
]
|
||||
})
|
||||
@@ -43,6 +94,98 @@ export class ViewCheckerInboxComponent {
|
||||
private translateService = inject(TranslateService);
|
||||
private tasksService = inject(TasksService);
|
||||
|
||||
/** Present only when opened as a popup from the Checker Inbox list; absent when reached by direct
|
||||
* route (a bookmarked or shared link). Both entry points stay supported — this only changes where
|
||||
* the detail comes from and how "done" is signalled: closing the dialog vs. navigating back. */
|
||||
private dialogRef = inject(MatDialogRef<ViewCheckerInboxComponent>, { optional: true });
|
||||
private dialogData = inject<{ checkerId: number | string; title?: string } | null>(MAT_DIALOG_DATA, {
|
||||
optional: true
|
||||
});
|
||||
|
||||
loading = false;
|
||||
|
||||
get isDialog(): boolean {
|
||||
return !!this.dialogRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* Heading text. Defaults to the Checker Inbox heading — which is what the Checker Inbox itself and
|
||||
* the direct route both get — but a caller opening this dialog from another tab can supply its own,
|
||||
* so the checker sees which queue the request came from. Nothing else about the dialog changes.
|
||||
*/
|
||||
get headingTitle(): string {
|
||||
return this.dialogData?.title ?? this.translateService.instant('labels.heading.View Checker Inbox');
|
||||
}
|
||||
|
||||
/**
|
||||
* The Command payload as a render tree. Built once per detail load rather than exposed as a getter,
|
||||
* so change detection is not re-walking the payload on every cycle.
|
||||
*/
|
||||
commandFields: CommandField[] = [];
|
||||
|
||||
/** camelCase / snake_case key -> readable label, e.g. `upiFacility` -> "UPI Facility". */
|
||||
private labelFor(key: string): string {
|
||||
const spaced = String(key ?? '')
|
||||
.replace(/[_\-.]+/g, ' ')
|
||||
// splitAt lower|digit -> Upper, and at the tail of a run of capitals (`UPIFacility` -> `UPI Facility`)
|
||||
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
|
||||
.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
|
||||
.trim();
|
||||
if (!spaced) {
|
||||
return '';
|
||||
}
|
||||
return spaced
|
||||
.split(/\s+/)
|
||||
.map((word) =>
|
||||
LABEL_ACRONYMS.has(word.toLowerCase()) ? word.toUpperCase() : word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
/** Leaf rendering. Booleans read as Yes/No; everything else keeps the text it always had. */
|
||||
private scalarText(value: any): string {
|
||||
if (value === null || value === undefined) {
|
||||
return '—';
|
||||
}
|
||||
if (typeof value === 'boolean') {
|
||||
return value ? 'Yes' : 'No';
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively turns one key/value pair into a render node. Nothing is dropped or summarised - every
|
||||
* key in the payload produces a node, so the checker still sees the complete request.
|
||||
*/
|
||||
private toField(label: string, value: any): CommandField {
|
||||
if (Array.isArray(value)) {
|
||||
return {
|
||||
label,
|
||||
kind: 'list',
|
||||
items: value.map((item, index) =>
|
||||
item !== null && typeof item === 'object'
|
||||
? this.toField(`${label} ${index + 1}`, item)
|
||||
: { label: '', kind: 'scalar' as const, text: this.scalarText(item) }
|
||||
)
|
||||
};
|
||||
}
|
||||
if (value !== null && typeof value === 'object') {
|
||||
return {
|
||||
label,
|
||||
kind: 'object',
|
||||
fields: Object.keys(value).map((key) => this.toField(this.labelFor(key), value[key]))
|
||||
};
|
||||
}
|
||||
return { label, kind: 'scalar', text: this.scalarText(value) };
|
||||
}
|
||||
|
||||
private buildCommandFields(payload: any): CommandField[] {
|
||||
if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
|
||||
return [];
|
||||
}
|
||||
return Object.keys(payload).map((key) => this.toField(this.labelFor(key), payload[key]));
|
||||
}
|
||||
|
||||
/** Checker Inbox Details Data */
|
||||
checkerInboxDetail: any;
|
||||
/** JsonData */
|
||||
@@ -51,24 +194,16 @@ export class ViewCheckerInboxComponent {
|
||||
displayJSONData = false;
|
||||
|
||||
/**
|
||||
* These entities' pending edits are gated by our own m_savings_product_temp lock, not the native
|
||||
* command-source pipeline. Approving/rejecting them here would replay the original command handler
|
||||
* directly via /makercheckers/{id}?command=approve and never clear our temp table's lock. Action them
|
||||
* from Approvals -> Pending Product Edits instead.
|
||||
* A product edit staged in m_saving_product_temp is not approvable here: /makercheckers/{id} replays
|
||||
* the original command handler and never clears the staging lock. Product Approval actions those
|
||||
* through the product's own approve/reject endpoint instead.
|
||||
*
|
||||
* Scoped to staged UPDATEs on purpose. Product CREATE and DELETE rows are ordinary command-source
|
||||
* entries with no staging row, and Product Approval opens this dialog to action them - so they must
|
||||
* keep their buttons.
|
||||
*/
|
||||
private readonly productEditEntities = [
|
||||
'SAVINGSPRODUCT',
|
||||
'CURRENTPRODUCT',
|
||||
'SHAREPRODUCT',
|
||||
'FIXEDDEPOSITPRODUCT',
|
||||
'RECURRINGDEPOSITPRODUCT'
|
||||
];
|
||||
|
||||
get isProductEditEntry(): boolean {
|
||||
return (
|
||||
this.productEditEntities.includes(this.checkerInboxDetail?.entityName) &&
|
||||
this.checkerInboxDetail?.actionName === 'UPDATE'
|
||||
);
|
||||
return isTempTableProductEdit(this.checkerInboxDetail?.entityName, this.checkerInboxDetail?.actionName);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -79,11 +214,58 @@ export class ViewCheckerInboxComponent {
|
||||
* @param {TasksService} tasksService Tasks Service.
|
||||
*/
|
||||
constructor() {
|
||||
// Route entry: detail is pre-fetched by the resolver and injected via route.data.
|
||||
this.route.data.subscribe((data: { checkerInboxDetail: any }) => {
|
||||
this.checkerInboxDetail = data.checkerInboxDetail;
|
||||
this.jsondata = JSON.parse(this.checkerInboxDetail.commandAsJson);
|
||||
this.displayJSONData = !_.isEmpty(this.jsondata);
|
||||
if (data.checkerInboxDetail) {
|
||||
this.applyDetail(data.checkerInboxDetail);
|
||||
}
|
||||
});
|
||||
|
||||
// Dialog entry: no resolver fires, so fetch the detail imperatively using the
|
||||
// checkerId the caller passed in MAT_DIALOG_DATA.
|
||||
if (this.dialogData?.checkerId != null && !this.checkerInboxDetail) {
|
||||
this.loading = true;
|
||||
this.tasksService.getCheckerInboxDetail(this.dialogData.checkerId).subscribe({
|
||||
next: (detail: any) => {
|
||||
this.loading = false;
|
||||
this.applyDetail(detail);
|
||||
},
|
||||
error: () => {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private applyDetail(detail: any): void {
|
||||
this.checkerInboxDetail = detail;
|
||||
// commandAsJson is absent on some entries (a DELETE carries no payload), and JSON.parse(undefined)
|
||||
// throws — which as a route only broke the page, but in a dialog would leave an empty shell open.
|
||||
try {
|
||||
this.jsondata = detail?.commandAsJson ? JSON.parse(detail.commandAsJson) : {};
|
||||
} catch {
|
||||
this.jsondata = {};
|
||||
}
|
||||
this.displayJSONData = !_.isEmpty(this.jsondata);
|
||||
this.commandFields = this.buildCommandFields(this.jsondata);
|
||||
}
|
||||
|
||||
/** "Done" for this screen — closes the popup (telling the list to refresh) when opened as a
|
||||
* dialog, or returns to the inbox route otherwise. */
|
||||
private finish(): void {
|
||||
if (this.dialogRef) {
|
||||
this.dialogRef.close({ refreshed: true });
|
||||
} else {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
}
|
||||
}
|
||||
|
||||
close(): void {
|
||||
if (this.dialogRef) {
|
||||
this.dialogRef.close();
|
||||
} else {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -99,7 +281,7 @@ export class ViewCheckerInboxComponent {
|
||||
approveCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'approve').subscribe((res: any) => {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
this.finish();
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -118,26 +300,7 @@ export class ViewCheckerInboxComponent {
|
||||
rejectCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'reject').subscribe((res: any) => {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete Checker
|
||||
*/
|
||||
deleteChecker() {
|
||||
const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: {
|
||||
heading: this.translateService.instant('labels.heading.Delete Checker'),
|
||||
dialogContext: this.translateService.instant('labels.dialogContext.Are you sure you want to delete checker')
|
||||
}
|
||||
});
|
||||
deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.tasksService.deleteMakerChecker(this.checkerInboxDetail.id).subscribe((res: any) => {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
this.finish();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user