Remove relative date query strings from dropdown

2025-04-02 13:45:10 -05:00 · 2022-10-25 13:34:36 -07:00 · 2022-10-25 13:34:36 -07:00 · b52cb193e1
commit b52cb193e1
parent 6a00d5e08a
4 changed files with 98 additions and 71 deletions
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@ -7,13 +7,13 @@
  </button>
  <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <div class="list-group list-group-flush">
-        <button *ngFor="let qf of quickFilters" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setDateQuickFilter(qf.id)">
+        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.date)">
          <div _ngcontent-hga-c166="" class="selected-icon me-1">
-            <svg *ngIf="quickFilter === qf.id" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+            <svg *ngIf="relativeDate === rd.date" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg>
          </div>
-          {{qf.name}}
+          {{rd.name}}
        </button>
        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">

--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@ -16,20 +16,16 @@ import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 export interface DateSelection {
  before?: string
  after?: string
-  dateQuery?: string
+  relativeDateID?: number
 }

-interface QuickFilter {
-  id: number
-  name: string
-  dateQuery: string
+export enum RelativeDate {
+  LAST_7_DAYS = 0,
+  LAST_MONTH = 1,
+  LAST_3_MONTHS = 2,
+  LAST_YEAR = 3,
 }

-const LAST_7_DAYS = 0
-const LAST_MONTH = 1
-const LAST_3_MONTHS = 2
-const LAST_YEAR = 3
-
@Component({
  selector: 'app-date-dropdown',
  templateUrl: './date-dropdown.component.html',
@ -41,23 +37,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
  }

-  quickFilters: Array<QuickFilter> = [
+  relativeDates = [
    {
-      id: LAST_7_DAYS,
+      date: RelativeDate.LAST_7_DAYS,
      name: $localize`Last 7 days`,
-      dateQuery: '-1 week to now',
    },
    {
-      id: LAST_MONTH,
+      date: RelativeDate.LAST_MONTH,
      name: $localize`Last month`,
-      dateQuery: '-1 month to now',
    },
    {
-      id: LAST_3_MONTHS,
+      date: RelativeDate.LAST_3_MONTHS,
      name: $localize`Last 3 months`,
-      dateQuery: '-3 month to now',
    },
-    { id: LAST_YEAR, name: $localize`Last year`, dateQuery: '-1 year to now' },
+    {
+      date: RelativeDate.LAST_YEAR,
+      name: $localize`Last year`,
+    },
  ]

  datePlaceHolder: string
@ -74,21 +70,11 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
  @Output()
  dateAfterChange = new EventEmitter<string>()

-  quickFilter: number
-
  @Input()
-  set dateQuery(query: string) {
-    this.quickFilter = this.quickFilters.find((qf) => qf.dateQuery == query)?.id
-  }
-
-  get dateQuery(): string {
-    return (
-      this.quickFilters.find((qf) => qf.id == this.quickFilter)?.dateQuery ?? ''
-    )
-  }
+  relativeDate: RelativeDate

  @Output()
-  dateQueryChange = new EventEmitter<string>()
+  relativeDateChange = new EventEmitter<number>()

  @Input()
  title: string
@ -98,7 +84,7 @@ export class DateDropdownComponent implements OnInit, OnDestroy {

  get isActive(): boolean {
    return (
-      this.quickFilter > -1 ||
+      this.relativeDate !== null ||
      this.dateAfter?.length > 0 ||
      this.dateBefore?.length > 0
    )
@ -120,30 +106,26 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
    }
  }

-  setDateQuickFilter(qf: number) {
+  setRelativeDate(rd: RelativeDate) {
    this.dateBefore = null
    this.dateAfter = null
-    this.quickFilter = this.quickFilter == qf ? null : qf
+    this.relativeDate = this.relativeDate == rd ? null : rd
    this.onChange()
  }

-  qfIsSelected(qf: number) {
-    return this.quickFilter == qf
-  }
-
  onChange() {
    this.dateBeforeChange.emit(this.dateBefore)
    this.dateAfterChange.emit(this.dateAfter)
-    this.dateQueryChange.emit(this.dateQuery)
+    this.relativeDateChange.emit(this.relativeDate)
    this.datesSet.emit({
      after: this.dateAfter,
      before: this.dateBefore,
-      dateQuery: this.dateQuery,
+      relativeDateID: this.relativeDate,
    })
  }

  onChangeDebounce() {
-    this.dateQuery = null
+    this.relativeDate = null
    this.datesSetDebounce$.next({
      after: this.dateAfter,
      before: this.dateBefore,
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@ -55,13 +55,13 @@
            (datesSet)="updateRules()"
            [(dateBefore)]="dateCreatedBefore"
            [(dateAfter)]="dateCreatedAfter"
-            [(dateQuery)]="dateCreatedQuery"></app-date-dropdown>
+            [(relativeDate)]="dateCreatedRelativeDate"></app-date-dropdown>
          <app-date-dropdown class="mb-2 mb-xl-0"
            title="Added" i18n-title
            (datesSet)="updateRules()"
            [(dateBefore)]="dateAddedBefore"
            [(dateAfter)]="dateAddedAfter"
-            [(dateQuery)]="dateAddedQuery"></app-date-dropdown>
+            [(relativeDate)]="dateAddedRelativeDate"></app-date-dropdown>
        </div>
     </div>
   </div>
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@ -44,6 +44,7 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { RelativeDate } from '../../common/date-dropdown/date-dropdown.component'

 const TEXT_FILTER_TARGET_TITLE = 'title'
 const TEXT_FILTER_TARGET_TITLE_CONTENT = 'title-content'
@ -59,6 +60,24 @@ const TEXT_FILTER_MODIFIER_LT = 'less'

 const RELATIVE_DATE_QUERY_REGEXP_CREATED = /created:\[([^\]]+)\]/g
 const RELATIVE_DATE_QUERY_REGEXP_ADDED = /added:\[([^\]]+)\]/g
+const RELATIVE_DATE_QUERYSTRINGS = [
+  {
+    relativeDate: RelativeDate.LAST_7_DAYS,
+    dateQuery: '-1 week to now',
+  },
+  {
+    relativeDate: RelativeDate.LAST_MONTH,
+    dateQuery: '-1 month to now',
+  },
+  {
+    relativeDate: RelativeDate.LAST_3_MONTHS,
+    dateQuery: '-3 month to now',
+  },
+  {
+    relativeDate: RelativeDate.LAST_YEAR,
+    dateQuery: '-1 year to now',
+  },
+]

@Component({
  selector: 'app-filter-editor',
@ -200,8 +219,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
  dateCreatedAfter: string
  dateAddedBefore: string
  dateAddedAfter: string
-  dateCreatedQuery: string
-  dateAddedQuery: string
+  dateCreatedRelativeDate: RelativeDate
+  dateAddedRelativeDate: RelativeDate

  _unmodifiedFilterRules: FilterRule[] = []
  _filterRules: FilterRule[] = []
@ -233,8 +252,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    this.dateAddedAfter = null
    this.dateCreatedBefore = null
    this.dateCreatedAfter = null
-    this.dateCreatedQuery = null
-    this.dateAddedQuery = null
+    this.dateCreatedRelativeDate = null
+    this.dateAddedRelativeDate = null
    this.textFilterModifier = TEXT_FILTER_MODIFIER_EQUALS

    value.forEach((rule) => {
@ -258,7 +277,10 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
              ;[...arg.matchAll(RELATIVE_DATE_QUERY_REGEXP_CREATED)].forEach(
                (match) => {
                  if (match[1]?.length) {
-                    this.dateCreatedQuery = match[1]
+                    this.dateCreatedRelativeDate =
+                      RELATIVE_DATE_QUERYSTRINGS.find(
+                        (qS) => qS.dateQuery == match[1]
+                      )?.relativeDate
                  }
                }
              )
@ -268,7 +290,10 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
              ;[...arg.matchAll(RELATIVE_DATE_QUERY_REGEXP_ADDED)].forEach(
                (match) => {
                  if (match[1]?.length) {
-                    this.dateAddedQuery = match[1]
+                    this.dateAddedRelativeDate =
+                      RELATIVE_DATE_QUERYSTRINGS.find(
+                        (qS) => qS.dateQuery == match[1]
+                      )?.relativeDate
                  }
                }
              )
@ -501,26 +526,45 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
        value: this.dateAddedAfter,
      })
    }
-    if (this.dateAddedQuery || this.dateCreatedQuery) {
+    if (
+      this.dateAddedRelativeDate !== null ||
+      this.dateCreatedRelativeDate !== null
+    ) {
      let queryArgs: Array<string> = []
-      if (this.dateCreatedQuery)
-        queryArgs.push(`created:[${this.dateCreatedQuery}]`)
-      if (this.dateAddedQuery) queryArgs.push(`added:[${this.dateAddedQuery}]`)
      const existingRule = filterRules.find(
        (fr) => fr.rule_type == FILTER_FULLTEXT_QUERY
      )
+      let existingRuleArgs = existingRule?.value.split(',')
+      if (this.dateCreatedRelativeDate !== null) {
+        queryArgs.push(
+          `created:[${
+            RELATIVE_DATE_QUERYSTRINGS.find(
+              (qS) => qS.relativeDate == this.dateCreatedRelativeDate
+            ).dateQuery
+          }]`
+        )
+        if (existingRule) {
+          queryArgs = existingRuleArgs
+            .filter((arg) => !arg.match(RELATIVE_DATE_QUERY_REGEXP_CREATED))
+            .concat(queryArgs)
+        }
+      }
+      if (this.dateAddedRelativeDate !== null) {
+        queryArgs.push(
+          `added:[${
+            RELATIVE_DATE_QUERYSTRINGS.find(
+              (qS) => qS.relativeDate == this.dateAddedRelativeDate
+            ).dateQuery
+          }]`
+        )
+        if (existingRule) {
+          queryArgs = existingRuleArgs
+            .filter((arg) => !arg.match(RELATIVE_DATE_QUERY_REGEXP_ADDED))
+            .concat(queryArgs)
+        }
+      }
+
      if (existingRule) {
-        let existingRuleArgs = existingRule.value.split(',')
-        if (this.dateCreatedQuery) {
-          queryArgs = existingRuleArgs
-            .filter((arg) => !arg.includes('created:'))
-            .concat(queryArgs)
-        }
-        if (this.dateAddedQuery) {
-          queryArgs = existingRuleArgs
-            .filter((arg) => !arg.includes('added:'))
-            .concat(queryArgs)
-        }
        existingRule.value = queryArgs.join(',')
      } else {
        filterRules.push({
@ -529,13 +573,16 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
        })
      }
    }
-    if (!this.dateAddedQuery && !this.dateCreatedQuery) {
+    if (
+      this.dateCreatedRelativeDate == null &&
+      this.dateAddedRelativeDate == null
+    ) {
      const existingRule = filterRules.find(
        (fr) => fr.rule_type == FILTER_FULLTEXT_QUERY
      )
      if (
-        existingRule?.value.includes('created:') ||
-        existingRule?.value.includes('added:')
+        existingRule?.value.match(RELATIVE_DATE_QUERY_REGEXP_CREATED) ||
+        existingRule?.value.match(RELATIVE_DATE_QUERY_REGEXP_ADDED)
      ) {
        // remove any existing date query
        existingRule.value = existingRule.value
@ -660,8 +707,6 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
      target != TEXT_FILTER_TARGET_FULLTEXT_MORELIKE
    ) {
      this._textFilter = ''
-      this.dateAddedQuery = ''
-      this.dateCreatedQuery = ''
    }
    this.textFilterTarget = target
    this.textFilterInput.nativeElement.focus()