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

2025-07-28 18:24:38 -05:00 · 2024-04-26 06:41:12 -07:00
parent 3a8793b1c0
commit bcf8db0ad7
50 changed files with 2929 additions and 1018 deletions
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
@@ -23,7 +23,7 @@
      }

      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-        @for (v of dashboardViews; track v) {
+        @for (v of dashboardViews; track v.id) {
          <div class="col">
            <pngx-saved-view-widget
              [savedView]="v"
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -9,58 +9,114 @@
    <a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
  }

-  @if (documents.length) {
-    <table content class="table table-hover mb-0 align-middle">
+  @if (documents.length && displayMode === DisplayMode.TABLE) {
+    <table content class="table table-hover mb-0 mt-n2 align-middle">
      <thead>
        <tr>
-          <th scope="col" i18n>Created</th>
-          <th scope="col" i18n>Title</th>
-          @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag)) {
-            <th scope="col" class="d-none d-md-table-cell" i18n>Tags</th>
-          }
-          @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-            <th scope="col" class="d-none d-md-table-cell" i18n>Correspondent</th>
-          } @else {
-            <th scope="col" class="d-none d-md-table-cell"></th>
+          @for (field of displayFields; track field; let i = $index) {
+            @if (displayFields.includes(field)) {
+              <th
+                scope="col"
+                [ngClass]="{
+                  'd-none d-md-table-cell': i > 1,
+                  'w-25': field === DisplayField.CREATED || field === DisplayField.ADDED
+                }">
+                {{ getColumnTitle(field) }}
+              </th>
+            }
          }
        </tr>
      </thead>
      <tbody>
-        @for (doc of documents; track doc) {
-          <tr (mouseleave)="maybeClosePopover()">
-            <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a></td>
-            <td class="py-2 py-md-3">
-              <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
-            </td>
-            @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag)) {
-              <td class="py-2 py-md-3 d-none d-md-table-cell">
-                @for (t of doc.tags$ | async; track t) {
-                  <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t, $event)"></pngx-tag>
+        @for (doc of documents; track doc.id) {
+          <tr>
+            @for (field of displayFields; track field; let i = $index) {
+              <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': i > 1 }">
+                @switch (field) {
+                  @case (DisplayField.ADDED) {
+                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.added | customDate}}</a>
+                  }
+                  @case (DisplayField.CREATED) {
+                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a>
+                  }
+                  @case (DisplayField.TITLE) {
+                    <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
+                  }
+                  @case (DisplayField.CORRESPONDENT) {
+                    @if (doc.correspondent) {
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)">{{(doc.correspondent$ | async)?.name}}</a>
+                    }
+                  }
+                  @case (DisplayField.TAGS) {
+                    @for (t of doc.tags$ | async; track t) {
+                      <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t.id, $event)"></pngx-tag>
+                    }
+                  }
+                  @case (DisplayField.DOCUMENT_TYPE) {
+                    @if (doc.document_type) {
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)">{{(doc.document_type$ | async)?.name}}</a>
+                    }
+                  }
+                  @case (DisplayField.STORAGE_PATH) {
+                    @if (doc.storage_path) {
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)">{{(doc.storage_path$ | async)?.name}}</a>
+                    }
+                  }
+                }
+                @if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
+                  <pngx-custom-field-display [document]="doc" [fieldDisplayKey]="field"></pngx-custom-field-display>
+                }
+                @if (i === displayFields.length - 1) {
+                  <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
+                    <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
+                      [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
+                      autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
+                      <i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
+                    </a>
+                    <ng-template #previewContent>
+                      <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
+                    </ng-template>
+                    <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
+                      <i-bs width="0.8em" height="0.8em" name="download"></i-bs>
+                    </a>
+                  </div>
                }
              </td>
            }
