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

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 84fd0fd84729a98f004ad5aa1702604257aad704..3432faa57f99a106518927e9b0c0538d35ceaa6b 100644 (file)
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -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>

diff --git a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
index 61946db0244a646ffcdd525a15c02e27d7f50fe2..161f2e1fcabc748975af23a432371455df6e7988 100644 (file)
--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
+++ b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.html
@@ -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>
     }
 }

diff --git a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts
index f53c7c8fd05e8b1367bd7d58186366f3f1a45d8b..0477b32c37bf7db9305d781a5ef92b2f6f2c2cd1 100644 (file)
--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts
+++ b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts
@@ -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
 

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 3981ea7e5ec34545126b806c511aeed8027b4fb7..e1a82a7eac7825c288f8fb3a738fb504fd2a945c 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -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>
                 }

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index a3e6b2847ce8f1ccf078c810046b36e3b638ba59..5d565ddf2a6ab7ed58cae32d7079d143fceab2aa 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -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>
           }
         }