From 3e8bff03e749eb7115e082a6b96e83a585cf5b55 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Thu, 5 May 2022 00:23:06 -0700 Subject: [PATCH] Refactor query param handling to service --- .../app-frame/app-frame.component.ts | 6 +- .../saved-view-widget.component.ts | 6 +- .../document-detail.component.ts | 6 +- .../document-list/document-list.component.ts | 40 ++----- .../correspondent-list.component.ts | 6 +- .../document-type-list.component.ts | 6 +- .../management-list.component.ts | 5 +- .../manage/tag-list/tag-list.component.ts | 6 +- .../services/document-list-view.service.ts | 21 ++-- .../src/app/services/query-params.service.ts | 101 ++++++++++++++++++ .../src/app/services/rest/document.service.ts | 28 +---- 11 files changed, 147 insertions(+), 84 deletions(-) create mode 100644 src-ui/src/app/services/query-params.service.ts 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..4bab42cb0 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.loadFilterRules([ { 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 b8bf389dd..20cd5aa99 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 ) {} @@ -67,7 +67,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy { } clickTag(tag: PaperlessTag) { - this.list.quickFilter([ + this.queryParamsService.loadFilterRules([ { 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..1961c5e9f 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.loadFilterRules([ { rule_type: FILTER_FULLTEXT_MORELIKE, value: this.documentId.toString(), 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 bfbf0fc47..8f8a0f6fc 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 @@ -31,6 +31,7 @@ import { } from 'src/app/directives/sortable.directive' import { ConsumerStatusService } from 'src/app/services/consumer-status.service' import { DocumentListViewService } from 'src/app/services/document-list-view.service' +import { QueryParamsService } from 'src/app/services/query-params.service' import { DocumentService, DOCUMENT_SORT_FIELDS, @@ -55,7 +56,8 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { private router: Router, private toastService: ToastService, private modalService: NgbModal, - private consumerStatusService: ConsumerStatusService + private consumerStatusService: ConsumerStatusService, + private queryParamsService: QueryParamsService ) {} @ViewChild('filterEditor') @@ -127,10 +129,6 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { 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 @@ -140,30 +138,9 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { if (queryParams.has('view')) { this.loadViewConfig(parseInt(queryParams.get('view'))) } else { - // 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.queryParamsService.params = queryParams + this.list.filterRules = this.queryParamsService.filterRules this.list.reload() this.unmodifiedFilterRules = [] } @@ -175,8 +152,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { .pipe(takeUntil(this.unsubscribeNotifier)) .subscribe({ next: (filterRules) => { - const params = - this.documentService.filterRulesToQueryParams(filterRules) + this.queryParamsService.filterRules = filterRules // if we were on a saved view we navigate 'away' to /documents let base = [] @@ -184,7 +160,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { this.router.navigate(base, { relativeTo: this.route, - queryParams: params, + queryParams: this.queryParamsService.params, }) }, }) @@ -296,7 +272,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit { } clickMoreLike(documentID: number) { - this.list.quickFilter([ + this.queryParamsService.loadFilterRules([ { 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 4887f5e34..c848fc6e5 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 +141,7 @@ export abstract class ManagementListComponent } filterDocuments(object: ObjectWithId) { - this.list.quickFilter([ + this.queryParamsService.loadFilterRules([ { 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..a822ce457 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, @@ -9,6 +9,7 @@ import { import { PaperlessDocument } from '../data/paperless-document' import { PaperlessSavedView } from '../data/paperless-saved-view' import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys' +import { QueryParamsService } from './query-params.service' import { DocumentService, DOCUMENT_SORT_FIELDS } from './rest/document.service' import { SettingsService, SETTINGS_KEYS } from './settings.service' @@ -220,6 +221,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 +273,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) } @@ -435,8 +435,7 @@ export class DocumentListViewService { constructor( private documentService: DocumentService, private settings: SettingsService, - private router: Router, - private route: ActivatedRoute + private queryParamsService: QueryParamsService ) { 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..302d81b4f --- /dev/null +++ b/src-ui/src/app/services/query-params.service.ts @@ -0,0 +1,101 @@ +import { Injectable } from '@angular/core' +import { + ActivatedRoute, + convertToParamMap, + ParamMap, + Params, + Router, +} from '@angular/router' +import { FilterRule } from '../data/filter-rule' +import { FILTER_RULE_TYPES } from '../data/filter-rule-type' + +@Injectable({ + providedIn: 'root', +}) +export class QueryParamsService { + constructor(private router: Router, private route: ActivatedRoute) {} + + private filterParams: Params + private _filterRules: FilterRule[] + + set filterRules(filterRules: FilterRule[]) { + this._filterRules = filterRules + this.filterParams = this.filterRulesToQueryParams(filterRules) + } + + get filterRules(): FilterRule[] { + return this._filterRules + } + + set params(params: any) { + this.filterParams = params + this._filterRules = this.filterRulesFromQueryParams( + params.keys ? params : convertToParamMap(params) // ParamMap + ) + } + + get params(): Params { + return { + ...this.filterParams, + } + } + + private 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 + } + } + + private 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 + } + + loadFilterRules(filterRules: FilterRule[]) { + this.filterRules = filterRules + this.router.navigate(['/documents'], { + relativeTo: this.route, + queryParams: this.params, + }) + } +} diff --git a/src-ui/src/app/services/rest/document.service.ts b/src-ui/src/app/services/rest/document.service.ts index d06282bb8..f9e68b850 100644 --- a/src-ui/src/app/services/rest/document.service.ts +++ b/src-ui/src/app/services/rest/document.service.ts @@ -12,6 +12,7 @@ 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 { QueryParamsService } from '../query-params.service' export const DOCUMENT_SORT_FIELDS = [ { field: 'archive_serial_number', name: $localize`ASN` }, @@ -52,32 +53,12 @@ export class DocumentService extends AbstractPaperlessService http: HttpClient, private correspondentService: CorrespondentService, private documentTypeService: DocumentTypeService, - private tagService: TagService + private tagService: TagService, + private queryParamsService: QueryParamsService ) { 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( @@ -101,12 +82,13 @@ export class DocumentService extends AbstractPaperlessService filterRules?: FilterRule[], extraParams = {} ): Observable> { + this.queryParamsService.filterRules = filterRules return this.list( page, pageSize, sortField, sortReverse, - Object.assign(extraParams, this.filterRulesToQueryParams(filterRules)) + Object.assign(extraParams, this.queryParamsService.params) ).pipe( map((results) => { results.results.forEach((doc) => this.addObservablesToDocument(doc))