Frontend UI for creating select fields, alter extra_data format

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

@@ -16,7 +16,9 @@ const customFields: CustomField[] = [
     id: 4,
     name: 'Field 4',
     data_type: CustomFieldDataType.Select,
-    extra_data: ['Option 1', 'Option 2', 'Option 3'],
+    extra_data: {
+      select_options: ['Option 1', 'Option 2', 'Option 3'],
+    },
   },
 ]
 const document: Document = {

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

@@ -115,8 +115,8 @@ 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]
+  public getSelectValue(field: CustomField, index: number): string {
+    return field.extra_data.select_options[index]
   }
 
   ngOnDestroy(): void {

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

@@ -13,6 +13,23 @@
     @if (typeFieldDisabled) {
       <small class="d-block mt-n2" i18n>Data type cannot be changed after a field is created</small>
     }
+    <div [formGroup]="objectForm.controls.extra_data">
+      @switch (objectForm.get('data_type').value) {
+        @case (CustomFieldDataType.Select) {
+          <button type="button" class="btn btn-sm btn-primary mb-2" (click)="addSelectOption()">
+            <span i18n>Add option</span>&nbsp;<i class="bi bi-plus"></i>
+          </button>
+          <div formArrayName="select_options">
+            @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
+              <div class="input-group input-group-sm my-2">
+                <input type="text" class="form-control" [formControl]="option" autocomplete="off">
+                <button type="button" class="btn btn-outline-danger" (click)="removeSelectOption(i)" i18n>Delete</button>
+              </div>
+            }
+          </div>
+        }
+      }
+      </div>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>

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

@@ -63,4 +63,25 @@ describe('CustomFieldEditDialogComponent', () => {
     component.ngOnInit()
     expect(component.objectForm.get('data_type').disabled).toBeTruthy()
   })
+
+  it('should support add / remove select options', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    fixture.detectChanges()
+    component.ngOnInit()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(0)
+    component.addSelectOption()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(1)
+    component.addSelectOption()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(2)
+    component.removeSelectOption(0)
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(1)
+  })
 })

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

@@ -1,7 +1,11 @@
 import { Component, OnInit } from '@angular/core'
-import { FormGroup, FormControl } from '@angular/forms'
+import { FormGroup, FormControl, FormArray } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { DATA_TYPE_LABELS, CustomField } from 'src/app/data/custom-field'
+import {
+  DATA_TYPE_LABELS,
+  CustomField,
+  CustomFieldDataType,
+} from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -16,6 +20,13 @@ export class CustomFieldEditDialogComponent
   extends EditDialogComponent<CustomField>
   implements OnInit
 {
+  CustomFieldDataType = CustomFieldDataType
+
+  private get selectOptions(): FormArray {
+    return (this.objectForm.controls.extra_data as FormGroup).controls
+      .select_options as FormArray
+  }
+
   constructor(
     service: CustomFieldsService,
     activeModal: NgbActiveModal,
@@ -44,6 +55,9 @@ export class CustomFieldEditDialogComponent
     return new FormGroup({
       name: new FormControl(null),
       data_type: new FormControl(null),
+      extra_data: new FormGroup({
+        select_options: new FormArray([]),
+      }),
     })
   }
 
@@ -54,4 +68,12 @@ export class CustomFieldEditDialogComponent
   get typeFieldDisabled(): boolean {
     return this.dialogMode === EditDialogMode.EDIT
   }
+
+  public addSelectOption() {
+    this.selectOptions.push(new FormControl(''))
+  }
+
+  public removeSelectOption(index: number) {
+    this.selectOptions.removeAt(index)
+  }
 }

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

@@ -189,7 +189,7 @@
                     @case (CustomFieldDataType.Select) {
                       <pngx-input-select formControlName="value"
                       [title]="getCustomFieldFromInstance(fieldInstance)?.name"
-                      [itemsArray]="getCustomFieldFromInstance(fieldInstance)?.extra_data"
+                      [itemsArray]="getCustomFieldFromInstance(fieldInstance)?.extra_data.select_options"
                       [allowNull]="true"
                       [horizontal]="true"
                       [removable]="userIsOwner"