Fix: use update preview component for dashboard widget

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 914e781d4b602239e9f8c73b065abb39844a3914..61722b5ada3540838914b9a402ed00ce55cfe110 100644 (file)
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -2933,7 +2933,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
-          <context context-type="linenumber">79</context>
+          <context context-type="linenumber">74</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
@@ -5962,18 +5962,11 @@
           <context context-type="linenumber">336</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8911158217491828773" datatype="html">
-        <source>View Preview</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
-          <context context-type="linenumber">71</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="872092479747931526" datatype="html">
         <source>No documents</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
-          <context context-type="linenumber">121</context>
+          <context context-type="linenumber">116</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1069523139277190436" datatype="html">

diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-dialog.component.scss b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-dialog.component.scss
new file mode 100644 (file)
index 0000000..e69de29

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 42de9f3741516d37f44e14f5b1d9387d07aaebdf..2846e0d04f9569d802145e1226224bddd3672e0a 100644 (file)
--- 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
@@ -67,15 +67,10 @@
                   <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">
+                  <div class="btn-group position-absolute top-50 end-0 translate-middle-y" (mouseleave)="popupPreview.close()">
+                    <pngx-preview-popup [document]="doc" linkClasses="btn px-4 btn-dark border-dark-subtle" #popupPreview>
                       <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>
+                    </pngx-preview-popup>
                     <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>

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 ef36b08068af01358140eed2747dc7147fa0b11b..b4958b9b9c4a2c7a3810d50f915d35f0d5fe2fd4 100644 (file)
--- 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
@@ -202,39 +202,12 @@ describe('SavedViewWidgetComponent', () => {
     // preview + download buttons
     expect(
       fixture.debugElement.queryAll(By.css('td a.btn'))[0].attributes['href']
-    ).toEqual(component.getPreviewUrl(documentResults[0]))
+    ).toEqual(documentService.getPreviewUrl(documentResults[0].id))
     expect(
       fixture.debugElement.queryAll(By.css('td a.btn'))[1].attributes['href']
     ).toEqual(component.getDownloadUrl(documentResults[0]))
   })
 
-  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
-    jest.spyOn(documentService, 'listFiltered').mockReturnValue(
-      of({
-        all: [2, 3],
-        count: 2,
-        results: documentResults,
-      })
-    )
-    component.ngOnInit()
-    fixture.detectChanges()
-    component.mouseEnterPreviewButton(documentResults[0])
-    expect(component.popover.isOpen()).toBeTruthy()
-    expect(component.popoverHidden).toBeTruthy()
-    tick(600)
-    expect(component.popoverHidden).toBeFalsy()
-    component.maybeClosePopover()
-
-    component.mouseEnterPreviewButton(documentResults[1])
-    tick(100)
-    component.mouseLeavePreviewButton()
-    component.mouseEnterPreview()
-    expect(component.popover.isOpen()).toBeTruthy()
-    component.mouseLeavePreview()
-    tick(600)
-    expect(component.popover.isOpen()).toBeFalsy()
-  }))
-
   it('should call api endpoint and load results', () => {
     const listAllSpy = jest.spyOn(documentService, 'listFiltered')
     listAllSpy.mockReturnValue(

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 4765319471cc9ea3e4b7a0e0fdfc4f56dec9821e..f788726d044d6415d417ccc3864b11a6eeb37bc1 100644 (file)
--- 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
@@ -202,55 +202,10 @@ export class SavedViewWidgetComponent
     this.router.navigate(['documents', document.id])
   }
 
-  getPreviewUrl(document: Document): string {
-    return this.documentService.getPreviewUrl(document.id)
-  }
-
   getDownloadUrl(document: Document): string {
     return this.documentService.getDownloadUrl(document.id)
   }
 
-  mouseEnterPreviewButton(doc: Document) {
-    const newPopover = this.popovers.get(this.documents.indexOf(doc))
-    if (this.popover !== newPopover && this.popover?.isOpen())
-      this.popover.close()
-    this.popover = newPopover
-    this.mouseOnPreview = true
-    if (!this.popover.isOpen()) {
-      // we're going to open but hide to pre-load content during hover delay
-      this.popover.open()
-      this.popoverHidden = true
-      setTimeout(() => {
-        if (this.mouseOnPreview) {
-          // show popover
-          this.popoverHidden = false
-        } else {
-          this.popover.close()
-        }
-      }, 600)
-    }
-  }
-
-  mouseEnterPreview() {
-    this.mouseOnPreview = true
-  }
-
-  mouseLeavePreview() {
-    this.mouseOnPreview = false
-    this.maybeClosePopover()
-  }
-
-  mouseLeavePreviewButton() {
-    this.mouseOnPreview = false
-    this.maybeClosePopover()
-  }
-
-  maybeClosePopover() {
-    setTimeout(() => {
-      if (!this.mouseOnPreview) this.popover?.close()
-    }, 300)
-  }
-
   public getColumnTitle(field: DisplayField): string {
     if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
       const id = field.split('_')[2]