Very basic but dynamically-generated config form

src-ui/src/app/components/admin/config/config.component.html

@@ -1,116 +1,41 @@
 <pngx-page-header title="Configuration" i18n-title></pngx-page-header>
 
-  <form [formGroup]="configForm" (ngSubmit)="saveConfig()" class="pb-4">
+<form [formGroup]="configForm" (ngSubmit)="saveConfig()" class="pb-4">
 
-          <h4 i18n>OCR Settings</h4>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Output Type</span>
-            </div>
-            <div class="col">
-                <pngx-input-select [items]="ConfigChoices.output_type" formControlName="output_type" [allowNull]="true"></pngx-input-select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Pages</span>
-            </div>
-            <div class="col">
-              <pngx-input-number formControlName="pages" [showAdd]="false"></pngx-input-number>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Mode</span>
-            </div>
-            <div class="col">
-                <pngx-input-select [items]="ConfigChoices.mode" formControlName="mode" [allowNull]="true"></pngx-input-select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Skip Archive File</span>
-            </div>
-            <div class="col">
-                <pngx-input-select [items]="ConfigChoices.skip_archive_file" formControlName="skip_archive_file" [allowNull]="true"></pngx-input-select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Image DPI</span>
-            </div>
-            <div class="col">
-                <pngx-input-number formControlName="image_dpi" [showAdd]="false"></pngx-input-number>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Clean</span>
-            </div>
-            <div class="col">
-                <pngx-input-select [items]="ConfigChoices.unpaper_clean" formControlName="unpaper_clean" [allowNull]="true"></pngx-input-select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Deskew</span>
-            </div>
-            <div class="col">
-                <pngx-input-check formControlName="deskew"></pngx-input-check>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Rotate Pages</span>
-            </div>
-            <div class="col">
-                <pngx-input-check formControlName="rotate_pages"></pngx-input-check>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Rotate Pages Threshold</span>
-            </div>
-            <div class="col">
-                <pngx-input-number formControlName="rotate_pages_threshold" [showAdd]="false"></pngx-input-number>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Max Image Pixels</span>
-            </div>
-            <div class="col">
-                <pngx-input-number formControlName="max_image_pixels" [showAdd]="false"></pngx-input-number>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>Color Conversion Strategy</span>
-            </div>
-            <div class="col">
-                <pngx-input-select [items]="ConfigChoices.color_conversion_strategy" formControlName="color_conversion_strategy" [allowNull]="true"></pngx-input-select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <div class="col-md-3 col-form-label pt-0">
-              <span i18n>OCR Arguments</span>
-            </div>
-            <div class="col">
-              <pngx-input-text formControlName="user_args"></pngx-input-text>
-            </div>
-          </div>
-
-      <button type="submit" class="btn btn-primary mb-2" [disabled]="loading ||(isDirty$ | async) === false" i18n>Save</button>
-    </form>
+    <ul ngbNav #nav="ngbNav" class="nav-tabs">
+        @for (category of optionCategories; track category) {
+            <li [ngbNavItem]="category">
+                <a ngbNavLink i18n>{{category}}</a>
+                <ng-template ngbNavContent>
+                    <div class="p-3">
+                        @for (option of getCategoryOptions(category); track option.key) {
+                            <div class="row mb-3">
+                                <div class="col-md-3 col-form-label pt-0">
+                                    <span i18n>{{option.title}}</span>
+                                    <p>See <a [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">{{option.config_key}}</a></p>
+                                </div>
+                                <div class="col">
+                                    @switch (option.type) {
+                                        @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
+                                        @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [showAdd]="false"></pngx-input-number> }
+                                        @case (ConfigOptionType.Boolean) { <pngx-input-check [formControlName]="option.key"></pngx-input-check> }
+                                        @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key"></pngx-input-text> }
+                                    }
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </ng-template>
+            </li>
+        }
+    </ul>
+    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+    <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group me-2">
+            <button type="button" (click)="discardChanges()" class="btn btn-secondary" [disabled]="loading || (isDirty$ | async) === false" i18n>Discard</button>
+        </div>
+        <div class="btn-group">
+            <button type="submit" class="btn btn-primary" [disabled]="loading || (isDirty$ | async) === false" i18n>Save</button>
+        </div>
+    </div>
+</form>

src-ui/src/app/components/admin/config/config.component.spec.ts

@@ -1,22 +1,96 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { ConfigComponent } from './config.component'
+import { ConfigService } from 'src/app/services/config.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { of, throwError } from 'rxjs'
+import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { BrowserModule } from '@angular/platform-browser'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { TextComponent } from '../../common/input/text/text.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { CheckComponent } from '../../common/input/check/check.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { SelectComponent } from '../../common/input/select/select.component'
 
 describe('ConfigComponent', () => {
   let component: ConfigComponent
   let fixture: ComponentFixture<ConfigComponent>
+  let configService: ConfigService
+  let toastService: ToastService
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ConfigComponent],
+      declarations: [
+        ConfigComponent,
+        TextComponent,
+        SelectComponent,
+        NumberComponent,
+        CheckComponent,
+        PageHeaderComponent,
+      ],
+      imports: [
+        HttpClientTestingModule,
+        BrowserModule,
+        NgbModule,
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+      ],
     }).compileComponents()
 
