From 0c469f731d8b2342fd9a330d209f3c05af580710 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:31:16 -0800 Subject: [PATCH] Enhancement: homepage skeleton screens --- .../dashboard/dashboard.component.html | 15 +- .../saved-view-widget.component.html | 123 +++++----- .../saved-view-widget.component.scss | 14 ++ .../saved-view-widget.component.ts | 17 +- .../statistics-widget.component.html | 82 +++++-- .../widget-frame/widget-frame.component.html | 2 +- .../widget-frame/widget-frame.component.scss | 9 + .../widget-frame.component.spec.ts | 7 + .../widget-frame/widget-frame.component.ts | 12 +- .../document-card-large.component.html | 121 ++++++---- .../document-card-small.component.html | 215 ++++++++++-------- src-ui/src/theme.scss | 26 ++- 12 files changed, 402 insertions(+), 241 deletions(-) diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index 4b217f8c3..27f19475c 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -11,8 +11,19 @@ > @if (savedViewService.loading) {
- - Loading... +
+
+
+
+
+ +
+
+
+
+
+
 
+
} 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 2846e0d04..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 } - @if (documents.length && displayMode === DisplayMode.TABLE) { - +
+ @if (displayMode === DisplayMode.TABLE) { +
@for (field of displayFields; track field; let i = $index) { @@ -28,53 +29,59 @@ - @for (doc of documents; track doc.id) { + @for (doc of documents; track doc.id; let i = $index) { - @for (field of displayFields; track field; let i = $index) { - } @@ -82,13 +89,14 @@ }
- @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) { - - } - } - @case (DisplayField.DOCUMENT_TYPE) { - @if (doc.document_type) { - {{(doc.document_type$ | async)?.name}} - } - } - @case (DisplayField.STORAGE_PATH) { - @if (doc.storage_path) { - {{(doc.storage_path$ | async)?.name}} - } - } - } - @if (field.startsWith(DisplayField.CUSTOM_FIELD)) { - - } - @if (i === displayFields.length - 1) { -
- - - - - - + @for (field of displayFields; track field; let j = $index) { +
+ @if (loading && reveal) { +
+
+ } @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) { + + } + } + @case (DisplayField.DOCUMENT_TYPE) { + @if (doc.document_type) { + {{(doc.document_type$ | async)?.name}} + } + } + @case (DisplayField.STORAGE_PATH) { + @if (doc.storage_path) { + {{(doc.storage_path$ | async)?.name}} + } + } + } + @if (field.startsWith(DisplayField.CUSTOM_FIELD)) { + + } + @if (j === displayFields.length - 1) { +
+ + + + + + +
+ } }
- } @else if (documents.length && displayMode === DisplayMode.SMALL_CARDS) { -
- @for (d of documents; track d.id) { + } @else if (displayMode === DisplayMode.SMALL_CARDS) { +
+ @for (d of documents; track d.id; let i = $index) { }
- } @else if (documents.length && displayMode === DisplayMode.LARGE_CARDS) { -
- @for (d of documents; track d.id) { + } @else if (displayMode === DisplayMode.LARGE_CARDS) { +
+ @for (d of documents; track d.id; let i = $index) { } @else { -

No documents

+

No documents

} - +
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.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts index f788726d0..74c3af520 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[] = [] @@ -133,16 +134,22 @@ export class SavedViewWidgetComponent this.documentService .listFiltered( 1, - this.savedView.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE, + 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 }) } 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 d89fc972c..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,25 +1,49 @@ -
- @if (statistics?.documents_inbox !== null) { - - Documents in inbox: - {{statistics?.documents_inbox}} - - } - - Total documents: - {{statistics?.documents_total}} - -
- Total characters: - {{statistics?.character_count | number}} -
- @if (statistics?.current_asn) { -
- Current ASN: - {{statistics?.current_asn}} +
+ @if (loading) { +
+
+  
+
+
+   +
+
+
+   +
+
+
+   +
+
+
+
+
+
+ } @else { + @if (statistics?.documents_inbox !== null) { + + Documents in inbox: + {{statistics?.documents_inbox}} + + } + + Total documents: + {{statistics?.documents_total}} + +
+ Total characters: + {{statistics?.character_count | number}} +
+ @if (statistics?.current_asn) { +
+ Current ASN: + {{statistics?.current_asn}} +
+ } } @if (statistics?.document_file_type_counts?.length > 1) {
@@ -59,6 +83,11 @@
+ @if (loading) { +
+ +
+ } @if (statistics?.tag_count > 0) { Tags: @@ -67,6 +96,11 @@ } + @if (loading) { +
+ +
+ } @if (statistics?.correspondent_count > 0) { Correspondents: @@ -75,6 +109,11 @@ } + @if (loading) { +
+ +
+ } @if (statistics?.document_type_count > 0) { Document Types: @@ -83,6 +122,11 @@ } + @if (loading) { +
+ +
+ } @if (statistics?.storage_path_count > 0) { Storage Paths: 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 34557be31..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,70 +1,92 @@ -
+
- + @if (document) { + -
-
- - +
+
+ + +
-
+ } @else { +
+ }
-
- @if (displayFields.includes(DisplayField.CORRESPONDENT) && document.correspondent) { - @if (clickCorrespondent.observers.length ) { - {{(document.correspondent$ | async)?.name}} - } @else { - {{(document.correspondent$ | async)?.name}} +
+ @if (document) { + @if (displayFields.includes(DisplayField.CORRESPONDENT) && document.correspondent) { + @if (clickCorrespondent.observers.length ) { + {{(document.correspondent$ | async)?.name}} + } @else { + {{(document.correspondent$ | async)?.name}} + } + @if (displayFields.includes(DisplayField.TITLE)) {:} } - @if (displayFields.includes(DisplayField.TITLE)) {:} - } - @if (displayFields.includes(DisplayField.TITLE)) { - {{document.title | documentTitle}} - } - @if (displayFields.includes(DisplayField.TAGS)) { - @for (t of document.tags$ | async; track t) { - + @if (displayFields.includes(DisplayField.TITLE)) { + {{document.title | documentTitle}} } + @if (displayFields.includes(DisplayField.TAGS)) { + @for (t of document.tags$ | async; track t) { + + } + } + } @else { +
 
}

- @if (document.__search_hit__ && document.__search_hit__.highlights) { - - } - @for (highlight of searchNoteHighlights; track highlight) { - - - - - } - @if (!document.__search_hit__?.score) { - {{contentTrimmed}} + @if (document) { + @if (document.__search_hit__ && document.__search_hit__.highlights) { + + } + @for (highlight of searchNoteHighlights; track highlight) { + + + + + } + @if (!document.__search_hit__?.score) { + {{contentTrimmed}} + } + } @else { +

+
+
}

- -  More like this - - -  Open - - -  View - - -  Download + @if (document) { + +  More like this -
+ +  Open + + +  View + + +  Download + + } @else { +
 
+
 
+
 
+
 
+ } +
-
+
+ @if (document) { @if (displayFields.includes(DisplayField.NOTES) && notesEnabled && document.notes.length) {
} } -
+ } @else { +
 
+
 
+
 
+
 
+
 
+ }
+
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 60713ef02..7b1b9bc93 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,16 +1,20 @@
-
+
- + @if (document) { + -
-
- - +
+
+ + +
-
+ } @else { +
+ } - @if (displayFields?.includes(DisplayField.TAGS)) { + @if (document && displayFields?.includes(DisplayField.TAGS)) {
@for (t of getTagsLimited$() | async; track t) { @@ -24,7 +28,7 @@ }
- @if (displayFields.includes(DisplayField.NOTES) && notesEnabled && document.notes.length) { + @if (document && displayFields.includes(DisplayField.NOTES) && notesEnabled && document.notes.length) { @@ -34,107 +38,122 @@

- @if (displayFields.includes(DisplayField.CORRESPONDENT) && document.correspondent) { - {{(document.correspondent$ | async)?.name ?? privateName}} - @if (displayFields.includes(DisplayField.TITLE)) {:} - } - @if (displayFields.includes(DisplayField.TITLE)) { - {{document.title | documentTitle}} + @if (document) { + @if (displayFields.includes(DisplayField.CORRESPONDENT) && document.correspondent) { + {{(document.correspondent$ | async)?.name ?? privateName}} + @if (displayFields.includes(DisplayField.TITLE)) {:} + } + @if (displayFields.includes(DisplayField.TITLE)) { + {{document.title | documentTitle}} + } + } @else { +

+
}

- @if (displayFields.includes(DisplayField.DOCUMENT_TYPE) && document.document_type) { - - } - @if (displayFields.includes(DisplayField.STORAGE_PATH) && document.storage_path) { - - } - @if (displayFields.includes(DisplayField.CREATED)) { -
- -
- Created: {{ document.created_date | customDate }} - Added: {{ document.added | customDate }} - Modified: {{ document.modified | customDate }} + @if (document) { + @if (displayFields.includes(DisplayField.DOCUMENT_TYPE) && document.document_type) { + + } + @if (displayFields.includes(DisplayField.STORAGE_PATH) && document.storage_path) { + + } + @if (displayFields.includes(DisplayField.CREATED)) { +
+ +
+ Created: {{ document.created_date | customDate }} + Added: {{ document.added | customDate }} + Modified: {{ document.modified | customDate }} +
+ +
+ + {{document.created_date | customDate:'mediumDate'}}
- -
- - {{document.created_date | customDate:'mediumDate'}} -
-
- } - @if (displayFields.includes(DisplayField.ADDED)) { -
- -
- Created: {{ document.created | customDate }} - Added: {{ document.added | customDate }} - Modified: {{ document.modified | customDate }} -
- -
- - {{document.added | customDate:'mediumDate'}} -
-
- } - @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) { -
-
- - {document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}} -
-
- } - @if (displayFields.includes(DisplayField.ASN) && document.archive_serial_number | isNumber) { -
- - #{{document.archive_serial_number}} -
- } - @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) { -
- - {{document.owner | username}} -
- } - @if (displayFields.includes(DisplayField.SHARED) && document.is_shared_by_requester) { -
- - Shared -
- } - @for (field of document.custom_fields; track field.field) { - @if (displayFields.includes(DisplayField.CUSTOM_FIELD + field.field)) { -
- -
} + @if (displayFields.includes(DisplayField.ADDED)) { +
+ +
+ Created: {{ document.created | customDate }} + Added: {{ document.added | customDate }} + Modified: {{ document.modified | customDate }} +
+ +
+ + {{document.added | customDate:'mediumDate'}} +
+
+ } + @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) { +
+
+ + {document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}} +
+
+ } + @if (displayFields.includes(DisplayField.ASN) && document.archive_serial_number | isNumber) { +
+ + #{{document.archive_serial_number}} +
+ } + @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) { +
+ + {{document.owner | username}} +
+ } + @if (displayFields.includes(DisplayField.SHARED) && document.is_shared_by_requester) { +
+ + Shared +
+ } + @for (field of document.custom_fields; track field.field) { + @if (displayFields.includes(DisplayField.CUSTOM_FIELD + field.field)) { +
+ + +
+ } + } + } @else { +
}
- - - - - - - - - + @if (document) { + + + + + + + + + + } @else { + + + + }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss index 228d78f04..91b045dbc 100644 --- a/src-ui/src/theme.scss +++ b/src-ui/src/theme.scss @@ -203,19 +203,23 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,