-            <td class="position-relative py-2 py-md-3 d-none d-md-table-cell">
-              @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && doc.correspondent !== null) {
-                <a class="btn-link text-dark text-decoration-none py-2 py-md-3" routerLink="/documents" [queryParams]="getCorrespondentQueryParams(doc.correspondent)">{{(doc.correspondent$ | async)?.name}}</a>
-              }
-              <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
-                <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
-                  [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
-                  autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
-                  <i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
-                </a>
-                <ng-template #previewContent>
-                  <pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
-                </ng-template>
-                <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
-                  <i-bs width="0.8em" height="0.8em" name="download"></i-bs>
-                </a>
-              </div>
-            </td>
          </tr>
        }
      </tbody>
    </table>
+  } @else if (documents.length && displayMode === DisplayMode.SMALL_CARDS) {
+    <div class="row row-cols-paperless-cards my-n2">
+      @for (d of documents; track d.id) {
+        <pngx-document-card-small
+          class="p-0"
+          (dblClickDocument)="openDocumentDetail(d)"
+          [document]="d"
+          [displayFields]="displayFields"
+          (clickTag)="clickTag($event)"
+          (clickCorrespondent)="clickCorrespondent($event)"
+          (clickStoragePath)="clickStoragePath($event)"
+          (clickDocumentType)="clickDocumentType($event)">
+        </pngx-document-card-small>
+      }
+    </div>
+  } @else if (documents.length && displayMode === DisplayMode.LARGE_CARDS) {
+    <div class="row my-n2">
+      @for (d of documents; track d.id) {
+        <pngx-document-card-large
+          (dblClickDocument)="openDocumentDetail(d)"
+          [document]="d"
+          [displayFields]="displayFields"
+          (clickTag)="clickTag($event)"
+          (clickCorrespondent)="clickCorrespondent($event)"
+          (clickStoragePath)="clickStoragePath($event)"
+          (clickDocumentType)="clickDocumentType($event)"
+          (clickMoreLike)="clickMoreLike(d.id)">
+        </pngx-document-card-large>
+      }
+    </div>
  } @else {
    <p i18n class="text-center text-muted mb-0 fst-italic">No documents</p>
  }
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
@@ -3,10 +3,9 @@ table {
  table-layout: fixed;
 }

-th:first-child {
-  width: 25%;
-  @media (min-width: 768px) {
-    width: 15%;
+@media (min-width: 768px) {
+  th.w-25 {
+    width: 15% !important;
  }
 }

@@ -30,3 +29,45 @@ td.py-3 {
  padding-top: 0.75em !important;
  padding-bottom: 0.75em !important;
 }
+
+$paperless-card-breakpoints: (
+  // 0: 2, // xs is manual for slim-sidebar
+  768px: 2, //md
+  992px: 2, //lg
+  1200px: 3, //xl
+  1600px: 4,
+  1800px: 5,
+  2000px: 6
+);
+
+.row-cols-paperless-cards {
+  // xs, we dont want in .col-slim block
+  > * {
+    flex: 0 0 auto;
+    width: calc(100% / 2);
+  }
+
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: calc(100% / $n-cols);
+      }
+    }
+  }
+}
+
+::ng-deep .col-slim .row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: calc(100% / ($n-cols + 1)) !important;
+      }
+    }
+  }
+}
+
+::ng-deep .document-card-check {
+  display: none !important; // override for dashboard
+}
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
@@ -11,7 +11,13 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { of, Subject } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
+import {
+  FILTER_CORRESPONDENT,
+  FILTER_DOCUMENT_TYPE,
+  FILTER_FULLTEXT_MORELIKE,
+  FILTER_HAS_TAGS_ALL,
+  FILTER_STORAGE_PATH,
+} from 'src/app/data/filter-rule-type'
 import { SavedView } from 'src/app/data/saved-view'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
@@ -31,6 +37,10 @@ import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { CustomFieldDataType } from 'src/app/data/custom-field'
+import { CustomFieldDisplayComponent } from 'src/app/components/common/custom-field-display/custom-field-display.component'
+import { DisplayMode, DisplayField } from 'src/app/data/document'

 const savedView: SavedView = {
  id: 1,
@@ -45,17 +55,53 @@ const savedView: SavedView = {
      value: '1,2',
    },
  ],