+    configService = TestBed.inject(ConfigService)
+    toastService = TestBed.inject(ToastService)
     fixture = TestBed.createComponent(ConfigComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
 
-  it('should create', () => {
-    expect(component).toBeTruthy()
+  it('should load config on init, show error if necessary', () => {
+    const getSpy = jest.spyOn(configService, 'getConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    getSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting config'))
+    )
+    component.ngOnInit()
+    expect(getSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    getSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.ngOnInit()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should save config, show error if necessary', () => {
+    const saveSpy = jest.spyOn(configService, 'saveConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    saveSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error saving config'))
+    )
+    component.saveConfig()
+    expect(saveSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    saveSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.saveConfig()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should support discard changes', () => {
+    component.initialConfig = { output_type: OutputTypeConfig.PDF_A2 } as any
+    component.configForm.get('output_type').patchValue(OutputTypeConfig.PDF_A)
+    component.discardChanges()
+    expect(component.configForm.get('output_type').value).toEqual(
+      OutputTypeConfig.PDF_A2
+    )
   })
 })

src-ui/src/app/components/admin/config/config.component.ts

@@ -5,14 +5,14 @@ import {
   Observable,
   Subject,
   Subscription,
+  first,
   takeUntil,
 } from 'rxjs'
 import {
-  ArchiveFileConfig,
-  CleanConfig,
-  ColorConvertConfig,
-  ModeConfig,
-  OutputTypeConfig,
+  PaperlessConfigOptions,
+  ConfigCategory,
+  ConfigOption,
+  ConfigOptionType,
   PaperlessConfig,
 } from 'src/app/data/paperless-config'
 import { ConfigService } from 'src/app/services/config.service'
@@ -29,32 +29,36 @@ export class ConfigComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
-  public ConfigChoices = {
-    output_type: Object.values(OutputTypeConfig),
-    mode: Object.values(ModeConfig),
-    skip_archive_file: Object.values(ArchiveFileConfig),
-    unpaper_clean: Object.values(CleanConfig),
-    color_conversion_strategy: Object.values(ColorConvertConfig),
-  }
+  public readonly ConfigOptionType = ConfigOptionType
 
   public configForm = new FormGroup({
-    output_type: new FormControl(null),
-    pages: new FormControl(null),
-    language: new FormControl(null),
-    mode: new FormControl(null),
-    skip_archive_file: new FormControl(null),
-    image_dpi: new FormControl(null),
-    unpaper_clean: new FormControl(null),
-    deskew: new FormControl(null),
-    rotate_pages: new FormControl(null),
-    rotate_pages_threshold: new FormControl(null),
-    max_image_pixels: new FormControl(null),
-    color_conversion_strategy: new FormControl(null),
-    user_args: new FormControl(null),
+    id: new FormControl(),
+    output_type: new FormControl(),
+    pages: new FormControl(),
+    language: new FormControl(),
+    mode: new FormControl(),
+    skip_archive_file: new FormControl(),
+    image_dpi: new FormControl(),
+    unpaper_clean: new FormControl(),
+    deskew: new FormControl(),
+    rotate_pages: new FormControl(),
+    rotate_pages_threshold: new FormControl(),
+    max_image_pixels: new FormControl(),
+    color_conversion_strategy: new FormControl(),
+    user_args: new FormControl(),
   })
 
