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

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>

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

@@ -1,25 +1,34 @@
 @if (field) {
-    @switch (field.data_type) {
+    @if (value?.toString().length > 0) {
-        @case (CustomFieldDataType.Monetary) {
+        <ng-template #nameTooltip>
-            <span>{{value | currency: currency}}</span>
+            <div class="d-flex flex-column text-light">
-        }
+                {{field.name}}
-        @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>
-                }
             </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 {
+    } @else if (showNameIfEmpty) {
-          <span>{{value}}</span>
+        <span class="fst-italic text-muted" i18n>{{field.name}}</span>
-        }
     }
 }

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
 

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>
                 }

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>
           }
         }