+  page_size: 20,
+  display_mode: DisplayMode.TABLE,
+  display_fields: [
+    DisplayField.CREATED,
+    DisplayField.TITLE,
+    DisplayField.TAGS,
+    DisplayField.CORRESPONDENT,
+    DisplayField.DOCUMENT_TYPE,
+    DisplayField.STORAGE_PATH,
+    `${DisplayField.CUSTOM_FIELD}11` as any,
+    `${DisplayField.CUSTOM_FIELD}15` as any,
+  ],
 }

 const documentResults = [
  {
    id: 2,
    title: 'doc2',
+    custom_fields: [
+      { id: 1, field: 11, created: new Date(), value: 'custom', document: 2 },
+    ],
  },
  {
    id: 3,
    title: 'doc3',
    correspondent: 0,
+    custom_fields: [],
+  },
+  {
+    id: 4,
+    title: 'doc4',
+    custom_fields: [
+      { id: 32, field: 3, created: new Date(), value: 'EUR123', document: 4 },
+    ],
+  },
+  {
+    id: 5,
+    title: 'doc5',
+    custom_fields: [
+      {
+        id: 22,
+        field: 15,
+        created: new Date(),
+        value: [123, 456, 789],
+        document: 5,
+      },
+    ],
  },
 ]

@@ -77,6 +123,7 @@ describe('SavedViewWidgetComponent', () => {
        DocumentTitlePipe,
        SafeUrlPipe,
        PreviewPopupComponent,
+        CustomFieldDisplayComponent,
      ],
      providers: [
        PermissionsGuard,
@@ -89,6 +136,33 @@ describe('SavedViewWidgetComponent', () => {
        },
        CustomDatePipe,
        DatePipe,
+        {
+          provide: CustomFieldsService,
+          useValue: {
+            listAll: () =>
+              of({
+                all: [3, 11, 15],
+                count: 3,
+                results: [
+                  {
+                    id: 3,
+                    name: 'Custom field 3',
+                    data_type: CustomFieldDataType.Monetary,
+                  },
+                  {
+                    id: 11,
+                    name: 'Custom Field 11',
+                    data_type: CustomFieldDataType.String,
+                  },
+                  {
+                    id: 15,
+                    name: 'Custom Field 15',
+                    data_type: CustomFieldDataType.DocumentLink,
+                  },
+                ],
+              }),
+          },
+        },
      ],
      imports: [
        HttpClientTestingModule,
@@ -170,7 +244,7 @@ describe('SavedViewWidgetComponent', () => {
    component.ngOnInit()
    expect(listAllSpy).toHaveBeenCalledWith(
      1,
-      10,
+      20,
      savedView.sort_field,
      savedView.sort_reverse,
      savedView.filter_rules,
@@ -204,11 +278,78 @@ describe('SavedViewWidgetComponent', () => {
    })
  })

+  it('should navigate to document', () => {
+    const routerSpy = jest.spyOn(router, 'navigate')
+    component.openDocumentDetail(documentResults[0])
+    expect(routerSpy).toHaveBeenCalledWith(['documents', documentResults[0].id])
+  })
+
  it('should navigate via quickfilter on click tag', () => {
    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.clickTag({ id: 11, name: 'Tag11' }, new MouseEvent('click'))
+    component.clickTag(11, new MouseEvent('click'))
    expect(qfSpy).toHaveBeenCalledWith([
      { rule_type: FILTER_HAS_TAGS_ALL, value: '11' },
    ])
+    component.clickTag(11) // coverage
+  })
+
+  it('should navigate via quickfilter on click correspondent', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.clickCorrespondent(11, new MouseEvent('click'))
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_CORRESPONDENT, value: '11' },
+    ])
+    component.clickCorrespondent(11) // coverage
+  })
+
+  it('should navigate via quickfilter on click doc type', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.clickDocType(11, new MouseEvent('click'))
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_DOCUMENT_TYPE, value: '11' },
+    ])
+    component.clickDocType(11) // coverage
+  })
+
+  it('should navigate via quickfilter on click storage path', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.clickStoragePath(11, new MouseEvent('click'))
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_STORAGE_PATH, value: '11' },
+    ])
+    component.clickStoragePath(11) // coverage
+  })
+
+  it('should navigate via quickfilter on click more like', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.clickMoreLike(11)
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_FULLTEXT_MORELIKE, value: '11' },
+    ])
+  })
+
+  it('should get correct column title', () => {
+    expect(component.getColumnTitle(DisplayField.TITLE)).toEqual('Title')
+    expect(component.getColumnTitle(DisplayField.CREATED)).toEqual('Created')
+    expect(component.getColumnTitle(DisplayField.ADDED)).toEqual('Added')
+    expect(component.getColumnTitle(DisplayField.TAGS)).toEqual('Tags')
+    expect(component.getColumnTitle(DisplayField.CORRESPONDENT)).toEqual(
+      'Correspondent'
+    )
+    expect(component.getColumnTitle(DisplayField.DOCUMENT_TYPE)).toEqual(
+      'Document type'
+    )
+    expect(component.getColumnTitle(DisplayField.STORAGE_PATH)).toEqual(
+      'Storage path'
+    )
+  })
+
+  it('should get correct column title for custom field', () => {
+    expect(
+      component.getColumnTitle((DisplayField.CUSTOM_FIELD + 11) as any)
+    ).toEqual('Custom Field 11')
+    expect(
+      component.getColumnTitle((DisplayField.CUSTOM_FIELD + 15) as any)
+    ).toEqual('Custom Field 15')
  })
 })
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -6,23 +6,38 @@ import {
  QueryList,
  ViewChildren,
 } from '@angular/core'
