From 44728aa04820fabe1355038e32425ea5b5b919fd Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:30:03 -0700
Subject: [PATCH] Working frontend custom field editing

---
 .../custom-fields-dropdown.component.spec.ts  |  2 +-
 .../custom-fields-dropdown.component.ts       |  6 ++---
 .../common/input/number/number.component.html |  4 +--
 .../document-detail.component.html            |  8 +++---
 .../document-detail.component.ts              | 27 +++++++++++++------
 .../data/paperless-custom-field-instance.ts   |  4 ++-
 src-ui/src/app/data/paperless-document.ts     |  4 +--
 7 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
index 2eacd8847..c5edfaf68 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
@@ -92,7 +92,7 @@ describe('CustomFieldsDropdownComponent', () => {
       CustomFieldsDropdownComponent.prototype as any,
       'updateUnusedFields'
     )
-    component.existingFields = [fields[1]]
+    component.existingFields = [{ field: fields[1] } as any]
     component.onOpenClose()
     expect(updateSpy).toHaveBeenCalled()
     expect(component.unusedFields).toEqual([fields[0]])
diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
index 385b9c2e6..cd804bc15 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
@@ -4,11 +4,11 @@ import {
   Input,
   OnDestroy,
   Output,
-  SimpleChanges,
 } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
 import { PaperlessCustomField } from 'src/app/data/paperless-custom-field'
+import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
@@ -26,7 +26,7 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
   disabled: boolean = false
 
   @Input()
-  existingFields: PaperlessCustomField[] = []
+  existingFields: PaperlessCustomFieldInstance[] = []
 
   @Output()
   added = new EventEmitter()
@@ -69,7 +69,7 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
 
   private updateUnusedFields() {
     this.unusedFields = this.customFields.filter(
-      (f) => !this.existingFields.find((e) => e.id === f.id)
+      (f) => !this.existingFields.find((e) => e.field.id === f.id)
     )
   }
 
diff --git a/src-ui/src/app/components/common/input/number/number.component.html b/src-ui/src/app/components/common/input/number/number.component.html
index ab9ab609b..55980f6c7 100644
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@@ -1,7 +1,7 @@
 <div class="mb-3">
   <div class="row">
-    <div [class.col-md-3]="horizontal">
-      <label class="form-label" [for]="inputId">{{title}}</label>
+    <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
+      <label class="form-label mb-md-0" [for]="inputId">{{title}}</label>
     </div>
     <div [class.col-md-9]="horizontal">
       <div class="input-group" [class.is-invalid]="error">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 10a06627c..2e2c932cf 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -100,11 +100,11 @@
                             <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
                                 (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
                             <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
-                            <ng-container *ngFor="let field of customFields; let i = index">
+                            <ng-container *ngFor="let fieldInstance of customFields; let i = index">
                                 <div [formGroup]="customFieldFormFields.controls[i]">
-                                    <pngx-input-text formControlName="value" *ngIf="field.data_type === PaperlessCustomFieldDataType.String" [title]="field.name" [horizontal]="true"></pngx-input-text>
-                                    <pngx-input-date formControlName="value" *ngIf="field.data_type === PaperlessCustomFieldDataType.Date" [title]="field.name" [horizontal]="true"></pngx-input-date>
-                                    <pngx-input-number formControlName="value" *ngIf="field.data_type === PaperlessCustomFieldDataType.Integer" [title]="field.name" [horizontal]="true" [showAdd]="false"></pngx-input-number>
+                                    <pngx-input-text formControlName="value" *ngIf="fieldInstance.field.data_type === PaperlessCustomFieldDataType.String" [title]="fieldInstance.field.name" [horizontal]="true"></pngx-input-text>
+                                    <pngx-input-date formControlName="value" *ngIf="fieldInstance.field.data_type === PaperlessCustomFieldDataType.Date" [title]="fieldInstance.field.name" [horizontal]="true"></pngx-input-date>
+                                    <pngx-input-number formControlName="value" *ngIf="fieldInstance.field.data_type === PaperlessCustomFieldDataType.Integer" [title]="fieldInstance.field.name" [horizontal]="true" [showAdd]="false"></pngx-input-number>
                                 </div>
                             </ng-container>
                         </div>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 6d0b3f4b7..f06e256d7 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -63,11 +63,11 @@ import { EditDialogMode } from '../common/edit-dialog/edit-dialog.component'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { FilterRule } from 'src/app/data/filter-rule'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import {
   PaperlessCustomField,
   PaperlessCustomFieldDataType,
 } from 'src/app/data/paperless-custom-field'
+import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -141,7 +141,7 @@ export class DocumentDetailComponent
   ogDate: Date
 
   public readonly PaperlessCustomFieldDataType = PaperlessCustomFieldDataType
-  customFields: PaperlessCustomField[] = []
+  customFields: PaperlessCustomFieldInstance[] = []
 
   @ViewChild('nav') nav: NgbNav
   @ViewChild('pdfPreview') set pdfPreview(element) {
@@ -394,6 +394,7 @@ export class DocumentDetailComponent
   updateComponent(doc: PaperlessDocument) {
     this.document = doc
     this.requiresPassword = false
+    this.customFields = doc.custom_fields
     this.updateFormForCustomFields()
     this.documentsService
       .getMetadata(doc.id)
@@ -449,12 +450,17 @@ export class DocumentDetailComponent
 
   updateFormForCustomFields() {
     this.customFieldFormFields.clear()
-    this.customFields.forEach((field) => {
+    this.customFields.forEach((fieldInstance) => {
       this.customFieldFormFields.push(
         new FormGroup({
-          parent: new FormControl(field.id),
-          value: new FormControl(null),
-        })
+          field: new FormGroup({
+            id: new FormControl(fieldInstance.field.id),
+            name: new FormControl(fieldInstance.field.name),
+            data_type: new FormControl(fieldInstance.field.data_type),
+          }),
+          value: new FormControl(fieldInstance.value),
+        }),
+        { emitEvent: false }
       )
     })
   }
@@ -537,7 +543,6 @@ export class DocumentDetailComponent
           }
           this.title = doc.title
           this.documentForm.patchValue(doc)
-          // TODO: custom field reset
           this.customFields = doc.custom_fields
           this.updateFormForCustomFields()
           this.openDocumentService.setDirty(doc, false)
@@ -562,6 +567,7 @@ export class DocumentDetailComponent
           close && this.close()
           this.networkActive = false
           this.error = null
+          this.openDocumentService.refreshDocument(this.documentId)
         },
         error: (error) => {
           this.networkActive = false
@@ -850,7 +856,12 @@ export class DocumentDetailComponent
   }
 
   addField(field: PaperlessCustomField) {
-    this.customFields.push(field)
+    this.customFields.push({
+      field,
+      value: null,
+      document: this.documentId,
+      created: new Date(),
+    })
     this.updateFormForCustomFields()
   }
 }
diff --git a/src-ui/src/app/data/paperless-custom-field-instance.ts b/src-ui/src/app/data/paperless-custom-field-instance.ts
index 0997ddd6b..d64321f6a 100644
--- a/src-ui/src/app/data/paperless-custom-field-instance.ts
+++ b/src-ui/src/app/data/paperless-custom-field-instance.ts
@@ -1,7 +1,9 @@
 import { ObjectWithId } from './object-with-id'
+import { PaperlessCustomField } from './paperless-custom-field'
 
 export interface PaperlessCustomFieldInstance extends ObjectWithId {
   document: number // PaperlessDocument
-  field: number // PaperlessCustomField
+  field: PaperlessCustomField
   created: Date
+  value?: any
 }
diff --git a/src-ui/src/app/data/paperless-document.ts b/src-ui/src/app/data/paperless-document.ts
index 1503e02bb..b00c478fc 100644
--- a/src-ui/src/app/data/paperless-document.ts
+++ b/src-ui/src/app/data/paperless-document.ts
@@ -5,7 +5,7 @@ import { Observable } from 'rxjs'
 import { PaperlessStoragePath } from './paperless-storage-path'
 import { ObjectWithPermissions } from './object-with-permissions'
 import { PaperlessDocumentNote } from './paperless-document-note'
-import { PaperlessCustomField } from './paperless-custom-field'
+import { PaperlessCustomFieldInstance } from './paperless-custom-field-instance'
 
 export interface SearchHit {
   score?: number
@@ -60,5 +60,5 @@ export interface PaperlessDocument extends ObjectWithPermissions {
 
   __search_hit__?: SearchHit
 
-  custom_fields?: PaperlessCustomField[]
+  custom_fields?: PaperlessCustomFieldInstance[]
 }