+  get optionCategories(): string[] {
+    return Object.values(ConfigCategory)
+  }
+
+  getCategoryOptions(category: string): ConfigOption[] {
+    return PaperlessConfigOptions.filter((o) => o.category === category)
+  }
+
   public loading: boolean = false
 
+  initialConfig: PaperlessConfig
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
@@ -69,14 +73,17 @@ export class ConfigComponent
   }
 
   ngOnInit(): void {
+    this.loading = true
     this.configService
       .getConfig()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (config) => {
+          this.loading = false
           this.initialize(config)
         },
         error: (e) => {
+          this.loading = false
           this.toastService.showError($localize`Error retrieving config`, e)
         },
       })
@@ -88,21 +95,51 @@ export class ConfigComponent
   }
 
   private initialize(config: PaperlessConfig) {
-    this.store = new BehaviorSubject(config)
+    if (!this.store) {
+      this.store = new BehaviorSubject(config)
 
-    this.store
-      .asObservable()
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((state) => {
-        this.configForm.patchValue(state, { emitEvent: false })
-      })
+      this.store
+        .asObservable()
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe((state) => {
+          this.configForm.patchValue(state, { emitEvent: false })
+        })
 
-    this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable())
+      this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable())
+    }
 
     this.configForm.patchValue(config)
+
+    this.initialConfig = config
+  }
+
+  getDocsUrl(key: string) {
+    return `https://docs.paperless-ngx.com/configuration/#${key}`
   }
 
   public saveConfig() {
-    throw Error('Not Implemented')
+    this.loading = true
+    this.configService
+      .saveConfig(this.configForm.value as PaperlessConfig)
+      .pipe(takeUntil(this.unsubscribeNotifier), first())
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+          this.store.next(config)
+          this.toastService.showInfo($localize`Configuration updated`)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError(
+            $localize`An error occurred updating configuration`,
+            e
+          )
+        },
+      })
+  }
+
+  public discardChanges() {
+    this.configForm.reset(this.initialConfig)
   }
 }

src-ui/src/app/data/paperless-config.ts

@@ -37,6 +37,127 @@ export enum ColorConvertConfig {
   CMYK = 'CMYK',
 }
 
