88 lines
3.2 KiB
HTML
88 lines
3.2 KiB
HTML
<!--
|
|
Copyright since 2025 Mifos Initiative
|
|
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
-->
|
|
|
|
<div class="tab-container mat-typography">
|
|
<div class="layout-row align-start-center">
|
|
<h3 class="flex-90">{{ 'labels.heading.Documents' | translate }}</h3>
|
|
|
|
<div class="flex-10" *mifosxHasPermission="'CREATE_DOCUMENT'">
|
|
<button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()">
|
|
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if (entityDocuments?.length) {
|
|
<div>
|
|
<div class="document-grid">
|
|
@for (document of entityDocuments; track trackByDocumentId($index, document)) {
|
|
<div class="document-card">
|
|
<div
|
|
class="thumb"
|
|
[class.clickable]="isPreviewable(document)"
|
|
role="button"
|
|
tabindex="0"
|
|
[attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
|
|
(keydown.enter)="isPreviewable(document) && openPreview(document)"
|
|
(keydown.space)="isPreviewable(document) && openPreview(document)"
|
|
(click)="isPreviewable(document) && openPreview(document)"
|
|
>
|
|
@if (previewThumbnails[document.id]) {
|
|
<img
|
|
[src]="previewThumbnails[document.id]"
|
|
[alt]="document.name"
|
|
[title]="document.name"
|
|
loading="lazy"
|
|
/>
|
|
} @else {
|
|
<div class="placeholder">
|
|
<fa-icon icon="file"></fa-icon>
|
|
<span>{{ document.fileName || document.name }}</span>
|
|
</div>
|
|
}
|
|
@if (isPreviewable(document)) {
|
|
<div class="preview-overlay">
|
|
<fa-icon icon="eye"></fa-icon>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="title">{{ document.name }}</div>
|
|
@if (document.fileName) {
|
|
<div class="meta">{{ document.fileName }}</div>
|
|
}
|
|
@if (document.description) {
|
|
<div class="description">{{ document.description }}</div>
|
|
}
|
|
<div class="actions">
|
|
<button
|
|
mat-icon-button
|
|
color="warn"
|
|
(click)="deleteDocument(document.id, document.name)"
|
|
title="Delete"
|
|
[attr.aria-label]="'labels.buttons.Delete' | translate"
|
|
*mifosxHasPermission="'DELETE_DOCUMENT'"
|
|
>
|
|
<fa-icon icon="times"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="empty-state">
|
|
<p>{{ 'labels.text.NoDocuments' | translate }}</p>
|
|
<p class="muted">{{ 'labels.text.UploadDocumentHint' | translate }}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div #lightboxRoot class="document-lightbox-host"></div>
|