Enhancement: user control of doc details fields (#11906)

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

@@ -103,22 +103,6 @@
             </div>
 
             <div class="row mb-3">
-              <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Items per page</span>
-              </div>
-              <div class="col">
-
-                <select class="form-select" formControlName="documentListItemPerPage">
-                  <option [ngValue]="10">10</option>
-                  <option [ngValue]="25">25</option>
-                  <option [ngValue]="50">50</option>
-                  <option [ngValue]="100">100</option>
-                </select>
-
-              </div>
-            </div>
-
-            <div class="row">
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Sidebar</span>
               </div>
@@ -153,8 +137,28 @@
                 </button>
               </div>
             </div>
+          </div>
+          <div class="col-xl-6 ps-xl-5">
+            <h5 class="mt-3 mt-md-0" i18n>Global search</h5>
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
+              </div>
+            </div>
 
-            <h5 class="mt-3" id="update-checking" i18n>Update checking</h5>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Full search links to</span>
+              </div>
+              <div class="col mb-3">
+                <select class="form-select" formControlName="searchLink">
+                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
+                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
+                </select>
+              </div>
+            </div>
+
+            <h5 class="mt-3 mt-md-0" id="update-checking" i18n>Update checking</h5>
             <div class="row mb-3">
               <div class="col d-flex flex-row align-items-start">
                 <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
@@ -179,11 +183,33 @@
                 <pngx-input-check i18n-title title="Show document counts in sidebar saved views" formControlName="sidebarViewsShowCount"></pngx-input-check>
               </div>
             </div>
-
           </div>
-          <div class="col-xl-6 ps-xl-5">
-            <h5 class="mt-3 mt-md-0" i18n>Document editing</h5>
+        </div>
 
+      </ng-template>
+    </li>
+
+    <li [ngbNavItem]="SettingsNavIDs.Documents">
+      <a ngbNavLink i18n>Documents</a>
+      <ng-template ngbNavContent>
+        <div class="row">
+          <div class="col-xl-6 pe-xl-5">
+            <h5 i18n>Documents</h5>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Items per page</span>
+              </div>
+              <div class="col">
+                <select class="form-select" formControlName="documentListItemPerPage">
+                  <option [ngValue]="10">10</option>
+                  <option [ngValue]="25">25</option>
+                  <option [ngValue]="50">50</option>
+                  <option [ngValue]="100">100</option>
+                </select>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Document editing</h5>
             <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
@@ -209,31 +235,31 @@
               </div>
             </div>
 
-            <div class="row mb-3">
+            <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
               </div>
             </div>
 
-            <h5 class="mt-3" i18n>Global search</h5>
-            <div class="row">
-              <div class="col">
-                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
-              </div>
-            </div>
-
             <div class="row mb-3">
-              <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Full search links to</span>
-              </div>
-              <div class="col mb-3">
-                <select class="form-select" formControlName="searchLink">
-                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
-                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
-                </select>
+              <div class="col">
+                <p class="mb-2" i18n>Built-in fields to show:</p>
+                @for (option of documentDetailFieldOptions; track option.id) {
+                  <div class="form-check ms-3">
+                    <input class="form-check-input" type="checkbox"
+                      [id]="'documentDetailField-' + option.id"
+                      [checked]="isDocumentDetailFieldShown(option.id)"
+                      (change)="toggleDocumentDetailField(option.id, $event.target.checked)" />
+                    <label class="form-check-label" [for]="'documentDetailField-' + option.id">
+                      {{ option.label }}
+                    </label>
+                  </div>
+                }
+                <p class="small text-muted mt-1" i18n>Uncheck fields to hide them on the document details page.</p>
               </div>
             </div>
-
+          </div>
+          <div class="col-xl-6 ps-xl-5">
             <h5 class="mt-3" i18n>Bulk editing</h5>
             <div class="row mb-3">
               <div class="col">
@@ -248,10 +274,8 @@
                 <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
               </div>
             </div>
-
           </div>
         </div>
-
       </ng-template>
     </li>
 

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

@@ -201,9 +201,9 @@ describe('SettingsComponent', () => {
     const navigateSpy = jest.spyOn(router, 'navigate')
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
     tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'documents'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
 
     const initSpy = jest.spyOn(component, 'initialize')
     component.isDirty = true // mock dirty
@@ -213,8 +213,8 @@ describe('SettingsComponent', () => {
     expect(initSpy).not.toHaveBeenCalled()
 
     navigateSpy.mockResolvedValueOnce(true) // nav accepted even though dirty
-    tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     expect(initSpy).toHaveBeenCalled()
   })
 
@@ -226,7 +226,7 @@ describe('SettingsComponent', () => {
     activatedRoute.snapshot.fragment = '#notifications'
     const scrollSpy = jest.spyOn(viewportScroller, 'scrollToAnchor')
     component.ngOnInit()
-    expect(component.activeNavID).toEqual(3) // Notifications
+    expect(component.activeNavID).toEqual(4) // Notifications
     component.ngAfterViewInit()
     expect(scrollSpy).toHaveBeenCalledWith('#notifications')
   })
@@ -251,7 +251,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(30)
+    expect(setSpy).toHaveBeenCalledTimes(31)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))
@@ -366,4 +366,22 @@ describe('SettingsComponent', () => {
     settingsService.settingsSaved.emit(true)
     expect(maybeRefreshSpy).toHaveBeenCalled()
   })
+
+  it('should support toggling document detail fields', () => {
+    completeSetup()
+    const field = 'storage_path'
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(0)
+    component.toggleDocumentDetailField(field, false)
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(1)
+    expect(component.isDocumentDetailFieldShown(field)).toBeFalsy()
+    component.toggleDocumentDetailField(field, true)
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(0)
+    expect(component.isDocumentDetailFieldShown(field)).toBeTruthy()
+  })
 })

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