+export enum ConfigOptionType {
+  String = 'string',
+  Number = 'number',
+  Select = 'select',
+  Boolean = 'boolean',
+}
+
+export const ConfigCategory = {
+  OCR: $localize`OCR Settings`,
+}
+
+export interface ConfigOption {
+  key: string
+  title: string
+  type: ConfigOptionType
+  choices?: Array<string>
+  config_key?: string
+  category: string
+}
+
+function mapToFlatChoices(enumObj: Object): Array<any> {
+  return Object.keys(enumObj).map((key) => {
+    return {
+      id: enumObj[key],
+      name: enumObj[key],
+    }
+  })
+}
+
+export const PaperlessConfigOptions: ConfigOption[] = [
+  {
+    key: 'output_type',
+    title: $localize`Output Type`,
+    type: ConfigOptionType.Select,
+    choices: mapToFlatChoices(OutputTypeConfig),
+    config_key: 'PAPERLESS_OCR_OUTPUT_TYPE',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'pages',
+    title: $localize`Pages`,
+    type: ConfigOptionType.Number,
+    config_key: 'PAPERLESS_OCR_PAGES',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'mode',
+    title: $localize`Mode`,
+    type: ConfigOptionType.Select,
+    choices: mapToFlatChoices(ModeConfig),
+    config_key: 'PAPERLESS_OCR_MODE',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'skip_archive_file',
+    title: $localize`Skip Archive File`,
+    type: ConfigOptionType.Select,
+    choices: mapToFlatChoices(ArchiveFileConfig),
+    config_key: 'PAPERLESS_OCR_SKIP_ARCHIVE_FILE',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'image_dpi',
+    title: $localize`Image DPI`,
+    type: ConfigOptionType.Number,
+    config_key: 'PAPERLESS_OCR_IMAGE_DPI',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'unpaper_clean',
+    title: $localize`Clean`,
+    type: ConfigOptionType.Select,
+    choices: mapToFlatChoices(CleanConfig),
+    config_key: 'PAPERLESS_OCR_CLEAN',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'deskew',
+    title: $localize`Deskew`,
+    type: ConfigOptionType.Boolean,
+    config_key: 'PAPERLESS_OCR_DESKEW',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'rotate_pages',
+    title: $localize`Rotate Pages`,
+    type: ConfigOptionType.Boolean,
+    config_key: 'PAPERLESS_OCR_ROTATE_PAGES',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'rotate_pages_threshold',
+    title: $localize`Rotate Pages Threshold`,
+    type: ConfigOptionType.Number,
+    config_key: 'PAPERLESS_OCR_ROTATE_PAGES_THRESHOLD',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'max_image_pixels',
+    title: $localize`Max Image Pixels`,
+    type: ConfigOptionType.Number,
+    config_key: 'PAPERLESS_OCR_IMAGE_DPI',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'color_conversion_strategy',
+    title: $localize`Color Conversion Strategy`,
+    type: ConfigOptionType.Select,
+    choices: mapToFlatChoices(ColorConvertConfig),
+    config_key: 'PAPERLESS_OCR_COLOR_CONVERSION_STRATEGY',
+    category: ConfigCategory.OCR,
+  },
+  {
+    key: 'user_args',
+    title: $localize`OCR Arguments`,
+    type: ConfigOptionType.String,
+    config_key: 'PAPERLESS_OCR_USER_ARGS',
+    category: ConfigCategory.OCR,
+  },
+]
+
 export interface PaperlessConfig extends ObjectWithId {
   output_type: OutputTypeConfig
   pages: number

src-ui/src/app/services/config.service.spec.ts

@@ -1,16 +1,42 @@
 import { TestBed } from '@angular/core/testing'
 
 import { ConfigService } from './config.service'
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing'
+import { environment } from 'src/environments/environment'
+import { OutputTypeConfig, PaperlessConfig } from '../data/paperless-config'
 
 describe('ConfigService', () => {
   let service: ConfigService
+  let httpTestingController: HttpTestingController
 
   beforeEach(() => {
-    TestBed.configureTestingModule({})
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    })
     service = TestBed.inject(ConfigService)
+    httpTestingController = TestBed.inject(HttpTestingController)
   })
 
-  it('should be created', () => {
-    expect(service).toBeTruthy()
+  it('should call correct API endpoint on get config', () => {
+    service.getConfig().subscribe()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}config/`)
+      .flush([{}])
+  })
+
+  it('should call correct API endpoint on set config', () => {
+    service
+      .saveConfig({
+        id: 1,
+        output_type: OutputTypeConfig.PDF_A,
+      } as PaperlessConfig)
+      .subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}config/1/`
+    )
+    expect(req.request.method).toEqual('PATCH')
   })
 })

src-ui/src/app/services/config.service.ts

@@ -20,6 +20,8 @@ export class ConfigService {
   }
 
   saveConfig(config: PaperlessConfig): Observable<PaperlessConfig> {
-    return this.http.patch<PaperlessConfig>(this.baseUrl, config).pipe(first())
+    return this.http
+      .patch<PaperlessConfig>(`${this.baseUrl}${config.id}/`, config)
+      .pipe(first())
   }
 }