diff --git a/src-ui/src/app/components/admin/trash/trash.component.scss b/src-ui/src/app/components/admin/trash/trash.component.scss
index e69de29bb..648aa7f4d 100644
--- a/src-ui/src/app/components/admin/trash/trash.component.scss
+++ b/src-ui/src/app/components/admin/trash/trash.component.scss
@@ -0,0 +1,8 @@
+.data-row {
+ opacity: 0;
+ transition: opacity .2s;
+}
+
+.reveal {
+ opacity: 1;
+}
diff --git a/src-ui/src/app/components/admin/trash/trash.component.spec.ts b/src-ui/src/app/components/admin/trash/trash.component.spec.ts
index 9ac89d9a5..066311726 100644
--- a/src-ui/src/app/components/admin/trash/trash.component.spec.ts
+++ b/src-ui/src/app/components/admin/trash/trash.component.spec.ts
@@ -69,6 +69,7 @@ describe('TrashComponent', () => {
})
it('should call correct service method on reload', () => {
+ jest.useFakeTimers()
const trashSpy = jest.spyOn(trashService, 'getTrash')
trashSpy.mockReturnValue(
of({
@@ -78,6 +79,7 @@ describe('TrashComponent', () => {
})
)
component.reload()
+ jest.advanceTimersByTime(100)
expect(trashSpy).toHaveBeenCalled()
expect(component.documentsInTrash).toEqual(documentsInTrash)
})
diff --git a/src-ui/src/app/components/admin/trash/trash.component.ts b/src-ui/src/app/components/admin/trash/trash.component.ts
index 9364d4cce..055c5fa97 100644
--- a/src-ui/src/app/components/admin/trash/trash.component.ts
+++ b/src-ui/src/app/components/admin/trash/trash.component.ts
@@ -4,7 +4,7 @@ import { Document } from 'src/app/data/document'
import { ToastService } from 'src/app/services/toast.service'
import { TrashService } from 'src/app/services/trash.service'
import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { Subject, takeUntil } from 'rxjs'
+import { delay, Subject, takeUntil, tap } from 'rxjs'
import { SettingsService } from 'src/app/services/settings.service'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
import { Router } from '@angular/router'
@@ -21,6 +21,7 @@ export class TrashComponent implements OnDestroy {
public page: number = 1
public totalDocuments: number
public isLoading: boolean = false
+ public reveal: boolean = false
unsubscribeNotifier: Subject = new Subject()
constructor(
@@ -40,12 +41,20 @@ export class TrashComponent implements OnDestroy {
reload() {
this.isLoading = true
- this.trashService.getTrash(this.page).subscribe((r) => {
- this.documentsInTrash = r.results
- this.totalDocuments = r.count
- this.isLoading = false
- this.selectedDocuments.clear()
- })
+ this.trashService
+ .getTrash(this.page)
+ .pipe(
+ tap((r) => {
+ this.documentsInTrash = r.results
+ this.totalDocuments = r.count
+ this.selectedDocuments.clear()
+ }),
+ delay(100)
+ )
+ .subscribe(() => {
+ this.reveal = true
+ this.isLoading = false
+ })
}
delete(document: Document) {
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
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/common/input/switch/switch.component.spec.ts b/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
index 372bfd8ab..790330955 100644
--- a/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
+++ b/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
@@ -38,8 +38,10 @@ describe('SwitchComponent', () => {
expect(component.value).toBeFalsy()
})
- it('should show note if unset', () => {
+ it('should correctly report unset', () => {
component.value = null
expect(component.isUnset).toBeTruthy()
+ component.value = undefined
+ expect(component.isUnset).toBeTruthy()
})
})
diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html
index 4d6ae03b9..5e0db4b2f 100644
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
@@ -18,7 +18,7 @@
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 98dc94f16..2cce1a848 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
@@ -9,8 +9,9 @@
Show all
}
+ Loading...
+
@if (displayMode === DisplayMode.TABLE) {
-
+
} @else if (displayMode === DisplayMode.SMALL_CARDS) {
-
|
-
-
-
- |
- }
- |
|
- @switch (field) {
- @case (DisplayField.ADDED) {
- {{doc.added | customDate}}
- }
- @case (DisplayField.CREATED) {
- {{doc.created_date | customDate}}
- }
- @case (DisplayField.TITLE) {
- {{doc.title | documentTitle}}
- }
- @case (DisplayField.CORRESPONDENT) {
- @if (doc.correspondent) {
- {{(doc.correspondent$ | async)?.name}}
- }
- }
- @case (DisplayField.TAGS) {
- @for (t of doc.tags$ | async; track t) {
-
-
-
+ @if (loading && reveal) {
+ |
}
@@ -101,17 +90,13 @@
+
+ } @else {
+ @switch (field) {
+ @case (DisplayField.ADDED) {
+ {{doc.added | customDate}}
+ }
+ @case (DisplayField.CREATED) {
+ {{doc.created_date | customDate}}
+ }
+ @case (DisplayField.TITLE) {
+ {{doc.title | documentTitle}}
+ }
+ @case (DisplayField.CORRESPONDENT) {
+ @if (doc.correspondent) {
+ {{(doc.correspondent$ | async)?.name}}
+ }
+ }
+ @case (DisplayField.TAGS) {
+ @for (t of doc.tags$ | async; track t) {
+
+
+ }
}
|
- @if (loading) {
- @for (i of [].constructor(pageSize); track i) {
-
+ @for (d of documents; track d.id; let i = $index) {
} @else if (displayMode === DisplayMode.LARGE_CARDS) {
-
- @if (loading) {
- @for (i of [].constructor(pageSize); track i) {
-
-
+ @for (d of documents; track d.id; let i = $index) {
} @else {
-
diff --git 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
index 8c445f18e..54156b448 100644
--- 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
@@ -1,3 +1,17 @@
+.wrapper {
+ transition: all .3s ease-out;
+ overflow: hidden;
+ max-height: 0;
+ opacity: .1;
+ width: 100%;
+}
+
+.reveal {
+ max-height: 1000px;
+ opacity: 1;
+ overflow: visible;
+}
+
table {
overflow-wrap: anywhere;
table-layout: fixed;
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 ef36b0806..aa82cf765 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
@@ -187,7 +187,7 @@ describe('SavedViewWidgetComponent', () => {
fixture.detectChanges()
})
- it('should show a list of documents', () => {
+ it('should show a list of documents', fakeAsync(() => {
jest.spyOn(documentService, 'listFiltered').mockReturnValue(
of({
all: [2, 3],
@@ -196,43 +196,17 @@ describe('SavedViewWidgetComponent', () => {
})
)
component.ngOnInit()
+ tick(500)
fixture.detectChanges()
expect(fixture.debugElement.nativeElement.textContent).toContain('doc2')
expect(fixture.debugElement.nativeElement.textContent).toContain('doc3')
// 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', () => {
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 7531a7615..fe12d879c 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
@@ -7,7 +7,7 @@ import {
ViewChildren,
} from '@angular/core'
import { Router } from '@angular/router'
-import { Subject, takeUntil } from 'rxjs'
+import { delay, Subject, takeUntil, tap } from 'rxjs'
import {
DEFAULT_DASHBOARD_DISPLAY_FIELDS,
DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
@@ -52,7 +52,8 @@ export class SavedViewWidgetComponent
public DisplayField = DisplayField
public CustomFieldDataType = CustomFieldDataType
- loading: boolean = true
+ public loading: boolean = true
+ public reveal: boolean = false
private customFields: CustomField[] = []
@@ -137,16 +138,22 @@ export class SavedViewWidgetComponent
this.documentService
.listFiltered(
1,
- this.pageSize,
+ this.savedView?.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
this.savedView.sort_field,
this.savedView.sort_reverse,
this.savedView.filter_rules,
{ truncate_content: true }
)
- .pipe(takeUntil(this.unsubscribeNotifier))
+ .pipe(
+ takeUntil(this.unsubscribeNotifier),
+ tap((result) => {
+ this.reveal = true
+ this.documents = result.results
+ }),
+ delay(500)
+ )
.subscribe((result) => {
this.loading = false
- this.documents = result.results
})
}
@@ -206,55 +213,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]
diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
index ba318b8e2..718edf4ea 100644
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
@@ -1,6 +1,6 @@
No documents
+No documents
} - +
+
@if (loading) {
@@ -18,7 +18,7 @@
-
+
diff --git 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
index b64d5e567..5f0091dc5 100644
--- 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
@@ -1,4 +1,4 @@
-
+
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
index 4efdb0876..521a97c6b 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
@@ -1,3 +1,12 @@
i-bs {
cursor: move;
}
+
+.card {
+ opacity: 0;
+ transition: opacity .2s;
+}
+
+.reveal {
+ opacity: 1;
+}
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
index c4e27ecc7..cfd7edb3d 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
@@ -35,6 +35,7 @@ describe('WidgetFrameComponent', () => {
fixture = TestBed.createComponent(WidgetFrameComponent)
component = fixture.componentInstance
+ jest.useFakeTimers()
fixture.detectChanges()
})
@@ -51,4 +52,10 @@ describe('WidgetFrameComponent', () => {
fixture.detectChanges()
expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
})
+
+ it('should reveal', () => {
+ expect(component.reveal).toBeFalsy()
+ jest.advanceTimersByTime(100)
+ expect(component.reveal).toBeTruthy()
+ })
})
diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
index a710a6a9d..2a141be7c 100644
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core'
+import { AfterViewInit, Component, Input } from '@angular/core'
@Component({
selector: 'pngx-widget-frame',
templateUrl: './widget-frame.component.html',
styleUrls: ['./widget-frame.component.scss'],
})
-export class WidgetFrameComponent {
+export class WidgetFrameComponent implements AfterViewInit {
constructor() {}
@Input()
@@ -16,4 +16,12 @@ export class WidgetFrameComponent {
@Input()
draggable: any
+
+ public reveal: boolean = false
+
+ ngAfterViewInit(): void {
+ setTimeout(() => {
+ this.reveal = true
+ }, 100)
+ }
}
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 90606fc0d..810fea029 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,4 +1,4 @@
-
+
@if (document) {
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
index 95b12d7ec..8905d3ff2 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -120,4 +120,12 @@ describe('DocumentCardLargeComponent', () => {
expect(fixture.nativeElement.textContent).toContain('bananas')
expect(component.searchNoteHighlights).toContain('bananas')
})
+
+ it('should try to close the preview on mouse leave', () => {
+ component.popupPreview = {
+ close: jest.fn(),
+ } as any
+ component.mouseLeaveCard()
+ expect(component.popupPreview.close).toHaveBeenCalled()
+ })
})
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
index 99597ca5a..d33cef9f3 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -108,12 +108,8 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
return this.documentService.getDownloadUrl(this.document.id)
}
- get previewUrl() {
- return this.documentService.getPreviewUrl(this.document.id)
- }
-
mouseLeaveCard() {
- this.popupPreview.close()
+ this.popupPreview?.close()
}
get contentTrimmed() {
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 287b41463..cc44235ab 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,5 +1,5 @@
-
-
+
+
@if (document) {
![]()
@@ -14,7 +14,7 @@
}
- @if (displayFields?.includes(DisplayField.TAGS) && document) {
+ @if (document && displayFields?.includes(DisplayField.TAGS)) {