cat-documents-ng 0.2.48 → 0.2.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cat-documents-ng.mjs +95 -36
- package/fesm2022/cat-documents-ng.mjs.map +1 -1
- package/lib/document/components/document-container/document-container.component.d.ts +8 -0
- package/lib/document/services/document-menu.service.d.ts +7 -7
- package/lib/document/services/document.service.d.ts +5 -0
- package/package.json +1 -1
|
@@ -1843,6 +1843,7 @@ class DocumentHelperService {
|
|
|
1843
1843
|
documentStore;
|
|
1844
1844
|
documentQuery;
|
|
1845
1845
|
documentHttpService;
|
|
1846
|
+
selectionWatcherSubscription = null;
|
|
1846
1847
|
constructor(documentStore, documentQuery, documentHttpService) {
|
|
1847
1848
|
this.documentStore = documentStore;
|
|
1848
1849
|
this.documentQuery = documentQuery;
|
|
@@ -1855,7 +1856,9 @@ class DocumentHelperService {
|
|
|
1855
1856
|
* @param contextId - The context ID to use for API calls
|
|
1856
1857
|
*/
|
|
1857
1858
|
initializeSelectionWatcher(contextId) {
|
|
1858
|
-
|
|
1859
|
+
// Clean up any existing subscription
|
|
1860
|
+
this.cleanupSelectionWatcher();
|
|
1861
|
+
this.selectionWatcherSubscription = combineLatest([
|
|
1859
1862
|
this.documentQuery.selectSelectedMenuItem(),
|
|
1860
1863
|
this.documentQuery.selectSelectedUserId(),
|
|
1861
1864
|
this.documentQuery.selectSelectedStatus(),
|
|
@@ -1880,6 +1883,8 @@ class DocumentHelperService {
|
|
|
1880
1883
|
* @param contextId - The context ID to use for API calls
|
|
1881
1884
|
*/
|
|
1882
1885
|
initializeSelectionWatcherWithInitialLoad(contextId) {
|
|
1886
|
+
// Clean up any existing subscription
|
|
1887
|
+
this.cleanupSelectionWatcher();
|
|
1883
1888
|
// Make initial API call to load documents
|
|
1884
1889
|
this.documentHttpService.getDocumentsBySelection(contextId, null, null, null, null).subscribe({
|
|
1885
1890
|
next: (response) => {
|
|
@@ -1892,6 +1897,15 @@ class DocumentHelperService {
|
|
|
1892
1897
|
// Initialize the selection watcher for future updates
|
|
1893
1898
|
this.initializeSelectionWatcher(contextId);
|
|
1894
1899
|
}
|
|
1900
|
+
/**
|
|
1901
|
+
* Clean up the selection watcher subscription
|
|
1902
|
+
*/
|
|
1903
|
+
cleanupSelectionWatcher() {
|
|
1904
|
+
if (this.selectionWatcherSubscription) {
|
|
1905
|
+
this.selectionWatcherSubscription.unsubscribe();
|
|
1906
|
+
this.selectionWatcherSubscription = null;
|
|
1907
|
+
}
|
|
1908
|
+
}
|
|
1895
1909
|
/**
|
|
1896
1910
|
* Set the document data
|
|
1897
1911
|
* @param document the document data
|
|
@@ -2285,7 +2299,7 @@ class UserListComponent {
|
|
|
2285
2299
|
}
|
|
2286
2300
|
}
|
|
2287
2301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentHelperService }, { token: DocumentStore }, { token: DocumentQuery }, { token: UserListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2288
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n <div class=\"user-cards\">\r\n <div \r\n *ngFor=\"let user of filteredUserData\" \r\n class=\"user-card\"\r\n [class.selected]=\"selectedUser === user.name\"\r\n [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n (click)=\"onUserSelect(user.name, user._id)\"\r\n >\r\n @if(user.name === \"Application Docs\"){\r\n <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n </div>\r\n }@else {\r\n <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n <span class=\"initials\">{{ user.initials }}</span>\r\n </div>\r\n }\r\n <div class=\"user-info\">\r\n <div class=\"username\">{{ user.name }}</div>\r\n <div class=\"document-counts\">\r\n {{ user.approved }} approved / {{ user.pending }} pending\r\n </div>\r\n </div>\r\n <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n <i class=\"ri-check-line\"></i>\r\n </div>\r\n </div>\r\n \r\n <!-- Show message when filtered list is empty -->\r\n <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n <p>No users available for this category.</p>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:330px;position:relative}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem}.document-counts{font-size:.875rem;color:#6b7280}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
2289
2303
|
trigger('slideInFromTop', [
|
|
2290
2304
|
state('void', style({
|
|
2291
2305
|
opacity: 0,
|
|
@@ -2343,7 +2357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2343
2357
|
animate('200ms ease-in-out')
|
|
2344
2358
|
])
|
|
2345
2359
|
])
|
|
2346
|
-
], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n <div class=\"user-cards\">\r\n <div \r\n *ngFor=\"let user of filteredUserData\" \r\n class=\"user-card\"\r\n [class.selected]=\"selectedUser === user.name\"\r\n [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n (click)=\"onUserSelect(user.name, user._id)\"\r\n >\r\n <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n <span class=\"initials\">{{ user.initials }}</span>\r\n
|
|
2360
|
+
], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n <div class=\"user-cards\">\r\n <div \r\n *ngFor=\"let user of filteredUserData\" \r\n class=\"user-card\"\r\n [class.selected]=\"selectedUser === user.name\"\r\n [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n (click)=\"onUserSelect(user.name, user._id)\"\r\n >\r\n @if(user.name === \"Application Docs\"){\r\n <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n </div>\r\n }@else {\r\n <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n <span class=\"initials\">{{ user.initials }}</span>\r\n </div>\r\n }\r\n <div class=\"user-info\">\r\n <div class=\"username\">{{ user.name }}</div>\r\n <div class=\"document-counts\">\r\n {{ user.approved }} approved / {{ user.pending }} pending\r\n </div>\r\n </div>\r\n <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n <i class=\"ri-check-line\"></i>\r\n </div>\r\n </div>\r\n \r\n <!-- Show message when filtered list is empty -->\r\n <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n <p>No users available for this category.</p>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:330px;position:relative}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem}.document-counts{font-size:.875rem;color:#6b7280}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"] }]
|
|
2347
2361
|
}], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentStore }, { type: DocumentQuery }, { type: UserListService }], propDecorators: { userList: [{
|
|
2348
2362
|
type: Input
|
|
2349
2363
|
}], categories: [{
|
|
@@ -4322,11 +4336,11 @@ class DocumentViewerComponent {
|
|
|
4322
4336
|
this.subscription.unsubscribe();
|
|
4323
4337
|
}
|
|
4324
4338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3$1.MessageService }, { token: DocumentViewerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList", contextId: "contextId" }, outputs: { documentStatusUpdated: "documentStatusUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n <div class=\"col-12\">\r\n <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n <div class=\"p-fluid p-formgrid grid m-0\">\r\n <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n @if(selectedDocument){\r\n <div id=\"outerContainer col-12 md:col-9\">\r\n <div\r\n *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n class=\"img-container\"\r\n >\r\n <img\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n class=\"uploadedImages\"\r\n alt=\"Document Image\"\r\n />\r\n </div>\r\n @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n <div class=\"pdf-container\">\r\n <pdf-viewer\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n [rotation]=\"0\"\r\n [original-size]=\"false\"\r\n [show-all]=\"true\"\r\n [fit-to-page]=\"false\"\r\n [zoom]=\"1\"\r\n [zoom-scale]=\"'page-width'\"\r\n [stick-to-page]=\"false\"\r\n [render-text]=\"true\"\r\n [external-link-target]=\"'blank'\"\r\n [autoresize]=\"true\"\r\n [show-borders]=\"false\"\r\n style=\"width: 50vw; height: 75vh\"\r\n ></pdf-viewer>\r\n </div>\r\n }@else{\r\n <div class=\"incorrect-docType\">\r\n ContentType is incorrect.\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"left-part col-12 md:col-3 pt-0\">\r\n @if(!selectedDocument?.isUploaded){\r\n <document-actions\r\n [documentId]=\"selectedDocument?._id\"\r\n [currentStatus]=\"currentState.documentStatus\"\r\n [isLoading]=\"currentState.isActionLoading\"\r\n [isUploaded]=\"currentState.documentIsUploaded\"\r\n [statusId]=\"selectedDocument?.statusId\"\r\n (actionPerformed)=\"handleDocumentAction($event)\">\r\n </document-actions>\r\n }\r\n <!-- <div class=\"alerts mb-4 pb-1\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"\r\n (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n alertData?.isAlert === false\r\n \"\r\n class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n >\r\n <i\r\n class=\"pi pi-verified mr-2 cursor-pointer\"\r\n [ngStyle]=\"{\r\n color:\r\n alertData?.status === 'Pending' &&\r\n alertData?.isAlert !== false\r\n ? '#FFFFFF'\r\n : '#8A8EA6'\r\n }\"\r\n style=\"font-size: 20px\"\r\n ></i>\r\n <span class=\"font-semibold text-white\">Verified</span>\r\n </button>\r\n <div\r\n class=\"card mb-0\"\r\n [ngClass]=\"\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? 'alert-card'\r\n : 'success-alert'\r\n \"\r\n >\r\n <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n <i\r\n class=\"pi pi-exclamation-triangle\"\r\n style=\"font-size: 20px\"\r\n [ngStyle]=\"{\r\n color:\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? '#FB392D'\r\n : '#8A8EA6'\r\n }\"\r\n ></i>\r\n </div>\r\n <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n </div>\r\n </div>\r\n -->\r\n <document-history \r\n [historyData]=\"currentState.documentHistory\" \r\n [showHistory]=\"currentState.showDocumentHistory\">\r\n </document-history>\r\n \r\n <ng-content></ng-content>\r\n <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i7$2.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }, { kind: "component", type: DocumentActionsComponent, selector: "document-actions", inputs: ["documentId", "currentStatus", "isLoading", "isUploaded", "statusId"], outputs: ["actionPerformed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
4339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList", contextId: "contextId" }, outputs: { documentStatusUpdated: "documentStatusUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n <div class=\"col-12\">\r\n <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n <div class=\"p-fluid p-formgrid grid m-0\">\r\n <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n @if(selectedDocument){\r\n <div id=\"outerContainer col-12 md:col-9\">\r\n <div\r\n *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n class=\"img-container\"\r\n >\r\n <img\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n class=\"uploadedImages\"\r\n \r\n alt=\"Document Image\"\r\n />\r\n </div>\r\n @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n <div class=\"pdf-container\">\r\n <pdf-viewer\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n [rotation]=\"0\"\r\n [original-size]=\"false\"\r\n [show-all]=\"true\"\r\n [fit-to-page]=\"false\"\r\n [zoom]=\"1\"\r\n [zoom-scale]=\"'page-width'\"\r\n [stick-to-page]=\"false\"\r\n [render-text]=\"true\"\r\n [external-link-target]=\"'blank'\"\r\n [autoresize]=\"true\"\r\n [show-borders]=\"false\"\r\n style=\"width: 50vw; height: 75vh\"\r\n ></pdf-viewer>\r\n </div>\r\n }@else{\r\n <div class=\"incorrect-docType\">\r\n ContentType is incorrect.\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"left-part col-12 md:col-3 pt-0\">\r\n @if(!selectedDocument?.isUploaded){\r\n <document-actions\r\n [documentId]=\"selectedDocument?._id\"\r\n [currentStatus]=\"currentState.documentStatus\"\r\n [isLoading]=\"currentState.isActionLoading\"\r\n [isUploaded]=\"currentState.documentIsUploaded\"\r\n [statusId]=\"selectedDocument?.statusId\"\r\n (actionPerformed)=\"handleDocumentAction($event)\">\r\n </document-actions>\r\n }\r\n <!-- <div class=\"alerts mb-4 pb-1\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"\r\n (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n alertData?.isAlert === false\r\n \"\r\n class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n >\r\n <i\r\n class=\"pi pi-verified mr-2 cursor-pointer\"\r\n [ngStyle]=\"{\r\n color:\r\n alertData?.status === 'Pending' &&\r\n alertData?.isAlert !== false\r\n ? '#FFFFFF'\r\n : '#8A8EA6'\r\n }\"\r\n style=\"font-size: 20px\"\r\n ></i>\r\n <span class=\"font-semibold text-white\">Verified</span>\r\n </button>\r\n <div\r\n class=\"card mb-0\"\r\n [ngClass]=\"\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? 'alert-card'\r\n : 'success-alert'\r\n \"\r\n >\r\n <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n <i\r\n class=\"pi pi-exclamation-triangle\"\r\n style=\"font-size: 20px\"\r\n [ngStyle]=\"{\r\n color:\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? '#FB392D'\r\n : '#8A8EA6'\r\n }\"\r\n ></i>\r\n </div>\r\n <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n </div>\r\n </div>\r\n -->\r\n <document-history \r\n [historyData]=\"currentState.documentHistory\" \r\n [showHistory]=\"currentState.showDocumentHistory\">\r\n </document-history>\r\n \r\n <ng-content></ng-content>\r\n <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i7$2.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }, { kind: "component", type: DocumentActionsComponent, selector: "document-actions", inputs: ["documentId", "currentStatus", "isLoading", "isUploaded", "statusId"], outputs: ["actionPerformed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
4326
4340
|
}
|
|
4327
4341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, decorators: [{
|
|
4328
4342
|
type: Component,
|
|
4329
|
-
args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n <div class=\"col-12\">\r\n <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n <div class=\"p-fluid p-formgrid grid m-0\">\r\n <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n @if(selectedDocument){\r\n <div id=\"outerContainer col-12 md:col-9\">\r\n <div\r\n *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n class=\"img-container\"\r\n >\r\n <img\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n class=\"uploadedImages\"\r\n alt=\"Document Image\"\r\n />\r\n </div>\r\n @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n <div class=\"pdf-container\">\r\n <pdf-viewer\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n [rotation]=\"0\"\r\n [original-size]=\"false\"\r\n [show-all]=\"true\"\r\n [fit-to-page]=\"false\"\r\n [zoom]=\"1\"\r\n [zoom-scale]=\"'page-width'\"\r\n [stick-to-page]=\"false\"\r\n [render-text]=\"true\"\r\n [external-link-target]=\"'blank'\"\r\n [autoresize]=\"true\"\r\n [show-borders]=\"false\"\r\n style=\"width: 50vw; height: 75vh\"\r\n ></pdf-viewer>\r\n </div>\r\n }@else{\r\n <div class=\"incorrect-docType\">\r\n ContentType is incorrect.\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"left-part col-12 md:col-3 pt-0\">\r\n @if(!selectedDocument?.isUploaded){\r\n <document-actions\r\n [documentId]=\"selectedDocument?._id\"\r\n [currentStatus]=\"currentState.documentStatus\"\r\n [isLoading]=\"currentState.isActionLoading\"\r\n [isUploaded]=\"currentState.documentIsUploaded\"\r\n [statusId]=\"selectedDocument?.statusId\"\r\n (actionPerformed)=\"handleDocumentAction($event)\">\r\n </document-actions>\r\n }\r\n <!-- <div class=\"alerts mb-4 pb-1\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"\r\n (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n alertData?.isAlert === false\r\n \"\r\n class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n >\r\n <i\r\n class=\"pi pi-verified mr-2 cursor-pointer\"\r\n [ngStyle]=\"{\r\n color:\r\n alertData?.status === 'Pending' &&\r\n alertData?.isAlert !== false\r\n ? '#FFFFFF'\r\n : '#8A8EA6'\r\n }\"\r\n style=\"font-size: 20px\"\r\n ></i>\r\n <span class=\"font-semibold text-white\">Verified</span>\r\n </button>\r\n <div\r\n class=\"card mb-0\"\r\n [ngClass]=\"\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? 'alert-card'\r\n : 'success-alert'\r\n \"\r\n >\r\n <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n <i\r\n class=\"pi pi-exclamation-triangle\"\r\n style=\"font-size: 20px\"\r\n [ngStyle]=\"{\r\n color:\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? '#FB392D'\r\n : '#8A8EA6'\r\n }\"\r\n ></i>\r\n </div>\r\n <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n </div>\r\n </div>\r\n -->\r\n <document-history \r\n [historyData]=\"currentState.documentHistory\" \r\n [showHistory]=\"currentState.showDocumentHistory\">\r\n </document-history>\r\n \r\n <ng-content></ng-content>\r\n <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
|
|
4343
|
+
args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n <div class=\"col-12\">\r\n <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n <div class=\"p-fluid p-formgrid grid m-0\">\r\n <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n @if(selectedDocument){\r\n <div id=\"outerContainer col-12 md:col-9\">\r\n <div\r\n *ngIf=\"isImage(selectedDocument?.contentType)\"\r\n class=\"img-container\"\r\n >\r\n <img\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n class=\"uploadedImages\"\r\n \r\n alt=\"Document Image\"\r\n />\r\n </div>\r\n @if(selectedDocument?.contentType && selectedDocument?.contentType === \"application/pdf\"){\r\n <div class=\"pdf-container\">\r\n <pdf-viewer\r\n [src]=\"selectedDocument?.documentUrl || ''\"\r\n [rotation]=\"0\"\r\n [original-size]=\"false\"\r\n [show-all]=\"true\"\r\n [fit-to-page]=\"false\"\r\n [zoom]=\"1\"\r\n [zoom-scale]=\"'page-width'\"\r\n [stick-to-page]=\"false\"\r\n [render-text]=\"true\"\r\n [external-link-target]=\"'blank'\"\r\n [autoresize]=\"true\"\r\n [show-borders]=\"false\"\r\n style=\"width: 50vw; height: 75vh\"\r\n ></pdf-viewer>\r\n </div>\r\n }@else{\r\n <div class=\"incorrect-docType\">\r\n ContentType is incorrect.\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"left-part col-12 md:col-3 pt-0\">\r\n @if(!selectedDocument?.isUploaded){\r\n <document-actions\r\n [documentId]=\"selectedDocument?._id\"\r\n [currentStatus]=\"currentState.documentStatus\"\r\n [isLoading]=\"currentState.isActionLoading\"\r\n [isUploaded]=\"currentState.documentIsUploaded\"\r\n [statusId]=\"selectedDocument?.statusId\"\r\n (actionPerformed)=\"handleDocumentAction($event)\">\r\n </document-actions>\r\n }\r\n <!-- <div class=\"alerts mb-4 pb-1\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"\r\n (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n alertData?.isAlert === false\r\n \"\r\n class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n >\r\n <i\r\n class=\"pi pi-verified mr-2 cursor-pointer\"\r\n [ngStyle]=\"{\r\n color:\r\n alertData?.status === 'Pending' &&\r\n alertData?.isAlert !== false\r\n ? '#FFFFFF'\r\n : '#8A8EA6'\r\n }\"\r\n style=\"font-size: 20px\"\r\n ></i>\r\n <span class=\"font-semibold text-white\">Verified</span>\r\n </button>\r\n <div\r\n class=\"card mb-0\"\r\n [ngClass]=\"\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? 'alert-card'\r\n : 'success-alert'\r\n \"\r\n >\r\n <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n <i\r\n class=\"pi pi-exclamation-triangle\"\r\n style=\"font-size: 20px\"\r\n [ngStyle]=\"{\r\n color:\r\n (alertData?.status === 'Pending' || !alertData?.status) &&\r\n alertData?.isAlert !== false\r\n ? '#FB392D'\r\n : '#8A8EA6'\r\n }\"\r\n ></i>\r\n </div>\r\n <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n </div>\r\n </div>\r\n -->\r\n <document-history \r\n [historyData]=\"currentState.documentHistory\" \r\n [showHistory]=\"currentState.showDocumentHistory\">\r\n </document-history>\r\n \r\n <ng-content></ng-content>\r\n <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
|
|
4330
4344
|
}], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3$1.MessageService }, { type: DocumentViewerService }], propDecorators: { selectedDocument: [{
|
|
4331
4345
|
type: Input
|
|
4332
4346
|
}], documentList: [{
|
|
@@ -4644,25 +4658,15 @@ class DocumentMenuService {
|
|
|
4644
4658
|
const rejected = status.Rejected || status.rejected || 0;
|
|
4645
4659
|
return pending + reviewing + accepted + rejected;
|
|
4646
4660
|
}
|
|
4647
|
-
/**
|
|
4648
|
-
* Calculates completed documents for a menu item
|
|
4649
|
-
* @param item - The menu item
|
|
4650
|
-
* @returns Number of completed documents
|
|
4651
|
-
*/
|
|
4652
|
-
getCompletedDocuments(item) {
|
|
4653
|
-
const status = item.status;
|
|
4654
|
-
// Handle both uppercase and lowercase keys, with approved mapping to Accepted
|
|
4655
|
-
return status.Accepted || status.approved || 0;
|
|
4656
|
-
}
|
|
4657
4661
|
/**
|
|
4658
4662
|
* Gets badge value for a menu item
|
|
4659
4663
|
* @param item - The menu item
|
|
4660
|
-
* @returns Badge value string (e.g., "
|
|
4664
|
+
* @returns Badge value string (e.g., "2/3")
|
|
4661
4665
|
*/
|
|
4662
4666
|
getBadgeValue(item) {
|
|
4663
|
-
const
|
|
4667
|
+
const approved = this.getApprovedDocuments(item);
|
|
4664
4668
|
const total = this.getTotalDocuments(item);
|
|
4665
|
-
return `${
|
|
4669
|
+
return `${approved}/${total}`;
|
|
4666
4670
|
}
|
|
4667
4671
|
/**
|
|
4668
4672
|
* Gets badge severity based on status
|
|
@@ -4670,15 +4674,20 @@ class DocumentMenuService {
|
|
|
4670
4674
|
* @returns Badge severity for PrimeNG
|
|
4671
4675
|
*/
|
|
4672
4676
|
getBadgeSeverity(item) {
|
|
4673
|
-
const
|
|
4677
|
+
const status = item.status;
|
|
4674
4678
|
const total = this.getTotalDocuments(item);
|
|
4679
|
+
const approved = this.getApprovedDocuments(item);
|
|
4680
|
+
const rejected = status.Rejected || status.rejected || 0;
|
|
4675
4681
|
if (total === 0)
|
|
4676
4682
|
return 'info';
|
|
4677
|
-
|
|
4683
|
+
// If any docs are rejected, show red
|
|
4684
|
+
if (rejected > 0)
|
|
4685
|
+
return 'danger';
|
|
4686
|
+
// If all docs are approved, show green
|
|
4687
|
+
if (approved === total && total > 0)
|
|
4678
4688
|
return 'success';
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
return 'danger';
|
|
4689
|
+
// Otherwise show amber
|
|
4690
|
+
return 'warning';
|
|
4682
4691
|
}
|
|
4683
4692
|
/**
|
|
4684
4693
|
* Checks if badge should be shown for a menu item
|
|
@@ -4688,6 +4697,16 @@ class DocumentMenuService {
|
|
|
4688
4697
|
shouldShowBadge(item) {
|
|
4689
4698
|
return this.getTotalDocuments(item) > 0;
|
|
4690
4699
|
}
|
|
4700
|
+
/**
|
|
4701
|
+
* Calculates approved documents for a menu item
|
|
4702
|
+
* @param item - The menu item
|
|
4703
|
+
* @returns Number of approved documents
|
|
4704
|
+
*/
|
|
4705
|
+
getApprovedDocuments(item) {
|
|
4706
|
+
const status = item.status;
|
|
4707
|
+
// Handle both uppercase and lowercase keys, with approved mapping to Accepted
|
|
4708
|
+
return status.Accepted || status.approved || 0;
|
|
4709
|
+
}
|
|
4691
4710
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentMenuService, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4692
4711
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentMenuService, providedIn: 'root' });
|
|
4693
4712
|
}
|
|
@@ -4772,7 +4791,7 @@ class DocumentsMenuComponent {
|
|
|
4772
4791
|
category.items.forEach(item => {
|
|
4773
4792
|
const menuData = {
|
|
4774
4793
|
totalDocuments: this.documentMenuService.getTotalDocuments(item),
|
|
4775
|
-
|
|
4794
|
+
approvedDocuments: this.documentMenuService.getApprovedDocuments(item),
|
|
4776
4795
|
badgeValue: this.documentMenuService.getBadgeValue(item),
|
|
4777
4796
|
badgeSeverity: this.documentMenuService.getBadgeSeverity(item),
|
|
4778
4797
|
shouldShowBadge: this.documentMenuService.shouldShowBadge(item)
|
|
@@ -4834,11 +4853,11 @@ class DocumentsMenuComponent {
|
|
|
4834
4853
|
return this.selectedMenuItemId;
|
|
4835
4854
|
}
|
|
4836
4855
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentMenuService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4837
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\
|
|
4856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\n <p-card class=\"widget-menu-wrapper h-full\">\n @if(applicationNumber){\n <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\n <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\n <div class=\"expand-icon-wrapper\">\n <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\n </div>\n </div>\n }\n\n <div class=\"widget-menu-container\" >\n <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\n <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\n <ng-template pTemplate=\"submenuheader\" let-item>\n <span [style]=\"{\n color : '#9EA0B3'\n }\">{{ item.label }}</span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <a pRipple \n class=\"flex align-items-center p-menuitem-link\"\n [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\n (click)=\"onMenuItemClick($event, item)\">\n <span [class]=\"item.icon\" class=\"text-xl\"></span>\n <span class=\"ml-2\">{{ item.label }}</span>\n <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \n class=\"ml-auto\" \n [severity]=\"item.menuData?.badgeSeverity\" \n [value]=\"item.menuData?.badgeValue\" />\n </a>\n </ng-template>\n </p-menu>\n </div>\n </div>\n </p-card>\n</div>\n\n ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
|
|
4838
4857
|
}
|
|
4839
4858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
|
|
4840
4859
|
type: Component,
|
|
4841
|
-
args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\
|
|
4860
|
+
args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\n <p-card class=\"widget-menu-wrapper h-full\">\n @if(applicationNumber){\n <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\n <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\n <div class=\"expand-icon-wrapper\">\n <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\n </div>\n </div>\n }\n\n <div class=\"widget-menu-container\" >\n <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\n <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\n <ng-template pTemplate=\"submenuheader\" let-item>\n <span [style]=\"{\n color : '#9EA0B3'\n }\">{{ item.label }}</span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <a pRipple \n class=\"flex align-items-center p-menuitem-link\"\n [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\n (click)=\"onMenuItemClick($event, item)\">\n <span [class]=\"item.icon\" class=\"text-xl\"></span>\n <span class=\"ml-2\">{{ item.label }}</span>\n <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \n class=\"ml-auto\" \n [severity]=\"item.menuData?.badgeSeverity\" \n [value]=\"item.menuData?.badgeValue\" />\n </a>\n </ng-template>\n </p-menu>\n </div>\n </div>\n </p-card>\n</div>\n\n ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}\n"] }]
|
|
4842
4861
|
}], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentMenuService }, { type: DocumentHelperService }], propDecorators: { catagories: [{
|
|
4843
4862
|
type: Input
|
|
4844
4863
|
}], applicationNumber: [{
|
|
@@ -4907,8 +4926,8 @@ class DocumentContainerComponent {
|
|
|
4907
4926
|
*/
|
|
4908
4927
|
ngOnChanges(changes) {
|
|
4909
4928
|
if (changes[SHARED.CONTEXT_ID] && !changes[SHARED.CONTEXT_ID].firstChange) {
|
|
4910
|
-
// When contextId changes,
|
|
4911
|
-
this.
|
|
4929
|
+
// When contextId changes, clear all state and refetch data for the new context
|
|
4930
|
+
this.handleContextIdChange();
|
|
4912
4931
|
}
|
|
4913
4932
|
}
|
|
4914
4933
|
/**
|
|
@@ -4916,7 +4935,12 @@ class DocumentContainerComponent {
|
|
|
4916
4935
|
* @returns {void}
|
|
4917
4936
|
*/
|
|
4918
4937
|
ngOnInit() {
|
|
4919
|
-
|
|
4938
|
+
// Always start with a clean state to avoid showing old data
|
|
4939
|
+
this.clearAllState();
|
|
4940
|
+
// Only initialize data if we have a valid contextId
|
|
4941
|
+
if (this.contextId && this.contextId !== SHARED.EMPTY) {
|
|
4942
|
+
this.initializeData();
|
|
4943
|
+
}
|
|
4920
4944
|
}
|
|
4921
4945
|
/**
|
|
4922
4946
|
* Initialize all data with proper sequencing to avoid duplicate API calls
|
|
@@ -4928,6 +4952,44 @@ class DocumentContainerComponent {
|
|
|
4928
4952
|
this.setupFilteredDocumentSubscription();
|
|
4929
4953
|
this.documentHelperService.initializeSelectionWatcherWithInitialLoad(this.contextId);
|
|
4930
4954
|
}
|
|
4955
|
+
/**
|
|
4956
|
+
* Clears all state (store and component) comprehensively
|
|
4957
|
+
*/
|
|
4958
|
+
clearAllState() {
|
|
4959
|
+
// Clear all store state - be more comprehensive
|
|
4960
|
+
this.documentStore.clearSelectionState();
|
|
4961
|
+
this.documentStore.clearDocumentViewerState();
|
|
4962
|
+
this.documentStore.setDocumentListResponse(null);
|
|
4963
|
+
this.documentStore.setDocumentList([]); // Clear document list
|
|
4964
|
+
this.documentStore.setDocumentCategories([]);
|
|
4965
|
+
this.documentStore.setUserList([]);
|
|
4966
|
+
this.documentStore.setStatusData([]);
|
|
4967
|
+
this.documentStore.setCurrentDocument(null); // Clear current document
|
|
4968
|
+
this.documentStore.setFolders([]); // Clear folders
|
|
4969
|
+
this.documentStore.setDocumentAlert(null); // Clear document alert
|
|
4970
|
+
// Clear component state
|
|
4971
|
+
this.catagories = SHARED.EMPTY_ARRAY;
|
|
4972
|
+
this.userList = SHARED.EMPTY_ARRAY;
|
|
4973
|
+
this.statusData = [];
|
|
4974
|
+
this.documentListResponse = null;
|
|
4975
|
+
this.applicationNumber = SHARED.EMPTY;
|
|
4976
|
+
}
|
|
4977
|
+
/**
|
|
4978
|
+
* Handles contextId change by clearing all state and refetching data
|
|
4979
|
+
*/
|
|
4980
|
+
handleContextIdChange() {
|
|
4981
|
+
if (this.contextId && this.contextId !== SHARED.EMPTY) {
|
|
4982
|
+
// Clear all subscriptions to prevent stale data
|
|
4983
|
+
this.subscription.unsubscribe();
|
|
4984
|
+
this.subscription = new Subscription();
|
|
4985
|
+
// Clean up the selection watcher subscription
|
|
4986
|
+
this.documentHelperService.cleanupSelectionWatcher();
|
|
4987
|
+
// Clear all state
|
|
4988
|
+
this.clearAllState();
|
|
4989
|
+
// Reinitialize data for new context
|
|
4990
|
+
this.initializeData();
|
|
4991
|
+
}
|
|
4992
|
+
}
|
|
4931
4993
|
/**
|
|
4932
4994
|
* Sets up subscriptions to monitor menu item and user selection changes
|
|
4933
4995
|
* to trigger status data fetching and user list refreshing
|
|
@@ -5047,13 +5109,10 @@ class DocumentContainerComponent {
|
|
|
5047
5109
|
if (this.subscription) {
|
|
5048
5110
|
this.subscription.unsubscribe();
|
|
5049
5111
|
}
|
|
5050
|
-
|
|
5051
|
-
this.
|
|
5052
|
-
|
|
5053
|
-
this.
|
|
5054
|
-
this.statusData = SHARED.EMPTY_ARRAY;
|
|
5055
|
-
this.documentListResponse = null;
|
|
5056
|
-
this.applicationNumber = SHARED.EMPTY;
|
|
5112
|
+
// Clean up the selection watcher subscription
|
|
5113
|
+
this.documentHelperService.cleanupSelectionWatcher();
|
|
5114
|
+
// Clear all state comprehensively
|
|
5115
|
+
this.clearAllState();
|
|
5057
5116
|
}
|
|
5058
5117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentStore }, { token: DocumentService }, { token: DocumentQuery }, { token: DocumentHttpService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5059
5118
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 h-full flex\">\r\n <div class=\"col-12 md:col-3 lg:col-3\">\r\n <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n </div>\r\n <div class=\"col-12 md:col-9 lg:col-9 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n <div>\r\n <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\" [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n </div>\r\n <div >\r\n <lib-document-list [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n <ng-content></ng-content>\r\n </lib-document-list>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "documentList"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"] }] });
|