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
@@ -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