-import { Params, Router } from '@angular/router'
+import { Router } from '@angular/router'
 import { Subject, takeUntil } from 'rxjs'
-import { Document } from 'src/app/data/document'
+import {
+  DEFAULT_DASHBOARD_DISPLAY_FIELDS,
+  DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
+  DEFAULT_DISPLAY_FIELDS,
+  DisplayField,
+  DisplayMode,
+  Document,
+} from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { Tag } from 'src/app/data/tag'
 import {
  FILTER_CORRESPONDENT,
+  FILTER_DOCUMENT_TYPE,
+  FILTER_FULLTEXT_MORELIKE,
  FILTER_HAS_TAGS_ALL,
+  FILTER_STORAGE_PATH,
 } from 'src/app/data/filter-rule-type'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
-import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { SettingsService } from 'src/app/services/settings.service'

@Component({
  selector: 'pngx-saved-view-widget',
@@ -33,8 +48,14 @@ export class SavedViewWidgetComponent
  extends ComponentWithPermissions
  implements OnInit, OnDestroy
 {
+  public DisplayMode = DisplayMode
+  public DisplayField = DisplayField
+  public CustomFieldDataType = CustomFieldDataType
+
  loading: boolean = true

+  private customFields: CustomField[] = []
+
  constructor(
    private documentService: DocumentService,
    private router: Router,
@@ -42,7 +63,9 @@ export class SavedViewWidgetComponent
    private consumerStatusService: ConsumerStatusService,
    public openDocumentsService: OpenDocumentsService,
    public documentListViewService: DocumentListViewService,
-    public permissionsService: PermissionsService
+    public permissionsService: PermissionsService,
+    private settingsService: SettingsService,
+    private customFieldService: CustomFieldsService
  ) {
    super()
  }
@@ -60,14 +83,44 @@ export class SavedViewWidgetComponent
  mouseOnPreview = false
  popoverHidden = true

+  displayMode: DisplayMode
+
+  displayFields: DisplayField[] = DEFAULT_DASHBOARD_DISPLAY_FIELDS
+
  ngOnInit(): void {
    this.reload()
+    this.displayMode = this.savedView.display_mode ?? DisplayMode.TABLE
    this.consumerStatusService
      .onDocumentConsumptionFinished()
      .pipe(takeUntil(this.unsubscribeNotifier))
      .subscribe(() => {
        this.reload()
      })
+
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.CustomField
+      )
+    ) {
+      this.customFieldService
+        .listAll()
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe((customFields) => {
+          this.customFields = customFields.results
+        })
+    }
+
+    if (this.savedView.display_fields) {
+      this.displayFields = this.savedView.display_fields
+    }
+
+    // filter by perms etc
+    this.displayFields = this.displayFields.filter(
+      (field) =>
+        this.settingsService.allDisplayFields.find((f) => f.id === field) !==
+        undefined
+    )
  }

  ngOnDestroy(): void {
@@ -80,7 +133,7 @@ export class SavedViewWidgetComponent
    this.documentService
      .listFiltered(
        1,
-        10,
+        this.savedView.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
        this.savedView.sort_field,
        this.savedView.sort_reverse,
        this.savedView.filter_rules,
@@ -103,15 +156,52 @@ export class SavedViewWidgetComponent
    }
  }

-  clickTag(tag: Tag, event: MouseEvent) {
-    event.preventDefault()
-    event.stopImmediatePropagation()
+  clickTag(tagID: number, event: MouseEvent = null) {
+    event?.preventDefault()
+    event?.stopImmediatePropagation()

    this.list.quickFilter([
-      { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() },
+      { rule_type: FILTER_HAS_TAGS_ALL, value: tagID.toString() },
    ])
  }

+  clickCorrespondent(correspondentId: number, event: MouseEvent = null) {
+    event?.preventDefault()
+    event?.stopImmediatePropagation()
+
+    this.list.quickFilter([
+      { rule_type: FILTER_CORRESPONDENT, value: correspondentId.toString() },
+    ])
+  }
+
+  clickDocType(docTypeId: number, event: MouseEvent = null) {
+    event?.preventDefault()
+    event?.stopImmediatePropagation()
+
+    this.list.quickFilter([
+      { rule_type: FILTER_DOCUMENT_TYPE, value: docTypeId.toString() },
+    ])
+  }
+
+  clickStoragePath(storagePathId: number, event: MouseEvent = null) {
+    event?.preventDefault()
+    event?.stopImmediatePropagation()
+
+    this.list.quickFilter([
+      { rule_type: FILTER_STORAGE_PATH, value: storagePathId.toString() },
+    ])
+  }
+
+  clickMoreLike(documentID: number) {
+    this.list.quickFilter([
+      { rule_type: FILTER_FULLTEXT_MORELIKE, value: documentID.toString() },
+    ])
+  }
+
+  openDocumentDetail(document: Document) {
+    this.router.navigate(['documents', document.id])
+  }
+
  getPreviewUrl(document: Document): string {
    return this.documentService.getPreviewUrl(document.id)
  }
@@ -161,14 +251,11 @@ export class SavedViewWidgetComponent
    }, 300)
  }

-  getCorrespondentQueryParams(correspondentId: number): Params {
-    return correspondentId !== undefined
-      ? queryParamsFromFilterRules([
-          {
-            rule_type: FILTER_CORRESPONDENT,
-            value: correspondentId.toString(),
-          },
-        ])
-      : null
+  public getColumnTitle(field: DisplayField): string {
+    if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
+      const id = field.split('_')[2]
+      return this.customFields.find((f) => f.id === parseInt(id))?.name
+    }
+    return DEFAULT_DISPLAY_FIELDS.find((f) => f.id === field)?.name
  }
 }
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@@ -13,11 +13,11 @@
        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
        <div class="visually-hidden" i18n>Loading...</div>
      }
-      <ng-content select ="[header-buttons]"></ng-content>
+      <ng-content select="[header-buttons]"></ng-content>
    </div>

  </div>
  <div class="card-body text-dark">
-    <ng-content select ="[content]"></ng-content>
+    <ng-content select="[content]"></ng-content>
  </div>
 </div>