Enhancement: show name on cards if custom field empty, add tooltip (#6620)

This commit is contained in:
shamoon 2024-05-07 11:09:15 -07:00 committed by GitHub
parent 076b5b1af5
commit ce08400f4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 39 additions and 23 deletions

View File

@ -497,6 +497,10 @@
<context context-type="sourcefile">src/app/components/admin/config/config.component.html</context>
<context context-type="linenumber">14,15</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/custom-field-display/custom-field-display.component.html</context>
<context context-type="linenumber">32</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/input/drag-drop-select/drag-drop-select.component.html</context>
<context context-type="linenumber">12</context>
@ -2977,7 +2981,7 @@
<source>View</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/custom-field-display/custom-field-display.component.html</context>
<context context-type="linenumber">15</context>
<context context-type="linenumber">21</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/input/permissions/permissions-form/permissions-form.component.html</context>

View File

@ -1,25 +1,34 @@
@if (field) {
@switch (field.data_type) {
@case (CustomFieldDataType.Monetary) {
<span>{{value | currency: currency}}</span>
}
@case (CustomFieldDataType.Date) {
<span>{{value | customDate}}</span>
}
@case (CustomFieldDataType.Url) {
<a [href]="value" class="btn-link text-dark text-decoration-none" target="_blank">{{value}}</a>
}
@case (CustomFieldDataType.DocumentLink) {
<div class="d-flex gap-1 flex-wrap">
@for (docId of value; track docId) {
<a routerLink="/documents/{{docId}}" class="badge bg-dark 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>
}
@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-dark 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>
}
@default {
<span [ngbTooltip]="nameTooltip">{{value}}</span>
}
}
@default {
<span>{{value}}</span>
}
} @else if (showNameIfEmpty) {
<span class="fst-italic text-muted" i18n>{{field.name}}</span>
}
}

View File

@ -41,6 +41,9 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
this.fieldId = parseInt(key.replace(DisplayField.CUSTOM_FIELD, ''), 10)
}
@Input()
showNameIfEmpty: boolean = false
value: any
currency: string

View File

@ -132,7 +132,7 @@
<div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
<i-bs width=".9em" height=".9em" class="me-2 text-muted" name="ui-radios"></i-bs>
<small>
<pngx-custom-field-display [document]="document" [fieldId]="field.field"></pngx-custom-field-display>
<pngx-custom-field-display [document]="document" [fieldId]="field.field" showNameIfEmpty="true"></pngx-custom-field-display>
</small>
</div>
}

View File

@ -110,7 +110,7 @@
@if (displayFields.includes(DisplayField.CUSTOM_FIELD + field.field)) {
<div class="ps-0 p-1 d-flex align-items-center overflow-hidden">
<i-bs width="1em" height="1em" class="me-2 text-muted" name="ui-radios"></i-bs>
<small><pngx-custom-field-display [document]="document" [fieldId]="field.field"></pngx-custom-field-display></small>
<small><pngx-custom-field-display [document]="document" [fieldId]="field.field" showNameIfEmpty="true"></pngx-custom-field-display></small>
</div>
}
}