WEB-442-feat: implement LightGallery document preview across all document tabs (#2847)
* feat: implement LightGallery document preview across all document tabs feat(documents): add LightGallery preview with accessibility and error handling * fix: add accessibility and performance improvements for document preview fix(styles): replace undefined variable with -river Delete button title translated
This commit is contained in:
Shubham Kumar
+55
-2
@@ -1,8 +1,56 @@
|
||||
<h1 mat-dialog-title>
|
||||
{{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
|
||||
<ng-container *ngIf="documentIdentifier; else defaultTitle">
|
||||
{{ 'labels.heading.Add Client Identifier' | translate }}
|
||||
</ng-container>
|
||||
<ng-template #defaultTitle>
|
||||
{{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
|
||||
</ng-template>
|
||||
</h1>
|
||||
<div class="m-l-10 m-r-10">
|
||||
<form [formGroup]="uploadDocumentForm" class="layout-column">
|
||||
<!-- Identity-specific fields -->
|
||||
<ng-container *ngIf="documentIdentifier">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Document Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="documentTypeId" required>
|
||||
<mat-option *ngFor="let docType of allowedDocumentTypes" [value]="docType.id">
|
||||
{{ docType.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="uploadDocumentForm.controls.documentTypeId?.hasError('required')">
|
||||
{{ 'labels.inputs.Document Type' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
|
||||
<mat-select formControlName="status" required>
|
||||
<mat-option *ngFor="let status of statusOptions" [value]="status.value">
|
||||
{{ status.label }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="uploadDocumentForm.controls.status?.hasError('required')">
|
||||
{{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Document Key' | translate }}</mat-label>
|
||||
<input formControlName="documentKey" required matInput />
|
||||
<mat-error *ngIf="uploadDocumentForm.controls.documentKey?.hasError('required')">
|
||||
{{ 'labels.inputs.Document Key' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<input formControlName="description" matInput />
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
|
||||
<input formControlName="fileName" required matInput />
|
||||
@@ -27,7 +75,12 @@
|
||||
[disabled]="!uploadDocumentForm.valid"
|
||||
[mat-dialog-close]="uploadDocumentForm.value"
|
||||
>
|
||||
{{ 'labels.buttons.Upload' | translate }}
|
||||
<ng-container *ngIf="documentIdentifier; else uploadLabel">
|
||||
{{ 'labels.buttons.Add' | translate }}
|
||||
</ng-container>
|
||||
<ng-template #uploadLabel>
|
||||
{{ 'labels.buttons.Upload' | translate }}
|
||||
</ng-template>
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
</form>
|
||||
|
||||
+40
-9
@@ -27,10 +27,14 @@ export class UploadDocumentDialogComponent implements OnInit {
|
||||
uploadDocumentForm: UntypedFormGroup;
|
||||
/** Upload Document Data */
|
||||
uploadDocumentData: any = [];
|
||||
/** Triggers description field */
|
||||
/** Triggers identity fields (documentType, status, documentKey) */
|
||||
documentIdentifier = false;
|
||||
/** Entity Type */
|
||||
entityType: string;
|
||||
/** Allowed Document Types for identifiers */
|
||||
allowedDocumentTypes: any[] = [];
|
||||
/** Status options for identifiers */
|
||||
statusOptions: any[] = [];
|
||||
|
||||
/**
|
||||
* @param {MatDialogRef} dialogRef Dialog reference element
|
||||
@@ -44,6 +48,8 @@ export class UploadDocumentDialogComponent implements OnInit {
|
||||
) {
|
||||
this.documentIdentifier = data.documentIdentifier;
|
||||
this.entityType = data.entityType;
|
||||
this.allowedDocumentTypes = data.allowedDocumentTypes || [];
|
||||
this.statusOptions = data.statusOptions || [];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -54,14 +60,39 @@ export class UploadDocumentDialogComponent implements OnInit {
|
||||
* Creates the upload Document form.
|
||||
*/
|
||||
createUploadDocumentForm() {
|
||||
this.uploadDocumentForm = this.formBuilder.group({
|
||||
fileName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
description: [''],
|
||||
file: ['']
|
||||
});
|
||||
if (this.documentIdentifier) {
|
||||
// Unified form for identity: identifier fields + document upload
|
||||
this.uploadDocumentForm = this.formBuilder.group({
|
||||
documentTypeId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
status: [
|
||||
'Active',
|
||||
Validators.required
|
||||
],
|
||||
documentKey: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
description: [''],
|
||||
fileName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
file: ['']
|
||||
});
|
||||
} else {
|
||||
// Standard document upload form
|
||||
this.uploadDocumentForm = this.formBuilder.group({
|
||||
fileName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
description: [''],
|
||||
file: ['']
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
[entityId]="entityId"
|
||||
[entityDocuments]="entityDocuments"
|
||||
[callbackUpload]="uploadDocument"
|
||||
[callbackDownload]="downloadDocument"
|
||||
[callbackDelete]="deleteDocument"
|
||||
>
|
||||
</mifosx-entity-documents-tab>
|
||||
|
||||
@@ -32,13 +32,6 @@ export class DocumentsTabComponent {
|
||||
this.entityId = this.route.parent.snapshot.paramMap.get('clientId');
|
||||
}
|
||||
|
||||
downloadDocument(documentId: string) {
|
||||
this.clientsService.downloadClientDocument(this.entityId, documentId).subscribe((res) => {
|
||||
const url = window.URL.createObjectURL(res);
|
||||
window.open(url);
|
||||
});
|
||||
}
|
||||
|
||||
deleteDocument(documentId: string) {
|
||||
this.clientsService.deleteClientDocument(this.entityId, documentId).subscribe((res) => {});
|
||||
}
|
||||
|
||||
@@ -37,14 +37,45 @@
|
||||
<ng-container matColumnDef="documents">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Identity Documents' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let identity">
|
||||
<div *ngFor="let document of identity.documents">
|
||||
{{ document.name }}
|
||||
<fa-icon
|
||||
icon="cloud-download-alt"
|
||||
(click)="download(document.parentEntityId, document.id)"
|
||||
*mifosxHasPermission="'READ_DOCUMENT'"
|
||||
></fa-icon>
|
||||
<div class="document-grid" *ngIf="identity.documents?.length; else noDocs">
|
||||
<div class="document-card" *ngFor="let document of identity.documents; trackBy: trackByDocumentId">
|
||||
<div
|
||||
class="thumb"
|
||||
[class.clickable]="isPreviewable(document)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
[attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
|
||||
(keydown.enter)="isPreviewable(document) && openDocumentPreview(identity, document)"
|
||||
(keydown.space)="isPreviewable(document) && openDocumentPreview(identity, document)"
|
||||
(click)="isPreviewable(document) && openDocumentPreview(identity, document)"
|
||||
>
|
||||
<ng-container *ngIf="previewThumbnails[document.id]; else placeholder">
|
||||
<img
|
||||
[src]="previewThumbnails[document.id]"
|
||||
[alt]="document.name"
|
||||
[title]="document.name"
|
||||
loading="lazy"
|
||||
/>
|
||||
</ng-container>
|
||||
<ng-template #placeholder>
|
||||
<div class="placeholder">
|
||||
<fa-icon icon="file"></fa-icon>
|
||||
<span>{{ document.fileName || document.name }}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="preview-overlay" *ngIf="isPreviewable(document)">
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="title">{{ document.name }}</div>
|
||||
<div class="meta" *ngIf="document.fileName">{{ document.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #noDocs>
|
||||
<span class="muted">{{ 'labels.text.NoDocuments' | translate }}</span>
|
||||
</ng-template>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
@@ -58,19 +89,12 @@
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let identity; let i = index">
|
||||
<button
|
||||
class="identity-action-button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="uploadDocument(i, identity.id)"
|
||||
*mifosxHasPermission="'CREATE_DOCUMENT'"
|
||||
>
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
class="identity-action-button"
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
[title]="'labels.buttons.Delete' | translate"
|
||||
[attr.aria-label]="'labels.buttons.Delete' | translate"
|
||||
(click)="deleteIdentifier(identity.clientId, identity.id, i)"
|
||||
*mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'"
|
||||
>
|
||||
@@ -83,3 +107,5 @@
|
||||
<tr mat-row *matRowDef="let row; columns: identitiesColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div #identityLightbox class="document-lightbox-host"></div>
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
@use '../../../../assets/styles/colours' as *;
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-container {
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
@@ -23,3 +19,117 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.document-card {
|
||||
width: 200px;
|
||||
background: $white;
|
||||
border: 1px solid $silver;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba($dark-grey, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba($dark-grey, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: relative;
|
||||
background: $clouds;
|
||||
min-height: 7.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: rgba($white, 0.9);
|
||||
border-radius: 50%;
|
||||
padding: 0.4rem;
|
||||
color: $peter-river;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
.thumb:hover &,
|
||||
.thumb:focus & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: $light-grey;
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
fa-icon {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-btn {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
background: rgba($black, 0.65);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.625rem 0.75rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
color: $dark-grey;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.75rem;
|
||||
color: $asbestos;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: $concrete;
|
||||
}
|
||||
|
||||
.document-lightbox-host {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/** Angular Imports */
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { Component, DestroyRef, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import {
|
||||
MatTable,
|
||||
@@ -15,21 +16,21 @@ import {
|
||||
} from '@angular/material/table';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
/** Custom Models */
|
||||
import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
|
||||
import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
|
||||
import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
|
||||
|
||||
/** Custom Components */
|
||||
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
|
||||
import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
|
||||
import { UploadDocumentDialogComponent } from '../custom-dialogs/upload-document-dialog/upload-document-dialog.component';
|
||||
|
||||
/** Custom Services */
|
||||
import lightGallery from 'lightgallery';
|
||||
import lgFullscreen from 'lightgallery/plugins/fullscreen';
|
||||
import lgThumbnail from 'lightgallery/plugins/thumbnail';
|
||||
import lgZoom from 'lightgallery/plugins/zoom';
|
||||
import type { LightGallery } from 'lightgallery/lightgallery';
|
||||
import type { GalleryItem } from 'lightgallery/lg-utils';
|
||||
import { DocumentPreviewService } from 'app/shared/services/document-preview.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ClientsService } from '../../clients.service';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { NgStyle, NgFor } from '@angular/common';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -43,7 +44,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
NgStyle,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
@@ -55,7 +55,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatRow
|
||||
]
|
||||
})
|
||||
export class IdentitiesTabComponent {
|
||||
export class IdentitiesTabComponent implements OnDestroy {
|
||||
private destroyRef = inject(DestroyRef);
|
||||
|
||||
/** Client Identities */
|
||||
clientIdentities: any;
|
||||
/** Client Identifier Template */
|
||||
@@ -75,110 +77,146 @@ export class IdentitiesTabComponent {
|
||||
|
||||
/** Identifiers Table */
|
||||
@ViewChild('identifiersTable', { static: true }) identifiersTable: MatTable<Element>;
|
||||
/** LightGallery host */
|
||||
@ViewChild('identityLightbox', { static: true }) identityLightbox: ElementRef<HTMLElement>;
|
||||
|
||||
/** Cached thumbnails for previewable docs */
|
||||
previewThumbnails: Record<string, string> = {};
|
||||
private lightboxInstance: LightGallery | null = null;
|
||||
private readonly lightboxPlugins = [
|
||||
lgZoom,
|
||||
lgThumbnail,
|
||||
lgFullscreen
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {ActivatedRoute} route Activated Route
|
||||
* @param {MatDialog} dialog Mat Dialog
|
||||
* @param {ClientsService} clientService Clients Service
|
||||
* @param {TranslateService} translateService Translate Service
|
||||
* @param {DocumentPreviewService} documentPreviewService Preview helper
|
||||
*/
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private dialog: MatDialog,
|
||||
private clientService: ClientsService,
|
||||
private translateService: TranslateService
|
||||
private translateService: TranslateService,
|
||||
private documentPreviewService: DocumentPreviewService
|
||||
) {
|
||||
this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
|
||||
this.route.data.subscribe((data: { clientIdentities: any; clientIdentifierTemplate: any }) => {
|
||||
this.clientIdentities = data.clientIdentities;
|
||||
this.clientIdentifierTemplate = data.clientIdentifierTemplate;
|
||||
});
|
||||
this.route.data
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((data: { clientIdentities: any; clientIdentifierTemplate: any }) => {
|
||||
this.clientIdentities = data.clientIdentities;
|
||||
this.clientIdentifierTemplate = data.clientIdentifierTemplate;
|
||||
this.prefetchThumbnails();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroyLightbox();
|
||||
if (Array.isArray(this.clientIdentities)) {
|
||||
this.clientIdentities.forEach((identity: any) => {
|
||||
identity.documents?.forEach((doc: any) => this.documentPreviewService.release(doc.id));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** TrackBy function for documents ngFor */
|
||||
trackByDocumentId(_: number, doc: any): any {
|
||||
return doc?.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Download Client Document
|
||||
* @param {string} parentEntityId Parent Entity Id
|
||||
* @param {string} documentId Document ID
|
||||
*/
|
||||
download(parentEntityId: string, documentId: string) {
|
||||
this.clientService.downloadClientIdentificationDocument(parentEntityId, documentId).subscribe((res) => {
|
||||
const url = window.URL.createObjectURL(res);
|
||||
window.open(url);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add Client Identifier
|
||||
* Add Client Identifier with unified form (identifier + document upload)
|
||||
*/
|
||||
addIdentifier() {
|
||||
for (let index = 0; index < this.clientIdentifierTemplate.allowedDocumentTypes.length; index++) {
|
||||
this.clientIdentifierTemplate.allowedDocumentTypes[index].name = this.translateService.instant(
|
||||
`labels.catalogs.${this.clientIdentifierTemplate.allowedDocumentTypes[index].name}`
|
||||
);
|
||||
}
|
||||
const formfields: FormfieldBase[] = [
|
||||
new SelectBase({
|
||||
controlName: 'documentTypeId',
|
||||
label: this.translateService.instant('labels.inputs.Document Type'),
|
||||
value: '',
|
||||
options: { label: 'name', value: 'id', data: this.clientIdentifierTemplate.allowedDocumentTypes },
|
||||
required: true,
|
||||
order: 1
|
||||
}),
|
||||
new SelectBase({
|
||||
controlName: 'status',
|
||||
label: this.translateService.instant('labels.inputs.Status'),
|
||||
value: '2',
|
||||
options: {
|
||||
label: 'label',
|
||||
value: 'value',
|
||||
data: [
|
||||
{ label: this.translateService.instant('labels.catalogs.Active'), value: 'Active' },
|
||||
{ label: this.translateService.instant('labels.catalogs.Inactive'), value: 'Inactive' }
|
||||
]
|
||||
},
|
||||
required: true,
|
||||
order: 2
|
||||
}),
|
||||
new InputBase({
|
||||
controlName: 'documentKey',
|
||||
label: this.translateService.instant('labels.inputs.Document Key'),
|
||||
value: '',
|
||||
type: 'text',
|
||||
required: true,
|
||||
order: 3
|
||||
}),
|
||||
new InputBase({
|
||||
controlName: 'description',
|
||||
label: this.translateService.instant('labels.inputs.Description'),
|
||||
value: '',
|
||||
type: 'text',
|
||||
order: 4
|
||||
})
|
||||
// Translate document type names
|
||||
const translatedDocTypes = this.clientIdentifierTemplate.allowedDocumentTypes.map((docType: any) => ({
|
||||
...docType,
|
||||
name: this.translateService.instant(`labels.catalogs.${docType.name}`)
|
||||
}));
|
||||
|
||||
const statusOptions = [
|
||||
{ label: this.translateService.instant('labels.catalogs.Active'), value: 'Active' },
|
||||
{ label: this.translateService.instant('labels.catalogs.Inactive'), value: 'Inactive' }
|
||||
];
|
||||
const data = {
|
||||
title: this.translateService.instant('labels.heading.Add Client Identifier'),
|
||||
formfields: formfields
|
||||
};
|
||||
const addIdentifierDialogRef = this.dialog.open(FormDialogComponent, { data });
|
||||
addIdentifierDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.data) {
|
||||
this.clientService.addClientIdentifier(this.clientId, response.data.value).subscribe((res: any) => {
|
||||
this.clientIdentities.push({
|
||||
id: res.resourceId,
|
||||
description: response.data.value.description,
|
||||
documentType: this.clientIdentifierTemplate.allowedDocumentTypes.filter(
|
||||
(doc: any) => doc.id === response.data.value.documentTypeId
|
||||
)[0],
|
||||
documentKey: response.data.value.documentKey,
|
||||
documents: [],
|
||||
clientId: this.clientId,
|
||||
status:
|
||||
response.data.value.status === 'Active'
|
||||
? 'clientIdentifierStatusType.active'
|
||||
: 'clientIdentifierStatusType.inactive'
|
||||
});
|
||||
this.identifiersTable.renderRows();
|
||||
|
||||
const dialogRef = this.dialog.open(UploadDocumentDialogComponent, {
|
||||
data: {
|
||||
documentIdentifier: true,
|
||||
allowedDocumentTypes: translatedDocTypes,
|
||||
statusOptions: statusOptions
|
||||
}
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response) {
|
||||
// Create identifier data
|
||||
const identifierData = {
|
||||
documentTypeId: response.documentTypeId,
|
||||
status: response.status,
|
||||
documentKey: response.documentKey,
|
||||
description: response.description
|
||||
};
|
||||
|
||||
// First create the identifier
|
||||
this.clientService.addClientIdentifier(this.clientId, identifierData).subscribe({
|
||||
next: (res: any) => {
|
||||
const newIdentifierId = res.resourceId;
|
||||
const selectedDocType = this.clientIdentifierTemplate.allowedDocumentTypes.find(
|
||||
(doc: any) => doc.id === response.documentTypeId
|
||||
);
|
||||
|
||||
// Create new identity entry
|
||||
const newIdentity: any = {
|
||||
id: newIdentifierId,
|
||||
description: response.description,
|
||||
documentType: selectedDocType,
|
||||
documentKey: response.documentKey,
|
||||
documents: [] as any[],
|
||||
clientId: this.clientId,
|
||||
status:
|
||||
response.status === 'Active'
|
||||
? 'clientIdentifierStatusType.active'
|
||||
: 'clientIdentifierStatusType.inactive'
|
||||
};
|
||||
|
||||
// If file was uploaded, attach document to the identifier
|
||||
if (response.file) {
|
||||
const formData: FormData = new FormData();
|
||||
formData.append('name', response.fileName);
|
||||
formData.append('file', response.file);
|
||||
this.clientService.uploadClientIdentifierDocument(newIdentifierId, formData).subscribe({
|
||||
next: (docRes: any) => {
|
||||
const newDoc = {
|
||||
id: docRes.resourceId,
|
||||
parentEntityType: 'client_identifiers',
|
||||
parentEntityId: newIdentifierId,
|
||||
name: response.fileName,
|
||||
fileName: response.file.name
|
||||
};
|
||||
newIdentity.documents.push(newDoc);
|
||||
this.clientIdentities.push(newIdentity);
|
||||
this.identifiersTable.renderRows();
|
||||
this.setThumbnail(newDoc);
|
||||
},
|
||||
error: (err: any) => {
|
||||
console.error('Failed to upload document', err);
|
||||
// Still add the identifier even if document upload fails
|
||||
this.clientIdentities.push(newIdentity);
|
||||
this.identifiersTable.renderRows();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// No file, just add the identifier
|
||||
this.clientIdentities.push(newIdentity);
|
||||
this.identifiersTable.renderRows();
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
console.error('Failed to create identifier', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -204,31 +242,104 @@ export class IdentitiesTabComponent {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload Document
|
||||
* @param {number} index Index
|
||||
* @param {string} identifierId Identifier Id
|
||||
*/
|
||||
uploadDocument(index: number, identifierId: string) {
|
||||
const uploadDocumentDialogRef = this.dialog.open(UploadDocumentDialogComponent, {
|
||||
data: { documentIdentifier: true }
|
||||
});
|
||||
uploadDocumentDialogRef.afterClosed().subscribe((dialogResponse: any) => {
|
||||
if (dialogResponse) {
|
||||
const formData: FormData = new FormData();
|
||||
formData.append('name', dialogResponse.fileName);
|
||||
formData.append('file', dialogResponse.file);
|
||||
this.clientService.uploadClientIdentifierDocument(identifierId, formData).subscribe((res: any) => {
|
||||
this.clientIdentities[index].documents.push({
|
||||
id: res.resourceId,
|
||||
parentEntityType: 'client_identifiers',
|
||||
parentEntityId: identifierId,
|
||||
name: dialogResponse.fileName,
|
||||
fileName: dialogResponse.file.name
|
||||
isPreviewable(document: any): boolean {
|
||||
return this.documentPreviewService.isPreviewable(document);
|
||||
}
|
||||
|
||||
async openDocumentPreview(identity: any, document: any): Promise<void> {
|
||||
if (!this.isPreviewable(document)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const previewableDocs = (identity.documents || []).filter((doc: any) => this.isPreviewable(doc));
|
||||
const items: GalleryItem[] = [];
|
||||
for (const doc of previewableDocs) {
|
||||
try {
|
||||
const preview = await this.documentPreviewService.resolvePreviewUrl(doc, () =>
|
||||
this.clientService.downloadClientIdentificationDocument(doc.parentEntityId || identity.id, doc.id)
|
||||
);
|
||||
if (preview.type === 'image') {
|
||||
this.previewThumbnails[doc.id] = preview.url;
|
||||
}
|
||||
items.push({
|
||||
src: preview.url,
|
||||
thumb: preview.type === 'image' ? preview.url : undefined,
|
||||
subHtml: this.buildSubHtml(doc, identity),
|
||||
iframe: preview.type === 'pdf'
|
||||
});
|
||||
this.identifiersTable.renderRows();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Preview failed for document', doc.id, error);
|
||||
}
|
||||
}
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
const startIndex = Math.max(
|
||||
0,
|
||||
previewableDocs.findIndex((doc: any) => doc.id === document.id)
|
||||
);
|
||||
this.destroyLightbox();
|
||||
this.lightboxInstance = lightGallery(this.identityLightbox.nativeElement, {
|
||||
dynamic: true,
|
||||
dynamicEl: items,
|
||||
plugins: this.lightboxPlugins,
|
||||
licenseKey: '0000-0000-000-0000',
|
||||
download: false,
|
||||
escKey: true,
|
||||
closable: true,
|
||||
zoomFromOrigin: true
|
||||
});
|
||||
this.lightboxInstance.openGallery(startIndex);
|
||||
} catch (error) {
|
||||
console.error('Unable to open preview', error);
|
||||
}
|
||||
}
|
||||
|
||||
private buildSubHtml(document: any, identity: any): string {
|
||||
const caption = document.description
|
||||
? `<p class="lg-caption-text">${this.escapeHtml(document.description)}</p>`
|
||||
: '';
|
||||
const identityLabel = identity?.documentKey
|
||||
? `<p class="lg-meta">${this.escapeHtml(identity.documentKey)}</p>`
|
||||
: '';
|
||||
return `<div class="lg-caption"><h4>${this.escapeHtml(document.name || 'Document')}</h4>${caption}${identityLabel}</div>`;
|
||||
}
|
||||
|
||||
private escapeHtml(value: string): string {
|
||||
return value
|
||||
? value.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"')
|
||||
: '';
|
||||
}
|
||||
|
||||
private destroyLightbox(): void {
|
||||
if (this.lightboxInstance) {
|
||||
this.lightboxInstance.destroy();
|
||||
this.lightboxInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
private setThumbnail(document: any): void {
|
||||
if (!this.documentPreviewService.isPreviewable(document)) {
|
||||
return;
|
||||
}
|
||||
this.documentPreviewService
|
||||
.resolvePreviewUrl(document, () =>
|
||||
this.clientService.downloadClientIdentificationDocument(document.parentEntityId || this.clientId, document.id)
|
||||
)
|
||||
.then((preview) => {
|
||||
if (preview.type === 'image') {
|
||||
this.previewThumbnails[document.id] = preview.url;
|
||||
}
|
||||
})
|
||||
.catch((): void => undefined);
|
||||
}
|
||||
|
||||
private prefetchThumbnails(): void {
|
||||
if (!Array.isArray(this.clientIdentities)) {
|
||||
return;
|
||||
}
|
||||
this.clientIdentities.forEach((identity: any) => {
|
||||
identity.documents?.forEach((doc: any) => this.setThumbnail(doc));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user