paperless-ngx/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html

41 lines
1.8 KiB
HTML

@if (field) {
@if (value?.toString().length > 0) {
<ng-template #nameTooltip>
<div class="d-flex flex-column text-light">
{{field.name}}
</div>
</ng-template>
@switch (field.data_type) {
@case (CustomFieldDataType.Monetary) {
<span [ngbTooltip]="nameTooltip">{{value | currency: currency}}</span>
}
@case (CustomFieldDataType.Date) {
<span [ngbTooltip]="nameTooltip">{{value | customDate}}</span>
}
@case (CustomFieldDataType.Url) {
<a [ngbTooltip]="nameTooltip" [href]="value" class="btn-link text-dark text-decoration-none" target="_blank">{{value}}</a>
}
@case (CustomFieldDataType.DocumentLink) {
<div [ngbTooltip]="nameTooltip" class="d-flex gap-1 flex-wrap">
@for (docId of value; track docId) {
<a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
<i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
</a>
}
</div>
}
@case (CustomFieldDataType.Boolean) {
<div class="d-flex flex-row align-items-center">
<span>{{field.name}}:</span>
<input type="checkbox" id="{{field.name}}" name="{{field.name}}" [checked]="value" value="" class="form-check-input ms-2 mt-0 pe-none">
</div>
}
@default {
<span [ngbTooltip]="nameTooltip">{{value}}</span>
}
}
} @else if (showNameIfEmpty) {
<span class="fst-italic text-muted">{{field.name}}</span>
}
}