Basic display of custom fields

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -94,6 +94,14 @@
             <small i18n>Shared</small>
           </div>
         }
+        @for (field of document.custom_fields; track field.id) {
+          @if (displayFields.has(DocumentDisplayField.CUSTOM_FIELD + field.field)) {
+            <div class="ps-0 p-1">
+              <i-bs width="1em" height="1em" class="me-2 text-muted" name="info-circle"></i-bs>
+              <small>{{field.value}}</small>
+            </div>
+          }
+        }
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="btn-group w-100">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -39,7 +39,7 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
   document: Document
 
   @Input()
-  displayFields: Set<DocumentDisplayField>
+  displayFields: Set<DocumentDisplayField | string>
 
   @Output()
   dblClickDocument = new EventEmitter()

src-ui/src/app/components/document-list/document-list.component.html

@@ -234,7 +234,7 @@
             i18n>Created</th>
           }
           @if (activeDisplayFields.has(DocumentDisplayField.ADDED)) {
-            <th class="d-none d-xl-table-cell"
+            <th
               pngxSortable="added"
               title="Sort by added date" i18n-title
               [currentSortField]="list.sortField"
@@ -242,6 +242,11 @@
               (sort)="onSort($event)"
             i18n>Added</th>
           }
+          @for (field of activeDisplayCustomFields; track field) {
+            <th>
+              {{getDisplayCustomFieldTitle(field)}}
+            </th>
+          }
         </thead>
         <tbody>
           @for (d of list.documents; track trackByDocumentId($index, d)) {
@@ -310,10 +315,15 @@
                 </td>
               }
               @if (activeDisplayFields.has(DocumentDisplayField.ADDED)) {
-                <td class="d-none d-xl-table-cell">
+                <td>
                   {{d.added | customDate}}
                 </td>
               }
+              @for (field of activeDisplayCustomFields; track field) {
+                <td>
+                  {{getCustomFieldValue(d, field)}}
+                </td>
+              }
             </tr>
           }
         </tbody>

src-ui/src/app/components/document-list/document-list.component.ts

@@ -72,8 +72,9 @@ export class DocumentListComponent
 
   @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>
 
-  displayMode: string = DisplayMode.SMALL_CARDS // largeCards, smallCards, details
+  displayMode: string = DisplayMode.SMALL_CARDS // largeCards, smallCards, table
-  activeDisplayFields: Set<string> = new Set([
+
+  _activeDisplayFields: Set<DocumentDisplayField | string> = new Set([
     DocumentDisplayField.TITLE,
     DocumentDisplayField.CORRESPONDENT,
     DocumentDisplayField.CREATED,
@@ -86,6 +87,26 @@ export class DocumentListComponent
     DocumentDisplayField.SHARED,
   ])
 
+  get activeDisplayFields(): Set<DocumentDisplayField | string> {
+    return this._activeDisplayFields
+  }
+
+  set activeDisplayFields(fields: Set<DocumentDisplayField | string>) {
+    this._activeDisplayFields = fields
+    this.updateDisplayCustomFields()
+  }
+  activeDisplayCustomFields: Set<string> = new Set()
+
+  public updateDisplayCustomFields() {
+    this.activeDisplayCustomFields = new Set(
+      Array.from(this.activeDisplayFields).filter(
+        (field) =>
+          typeof field === 'string' &&
+          field.startsWith(DocumentDisplayField.CUSTOM_FIELD)
+      )
+    )
+  }
+
   unmodifiedFilterRules: FilterRule[] = []
   private unmodifiedSavedView: SavedView
 
@@ -162,9 +183,21 @@ export class DocumentListComponent
     } else {
       this.activeDisplayFields.add(field)
     }
+    this.updateDisplayCustomFields()
     this.saveDisplayFields()
   }
 
+  public getDisplayCustomFieldTitle(field: string) {
+    return this.settingsService.allDocumentDisplayFields.find(
+      (f) => f.id === field
+    )?.name
+  }
+
+  public getCustomFieldValue(document: Document, field: string) {
+    const fieldId = parseInt(field.split('_')[2])
+    return document.custom_fields.find((f) => f.field === fieldId)?.value
+  }
+
   ngOnInit(): void {
     if (localStorage.getItem('document-list:displayMode') != null) {
       this.displayMode = localStorage.getItem('document-list:displayMode')