From ffae52c9acc849d8f65a911feb1f5958825d4e3f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 18 Apr 2024 09:37:17 -0700
Subject: [PATCH] Support large cards display mode

---
 .../admin/settings/settings.component.html        |  3 ++-
 .../saved-view-widget.component.html              | 15 +++++++++++++++
 .../saved-view-widget.component.spec.ts           |  9 +++++++++
 .../saved-view-widget.component.ts                |  7 +++++++
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index d43a6239f..423890121 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -360,7 +360,8 @@
                       <label class="form-label" for="display_mode_{{view.id}}" i18n>Widget display</label>
                       <select class="form-select" formControlName="display_mode">
                         <option [ngValue]="DashboardViewMode.TABLE" i18n>Table</option>
-                        <option [ngValue]="DashboardViewMode.SMALL_CARDS" i18n>Cards</option>
+                        <option [ngValue]="DashboardViewMode.SMALL_CARDS" i18n>Small Cards</option>
+                        <option [ngValue]="DashboardViewMode.LARGE_CARDS" i18n>Large Cards</option>
                       </select>
                     </div>
                   }
diff --git 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
index ace55df43..01c3d5b80 100644
--- 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
@@ -104,6 +104,21 @@
         </pngx-document-card-small>
       }
     </div>
+  } @else if (documents.length && savedView.display_mode === DashboardViewMode.LARGE_CARDS) {
+    <div class="row my-n2">
+      @for (d of documents; track d.id) {
+        <pngx-document-card-large
+          (dblClickDocument)="openDocumentDetail(d)"
+          [document]="d"
+          [displayFields]="activeDisplayFields"
+          (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>
   }
diff --git 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
index f41f1942c..3e9dfdf9f 100644
--- 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
@@ -14,6 +14,7 @@ import { routes } from 'src/app/app-routing.module'
 import {
   FILTER_CORRESPONDENT,
   FILTER_DOCUMENT_TYPE,
+  FILTER_FULLTEXT_MORELIKE,
   FILTER_HAS_TAGS_ALL,
   FILTER_STORAGE_PATH,
 } from 'src/app/data/filter-rule-type'
@@ -322,6 +323,14 @@ describe('SavedViewWidgetComponent', () => {
     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(DocumentDisplayField.TITLE)).toEqual(
       'Title'
diff --git 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
index 3808ffbdb..89d0c4d19 100644
--- 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
@@ -21,6 +21,7 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import {
   FILTER_CORRESPONDENT,
   FILTER_DOCUMENT_TYPE,
+  FILTER_FULLTEXT_MORELIKE,
   FILTER_HAS_TAGS_ALL,
   FILTER_STORAGE_PATH,
 } from 'src/app/data/filter-rule-type'
@@ -193,6 +194,12 @@ export class SavedViewWidgetComponent
     ])
   }
 
+  clickMoreLike(documentID: number) {
+    this.list.quickFilter([
+      { rule_type: FILTER_FULLTEXT_MORELIKE, value: documentID.toString() },
+    ])
+  }
+
   openDocumentDetail(document: Document) {
     this.router.navigate(['documents', document.id])
   }