diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index a335aad1d..9290c09fa 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -22,6 +22,7 @@ import { RemoteVersionService, AppRemoteVersion, } from 'src/app/services/rest/remote-version.service' +import { QueryParamsService } from 'src/app/services/query-params.service' @Component({ selector: 'app-app-frame', @@ -37,7 +38,8 @@ export class AppFrameComponent { public savedViewService: SavedViewService, private list: DocumentListViewService, private meta: Meta, - private remoteVersionService: RemoteVersionService + private remoteVersionService: RemoteVersionService, + private queryParamsService: QueryParamsService ) { this.remoteVersionService .checkForUpdates() @@ -92,7 +94,7 @@ export class AppFrameComponent { search() { this.closeMenu() - this.list.quickFilter([ + this.queryParamsService.navigateWithFilterRules([ { rule_type: FILTER_FULLTEXT_QUERY, value: (this.searchField.value as string).trim(), 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 e677a6e2f..9506e6842 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 @@ -3,11 +3,11 @@ import { Router } from '@angular/router' import { Subscription } from 'rxjs' import { PaperlessDocument } from 'src/app/data/paperless-document' import { PaperlessSavedView } from 'src/app/data/paperless-saved-view' -import { DocumentListViewService } from 'src/app/services/document-list-view.service' import { ConsumerStatusService } from 'src/app/services/consumer-status.service' import { DocumentService } from 'src/app/services/rest/document.service' import { PaperlessTag } from 'src/app/data/paperless-tag' import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type' +import { QueryParamsService } from 'src/app/services/query-params.service' @Component({ selector: 'app-saved-view-widget', @@ -18,7 +18,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy { constructor( private documentService: DocumentService, private router: Router, - private list: DocumentListViewService, + private queryParamsService: QueryParamsService, private consumerStatusService: ConsumerStatusService ) {} @@ -60,13 +60,14 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy { if (this.savedView.show_in_sidebar) { this.router.navigate(['view', this.savedView.id]) } else { - this.list.loadSavedView(this.savedView, true) - this.router.navigate(['documents']) + this.router.navigate(['documents'], { + queryParams: { view: this.savedView.id }, + }) } } clickTag(tag: PaperlessTag) { - this.list.quickFilter([ + this.queryParamsService.navigateWithFilterRules([ { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() }, ]) } diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index 9b223f22a..4d66ea384 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -35,6 +35,7 @@ import { import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions' import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type' import { normalizeDateStr } from 'src/app/utils/date' +import { QueryParamsService } from 'src/app/services/query-params.service' @Component({ selector: 'app-document-detail', @@ -114,7 +115,8 @@ export class DocumentDetailComponent private documentListViewService: DocumentListViewService, private documentTitlePipe: DocumentTitlePipe, private toastService: ToastService, - private settings: SettingsService + private settings: SettingsService, + private queryParamsService: QueryParamsService ) { this.titleSubject .pipe( @@ -446,7 +448,7 @@ export class DocumentDetailComponent } moreLike() { - this.documentListViewService.quickFilter([ + this.queryParamsService.navigateWithFilterRules([ { rule_type: FILTER_FULLTEXT_MORELIKE, value: this.documentId.toString(), 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 1ce61f931..e00e54333 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 @@ -38,7 +38,7 @@
-
+
-
@@ -64,7 +64,7 @@
- +
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 9e058fb64..01c2bee34 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 @@ -9,20 +9,9 @@ import { } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { - filter, - first, - map, - Subject, - Subscription, - switchMap, - takeUntil, -} from 'rxjs' +import { filter, first, map, Subject, switchMap, takeUntil } from 'rxjs' import { FilterRule, isFullTextFilterRule } from 'src/app/data/filter-rule' -import { - FILTER_FULLTEXT_MORELIKE, - FILTER_RULE_TYPES, -} from 'src/app/data/filter-rule-type' +import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type' import { PaperlessDocument } from 'src/app/data/paperless-document' import { PaperlessSavedView } from 'src/app/data/paperless-saved-view' import { @@ -32,7 +21,10 @@ import { import { ConsumerStatusService } from 'src/app/services/consumer-status.service' import { DocumentListViewService } from 'src/app/services/document-list-view.service' import { - DocumentService, + filterRulesFromQueryParams, + QueryParamsService, +} from 'src/app/services/query-params.service' +import { DOCUMENT_SORT_FIELDS, DOCUMENT_SORT_FIELDS_FULLTEXT, } from 'src/app/services/rest/document.service' @@ -49,13 +41,13 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { constructor( public list: DocumentListViewService, - private documentService: DocumentService, public savedViewService: SavedViewService, public route: ActivatedRoute, private router: Router, private toastService: ToastService, private modalService: NgbModal, - private consumerStatusService: ConsumerStatusService + private consumerStatusService: ConsumerStatusService, + private queryParamsService: QueryParamsService ) {} @ViewChild('filterEditor') @@ -83,8 +75,26 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { : DOCUMENT_SORT_FIELDS } + set listSort(reverse: boolean) { + this.list.sortReverse = reverse + this.queryParamsService.sortField = this.list.sortField + this.queryParamsService.sortReverse = reverse + } + + get listSort(): boolean { + return this.list.sortReverse + } + + setSortField(field: string) { + this.list.sortField = field + this.queryParamsService.sortField = field + this.queryParamsService.sortReverse = this.listSort + } + onSort(event: SortEvent) { this.list.setSort(event.column, event.reverse) + this.queryParamsService.sortField = event.column + this.queryParamsService.sortReverse = event.reverse } get isBulkEditing(): boolean { @@ -109,60 +119,39 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { this.route.paramMap .pipe( - filter((params) => params.has('id')), // only on saved view + filter((params) => params.has('id')), // only on saved view e.g. /view/id switchMap((params) => { return this.savedViewService .getCached(+params.get('id')) - .pipe(map((view) => ({ params, view }))) + .pipe(map((view) => ({ view }))) }) ) .pipe(takeUntil(this.unsubscribeNotifier)) - .subscribe(({ view, params }) => { + .subscribe(({ view }) => { if (!view) { this.router.navigate(['404']) return } this.list.activateSavedView(view) this.list.reload() + this.queryParamsService.updateFromView(view) this.unmodifiedFilterRules = view.filter_rules }) - const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map( - (rt) => rt.filtervar - ) - this.route.queryParamMap .pipe( - filter(() => !this.route.snapshot.paramMap.has('id')), // only when not on saved view + filter(() => !this.route.snapshot.paramMap.has('id')), // only when not on /view/id takeUntil(this.unsubscribeNotifier) ) .subscribe((queryParams) => { - // transform query params to filter rules - let filterRulesFromQueryParams: FilterRule[] = [] - allFilterRuleQueryParams - .filter((frqp) => queryParams.has(frqp)) - .forEach((filterQueryParamName) => { - const filterQueryParamValues: string[] = queryParams - .get(filterQueryParamName) - .split(',') - - filterRulesFromQueryParams = filterRulesFromQueryParams.concat( - // map all values to filter rules - filterQueryParamValues.map((val) => { - return { - rule_type: FILTER_RULE_TYPES.find( - (rt) => rt.filtervar == filterQueryParamName - ).id, - value: val, - } - }) - ) - }) - - this.list.activateSavedView(null) - this.list.filterRules = filterRulesFromQueryParams - this.list.reload() - this.unmodifiedFilterRules = [] + if (queryParams.has('view')) { + // loading a saved view on /documents + this.loadViewConfig(parseInt(queryParams.get('view'))) + } else { + this.list.activateSavedView(null) + this.queryParamsService.parseQueryParams(queryParams) + this.unmodifiedFilterRules = [] + } }) } @@ -171,17 +160,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe({ next: (filterRules) => { - const params = - this.documentService.filterRulesToQueryParams(filterRules) - - // if we were on a saved view we navigate 'away' to /documents - let base = [] - if (this.route.snapshot.paramMap.has('id')) base = ['/documents'] - - this.router.navigate(base, { - relativeTo: this.route, - queryParams: params, - }) + this.queryParamsService.updateFilterRules(filterRules) }, }) } @@ -192,9 +171,15 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { this.unsubscribeNotifier.complete() } - loadViewConfig(view: PaperlessSavedView) { - this.list.loadSavedView(view) - this.list.reload() + loadViewConfig(viewId: number) { + this.savedViewService + .getCached(viewId) + .pipe(first()) + .subscribe((view) => { + this.list.loadSavedView(view) + this.list.reload() + this.queryParamsService.updateFromView(view) + }) } saveViewConfig() { @@ -282,7 +267,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { } clickMoreLike(documentID: number) { - this.list.quickFilter([ + this.queryParamsService.navigateWithFilterRules([ { rule_type: FILTER_FULLTEXT_MORELIKE, value: documentID.toString() }, ]) } diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts index dd0d8ed06..6a963fbab 100644 --- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts +++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts @@ -3,7 +3,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type' import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' -import { DocumentListViewService } from 'src/app/services/document-list-view.service' +import { QueryParamsService } from 'src/app/services/query-params.service' import { CorrespondentService } from 'src/app/services/rest/correspondent.service' import { ToastService } from 'src/app/services/toast.service' import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component' @@ -20,7 +20,7 @@ export class CorrespondentListComponent extends ManagementListComponent private modalService: NgbModal, private editDialogComponent: any, private toastService: ToastService, - private list: DocumentListViewService, + private queryParamsService: QueryParamsService, protected filterRuleType: number, public typeName: string, public extraColumns: ManagementListColumn[] @@ -140,7 +140,7 @@ export abstract class ManagementListComponent } filterDocuments(object: ObjectWithId) { - this.list.quickFilter([ + this.queryParamsService.navigateWithFilterRules([ { rule_type: this.filterRuleType, value: object.id.toString() }, ]) } diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts index 01a1614bf..c1dd98e52 100644 --- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts +++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type' import { PaperlessTag } from 'src/app/data/paperless-tag' -import { DocumentListViewService } from 'src/app/services/document-list-view.service' +import { QueryParamsService } from 'src/app/services/query-params.service' import { TagService } from 'src/app/services/rest/tag.service' import { ToastService } from 'src/app/services/toast.service' import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component' @@ -18,14 +18,14 @@ export class TagListComponent extends ManagementListComponent { tagService: TagService, modalService: NgbModal, toastService: ToastService, - list: DocumentListViewService + queryParamsService: QueryParamsService ) { super( tagService, modalService, TagEditDialogComponent, toastService, - list, + queryParamsService, FILTER_HAS_TAGS_ALL, $localize`tag`, [ 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 b0d246a32..99349d37f 100644 --- a/src-ui/src/app/services/document-list-view.service.ts +++ b/src-ui/src/app/services/document-list-view.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' +import { ActivatedRoute, Params, Router } from '@angular/router' import { Observable } from 'rxjs' import { cloneFilterRules, @@ -220,6 +220,13 @@ export class DocumentListViewService { return this.activeListViewState.sortReverse } + get sortParams(): Params { + return { + sortField: this.sortField, + sortReverse: this.sortReverse, + } + } + get collectionSize(): number { return this.activeListViewState.collectionSize } @@ -265,14 +272,6 @@ export class DocumentListViewService { } } - quickFilter(filterRules: FilterRule[]) { - const params = this.documentService.filterRulesToQueryParams(filterRules) - this.router.navigate(['/documents'], { - relativeTo: this.route, - queryParams: params, - }) - } - getLastPage(): number { return Math.ceil(this.collectionSize / this.currentPageSize) } @@ -434,9 +433,7 @@ export class DocumentListViewService { constructor( private documentService: DocumentService, - private settings: SettingsService, - private router: Router, - private route: ActivatedRoute + private settings: SettingsService ) { let documentListViewConfigJson = localStorage.getItem( DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG diff --git a/src-ui/src/app/services/query-params.service.ts b/src-ui/src/app/services/query-params.service.ts new file mode 100644 index 000000000..92346ff00 --- /dev/null +++ b/src-ui/src/app/services/query-params.service.ts @@ -0,0 +1,152 @@ +import { Injectable } from '@angular/core' +import { ParamMap, Params, Router } from '@angular/router' +import { FilterRule } from '../data/filter-rule' +import { FILTER_RULE_TYPES } from '../data/filter-rule-type' +import { PaperlessSavedView } from '../data/paperless-saved-view' +import { DocumentListViewService } from './document-list-view.service' + +const SORT_FIELD_PARAMETER = 'sort' +const SORT_REVERSE_PARAMETER = 'reverse' + +@Injectable({ + providedIn: 'root', +}) +export class QueryParamsService { + constructor(private router: Router, private list: DocumentListViewService) {} + + private filterParams: Params = {} + private sortParams: Params = {} + + updateFilterRules( + filterRules: FilterRule[], + updateQueryParams: boolean = true + ) { + this.filterParams = filterRulesToQueryParams(filterRules) + if (updateQueryParams) this.updateQueryParams() + } + + set sortField(field: string) { + this.sortParams[SORT_FIELD_PARAMETER] = field + this.updateQueryParams() + } + + set sortReverse(reverse: boolean) { + if (!reverse) this.sortParams[SORT_REVERSE_PARAMETER] = undefined + else this.sortParams[SORT_REVERSE_PARAMETER] = reverse + this.updateQueryParams() + } + + get params(): Params { + return { + ...this.sortParams, + ...this.filterParams, + } + } + + private updateQueryParams() { + // if we were on a saved view we navigate 'away' to /documents + let base = [] + if (this.router.routerState.snapshot.url.includes('/view/')) + base = ['/documents'] + + this.router.navigate(base, { + queryParams: this.params, + }) + } + + public parseQueryParams(queryParams: ParamMap) { + let filterRules = filterRulesFromQueryParams(queryParams) + if ( + filterRules.length || + queryParams.has(SORT_FIELD_PARAMETER) || + queryParams.has(SORT_REVERSE_PARAMETER) + ) { + this.list.filterRules = filterRules + this.list.sortField = queryParams.get(SORT_FIELD_PARAMETER) + this.list.sortReverse = + queryParams.has(SORT_REVERSE_PARAMETER) || + (!queryParams.has(SORT_FIELD_PARAMETER) && + !queryParams.has(SORT_REVERSE_PARAMETER)) + this.list.reload() + } else if ( + filterRules.length == 0 && + !queryParams.has(SORT_FIELD_PARAMETER) + ) { + // this is navigating to /documents so we need to update the params from the list + this.updateFilterRules(this.list.filterRules, false) + this.sortField = this.list.sortField + this.sortReverse = this.list.sortReverse + } + } + + updateFromView(view: PaperlessSavedView) { + if (!this.router.routerState.snapshot.url.includes('/view/')) { + // navigation for /documents?view= + this.router.navigate([], { + queryParams: { view: view.id }, + }) + } + // make sure params are up-to-date + this.updateFilterRules(view.filter_rules, false) + this.sortParams[SORT_FIELD_PARAMETER] = this.list.sortField + this.sortParams[SORT_REVERSE_PARAMETER] = this.list.sortReverse + } + + navigateWithFilterRules(filterRules: FilterRule[]) { + this.updateFilterRules(filterRules) + this.router.navigate(['/documents'], { + queryParams: this.params, + }) + } +} + +export function filterRulesToQueryParams(filterRules: FilterRule[]): Object { + if (filterRules) { + let params = {} + for (let rule of filterRules) { + let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type) + if (ruleType.multi) { + params[ruleType.filtervar] = params[ruleType.filtervar] + ? params[ruleType.filtervar] + ',' + rule.value + : rule.value + } else if (ruleType.isnull_filtervar && rule.value == null) { + params[ruleType.isnull_filtervar] = true + } else { + params[ruleType.filtervar] = rule.value + } + } + return params + } else { + return null + } +} + +export function filterRulesFromQueryParams(queryParams: ParamMap) { + const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map( + (rt) => rt.filtervar + ) + + // transform query params to filter rules + let filterRulesFromQueryParams: FilterRule[] = [] + allFilterRuleQueryParams + .filter((frqp) => queryParams.has(frqp)) + .forEach((filterQueryParamName) => { + const filterQueryParamValues: string[] = queryParams + .get(filterQueryParamName) + .split(',') + + filterRulesFromQueryParams = filterRulesFromQueryParams.concat( + // map all values to filter rules + filterQueryParamValues.map((val) => { + return { + rule_type: FILTER_RULE_TYPES.find( + (rt) => rt.filtervar == filterQueryParamName + ).id, + value: val, + } + }) + ) + }) + + return filterRulesFromQueryParams +} diff --git a/src-ui/src/app/services/rest/document.service.ts b/src-ui/src/app/services/rest/document.service.ts index d06282bb8..3b242543e 100644 --- a/src-ui/src/app/services/rest/document.service.ts +++ b/src-ui/src/app/services/rest/document.service.ts @@ -10,8 +10,8 @@ import { map } from 'rxjs/operators' import { CorrespondentService } from './correspondent.service' import { DocumentTypeService } from './document-type.service' import { TagService } from './tag.service' -import { FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type' import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions' +import { filterRulesToQueryParams } from '../query-params.service' export const DOCUMENT_SORT_FIELDS = [ { field: 'archive_serial_number', name: $localize`ASN` }, @@ -57,27 +57,6 @@ export class DocumentService extends AbstractPaperlessService super(http, 'documents') } - public filterRulesToQueryParams(filterRules: FilterRule[]): Object { - if (filterRules) { - let params = {} - for (let rule of filterRules) { - let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type) - if (ruleType.multi) { - params[ruleType.filtervar] = params[ruleType.filtervar] - ? params[ruleType.filtervar] + ',' + rule.value - : rule.value - } else if (ruleType.isnull_filtervar && rule.value == null) { - params[ruleType.isnull_filtervar] = true - } else { - params[ruleType.filtervar] = rule.value - } - } - return params - } else { - return null - } - } - addObservablesToDocument(doc: PaperlessDocument) { if (doc.correspondent) { doc.correspondent$ = this.correspondentService.getCached( @@ -106,7 +85,7 @@ export class DocumentService extends AbstractPaperlessService pageSize, sortField, sortReverse, - Object.assign(extraParams, this.filterRulesToQueryParams(filterRules)) + Object.assign(extraParams, filterRulesToQueryParams(filterRules)) ).pipe( map((results) => { results.results.forEach((doc) => this.addObservablesToDocument(doc))