Feature: customizable fields display for documents, saved views & dashboard widgets (#6439)

2025-08-12 00:19:48 +00:00 · 2024-04-26 06:41:12 -07:00
parent 7a0334f353
commit bd4476d484
50 changed files with 2929 additions and 1018 deletions
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -320,52 +320,71 @@
        </div>

        <h4 i18n>Views</h4>
-        <div formGroupName="savedViews">
+        <ul class="list-group" formGroupName="savedViews">

          @for (view of savedViews; track view) {
+            <li class="list-group-item py-3">
            <div [formGroupName]="view.id" class="row">
-              <div class="mb-3 col">
-                <label class="form-label" for="name_{{view.id}}" i18n>Name</label>
-                <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
-              </div>
-              <div class="mb-2 col">
-                <label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
-                <div class="form-check form-switch">
-                  <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                  <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+              <div class="row">
+                <div class="col">
+                  <pngx-input-text title="Name" formControlName="name"></pngx-input-text>
                </div>
-                <div class="form-check form-switch">
-                  <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                  <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
+                <div class="col">
+                  <div class="form-check form-switch mt-3">
+                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
+                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+                  </div>
+                  <div class="form-check form-switch">
+                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
+                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
+                  </div>
+                </div>
+                <div class="col-auto">
+                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
+                  <pngx-confirm-button
+                    label="Delete"
+                    i18n-label
+                    (confirm)="deleteSavedView(view)"
+                    *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
+                    buttonClasses="btn-sm btn-outline-danger form-control"
+                    iconName="trash">
+                  </pngx-confirm-button>
                </div>
              </div>
-              <div class="mb-2 col-auto">
-                <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-
-                <pngx-confirm-button
-                  label="Delete"
-                  i18n-label
-                  (confirm)="deleteSavedView(view)"
-                  *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
-                  buttonClasses="btn-sm btn-outline-danger form-control"
-                  iconName="trash">
-                </pngx-confirm-button>
-              </div>
+              <div class="row">
+                <div class="col">
+                  <pngx-input-number i18n-title title="Documents page size" [showAdd]="false" formControlName="page_size"></pngx-input-number>
+                </div>
+                <div class="col">
+                  <label class="form-label" for="display_mode_{{view.id}}" i18n>Display as</label>
+                  <select class="form-select" formControlName="display_mode">
+                    <option [ngValue]="DisplayMode.TABLE" i18n>Table</option>
+                    <option [ngValue]="DisplayMode.SMALL_CARDS" i18n>Small Cards</option>
+                    <option [ngValue]="DisplayMode.LARGE_CARDS" i18n>Large Cards</option>
+                  </select>
+                </div>
+                  @if (displayFields) {
+                    <pngx-input-drag-drop-select i18n-title title="Show" i18n-emptyText emptyText="Default" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
+                  }
+                </div>
            </div>
+            </li>
          }

          @if (savedViews && savedViews.length === 0) {
-            <div i18n>No saved views defined.</div>
+            <li class="list-group-item">
+              <div i18n>No saved views defined.</div>
+            </li>
          }

          @if (!savedViews) {
-            <div>
+            <li class="list-group-item">
              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
              <div class="visually-hidden" i18n>Loading...</div>
-            </div>
+            </li>
          }

-        </div>
+        </ul>

      </ng-template>
    </li>
@@ -374,4 +393,5 @@
  <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>

  <button type="submit" class="btn btn-primary mb-2" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
+  <button type="button" (click)="reset()" class="btn btn-secondary ms-2 mb-2" [disabled]="(isDirty$ | async) === false" i18n>Cancel</button>
 </form>
--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
@@ -48,6 +48,8 @@ import {
  InstallType,
  SystemStatusItemStatus,
 } from 'src/app/data/system-status'
+import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
+import { DragDropModule } from '@angular/cdk/drag-drop'

 const savedViews = [
  { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true },
@@ -96,6 +98,7 @@ describe('SettingsComponent', () => {
        PermissionsGroupComponent,
        IfOwnerDirective,
        ConfirmButtonComponent,
+        DragDropSelectComponent,
      ],
      providers: [CustomDatePipe, DatePipe, PermissionsGuard],
      imports: [
@@ -108,6 +111,7 @@ describe('SettingsComponent', () => {
        NgSelectModule,
        NgxBootstrapIconsModule.pick(allIcons),
        NgbModalModule,
+        DragDropModule,
      ],
    }).compileComponents()

@@ -437,4 +441,11 @@ describe('SettingsComponent', () => {
      size: 'xl',
    })
  })
+
+  it('should support reset', () => {
+    completeSetup()
+    component.settingsForm.get('themeColor').setValue('#ff0000')
+    component.reset()
+    expect(component.settingsForm.get('themeColor').value).toEqual('')
+  })
 })
--- a/src-ui/src/app/components/admin/settings/settings.component.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.ts
@@ -50,6 +50,7 @@ import {
  SystemStatusItemStatus,
  SystemStatus,
 } from 'src/app/data/system-status'
+import { DisplayMode } from 'src/app/data/document'

 enum SettingsNavIDs {
  General = 1,
@@ -73,8 +74,8 @@ export class SettingsComponent
  extends ComponentWithPermissions
  implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
-  SettingsNavIDs = SettingsNavIDs
  activeNavID: number
+  DisplayMode = DisplayMode

  savedViewGroup = new FormGroup({})

@@ -110,6 +111,10 @@ export class SettingsComponent
  })

  savedViews: SavedView[]
+  SettingsNavIDs = SettingsNavIDs
+  get displayFields() {
+    return this.settings.allDisplayFields
+  }

  store: BehaviorSubject<any>
  storeSub: Subscription
@@ -340,6 +345,9 @@ export class SettingsComponent
          name: view.name,
          show_on_dashboard: view.show_on_dashboard,
          show_in_sidebar: view.show_in_sidebar,
+          page_size: view.page_size,
+          display_mode: view.display_mode,
+          display_fields: view.display_fields,
        }
        this.savedViewGroup.addControl(
          view.id.toString(),
@@ -348,6 +356,9 @@ export class SettingsComponent
            name: new FormControl(null),
            show_on_dashboard: new FormControl(null),
            show_in_sidebar: new FormControl(null),
+            page_size: new FormControl(null),
+            display_mode: new FormControl(null),
+            display_fields: new FormControl([]),
          })
        )
      }
@@ -530,8 +541,8 @@ export class SettingsComponent
      .subscribe({
        next: () => {
          this.store.next(this.settingsForm.value)
-          this.documentListViewService.updatePageSize()
          this.settings.updateAppearanceSettings()
+          this.settings.initializeDisplayFields()
          let savedToast: Toast = {
            content: $localize`Settings were saved successfully.`,
            delay: 5000,
@@ -592,6 +603,10 @@ export class SettingsComponent
    }
  }

+  reset() {
+    this.settingsForm.patchValue(this.store.getValue())
+  }
+
  clearThemeColor() {
    this.settingsForm.get('themeColor').patchValue('')
  }