From 6f62da077a6c605a556533113a740775b8aa4f39 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Fri, 20 Oct 2023 23:51:14 -0700 Subject: [PATCH] Saving work, basic frontend getting & display --- .../components/common/input/abstract-input.ts | 3 + .../common/input/date/date.component.html | 52 +++++----- .../common/input/number/number.component.html | 23 +++-- .../common/input/select/select.component.html | 86 +++++++++-------- .../common/input/tags/tags.component.html | 94 ++++++++++--------- .../common/input/tags/tags.component.ts | 3 + .../common/input/text/text.component.html | 16 +++- .../document-detail.component.html | 30 +++--- .../document-detail.component.ts | 39 +++++++- src-ui/src/app/data/paperless-custom-field.ts | 16 ++++ .../services/rest/custom-fields.service.ts | 40 ++++++++ 11 files changed, 263 insertions(+), 139 deletions(-) create mode 100644 src-ui/src/app/data/paperless-custom-field.ts create mode 100644 src-ui/src/app/services/rest/custom-fields.service.ts diff --git a/src-ui/src/app/components/common/input/abstract-input.ts b/src-ui/src/app/components/common/input/abstract-input.ts index 113945749..9bd35cdad 100644 --- a/src-ui/src/app/components/common/input/abstract-input.ts +++ b/src-ui/src/app/components/common/input/abstract-input.ts @@ -41,6 +41,9 @@ export class AbstractInputComponent implements OnInit, ControlValueAccessor { @Input() error: string + @Input() + horizontal: boolean = false + value: T ngOnInit(): void { diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html index 947e832ae..14e802bf6 100644 --- a/src-ui/src/app/components/common/input/date/date.component.html +++ b/src-ui/src/app/components/common/input/date/date.component.html @@ -1,26 +1,32 @@
- -
- - - +
+
+ +
+
+
+ + + +
+
Invalid date.
+ {{hint}} + + Suggestions:  + + {{s}}  + + +
-
Invalid date.
- {{hint}} - - Suggestions:  - - {{s}}  - -
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 1e1f1237c..ab9ab609b 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,12 +1,17 @@
- -
- - +
+
+ +
+
+
+ + +
+
+ {{error}} +
+ {{hint}} +
-
- {{error}} -
- {{hint}} -
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html index 1f6f2b338..6808ec9c3 100644 --- a/src-ui/src/app/components/common/input/select/select.component.html +++ b/src-ui/src/app/components/common/input/select/select.component.html @@ -1,44 +1,48 @@
- -
- - - - +
+
+
- {{hint}} - - Suggestions:  - - {{s.name}}  - - - - +
+
+ + + + +
+ {{hint}} + + Suggestions:  + + {{s.name}}  + + +
+
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html index 7d96a1026..1924821f3 100644 --- a/src-ui/src/app/components/common/input/tags/tags.component.html +++ b/src-ui/src/app/components/common/input/tags/tags.component.html @@ -1,51 +1,53 @@
- +
+
+ +
+
+
+ -
- - - - - - + + + + + + + + + +
+ +
+ + + - + + +
+ {{hint}} + + Suggestions:  + + {{tag.name}}  + + +
- {{hint}} - - Suggestions:  - - {{tag.name}}  - - - - -
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts index 64d6eddc3..c1bde5e8f 100644 --- a/src-ui/src/app/components/common/input/tags/tags.component.ts +++ b/src-ui/src/app/components/common/input/tags/tags.component.ts @@ -77,6 +77,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor { @Input() showFilter: boolean = false + @Input() + horizontal: boolean = false + @Output() filterDocuments = new EventEmitter() diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html index 92925efc3..a863e0103 100644 --- a/src-ui/src/app/components/common/input/text/text.component.html +++ b/src-ui/src/app/components/common/input/text/text.component.html @@ -1,8 +1,14 @@
- - - -
- {{error}} +
+
+ +
+
+ + +
+ {{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 f1031484a..5b6f22309 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 @@ -81,19 +81,23 @@
  • Details - - - - - - - - - +
    + + + + + + + + + + + +
    • 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 d992b0191..f73bc0f4f 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,7 +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 { ShareLinksDropdownComponent } from '../common/share-links-dropdown/share-links-dropdown.component' +import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' +import { + PaperlessCustomField, + PaperlessCustomFieldDataType, +} from 'src/app/data/paperless-custom-field' enum DocumentDetailNavIDs { Details = 1, @@ -135,6 +139,9 @@ export class DocumentDetailComponent ogDate: Date + public readonly PaperlessCustomFieldDataType = PaperlessCustomFieldDataType + customFields: PaperlessCustomField[] + @ViewChild('nav') nav: NgbNav @ViewChild('pdfPreview') set pdfPreview(element) { // this gets called when compontent added or removed from DOM @@ -166,7 +173,8 @@ export class DocumentDetailComponent private storagePathService: StoragePathService, private permissionsService: PermissionsService, private userService: UserService, - private http: HttpClient + private http: HttpClient, + private customFieldsService: CustomFieldsService ) { super() } @@ -385,6 +393,28 @@ export class DocumentDetailComponent updateComponent(doc: PaperlessDocument) { this.document = doc this.requiresPassword = false + this.customFieldsService + .getFields(doc.id) + .pipe(first()) + .subscribe({ + next: (fields) => { + this.customFields = fields + this.customFields.forEach((field) => { + this.documentForm.addControl( + `custom-field-${field.id}`, + new FormControl(field.data) + ) + }) + this.store.next(this.documentForm.value) + console.log(fields) + }, + error: (error) => { + this.toastService.showError( + $localize`Error retrieving custom fields`, + error + ) + }, + }) this.documentsService .getMetadata(doc.id) .pipe(first()) @@ -511,6 +541,11 @@ export class DocumentDetailComponent } this.title = doc.title this.documentForm.patchValue(doc) + this.customFields.forEach((field) => { + this.documentForm + .get(`custom-field-${field.id}`) + .patchValue(field.data) + }) this.openDocumentService.setDirty(doc, false) }, error: () => { diff --git a/src-ui/src/app/data/paperless-custom-field.ts b/src-ui/src/app/data/paperless-custom-field.ts new file mode 100644 index 000000000..7b220bc41 --- /dev/null +++ b/src-ui/src/app/data/paperless-custom-field.ts @@ -0,0 +1,16 @@ +import { ObjectWithId } from './object-with-id' + +export enum PaperlessCustomFieldDataType { + String = 'string', + Url = 'url', + Date = 'date', +} + +export interface PaperlessCustomField extends ObjectWithId { + type: PaperlessCustomFieldDataType + name: string + data: any + document: number // PaperlessDocument + created?: Date + user: number // PaperlessUser +} diff --git a/src-ui/src/app/services/rest/custom-fields.service.ts b/src-ui/src/app/services/rest/custom-fields.service.ts new file mode 100644 index 000000000..b5e9abe0a --- /dev/null +++ b/src-ui/src/app/services/rest/custom-fields.service.ts @@ -0,0 +1,40 @@ +import { Injectable } from '@angular/core' +import { HttpClient, HttpParams } from '@angular/common/http' +import { AbstractPaperlessService } from './abstract-paperless-service' +import { Observable } from 'rxjs' +import { PaperlessCustomField } from 'src/app/data/paperless-custom-field' + +@Injectable({ + providedIn: 'root', +}) +export class CustomFieldsService extends AbstractPaperlessService { + constructor(http: HttpClient) { + super(http, 'documents') + } + + getFields(documentId: number): Observable { + return this.http.get( + this.getResourceUrl(documentId, 'custom_metadata') + ) + } + + addField( + documentId: number, + field: PaperlessCustomField + ): Observable { + return this.http.post( + this.getResourceUrl(documentId, 'custom_metadata'), + field + ) + } + + // deleteField( + // documentId: number, + // fieldId: number + // ): Observable { + // return this.http.delete( + // this.getResourceUrl(documentId, 'custom_metadata'), + // { params: new HttpParams({ fromString: `id=${fieldId}` }) } + // ) + // } +}