CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

WEB-442-feat: implement LightGallery document preview across all document tabs (#2847)

Browse Source 
* 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
2025-12-03 05:18:02 -06:00
committed by GitHub
parent 83f3a0b0fe
commit 9432ad3b96
32 changed files with 1031 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/clients-view/identities-tab/identities-tab.component.html
+42 -16
View File
@@ -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>