diff --git a/src-ui/src/app/app-routing.module.ts b/src-ui/src/app/app-routing.module.ts index f2888b596..b3952634c 100644 --- a/src-ui/src/app/app-routing.module.ts +++ b/src-ui/src/app/app-routing.module.ts @@ -24,6 +24,7 @@ import { import { ConsumptionTemplatesComponent } from './components/manage/consumption-templates/consumption-templates.component' import { MailComponent } from './components/manage/mail/mail.component' import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component' +import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component' export const routes: Routes = [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, @@ -189,6 +190,17 @@ export const routes: Routes = [ }, }, }, + { + path: 'customfields', + component: CustomFieldsComponent, + canActivate: [PermissionsGuard], + data: { + requiredPermission: { + action: PermissionAction.View, + type: PermissionType.CustomField, + }, + }, + }, { path: 'templates', component: ConsumptionTemplatesComponent, diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 0634ffd34..a46c6c772 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -101,6 +101,8 @@ import { MailComponent } from './components/manage/mail/mail.component' import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component' import { DragDropModule } from '@angular/cdk/drag-drop' import { FileDropComponent } from './components/file-drop/file-drop.component' +import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component' +import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' import localeAf from '@angular/common/locales/af' import localeAr from '@angular/common/locales/ar' @@ -246,6 +248,8 @@ function initializeApp(settings: SettingsService) { MailComponent, UsersAndGroupsComponent, FileDropComponent, + CustomFieldsComponent, + CustomFieldEditDialogComponent, ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index c496ee4e7..3acf61cc4 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -172,6 +172,13 @@  Storage paths +
  • + + + +  Custom Fields + +
  • diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html new file mode 100644 index 000000000..94dc3297f --- /dev/null +++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html @@ -0,0 +1,16 @@ +
    +
    + + +
    +
    + + + Data type cannot be changed after a field is created +
    +
    + + +
    + diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.scss b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts new file mode 100644 index 000000000..9570cfc58 --- /dev/null +++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts @@ -0,0 +1,67 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { CustomFieldEditDialogComponent } from './custom-field-edit-dialog.component' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { FormsModule, ReactiveFormsModule } from '@angular/forms' +import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap' +import { NgSelectModule } from '@ng-select/ng-select' +import { IfOwnerDirective } from 'src/app/directives/if-owner.directive' +import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' +import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe' +import { SettingsService } from 'src/app/services/settings.service' +import { SelectComponent } from '../../input/select/select.component' +import { TextComponent } from '../../input/text/text.component' +import { EditDialogMode } from '../edit-dialog.component' + +describe('CustomFieldEditDialogComponent', () => { + let component: CustomFieldEditDialogComponent + let settingsService: SettingsService + let fixture: ComponentFixture + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + CustomFieldEditDialogComponent, + IfPermissionsDirective, + IfOwnerDirective, + SelectComponent, + TextComponent, + SafeHtmlPipe, + ], + providers: [NgbActiveModal], + imports: [ + HttpClientTestingModule, + FormsModule, + ReactiveFormsModule, + NgSelectModule, + NgbModule, + ], + }).compileComponents() + + fixture = TestBed.createComponent(CustomFieldEditDialogComponent) + settingsService = TestBed.inject(SettingsService) + settingsService.currentUser = { id: 99, username: 'user99' } + component = fixture.componentInstance + + fixture.detectChanges() + }) + + it('should support create and edit modes', () => { + component.dialogMode = EditDialogMode.CREATE + const createTitleSpy = jest.spyOn(component, 'getCreateTitle') + const editTitleSpy = jest.spyOn(component, 'getEditTitle') + fixture.detectChanges() + expect(createTitleSpy).toHaveBeenCalled() + expect(editTitleSpy).not.toHaveBeenCalled() + component.dialogMode = EditDialogMode.EDIT + fixture.detectChanges() + expect(editTitleSpy).toHaveBeenCalled() + }) + + it('should disable data type select on edit', () => { + component.dialogMode = EditDialogMode.EDIT + fixture.detectChanges() + component.ngOnInit() + expect(component.objectForm.get('data_type').disabled).toBeTruthy() + }) +}) diff --git a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts new file mode 100644 index 000000000..51a353080 --- /dev/null +++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core' +import { FormGroup, FormControl } from '@angular/forms' +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' +import { + DATA_TYPE_LABELS, + PaperlessCustomField, +} from 'src/app/data/paperless-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' +import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component' + +@Component({ + selector: 'pngx-custom-field-edit-dialog', + templateUrl: './custom-field-edit-dialog.component.html', + styleUrls: ['./custom-field-edit-dialog.component.scss'], +}) +export class CustomFieldEditDialogComponent + extends EditDialogComponent + implements OnInit +{ + constructor( + service: CustomFieldsService, + activeModal: NgbActiveModal, + userService: UserService, + settingsService: SettingsService + ) { + super(service, activeModal, userService, settingsService) + } + + ngOnInit(): void { + super.ngOnInit() + if (this.typeFieldDisabled) { + this.objectForm.get('data_type').disable() + } + } + + getCreateTitle() { + return $localize`Create new custom field` + } + + getEditTitle() { + return $localize`Edit custom field` + } + + getForm(): FormGroup { + return new FormGroup({ + name: new FormControl(null), + data_type: new FormControl(null), + }) + } + + getDataTypes() { + return DATA_TYPE_LABELS + } + + get typeFieldDisabled(): boolean { + return this.dialogMode === EditDialogMode.EDIT + } +} 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 f73bc0f4f..86cfd7da5 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 @@ -393,28 +393,29 @@ 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 - ) - }, - }) + // TODO: Custom fields + // 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()) @@ -541,11 +542,12 @@ 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) - }) + // TODO: custom field reset + // 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/components/manage/custom-fields/custom-fields.component.html b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html new file mode 100644 index 000000000..9542553a8 --- /dev/null +++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html @@ -0,0 +1,41 @@ + + + + +
      + +
    • +
      +
      Name
      +
      Data Type
      +
      Actions
      +
      +
      • + +
    • +
      +
      +
      {{getDataType(field)}}
      +
      +
      + + +
      +
      +
      +
      • +
    • No fields defined.
      • +
    diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts new file mode 100644 index 000000000..ed468347d --- /dev/null +++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts @@ -0,0 +1,162 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { CustomFieldsComponent } from './custom-fields.component' +import { + PaperlessCustomField, + PaperlessCustomFieldDataType, +} from 'src/app/data/paperless-custom-field' +import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { FormsModule, ReactiveFormsModule } from '@angular/forms' +import { By } from '@angular/platform-browser' +import { + NgbModal, + NgbPaginationModule, + NgbModalModule, + NgbModalRef, +} from '@ng-bootstrap/ng-bootstrap' +import { of, throwError } from 'rxjs' +import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' +import { PermissionsService } from 'src/app/services/permissions.service' +import { ToastService } from 'src/app/services/toast.service' +import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' +import { PageHeaderComponent } from '../../common/page-header/page-header.component' +import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' + +const fields: PaperlessCustomField[] = [ + { + id: 0, + name: 'Field 1', + data_type: PaperlessCustomFieldDataType.String, + }, + { + id: 1, + name: 'Field 2', + data_type: PaperlessCustomFieldDataType.Integer, + }, +] + +describe('CustomFieldsComponent', () => { + let component: CustomFieldsComponent + let fixture: ComponentFixture + let customFieldsService: CustomFieldsService + let modalService: NgbModal + let toastService: ToastService + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + CustomFieldsComponent, + IfPermissionsDirective, + PageHeaderComponent, + ConfirmDialogComponent, + ], + providers: [ + { + provide: PermissionsService, + useValue: { + currentUserCan: () => true, + currentUserHasObjectPermissions: () => true, + currentUserOwnsObject: () => true, + }, + }, + ], + imports: [ + HttpClientTestingModule, + NgbPaginationModule, + FormsModule, + ReactiveFormsModule, + NgbModalModule, + ], + }) + + customFieldsService = TestBed.inject(CustomFieldsService) + jest.spyOn(customFieldsService, 'listAll').mockReturnValue( + of({ + count: fields.length, + all: fields.map((o) => o.id), + results: fields, + }) + ) + modalService = TestBed.inject(NgbModal) + toastService = TestBed.inject(ToastService) + + fixture = TestBed.createComponent(CustomFieldsComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should support create, show notification on error / success', () => { + let modal: NgbModalRef + modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') + const reloadSpy = jest.spyOn(component, 'reload') + + const createButton = fixture.debugElement.queryAll(By.css('button'))[0] + createButton.triggerEventHandler('click') + + expect(modal).not.toBeUndefined() + const editDialog = modal.componentInstance as CustomFieldEditDialogComponent + + // fail first + editDialog.failed.emit({ error: 'error creating item' }) + expect(toastErrorSpy).toHaveBeenCalled() + expect(reloadSpy).not.toHaveBeenCalled() + + // succeed + editDialog.succeeded.emit(fields[0]) + expect(toastInfoSpy).toHaveBeenCalled() + expect(reloadSpy).toHaveBeenCalled() + }) + + it('should support edit, show notification on error / success', () => { + let modal: NgbModalRef + modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const toastInfoSpy = jest.spyOn(toastService, 'showInfo') + const reloadSpy = jest.spyOn(component, 'reload') + + const editButton = fixture.debugElement.queryAll(By.css('button'))[1] + editButton.triggerEventHandler('click') + + expect(modal).not.toBeUndefined() + const editDialog = modal.componentInstance as CustomFieldEditDialogComponent + expect(editDialog.object).toEqual(fields[0]) + + // fail first + editDialog.failed.emit({ error: 'error editing item' }) + expect(toastErrorSpy).toHaveBeenCalled() + expect(reloadSpy).not.toHaveBeenCalled() + + // succeed + editDialog.succeeded.emit(fields[0]) + expect(toastInfoSpy).toHaveBeenCalled() + expect(reloadSpy).toHaveBeenCalled() + }) + + it('should support delete, show notification on error / success', () => { + let modal: NgbModalRef + modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1])) + const toastErrorSpy = jest.spyOn(toastService, 'showError') + const deleteSpy = jest.spyOn(customFieldsService, 'delete') + const reloadSpy = jest.spyOn(component, 'reload') + + const deleteButton = fixture.debugElement.queryAll(By.css('button'))[3] + deleteButton.triggerEventHandler('click') + + expect(modal).not.toBeUndefined() + const editDialog = modal.componentInstance as ConfirmDialogComponent + + // fail first + deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting'))) + editDialog.confirmClicked.emit() + expect(toastErrorSpy).toHaveBeenCalled() + expect(reloadSpy).not.toHaveBeenCalled() + + // succeed + deleteSpy.mockReturnValueOnce(of(true)) + editDialog.confirmClicked.emit() + expect(reloadSpy).toHaveBeenCalled() + }) +}) diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts new file mode 100644 index 000000000..9349d96b1 --- /dev/null +++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts @@ -0,0 +1,98 @@ +import { Component, OnInit } from '@angular/core' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { Subject, takeUntil } from 'rxjs' +import { + DATA_TYPE_LABELS, + PaperlessCustomField, +} from 'src/app/data/paperless-custom-field' +import { PermissionsService } from 'src/app/services/permissions.service' +import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' +import { ToastService } from 'src/app/services/toast.service' +import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component' +import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component' +import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' +import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component' + +@Component({ + selector: 'pngx-custom-fields', + templateUrl: './custom-fields.component.html', + styleUrls: ['./custom-fields.component.scss'], +}) +export class CustomFieldsComponent + extends ComponentWithPermissions + implements OnInit +{ + public fields: PaperlessCustomField[] = [] + + private unsubscribeNotifier: Subject = new Subject() + constructor( + private customFieldsService: CustomFieldsService, + public permissionsService: PermissionsService, + private modalService: NgbModal, + private toastService: ToastService + ) { + super() + } + + ngOnInit() { + this.reload() + } + + reload() { + this.customFieldsService + .listAll() + .pipe(takeUntil(this.unsubscribeNotifier)) + .subscribe((r) => { + this.fields = r.results + }) + } + + editField(field: PaperlessCustomField) { + const modal = this.modalService.open(CustomFieldEditDialogComponent) + modal.componentInstance.dialogMode = field + ? EditDialogMode.EDIT + : EditDialogMode.CREATE + modal.componentInstance.object = field + modal.componentInstance.succeeded + .pipe(takeUntil(this.unsubscribeNotifier)) + .subscribe((newField) => { + this.toastService.showInfo($localize`Saved field "${newField.name}".`) + this.customFieldsService.clearCache() + this.reload() + }) + modal.componentInstance.failed + .pipe(takeUntil(this.unsubscribeNotifier)) + .subscribe((e) => { + this.toastService.showError($localize`Error saving field.`, e) + }) + } + + deleteField(field: PaperlessCustomField) { + const modal = this.modalService.open(ConfirmDialogComponent, { + backdrop: 'static', + }) + modal.componentInstance.title = $localize`Confirm delete field` + modal.componentInstance.messageBold = $localize`This operation will permanently delete this field.` + modal.componentInstance.message = $localize`This operation cannot be undone.` + modal.componentInstance.btnClass = 'btn-danger' + modal.componentInstance.btnCaption = $localize`Proceed` + modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.buttonsEnabled = false + this.customFieldsService.delete(field).subscribe({ + next: () => { + modal.close() + this.toastService.showInfo($localize`Deleted field`) + this.customFieldsService.clearCache() + this.reload() + }, + error: (e) => { + this.toastService.showError($localize`Error deleting field.`, e) + }, + }) + }) + } + + getDataType(field: PaperlessCustomField): string { + return DATA_TYPE_LABELS.find((l) => l.id === field.data_type).name + } +} diff --git a/src-ui/src/app/data/paperless-custom-field.ts b/src-ui/src/app/data/paperless-custom-field.ts index 7b220bc41..87ac5e241 100644 --- a/src-ui/src/app/data/paperless-custom-field.ts +++ b/src-ui/src/app/data/paperless-custom-field.ts @@ -4,13 +4,35 @@ export enum PaperlessCustomFieldDataType { String = 'string', Url = 'url', Date = 'date', + Boolean = 'boolean', + Integer = 'integer', } +export const DATA_TYPE_LABELS = [ + { + id: PaperlessCustomFieldDataType.Boolean, + name: $localize`Boolean`, + }, + { + id: PaperlessCustomFieldDataType.Date, + name: $localize`Date`, + }, + { + id: PaperlessCustomFieldDataType.Integer, + name: $localize`Number`, + }, + { + id: PaperlessCustomFieldDataType.String, + name: $localize`String`, + }, + { + id: PaperlessCustomFieldDataType.Url, + name: $localize`Url`, + }, +] + export interface PaperlessCustomField extends ObjectWithId { - type: PaperlessCustomFieldDataType + data_type: PaperlessCustomFieldDataType name: string - data: any - document: number // PaperlessDocument created?: Date - user: number // PaperlessUser } diff --git a/src-ui/src/app/services/permissions.service.ts b/src-ui/src/app/services/permissions.service.ts index b22e56177..b484e0bd3 100644 --- a/src-ui/src/app/services/permissions.service.ts +++ b/src-ui/src/app/services/permissions.service.ts @@ -26,6 +26,7 @@ export enum PermissionType { Admin = '%s_logentry', ShareLink = '%s_sharelink', ConsumptionTemplate = '%s_consumptiontemplate', + CustomField = '%s_customfield', } @Injectable({ diff --git a/src-ui/src/app/services/rest/custom-fields.service.ts b/src-ui/src/app/services/rest/custom-fields.service.ts index b5e9abe0a..f22e9cada 100644 --- a/src-ui/src/app/services/rest/custom-fields.service.ts +++ b/src-ui/src/app/services/rest/custom-fields.service.ts @@ -9,24 +9,24 @@ import { PaperlessCustomField } from 'src/app/data/paperless-custom-field' }) export class CustomFieldsService extends AbstractPaperlessService { constructor(http: HttpClient) { - super(http, 'documents') + super(http, 'custom_fields') } - getFields(documentId: number): Observable { - return this.http.get( - this.getResourceUrl(documentId, 'custom_metadata') - ) - } + // getFields(documentId: number): Observable { + // return this.http.get( + // this.getResourceUrl(documentId, 'custom_fields') + // ) + // } - addField( - documentId: number, - field: PaperlessCustomField - ): Observable { - return this.http.post( - this.getResourceUrl(documentId, 'custom_metadata'), - field - ) - } + // addField( + // documentId: number, + // field: PaperlessCustomField + // ): Observable { + // return this.http.post( + // this.getResourceUrl(documentId, 'custom_fields'), + // field + // ) + // } // deleteField( // documentId: number,