From eb1eab1dfc60ae35d85a3a79b6548216f144ff3e Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Thu, 18 Apr 2024 23:45:04 -0700 Subject: [PATCH] Customizable documents view Fix --- src-ui/messages.xlf | 317 ++++++++++-------- .../admin/settings/settings.component.html | 24 +- .../admin/settings/settings.component.ts | 1 - .../saved-view-widget.component.html | 4 +- .../saved-view-widget.component.ts | 7 +- .../document-card-large.component.html | 42 +-- .../document-card-large.component.ts | 4 +- .../document-card-small.component.html | 24 +- .../document-card-small.component.ts | 4 +- .../document-list.component.html | 56 ++-- .../document-list.component.scss | 4 + .../document-list.component.spec.ts | 101 +++--- .../document-list/document-list.component.ts | 71 ++-- .../document-list-view.service.spec.ts | 74 +++- .../services/document-list-view.service.ts | 82 ++++- 15 files changed, 468 insertions(+), 347 deletions(-) diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index 9f8aef84f..34533547b 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -462,7 +462,7 @@ src/app/components/admin/settings/settings.component.html - 396 + 395 src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html @@ -604,7 +604,7 @@ src/app/components/admin/settings/settings.component.html - 384 + 383 src/app/components/admin/tasks/tasks.component.html @@ -644,7 +644,7 @@ src/app/components/document-list/document-list.component.html - 93 + 109 src/app/components/manage/mail/mail.component.html @@ -947,7 +947,11 @@ src/app/components/document-list/document-list.component.html - 175 + 206 + + + src/app/data/saved-view.ts + 58 src/app/services/rest/document.service.ts @@ -1226,7 +1230,7 @@ src/app/components/document-list/document-list.component.html - 54 + 70 @@ -1425,29 +1429,36 @@ 38 - - Widget list limit + + Documents page size src/app/components/admin/settings/settings.component.html - 357 + 356 - - Widget display + + Display as src/app/components/admin/settings/settings.component.html - 360 + 359 Table + + src/app/components/admin/settings/settings.component.html + 361 + + + + Small Cards src/app/components/admin/settings/settings.component.html 362 - - Cards + + Large Cards src/app/components/admin/settings/settings.component.html 363 @@ -1459,19 +1470,23 @@ src/app/components/admin/settings/settings.component.html 367 + + src/app/components/document-list/document-list.component.html + 17 + No saved views defined. src/app/components/admin/settings/settings.component.html - 377 + 376 Cancel src/app/components/admin/settings/settings.component.html - 397 + 396 src/app/components/common/confirm-dialog/confirm-dialog.component.ts @@ -1556,7 +1571,7 @@ Error retrieving users src/app/components/admin/settings/settings.component.ts - 192 + 194 src/app/components/admin/users-groups/users-groups.component.ts @@ -1567,7 +1582,7 @@ Error retrieving groups src/app/components/admin/settings/settings.component.ts - 211 + 213 src/app/components/admin/users-groups/users-groups.component.ts @@ -1578,35 +1593,35 @@ Saved view "" deleted. src/app/components/admin/settings/settings.component.ts - 443 + 427 Settings were saved successfully. src/app/components/admin/settings/settings.component.ts - 569 + 552 Settings were saved successfully. Reload is required to apply some changes. src/app/components/admin/settings/settings.component.ts - 573 + 556 Reload now src/app/components/admin/settings/settings.component.ts - 574 + 557 An error occurred while saving settings. src/app/components/admin/settings/settings.component.ts - 584 + 567 src/app/components/app-frame/app-frame.component.ts @@ -1617,7 +1632,7 @@ Error while storing settings on server. src/app/components/admin/settings/settings.component.ts - 618 + 601 @@ -1769,7 +1784,7 @@ src/app/components/document-list/document-list.component.html - 201 + 233 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -1777,7 +1792,7 @@ src/app/data/saved-view.ts - 27 + 34 src/app/services/rest/document.service.ts @@ -2011,11 +2026,11 @@ src/app/components/document-list/document-card-large/document-card-large.component.html - 53 + 57 src/app/components/document-list/document-card-small/document-card-small.component.html - 91 + 108 src/app/components/manage/custom-fields/custom-fields.component.html @@ -2350,7 +2365,7 @@ src/app/components/document-list/document-list.component.ts - 99 + 129 src/app/components/manage/management-list/management-list.component.html @@ -2437,7 +2452,7 @@ src/app/data/saved-view.ts - 35 + 42 @@ -2720,6 +2735,25 @@ 28 + + View + + src/app/components/common/custom-field-display/custom-field-display.component.html + 15 + + + src/app/components/common/input/permissions/permissions-form/permissions-form.component.html + 34 + + + src/app/components/common/permissions-select/permissions-select.component.html + 10 + + + src/app/components/document-list/document-card-large/document-card-large.component.html + 62 + + Create New Field @@ -4170,25 +4204,6 @@ 26 - - View - - src/app/components/common/input/permissions/permissions-form/permissions-form.component.html - 34 - - - src/app/components/common/permissions-select/permissions-select.component.html - 10 - - - src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html - 81 - - - src/app/components/document-list/document-card-large/document-card-large.component.html - 58 - - Add item @@ -4213,7 +4228,7 @@ src/app/components/document-list/document-card-small/document-card-small.component.ts - 77 + 86 @@ -4899,14 +4914,14 @@ View Preview src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html - 94 + 72 Download src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html - 102 + 80 src/app/components/document-detail/document-detail.component.html @@ -4918,18 +4933,18 @@ src/app/components/document-list/document-card-large/document-card-large.component.html - 64 + 68 src/app/components/document-list/document-card-small/document-card-small.component.html - 102 + 119 No documents src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html - 121 + 123 @@ -5133,7 +5148,7 @@ src/app/components/document-list/document-card-large/document-card-large.component.html - 50 + 54 @@ -5191,7 +5206,7 @@ src/app/components/document-list/document-list.component.html - 160 + 188 src/app/components/document-list/filter-editor/filter-editor.component.ts @@ -5199,7 +5214,7 @@ src/app/data/saved-view.ts - 23 + 30 src/app/services/rest/document.service.ts @@ -5232,7 +5247,7 @@ src/app/components/document-list/document-list.component.html - 151 + 179 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -5240,7 +5255,7 @@ src/app/data/saved-view.ts - 39 + 46 src/app/services/rest/document.service.ts @@ -5259,7 +5274,7 @@ src/app/components/document-list/document-list.component.html - 184 + 215 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -5267,7 +5282,7 @@ src/app/data/saved-view.ts - 43 + 50 src/app/services/rest/document.service.ts @@ -5286,7 +5301,7 @@ src/app/components/document-list/document-list.component.html - 193 + 224 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -5294,7 +5309,7 @@ src/app/data/saved-view.ts - 47 + 54 @@ -5976,98 +5991,102 @@ src/app/components/document-list/document-list.component.html - 225 + 267 Filter by tag src/app/components/document-list/document-card-large/document-card-large.component.html - 28 + 31 src/app/components/document-list/document-list.component.html - 232 + 277 View notes src/app/components/document-list/document-card-large/document-card-large.component.html - 70 + 74 Notes src/app/components/document-list/document-card-large/document-card-large.component.html - 71 + 75 Filter by document type src/app/components/document-list/document-card-large/document-card-large.component.html - 75 + 79 src/app/components/document-list/document-list.component.html - 252 + 300 Filter by storage path src/app/components/document-list/document-card-large/document-card-large.component.html - 81 + 85 src/app/components/document-list/document-list.component.html - 259 + 307 Created: src/app/components/document-list/document-card-large/document-card-large.component.html - 93,94 + 98,99 src/app/components/document-list/document-card-small/document-card-small.component.html - 60,61 + 65,66 Added: src/app/components/document-list/document-card-large/document-card-large.component.html - 94,95 + 99,100 src/app/components/document-list/document-card-small/document-card-small.component.html - 61,62 + 66,67 Modified: src/app/components/document-list/document-card-large/document-card-large.component.html - 95,96 + 100,101 src/app/components/document-list/document-card-small/document-card-small.component.html - 62,63 + 67,68 Shared src/app/components/document-list/document-card-large/document-card-large.component.html - 108 + 121 src/app/components/document-list/document-card-small/document-card-small.component.html - 85 + 94 + + + src/app/data/saved-view.ts + 66 src/app/pipes/username.pipe.ts @@ -6078,35 +6097,35 @@ Score: src/app/components/document-list/document-card-large/document-card-large.component.html - 113 + 126 Toggle tag filter src/app/components/document-list/document-card-small/document-card-small.component.html - 15 + 16 Toggle correspondent filter src/app/components/document-list/document-card-small/document-card-small.component.html - 36 + 38 Toggle document type filter src/app/components/document-list/document-card-small/document-card-small.component.html - 44 + 48 Toggle storage path filter src/app/components/document-list/document-card-small/document-card-small.component.html - 51 + 55 @@ -6134,49 +6153,49 @@ Sort src/app/components/document-list/document-list.component.html - 30 + 46 Save "" src/app/components/document-list/document-list.component.html - 73 + 89 Save as... src/app/components/document-list/document-list.component.html - 76 + 92 {VAR_PLURAL, plural, =1 {Selected of one document} other {Selected of documents}} src/app/components/document-list/document-list.component.html - 96 + 112 {VAR_PLURAL, plural, =1 {One document} other { documents}} src/app/components/document-list/document-list.component.html - 100 + 116 (filtered) src/app/components/document-list/document-list.component.html - 102 + 118 Reset filters src/app/components/document-list/document-list.component.html - 107 + 123 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -6187,26 +6206,30 @@ Error while loading documents src/app/components/document-list/document-list.component.html - 123 + 139 Sort by ASN src/app/components/document-list/document-list.component.html - 139 + 166 ASN src/app/components/document-list/document-list.component.html - 143 + 170 src/app/components/document-list/filter-editor/filter-editor.component.ts 120 + + src/app/data/saved-view.ts + 70 + src/app/services/rest/document.service.ts 26 @@ -6216,28 +6239,32 @@ Sort by correspondent src/app/components/document-list/document-list.component.html - 147 + 175 Sort by title src/app/components/document-list/document-list.component.html - 155 + 184 Sort by owner src/app/components/document-list/document-list.component.html - 163 + 193 Owner src/app/components/document-list/document-list.component.html - 167 + 197 + + + src/app/data/saved-view.ts + 62 src/app/services/rest/document.service.ts @@ -6248,42 +6275,42 @@ Sort by notes src/app/components/document-list/document-list.component.html - 171 + 202 Sort by document type src/app/components/document-list/document-list.component.html - 180 + 211 Sort by storage path src/app/components/document-list/document-list.component.html - 189 + 220 Sort by created date src/app/components/document-list/document-list.component.html - 197 + 229 Sort by added date src/app/components/document-list/document-list.component.html - 204 + 238 Added src/app/components/document-list/document-list.component.html - 208 + 242 src/app/components/document-list/filter-editor/filter-editor.component.html @@ -6291,7 +6318,7 @@ src/app/data/saved-view.ts - 31 + 38 src/app/data/saved-view.ts @@ -6306,21 +6333,21 @@ Edit document src/app/components/document-list/document-list.component.html - 230 + 273 View "" saved successfully. src/app/components/document-list/document-list.component.ts - 209 + 250 View "" created successfully. src/app/components/document-list/document-list.component.ts - 250 + 291 @@ -7761,252 +7788,252 @@ English (US) src/app/services/settings.service.ts - 40 + 49 Afrikaans src/app/services/settings.service.ts - 46 + 55 Arabic src/app/services/settings.service.ts - 52 + 61 Belarusian src/app/services/settings.service.ts - 58 + 67 Bulgarian src/app/services/settings.service.ts - 64 + 73 Catalan src/app/services/settings.service.ts - 70 + 79 Czech src/app/services/settings.service.ts - 76 + 85 Danish src/app/services/settings.service.ts - 82 + 91 German src/app/services/settings.service.ts - 88 + 97 Greek src/app/services/settings.service.ts - 94 + 103 English (GB) src/app/services/settings.service.ts - 100 + 109 Spanish src/app/services/settings.service.ts - 106 + 115 Finnish src/app/services/settings.service.ts - 112 + 121 French src/app/services/settings.service.ts - 118 + 127 Hungarian src/app/services/settings.service.ts - 124 + 133 Italian src/app/services/settings.service.ts - 130 + 139 Japanese src/app/services/settings.service.ts - 136 + 145 Luxembourgish src/app/services/settings.service.ts - 142 + 151 Dutch src/app/services/settings.service.ts - 148 + 157 Norwegian src/app/services/settings.service.ts - 154 + 163 Polish src/app/services/settings.service.ts - 160 + 169 Portuguese (Brazil) src/app/services/settings.service.ts - 166 + 175 Portuguese src/app/services/settings.service.ts - 172 + 181 Romanian src/app/services/settings.service.ts - 178 + 187 Russian src/app/services/settings.service.ts - 184 + 193 Slovak src/app/services/settings.service.ts - 190 + 199 Slovenian src/app/services/settings.service.ts - 196 + 205 Serbian src/app/services/settings.service.ts - 202 + 211 Swedish src/app/services/settings.service.ts - 208 + 217 Turkish src/app/services/settings.service.ts - 214 + 223 Ukrainian src/app/services/settings.service.ts - 220 + 229 Chinese Simplified src/app/services/settings.service.ts - 226 + 235 ISO 8601 src/app/services/settings.service.ts - 234 + 243 Successfully completed one-time migratration of settings to the database! src/app/services/settings.service.ts - 477 + 513 Unable to migrate settings to the database, please try saving manually. src/app/services/settings.service.ts - 478 + 514 You can restart the tour from the settings page. src/app/services/settings.service.ts - 548 + 584 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 423890121..1bfddb847 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.html +++ b/src-ui/src/app/components/admin/settings/settings.component.html @@ -352,19 +352,17 @@
- @if (savedViewGroup.get(view.id.toString()).get('show_on_dashboard').value) { -
- -
-
- - -
- } +
+ +
+
+ + +
@if (documentDisplayFields) { } diff --git a/src-ui/src/app/components/admin/settings/settings.component.ts b/src-ui/src/app/components/admin/settings/settings.component.ts index 8a4be2761..3055a5cec 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.ts @@ -547,7 +547,6 @@ export class SettingsComponent .subscribe({ next: () => { this.store.next(this.settingsForm.value) - this.documentListViewService.updatePageSize() this.settings.updateAppearanceSettings() let savedToast: Toast = { content: $localize`Settings were saved successfully.`, 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 01c3d5b80..a01d86820 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 @@ -14,7 +14,7 @@ @for (column of savedView.document_display_fields; track column; let i = $index) { - @if (activeDisplayFields.has(column)) { + @if (activeDisplayFields.includes(column)) { @switch (column) { @case (DashboardViewTableColumn.ADDED) { 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 89d0c4d19..7a45d8aff 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 @@ -36,7 +36,6 @@ import { } 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 { Results } from 'src/app/data/results' @Component({ selector: 'pngx-saved-view-widget', @@ -81,11 +80,11 @@ export class SavedViewWidgetComponent mouseOnPreview = false popoverHidden = true - activeDisplayFields: Set = new Set([ + activeDisplayFields: DocumentDisplayField[] = [ DocumentDisplayField.TITLE, DocumentDisplayField.CREATED, DocumentDisplayField.ADDED, - ]) + ] ngOnInit(): void { this.reload() @@ -121,7 +120,7 @@ export class SavedViewWidgetComponent type && this.permissionsService.currentUserCan(PermissionAction.View, type) ) - this.activeDisplayFields.add(column) + this.activeDisplayFields.push(column) }) } 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 6e5565caa..7f172016a 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 @@ -15,7 +15,7 @@
- @if (displayFields.has(DocumentDisplayField.CORRESPONDENT) && document.correspondent) { + @if (displayFields.includes(DocumentDisplayField.CORRESPONDENT) && document.correspondent) { @if (clickCorrespondent.observers.length ) { {{(document.correspondent$ | async)?.name}} } @else { @@ -23,10 +23,10 @@ } : } - @if (displayFields.has(DocumentDisplayField.TITLE)) { + @if (displayFields.includes(DocumentDisplayField.TITLE)) { {{document.title | documentTitle}} } - @if (displayFields.has(DocumentDisplayField.TAGS)) { + @if (displayFields.includes(DocumentDisplayField.TAGS)) { @for (t of document.tags$ | async; track t) { } @@ -34,7 +34,7 @@

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

@@ -70,29 +70,29 @@
- @if (displayFields.has(DocumentDisplayField.NOTES) && notesEnabled && document.notes.length) { + @if (displayFields.includes(DocumentDisplayField.NOTES) && notesEnabled && document.notes.length) { } - @if (displayFields.has(DocumentDisplayField.DOCUMENT_TYPE) && document.document_type) { + @if (displayFields.includes(DocumentDisplayField.DOCUMENT_TYPE) && document.document_type) { } - @if (displayFields.has(DocumentDisplayField.STORAGE_PATH) && document.storage_path) { + @if (displayFields.includes(DocumentDisplayField.STORAGE_PATH) && document.storage_path) { } - @if (displayFields.has(DocumentDisplayField.ASN) && document.archive_serial_number | isNumber) { + @if (displayFields.includes(DocumentDisplayField.ASN) && document.archive_serial_number | isNumber) {
#{{document.archive_serial_number}}
} - @if (displayFields.has(DocumentDisplayField.CREATED) || displayFields.has(DocumentDisplayField.ADDED)) { + @if (displayFields.includes(DocumentDisplayField.CREATED) || displayFields.includes(DocumentDisplayField.ADDED)) {
Created: {{ document.created | customDate }} @@ -100,19 +100,23 @@ Modified: {{ document.modified | customDate }}
-
- - @if (displayFields.has(DocumentDisplayField.CREATED)) { {{document.created_date | customDate:'mediumDate'}} } - @else { {{document.added | customDate:'mediumDate'}} } - -
+ @if (displayFields.includes(DocumentDisplayField.CREATED)) { +
+ {{document.created_date | customDate:'mediumDate'}} +
+ } + @if (displayFields.includes(DocumentDisplayField.ADDED)) { +
+ {{document.added | customDate:'mediumDate'}} +
+ } } - @if (displayFields.has(DocumentDisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) { + @if (displayFields.includes(DocumentDisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
{{document.owner | username}}
} - @if (displayFields.has(DocumentDisplayField.SHARED) && document.is_shared_by_requester) { + @if (displayFields.includes(DocumentDisplayField.SHARED) && document.is_shared_by_requester) {
Shared
@@ -124,7 +128,7 @@
} @for (field of document.custom_fields; track field.id) { - @if (displayFields.has(DocumentDisplayField.CUSTOM_FIELD + field.field)) { + @if (displayFields.includes(DocumentDisplayField.CUSTOM_FIELD + field.field)) {
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 e15e52be5..4aac1da51 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 @@ -35,9 +35,7 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions { selected = false @Input() - displayFields: Set = new Set( - DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) - ) + displayFields: string[] = DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) @Output() toggleSelected = new EventEmitter() 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 5eb747c3e..f50c2e808 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 @@ -10,7 +10,7 @@
- @if (displayFields?.has(DocumentDisplayField.TAGS)) { + @if (displayFields?.includes(DocumentDisplayField.TAGS)) {
@for (t of getTagsLimited$() | async; track t) { @@ -24,7 +24,7 @@ }
- @if (displayFields.has(DocumentDisplayField.NOTES) && notesEnabled && document.notes.length) { + @if (displayFields.includes(DocumentDisplayField.NOTES) && notesEnabled && document.notes.length) { @@ -34,31 +34,31 @@

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

- @if (displayFields.has(DocumentDisplayField.DOCUMENT_TYPE) && document.document_type) { + @if (displayFields.includes(DocumentDisplayField.DOCUMENT_TYPE) && document.document_type) { } - @if (displayFields.has(DocumentDisplayField.STORAGE_PATH) && document.storage_path) { + @if (displayFields.includes(DocumentDisplayField.STORAGE_PATH) && document.storage_path) { } - @if (displayFields.has(DocumentDisplayField.CREATED) || displayFields.has(DocumentDisplayField.ADDED)) { + @if (displayFields.includes(DocumentDisplayField.CREATED) || displayFields.includes(DocumentDisplayField.ADDED)) {
@@ -70,32 +70,32 @@
- @if (displayFields.has(DocumentDisplayField.CREATED)) { {{document.created | customDate:'mediumDate'}} } + @if (displayFields.includes(DocumentDisplayField.CREATED)) { {{document.created | customDate:'mediumDate'}} } @else { {{document.added | customDate:'mediumDate'}} }
} - @if (displayFields.has(DocumentDisplayField.ASN) && document.archive_serial_number | isNumber) { + @if (displayFields.includes(DocumentDisplayField.ASN) && document.archive_serial_number | isNumber) {
#{{document.archive_serial_number}}
} - @if (displayFields.has(DocumentDisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) { + @if (displayFields.includes(DocumentDisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
{{document.owner | username}}
} - @if (displayFields.has(DocumentDisplayField.SHARED) && document.is_shared_by_requester) { + @if (displayFields.includes(DocumentDisplayField.SHARED) && document.is_shared_by_requester) {
Shared
} @for (field of document.custom_fields; track field.id) { - @if (displayFields.has(DocumentDisplayField.CUSTOM_FIELD + field.field)) { + @if (displayFields.includes(DocumentDisplayField.CUSTOM_FIELD + field.field)) {
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts index 385549c02..01fafa57a 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts @@ -42,9 +42,7 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions { document: Document @Input() - displayFields: Set = new Set( - DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) - ) + displayFields: string[] = DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) @Output() dblClickDocument = new EventEmitter() diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html index 1d8a30d39..677be7a31 100644 --- a/src-ui/src/app/components/document-list/document-list.component.html +++ b/src-ui/src/app/components/document-list/document-list.component.html @@ -20,7 +20,7 @@
@for (field of settingsService.allDocumentDisplayFields; track field.id) {
- +
} @@ -28,15 +28,15 @@
- + - + - + @@ -57,7 +57,7 @@
@for (f of getSortFields(); track f) { - } @@ -125,7 +125,7 @@ }
@if (list.collectionSize) { - }
@@ -138,7 +138,7 @@ @if (list.error ) { } @else { - @if (displayMode === 'largeCards') { + @if (list.displayMode === DisplayMode.LARGE_CARDS) {
@for (d of list.documents; track trackByDocumentId($index, d)) { } - @if (displayMode === 'details' || displayMode === 'table') { + @if (list.displayMode === DisplayMode.TABLE) { - @if (activeDisplayFields.has(DocumentDisplayField.ASN)) { + @if (activeDisplayFields.includes(DocumentDisplayField.ASN)) { } - @if (activeDisplayFields.has(DocumentDisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) { + @if (activeDisplayFields.includes(DocumentDisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) { } - @if (activeDisplayFields.has(DocumentDisplayField.TITLE)) { + @if (activeDisplayFields.includes(DocumentDisplayField.TITLE)) { } - @if (activeDisplayFields.has(DocumentDisplayField.OWNER)) { + @if (activeDisplayFields.includes(DocumentDisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) { } - @if (activeDisplayFields.has(DocumentDisplayField.NOTES) && notesEnabled) { + @if (activeDisplayFields.includes(DocumentDisplayField.NOTES) && notesEnabled) { } - @if (activeDisplayFields.has(DocumentDisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) { + @if (activeDisplayFields.includes(DocumentDisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) { } - @if (activeDisplayFields.has(DocumentDisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) { + @if (activeDisplayFields.includes(DocumentDisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) { } - @if (activeDisplayFields.has(DocumentDisplayField.CREATED)) { + @if (activeDisplayFields.includes(DocumentDisplayField.CREATED)) { } - @if (activeDisplayFields.has(DocumentDisplayField.ADDED)) { + @if (activeDisplayFields.includes(DocumentDisplayField.ADDED)) { } - @if (activeDisplayFields.has(DocumentDisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) { + @if (activeDisplayFields.includes(DocumentDisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) { } - @if (activeDisplayFields.has(DocumentDisplayField.OWNER)) { + @if (activeDisplayFields.includes(DocumentDisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) { } - @if (activeDisplayFields.has(DocumentDisplayField.NOTES) && notesEnabled) { + @if (activeDisplayFields.includes(DocumentDisplayField.NOTES) && notesEnabled) { } - @if (activeDisplayFields.has(DocumentDisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) { + @if (activeDisplayFields.includes(DocumentDisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) { } - @if (activeDisplayFields.has(DocumentDisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) { + @if (activeDisplayFields.includes(DocumentDisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) { } - @if (activeDisplayFields.has(DocumentDisplayField.CREATED)) { + @if (activeDisplayFields.includes(DocumentDisplayField.CREATED)) { } - @if (activeDisplayFields.has(DocumentDisplayField.ADDED)) { + @if (activeDisplayFields.includes(DocumentDisplayField.ADDED)) { @@ -328,7 +328,7 @@
ASNCorrespondentTitleOwnerNotesDocument typeStorage pathCreated - @if (activeDisplayFields.has(DocumentDisplayField.ASN)) { + @if (activeDisplayFields.includes(DocumentDisplayField.ASN)) { {{d.archive_serial_number}} @if (d.correspondent) { {{(d.correspondent$ | async)?.name}} @@ -269,21 +269,21 @@ - @if (activeDisplayFields.has(DocumentDisplayField.TITLE)) { + @if (activeDisplayFields.includes(DocumentDisplayField.TITLE)) { {{d.title | documentTitle}} } - @if (activeDisplayFields.has(DocumentDisplayField.TAGS)) { + @if (activeDisplayFields.includes(DocumentDisplayField.TAGS)) { @for (t of d.tags$ | async; track t) { } } {{d.owner | username}} @if (d.notes.length) { @@ -294,26 +294,26 @@ } @if (d.document_type) { {{(d.document_type$ | async)?.name}} } @if (d.storage_path) { {{(d.storage_path$ | async)?.name}} } {{d.created_date | customDate}} {{d.added | customDate}}
} - @if (displayMode === 'smallCards') { + @if (list.displayMode === DisplayMode.SMALL_CARDS) {
@for (d of list.documents; track trackByDocumentId($index, d)) { { component = fixture.componentInstance }) - it('should load display mode from local storage', () => { - window.localStorage.setItem('document-list:displayMode', 'largeCards') - fixture.detectChanges() - expect(component.displayMode).toEqual('largeCards') - component.displayMode = 'smallCards' - component.saveDisplayMode() - expect(window.localStorage.getItem('document-list:displayMode')).toEqual( - 'smallCards' - ) - }) - it('should reload on new document consumed', () => { const reloadSpy = jest.spyOn(documentListService, 'reload') const fileStatusSubject = new Subject() @@ -297,18 +291,18 @@ describe('DocumentListComponent', () => { const displayModeButtons = fixture.debugElement.queryAll( By.css('input[type="radio"]') ) - expect(component.displayMode).toEqual('smallCards') + expect(component.list.displayMode).toEqual('smallCards') displayModeButtons[0].nativeElement.checked = true displayModeButtons[0].triggerEventHandler('change') fixture.detectChanges() - expect(component.displayMode).toEqual('table') + expect(component.list.displayMode).toEqual('table') expect(fixture.debugElement.queryAll(By.css('tr'))).toHaveLength(3) displayModeButtons[1].nativeElement.checked = true displayModeButtons[1].triggerEventHandler('change') fixture.detectChanges() - expect(component.displayMode).toEqual('smallCards') + expect(component.list.displayMode).toEqual('smallCards') expect( fixture.debugElement.queryAll(By.directive(DocumentCardSmallComponent)) ).toHaveLength(3) @@ -316,7 +310,7 @@ describe('DocumentListComponent', () => { displayModeButtons[2].nativeElement.checked = true displayModeButtons[2].triggerEventHandler('change') fixture.detectChanges() - expect(component.displayMode).toEqual('largeCards') + expect(component.list.displayMode).toEqual('largeCards') expect( fixture.debugElement.queryAll(By.directive(DocumentCardLargeComponent)) ).toHaveLength(3) @@ -337,7 +331,7 @@ describe('DocumentListComponent', () => { }) it('should support setting sort field by table head', () => { - component.activeDisplayFields = new Set([DocumentDisplayField.ASN]) + component.activeDisplayFields = [DocumentDisplayField.ASN] jest.spyOn(documentListService, 'documents', 'get').mockReturnValue(docs) fixture.detectChanges() expect(documentListService.sortField).toEqual('created') @@ -348,7 +342,7 @@ describe('DocumentListComponent', () => { detailsDisplayModeButton.nativeElement.checked = true detailsDisplayModeButton.triggerEventHandler('change') fixture.detectChanges() - expect(component.displayMode).toEqual('table') + expect(component.list.displayMode).toEqual(DisplayMode.TABLE) const sortTh = fixture.debugElement.query(By.directive(SortableDirective)) sortTh.triggerEventHandler('click') @@ -547,6 +541,42 @@ describe('DocumentListComponent', () => { expect(openModal.componentInstance.error).toEqual({ filter_rules: ['11'] }) }) + it('should detect saved view changes', () => { + const view: SavedView = { + id: 10, + name: 'Saved View 10', + sort_field: 'added', + sort_reverse: true, + filter_rules: [ + { + rule_type: FILTER_HAS_TAGS_ANY, + value: '20', + }, + ], + page_size: 5, + display_mode: DisplayMode.SMALL_CARDS, + document_display_fields: [DocumentDisplayField.TITLE], + } + jest.spyOn(savedViewService, 'getCached').mockReturnValue(of(view)) + const queryParams = { view: view.id.toString() } + jest + .spyOn(activatedRoute, 'queryParamMap', 'get') + .mockReturnValue(of(convertToParamMap(queryParams))) + activatedRoute.snapshot.queryParams = queryParams + router.routerState.snapshot.url = '/view/10/' + fixture.detectChanges() + expect(documentListService.activeSavedViewId).toEqual(10) + + component.list.documentDisplayFields = [DocumentDisplayField.ASN] + expect(component.savedViewIsModified).toBeTruthy() + component.list.documentDisplayFields = [DocumentDisplayField.TITLE] + expect(component.savedViewIsModified).toBeFalsy() + component.list.displayMode = DisplayMode.TABLE + expect(component.savedViewIsModified).toBeTruthy() + component.list.displayMode = DisplayMode.SMALL_CARDS + expect(component.savedViewIsModified).toBeFalsy() + }) + it('should navigate to a document', () => { fixture.detectChanges() const routerSpy = jest.spyOn(router, 'navigate') @@ -559,12 +589,15 @@ describe('DocumentListComponent', () => { jest.spyOn(documentListService, 'documents', 'get').mockReturnValue(docs) expect(documentListService.sortField).toEqual('created') - component.displayMode = 'table' + component.list.displayMode = DisplayMode.TABLE + component.list.documentDisplayFields = DEFAULT_DOCUMENT_DISPLAY_FIELDS.map( + (f) => f.id + ) fixture.detectChanges() expect( fixture.debugElement.queryAll(By.directive(SortableDirective)) - ).toHaveLength(8) + ).toHaveLength(9) expect(component.notesEnabled).toBeTruthy() settingsService.set(SETTINGS_KEYS.NOTES_ENABLED, false) @@ -572,7 +605,7 @@ describe('DocumentListComponent', () => { expect(component.notesEnabled).toBeFalsy() expect( fixture.debugElement.queryAll(By.directive(SortableDirective)) - ).toHaveLength(7) + ).toHaveLength(8) // insufficient perms jest.spyOn(permissionService, 'currentUserCan').mockReturnValue(false) @@ -600,30 +633,16 @@ describe('DocumentListComponent', () => { ]) }) - it('should load display fields from local storage', () => { - window.localStorage.setItem('document-list:displayFields', '["asn"]') - fixture.detectChanges() - expect(component.activeDisplayFields).toEqual( - new Set([DocumentDisplayField.ASN]) - ) - component.activeDisplayFields = new Set([DocumentDisplayField.TITLE]) - component.saveDisplayFields() - expect( - JSON.parse(window.localStorage.getItem('document-list:displayFields')) - ).toEqual([DocumentDisplayField.TITLE]) - }) - it('should support toggling display fields', () => { fixture.detectChanges() - component.activeDisplayFields = new Set([DocumentDisplayField.ASN]) + component.activeDisplayFields = [DocumentDisplayField.ASN] component.toggleDisplayField(DocumentDisplayField.TITLE) - expect(component.activeDisplayFields).toEqual( - new Set([DocumentDisplayField.ASN, DocumentDisplayField.TITLE]) - ) + expect(component.activeDisplayFields).toEqual([ + DocumentDisplayField.ASN, + DocumentDisplayField.TITLE, + ]) component.toggleDisplayField(DocumentDisplayField.ASN) - expect(component.activeDisplayFields).toEqual( - new Set([DocumentDisplayField.TITLE]) - ) + expect(component.activeDisplayFields).toEqual([DocumentDisplayField.TITLE]) }) it('should get custom field title', () => { diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts index 911b0163f..a2b8e4730 100644 --- a/src-ui/src/app/components/document-list/document-list.component.ts +++ b/src-ui/src/app/components/document-list/document-list.component.ts @@ -51,6 +51,7 @@ export class DocumentListComponent implements OnInit, OnDestroy { DocumentDisplayField = DocumentDisplayField + DisplayMode = DisplayMode constructor( public list: DocumentListViewService, @@ -72,27 +73,12 @@ export class DocumentListComponent @ViewChildren(SortableDirective) headers: QueryList - displayMode: string = DisplayMode.SMALL_CARDS // largeCards, smallCards, table - - _activeDisplayFields: Set = new Set([ - DocumentDisplayField.TITLE, - DocumentDisplayField.CORRESPONDENT, - DocumentDisplayField.CREATED, - DocumentDisplayField.TAGS, - DocumentDisplayField.DOCUMENT_TYPE, - DocumentDisplayField.STORAGE_PATH, - DocumentDisplayField.NOTES, - DocumentDisplayField.OWNER, - DocumentDisplayField.ASN, - DocumentDisplayField.SHARED, - ]) - - get activeDisplayFields(): Set { - return this._activeDisplayFields + get activeDisplayFields(): DocumentDisplayField[] { + return this.list.documentDisplayFields } - set activeDisplayFields(fields: Set) { - this._activeDisplayFields = fields + set activeDisplayFields(fields: DocumentDisplayField[]) { + this.list.documentDisplayFields = fields this.updateDisplayCustomFields() } activeDisplayCustomFields: Set = new Set() @@ -118,6 +104,11 @@ export class DocumentListComponent return ( this.unmodifiedSavedView.sort_field !== this.list.sortField || this.unmodifiedSavedView.sort_reverse !== this.list.sortReverse || + (this.unmodifiedSavedView.page_size && + this.unmodifiedSavedView.page_size !== this.list.pageSize) || + this.unmodifiedSavedView.display_mode !== this.list.displayMode || + this.unmodifiedSavedView.document_display_fields.join(',') !== + this.activeDisplayFields.join(',') || filterRulesDiffer( this.unmodifiedSavedView.filter_rules, this.list.filterRules @@ -154,10 +145,6 @@ export class DocumentListComponent return this.list.sortReverse } - setSortField(field: string) { - this.list.sortField = field - } - onSort(event: SortEvent) { this.list.setSort(event.column, event.reverse) } @@ -166,25 +153,15 @@ export class DocumentListComponent return this.list.selected.size > 0 } - saveDisplayMode() { - localStorage.setItem('document-list:displayMode', this.displayMode) - } - - saveDisplayFields() { - localStorage.setItem( - 'document-list:displayFields', - JSON.stringify(Array.from(this.activeDisplayFields)) - ) - } - - toggleDisplayField(field: string) { - if (this.activeDisplayFields.has(field)) { - this.activeDisplayFields.delete(field) + toggleDisplayField(field: DocumentDisplayField) { + if (this.activeDisplayFields.includes(field)) { + this.activeDisplayFields = this.activeDisplayFields.filter( + (f) => f !== field + ) } else { - this.activeDisplayFields.add(field) + this.activeDisplayFields = [...this.activeDisplayFields, field] } this.updateDisplayCustomFields() - this.saveDisplayFields() } public getDisplayCustomFieldTitle(field: string) { @@ -194,16 +171,6 @@ export class DocumentListComponent } ngOnInit(): void { - if (localStorage.getItem('document-list:displayMode') != null) { - this.displayMode = localStorage.getItem('document-list:displayMode') - } - - if (localStorage.getItem('document-list:displayFields') != null) { - this.activeDisplayFields = new Set( - JSON.parse(localStorage.getItem('document-list:displayFields')) - ) - } - this.consumerStatusService .onDocumentConsumptionFinished() .pipe(takeUntil(this.unsubscribeNotifier)) @@ -228,6 +195,12 @@ export class DocumentListComponent }) return } + if (!view.display_mode) { + view.display_mode = this.list.displayMode + } + if (!view.document_display_fields) { + view.document_display_fields = this.list.documentDisplayFields + } this.unmodifiedSavedView = view this.list.activateSavedViewWithQueryParams( view, diff --git a/src-ui/src/app/services/document-list-view.service.spec.ts b/src-ui/src/app/services/document-list-view.service.spec.ts index afbe83175..ffb492d9d 100644 --- a/src-ui/src/app/services/document-list-view.service.spec.ts +++ b/src-ui/src/app/services/document-list-view.service.spec.ts @@ -12,13 +12,19 @@ import { FILTER_HAS_TAGS_ALL, FILTER_HAS_TAGS_ANY, } from '../data/filter-rule-type' -import { SavedView } from '../data/saved-view' +import { + DEFAULT_DOCUMENT_DISPLAY_FIELDS, + DisplayMode, + DocumentDisplayField, + SavedView, +} from '../data/saved-view' import { FilterRule } from '../data/filter-rule' import { RouterTestingModule } from '@angular/router/testing' import { routes } from 'src/app/app-routing.module' import { PermissionsGuard } from '../guards/permissions.guard' import { SettingsService } from './settings.service' import { SETTINGS_KEYS } from '../data/ui-settings' +import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys' const documents = [ { @@ -213,7 +219,7 @@ describe('DocumentListViewService', () => { documentListViewService.loadFromQueryParams(convertToParamMap(params)) const req = httpTestingController.expectOne( `${environment.apiBaseUrl}documents/?page=${page}&page_size=${ - documentListViewService.currentPageSize + documentListViewService.pageSize }&ordering=${reverse ? '-' : ''}${sort}&truncate_content=true` ) expect(req.request.method).toEqual('GET') @@ -231,7 +237,7 @@ describe('DocumentListViewService', () => { } documentListViewService.loadFromQueryParams(convertToParamMap(params)) let req = httpTestingController.expectOne( - `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.currentPageSize}&ordering=-added&truncate_content=true&tags__id__all=${tags__id__all}` + `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.pageSize}&ordering=-added&truncate_content=true&tags__id__all=${tags__id__all}` ) expect(req.request.method).toEqual('GET') expect(documentListViewService.filterRules).toEqual([ @@ -249,7 +255,7 @@ describe('DocumentListViewService', () => { it('should use filter rules to update query params', () => { documentListViewService.filterRules = filterRules const req = httpTestingController.expectOne( - `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.currentPageSize}&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}` + `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.pageSize}&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}` ) expect(req.request.method).toEqual('GET') }) @@ -257,7 +263,7 @@ describe('DocumentListViewService', () => { it('should support quick filter', () => { documentListViewService.quickFilter(filterRules) const req = httpTestingController.expectOne( - `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.currentPageSize}&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}` + `${environment.apiBaseUrl}documents/?page=${documentListViewService.currentPage}&page_size=${documentListViewService.pageSize}&ordering=-created&truncate_content=true&tags__id__all=${tags__id__all}` ) expect(req.request.method).toEqual('GET') }) @@ -280,7 +286,7 @@ describe('DocumentListViewService', () => { convertToParamMap(params) ) let req = httpTestingController.expectOne( - `${environment.apiBaseUrl}documents/?page=${page}&page_size=${documentListViewService.currentPageSize}&ordering=-added&truncate_content=true&tags__id__all=${tags__id__all}` + `${environment.apiBaseUrl}documents/?page=${page}&page_size=${documentListViewService.pageSize}&ordering=-added&truncate_content=true&tags__id__all=${tags__id__all}` ) expect(req.request.method).toEqual('GET') // reset the list @@ -305,8 +311,7 @@ describe('DocumentListViewService', () => { `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true` ) expect(documentListViewService.currentPage).toEqual(1) - documentListViewService.currentPageSize = 3 - documentListViewService.reload() + documentListViewService.pageSize = 3 req = httpTestingController.expectOne( `${environment.apiBaseUrl}documents/?page=1&page_size=3&ordering=-created&truncate_content=true` ) @@ -362,7 +367,10 @@ describe('DocumentListViewService', () => { .spyOn(documentListViewService, 'documents', 'get') .mockReturnValue(documents) expect(documentListViewService.currentPage).toEqual(1) - documentListViewService.currentPageSize = 3 + documentListViewService.pageSize = 3 + httpTestingController.match( + `${environment.apiBaseUrl}documents/?page=1&page_size=3&ordering=-created&truncate_content=true` + ) jest .spyOn(documentListViewService, 'getLastPage') .mockReturnValue(Math.ceil(documents.length / 3)) @@ -410,7 +418,13 @@ describe('DocumentListViewService', () => { .spyOn(documentListViewService, 'documents', 'get') .mockReturnValue(documents) documentListViewService.currentPage = 2 - documentListViewService.currentPageSize = 3 + httpTestingController.match( + `${environment.apiBaseUrl}documents/?page=2&page_size=50&ordering=-created&truncate_content=true` + ) + documentListViewService.pageSize = 3 + httpTestingController.match( + `${environment.apiBaseUrl}documents/?page=2&page_size=3&ordering=-created&truncate_content=true` + ) const reloadSpy = jest.spyOn(documentListViewService, 'reload') documentListViewService.getPrevious(1).subscribe({ next: () => {}, @@ -426,8 +440,7 @@ describe('DocumentListViewService', () => { it('should update page size from settings', () => { settingsService.set(SETTINGS_KEYS.DOCUMENT_LIST_SIZE, 10) - documentListViewService.updatePageSize() - expect(documentListViewService.currentPageSize).toEqual(10) + expect(documentListViewService.pageSize).toEqual(10) }) it('should support select a document', () => { @@ -459,8 +472,7 @@ describe('DocumentListViewService', () => { }) it('should support select page', () => { - documentListViewService.currentPageSize = 3 - documentListViewService.reload() + documentListViewService.pageSize = 3 const req = httpTestingController.expectOne( `${environment.apiBaseUrl}documents/?page=1&page_size=3&ordering=-created&truncate_content=true` ) @@ -544,4 +556,38 @@ describe('DocumentListViewService', () => { `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true` ) }) + + it('should update default view state when display mode changes', () => { + const localStorageSpy = jest.spyOn(localStorage, 'setItem') + expect(documentListViewService.displayMode).toEqual(DisplayMode.SMALL_CARDS) + documentListViewService.displayMode = DisplayMode.LARGE_CARDS + expect(documentListViewService.displayMode).toEqual(DisplayMode.LARGE_CARDS) + documentListViewService.displayMode = 'details' as any // legacy + expect(documentListViewService.displayMode).toEqual(DisplayMode.TABLE) + expect(localStorageSpy).toHaveBeenCalledTimes(2) + }) + + it('should update default view state when display fields change', () => { + const localStorageSpy = jest.spyOn(localStorage, 'setItem') + documentListViewService.documentDisplayFields = [ + DocumentDisplayField.ADDED, + DocumentDisplayField.TITLE, + ] + expect(documentListViewService.documentDisplayFields).toEqual([ + DocumentDisplayField.ADDED, + DocumentDisplayField.TITLE, + ]) + expect(localStorageSpy).toHaveBeenCalled() + // reload triggered + httpTestingController.match( + `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true` + ) + documentListViewService.documentDisplayFields = null + httpTestingController.match( + `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true` + ) + expect(documentListViewService.documentDisplayFields).toEqual( + DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) + ) + }) }) diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts index e1881c2f2..f0b7b91c7 100644 --- a/src-ui/src/app/services/document-list-view.service.ts +++ b/src-ui/src/app/services/document-list-view.service.ts @@ -8,7 +8,12 @@ import { isFullTextFilterRule, } from '../utils/filter-rules' import { Document } from '../data/document' -import { SavedView } from '../data/saved-view' +import { + DEFAULT_DOCUMENT_DISPLAY_FIELDS, + DisplayMode, + DocumentDisplayField, + SavedView, +} from '../data/saved-view' import { SETTINGS_KEYS } from '../data/ui-settings' import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys' import { paramsFromViewState, paramsToViewState } from '../utils/query-params' @@ -59,6 +64,21 @@ export interface ListViewState { * Contains the IDs of all selected documents. */ selected?: Set + + /** + * The page size of the list view. + */ + pageSize?: number + + /** + * Display mode of the list view. + */ + displayMode?: DisplayMode + + /** + * The fields to display in the document list. + */ + documentDisplayFields?: DocumentDisplayField[] } /** @@ -80,8 +100,6 @@ export class DocumentListViewService { selectionData?: SelectionData - currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE) - private unsubscribeNotifier: Subject = new Subject() private listViewStates: Map = new Map() @@ -113,7 +131,7 @@ export class DocumentListViewService { delete savedState[k] } }) - //only use restored state attributes instead of defaults if they are not null + // only use restored state attributes instead of defaults if they are not null let newState = Object.assign(this.defaultListViewState(), savedState) this.listViewStates.set(null, newState) } catch (e) { @@ -176,6 +194,10 @@ export class DocumentListViewService { if (this._activeSavedViewId) { this.activeListViewState.title = view.name } + this.activeListViewState.displayMode = view.display_mode + this.activeListViewState.pageSize = view.page_size + this.activeListViewState.documentDisplayFields = + view.document_display_fields this.reduceSelectionToFilter() @@ -220,7 +242,7 @@ export class DocumentListViewService { this.documentService .listFiltered( activeListViewState.currentPage, - this.currentPageSize, + activeListViewState.pageSize ?? this.pageSize, activeListViewState.sortField, activeListViewState.sortReverse, activeListViewState.filterRules, @@ -362,6 +384,45 @@ export class DocumentListViewService { this.saveDocumentListView() } + set displayMode(mode: DisplayMode) { + this.activeListViewState.displayMode = mode + this.saveDocumentListView() + } + + get displayMode(): DisplayMode { + const mode = this.activeListViewState.displayMode ?? DisplayMode.SMALL_CARDS + if (mode === ('details' as any)) { + // legacy + return DisplayMode.TABLE + } + return mode + } + + set pageSize(size: number) { + this.activeListViewState.pageSize = size + this.reload() + this.saveDocumentListView() + } + + get pageSize(): number { + return ( + this.activeListViewState.pageSize ?? + this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE) + ) + } + + get documentDisplayFields(): DocumentDisplayField[] { + return ( + this.activeListViewState.documentDisplayFields ?? + DEFAULT_DOCUMENT_DISPLAY_FIELDS.map((f) => f.id) + ) + } + + set documentDisplayFields(fields: DocumentDisplayField[]) { + this.activeListViewState.documentDisplayFields = fields + this.saveDocumentListView() + } + private saveDocumentListView() { if (this._activeSavedViewId == null) { let savedState: ListViewState = { @@ -370,6 +431,8 @@ export class DocumentListViewService { filterRules: this.activeListViewState.filterRules, sortField: this.activeListViewState.sortField, sortReverse: this.activeListViewState.sortReverse, + displayMode: this.activeListViewState.displayMode, + documentDisplayFields: this.activeListViewState.documentDisplayFields, } localStorage.setItem( DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, @@ -385,7 +448,7 @@ export class DocumentListViewService { } getLastPage(): number { - return Math.ceil(this.collectionSize / this.currentPageSize) + return Math.ceil(this.collectionSize / this.pageSize) } hasNext(doc: number) { @@ -452,13 +515,6 @@ export class DocumentListViewService { }) } - updatePageSize() { - let newPageSize = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE) - if (newPageSize != this.currentPageSize) { - this.currentPageSize = newPageSize - } - } - selectNone() { this.selected.clear() this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null