@@ -70,9 +70,9 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 
 enum SettingsNavIDs {
   General = 1,
-  Permissions = 2,
-  Notifications = 3,
-  SavedViews = 4,
+  Documents = 2,
+  Permissions = 3,
+  Notifications = 4,
 }
 
 const systemLanguage = { code: '', name: $localize`Use system language` }
@@ -81,6 +81,25 @@ const systemDateFormat = {
   name: $localize`Use date format of display language`,
 }
 
+export enum DocumentDetailFieldID {
+  ArchiveSerialNumber = 'archive_serial_number',
+  Correspondent = 'correspondent',
+  DocumentType = 'document_type',
+  StoragePath = 'storage_path',
+  Tags = 'tags',
+}
+
+const documentDetailFieldOptions = [
+  {
+    id: DocumentDetailFieldID.ArchiveSerialNumber,
+    label: $localize`Archive serial number`,
+  },
+  { id: DocumentDetailFieldID.Correspondent, label: $localize`Correspondent` },
+  { id: DocumentDetailFieldID.DocumentType, label: $localize`Document type` },
+  { id: DocumentDetailFieldID.StoragePath, label: $localize`Storage path` },
+  { id: DocumentDetailFieldID.Tags, label: $localize`Tags` },
+]
+
 @Component({
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
@@ -146,6 +165,7 @@ export class SettingsComponent
     pdfViewerDefaultZoom: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
     documentEditingOverlayThumbnail: new FormControl(null),
+    documentDetailsHiddenFields: new FormControl([]),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
@@ -176,6 +196,8 @@ export class SettingsComponent
 
   public readonly ZoomSetting = ZoomSetting
 
+  public readonly documentDetailFieldOptions = documentDetailFieldOptions
+
   get systemStatusHasErrors(): boolean {
     return (
       this.systemStatus.database.status === SystemStatusItemStatus.ERROR ||
@@ -336,6 +358,9 @@ export class SettingsComponent
       documentEditingOverlayThumbnail: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
       ),
+      documentDetailsHiddenFields: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS
+      ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
       searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
     }
@@ -526,6 +551,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
       this.settingsForm.value.documentEditingOverlayThumbnail
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS,
+      this.settingsForm.value.documentDetailsHiddenFields
+    )
     this.settings.set(
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
@@ -587,6 +616,26 @@ export class SettingsComponent
     this.settingsForm.get('themeColor').patchValue('')
   }
 
+  isDocumentDetailFieldShown(fieldId: string): boolean {
+    const hiddenFields =
+      this.settingsForm.value.documentDetailsHiddenFields || []
+    return !hiddenFields.includes(fieldId)
+  }
+
+  toggleDocumentDetailField(fieldId: string, checked: boolean) {
+    const hiddenFields = new Set(
+      this.settingsForm.value.documentDetailsHiddenFields || []
+    )
+    if (checked) {
+      hiddenFields.delete(fieldId)
+    } else {
+      hiddenFields.add(fieldId)
+    }
+    this.settingsForm
+      .get('documentDetailsHiddenFields')
+      .setValue(Array.from(hiddenFields))
+  }
+
   showSystemStatus() {
     const modal: NgbModalRef = this.modalService.open(
       SystemStatusDialogComponent,