From 149b1538acc67d0f883d15ab3122ffcff3211f1c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 17 Apr 2024 23:46:57 -0700
Subject: [PATCH] Basic display of custom fields

---
 .../document-card-small.component.html        |  8 ++++
 .../document-card-small.component.ts          |  2 +-
 .../document-list.component.html              | 14 ++++++-
 .../document-list/document-list.component.ts  | 37 ++++++++++++++++++-
 4 files changed, 56 insertions(+), 5 deletions(-)

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 8333e3f30..2df502884 100644
--- 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
@@ -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">
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index 3d9c3b610..148639d69 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/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()
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index f9ec9cd53..fed33ed60 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 2ccfa4e5e..e80a930a5 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/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
-  activeDisplayFields: Set<string> = new Set([
+  displayMode: string = DisplayMode.SMALL_CARDS // largeCards, smallCards, table
+
+  _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')