Basic frontend implementation

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

@@ -30,6 +30,9 @@
                     <input type="checkbox" id="{{field.name}}" name="{{field.name}}" [checked]="value" value="" class="form-check-input ms-2 mt-0 pe-none">
                 </div>
             }
+            @case (CustomFieldDataType.Select) {
+                <span [ngbTooltip]="nameTooltip">{{getSelectValue(field, value)}}</span>
+            }
             @default {
               <span [ngbTooltip]="nameTooltip">{{value}}</span>
             }

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

@@ -12,6 +12,12 @@ const customFields: CustomField[] = [
   { id: 1, name: 'Field 1', data_type: CustomFieldDataType.String },
   { id: 2, name: 'Field 2', data_type: CustomFieldDataType.Monetary },
   { id: 3, name: 'Field 3', data_type: CustomFieldDataType.DocumentLink },
+  {
+    id: 4,
+    name: 'Field 4',
+    data_type: CustomFieldDataType.Select,
+    extra_data: ['Option 1', 'Option 2', 'Option 3'],
+  },
 ]
 const document: Document = {
   id: 1,
@@ -103,4 +109,8 @@ describe('CustomFieldDisplayComponent', () => {
     expect(component.currency).toEqual('EUR')
     expect(component.value).toEqual(100)
   })
+
+  it('should show select value', () => {
+    expect(component.getSelectValue(customFields[3], 2)).toEqual('Option 3')
+  })
 })

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

@@ -115,6 +115,10 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
     return this.docLinkDocuments?.find((d) => d.id === docId)?.title
   }
 
+  public getSelectValue(field: CustomField, value: number): string {
+    return field.extra_data[value]
+  }
+
   ngOnDestroy(): void {
     this.unsubscribeNotifier.next(true)
     this.unsubscribeNotifier.complete()

src-ui/src/app/components/common/input/select/select.component.spec.ts

@@ -132,4 +132,12 @@ describe('SelectComponent', () => {
     const expectedTitle = `Filter documents with this ${component.title}`
     expect(component.filterButtonTitle).toEqual(expectedTitle)
   })
+
+  it('should support setting items as a plain array', () => {
+    component.itemsArray = ['foo', 'bar']
+    expect(component.items).toEqual([
+      { id: 0, name: 'foo' },
+      { id: 1, name: 'bar' },
+    ])
+  })
 })

src-ui/src/app/components/common/input/select/select.component.ts

@@ -34,6 +34,11 @@ export class SelectComponent extends AbstractInputComponent<number> {
     if (items && this.value) this.checkForPrivateItems(this.value)
   }
 
+  @Input()
+  set itemsArray(items: any[]) {
+    this._items = items.map((item, index) => ({ id: index, name: item }))
+  }
+
   writeValue(newValue: any): void {
     if (newValue && this._items) {
       this.checkForPrivateItems(newValue)

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

@@ -186,6 +186,16 @@
                       [horizontal]="true"
                       [error]="getCustomFieldError(i)"></pngx-input-document-link>
                     }
+                    @case (CustomFieldDataType.Select) {
+                      <pngx-input-select formControlName="value"
+                      [title]="getCustomFieldFromInstance(fieldInstance)?.name"
+                      [itemsArray]="getCustomFieldFromInstance(fieldInstance)?.extra_data"
+                      [allowNull]="true"
+                      [horizontal]="true"
+                      [removable]="userIsOwner"
+                      (removed)="removeField(fieldInstance)"
+                      [error]="getCustomFieldError(i)"></pngx-input-select>
+                    }
                   }
                 </div>
               }