Merge pull request #1865 from paperless-ngx/fix-relative-dates

Fix: frontend relative date searches

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html

@@ -1,11 +1,19 @@
   <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
+    <div *ngIf="isActive" class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
+      <span class="visually-hidden">selected</span>
+    </div>
   </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 ps-3" 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)">
-          {{qf.name}}
+          <div _ngcontent-hga-c166="" class="selected-icon me-1">
+            <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>
+          {{rd.name}}
         </button>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss

@@ -5,3 +5,8 @@
     line-height: 1;
   }
 }
+
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
+}

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts

@@ -16,12 +16,15 @@ import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 export interface DateSelection {
   before?: string
   after?: string
+  relativeDateID?: number
 }
 
-const LAST_7_DAYS = 0
+export enum RelativeDate {
-const LAST_MONTH = 1
+  LAST_7_DAYS = 0,
-const LAST_3_MONTHS = 2
+  LAST_MONTH = 1,
-const LAST_YEAR = 3
+  LAST_3_MONTHS = 2,
+  LAST_YEAR = 3,
+}
 
 @Component({
   selector: 'app-date-dropdown',
@@ -34,11 +37,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 
-  quickFilters = [
+  relativeDates = [
-    { id: LAST_7_DAYS, name: $localize`Last 7 days` },
+    {
-    { id: LAST_MONTH, name: $localize`Last month` },
+      date: RelativeDate.LAST_7_DAYS,
-    { id: LAST_3_MONTHS, name: $localize`Last 3 months` },
+      name: $localize`Last 7 days`,
-    { id: LAST_YEAR, name: $localize`Last year` },
+    },
+    {
+      date: RelativeDate.LAST_MONTH,
+      name: $localize`Last month`,
+    },
+    {
+      date: RelativeDate.LAST_3_MONTHS,
+      name: $localize`Last 3 months`,
+    },
+    {
+      date: RelativeDate.LAST_YEAR,
+      name: $localize`Last year`,
+    },
   ]
 
   datePlaceHolder: string
@@ -55,12 +70,26 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
   @Output()
   dateAfterChange = new EventEmitter<string>()
 
+  @Input()
+  relativeDate: RelativeDate
+
+  @Output()
+  relativeDateChange = new EventEmitter<number>()
+
   @Input()
   title: string
 
   @Output()
   datesSet = new EventEmitter<DateSelection>()
 
+  get isActive(): boolean {
+    return (
+      this.relativeDate !== null ||
+      this.dateAfter?.length > 0 ||
+      this.dateBefore?.length > 0
+    )
+  }
+
   private datesSetDebounce$ = new Subject()
 
   private sub: Subscription
@@ -77,37 +106,26 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     }
   }
 
-  setDateQuickFilter(qf: number) {
+  setRelativeDate(rd: RelativeDate) {
     this.dateBefore = null
-    let date = new Date()
+    this.dateAfter = null
-    switch (qf) {
+    this.relativeDate = this.relativeDate == rd ? null : rd
-      case LAST_7_DAYS:
-        date.setDate(date.getDate() - 7)
-        break
-
-      case LAST_MONTH:
-        date.setMonth(date.getMonth() - 1)
-        break
-
-      case LAST_3_MONTHS:
-        date.setMonth(date.getMonth() - 3)
-        break
-
-      case LAST_YEAR:
-        date.setFullYear(date.getFullYear() - 1)
-        break
-    }
-    this.dateAfter = formatDate(date, 'yyyy-MM-dd', 'en-us', 'UTC')
     this.onChange()
   }
 
   onChange() {
-    this.dateAfterChange.emit(this.dateAfter)
     this.dateBeforeChange.emit(this.dateBefore)
-    this.datesSet.emit({ after: this.dateAfter, before: this.dateBefore })
+    this.dateAfterChange.emit(this.dateAfter)
+    this.relativeDateChange.emit(this.relativeDate)
+    this.datesSet.emit({
+      after: this.dateAfter,
+      before: this.dateBefore,
+      relativeDateID: this.relativeDate,
+    })
   }
 
   onChangeDebounce() {
+    this.relativeDate = null
     this.datesSetDebounce$.next({
       after: this.dateAfter,
       before: this.dateBefore,

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -54,12 +54,14 @@
             title="Created" i18n-title
             (datesSet)="updateRules()"
             [(dateBefore)]="dateCreatedBefore"
-            [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
+            [(dateAfter)]="dateCreatedAfter"
+            [(relativeDate)]="dateCreatedRelativeDate"></app-date-dropdown>
           <app-date-dropdown class="mb-2 mb-xl-0"
+            title="Added" i18n-title
+            (datesSet)="updateRules()"
             [(dateBefore)]="dateAddedBefore"
             [(dateAfter)]="dateAddedAfter"
-            title="Added" i18n-title
+            [(relativeDate)]="dateAddedRelativeDate"></app-date-dropdown>
-            (datesSet)="updateRules()"></app-date-dropdown>
         </div>
      </div>
    </div>

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'
@@ -57,6 +58,27 @@ const TEXT_FILTER_MODIFIER_NOTNULL = 'not null'
 const TEXT_FILTER_MODIFIER_GT = 'greater'
 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',
   templateUrl: './filter-editor.component.html',
@@ -197,6 +219,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
   dateCreatedAfter: string
   dateAddedBefore: string
   dateAddedAfter: string
+  dateCreatedRelativeDate: RelativeDate
+  dateAddedRelativeDate: RelativeDate
 
   _unmodifiedFilterRules: FilterRule[] = []
   _filterRules: FilterRule[] = []
@@ -228,6 +252,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     this.dateAddedAfter = null
     this.dateCreatedBefore = null
     this.dateCreatedAfter = null
+    this.dateCreatedRelativeDate = null
+    this.dateAddedRelativeDate = null
     this.textFilterModifier = TEXT_FILTER_MODIFIER_EQUALS
 
     value.forEach((rule) => {
@@ -245,8 +271,39 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
           this.textFilterTarget = TEXT_FILTER_TARGET_ASN
           break
         case FILTER_FULLTEXT_QUERY:
-          this._textFilter = rule.value
+          let allQueryArgs = rule.value.split(',')
-          this.textFilterTarget = TEXT_FILTER_TARGET_FULLTEXT_QUERY
+          let textQueryArgs = []
+          allQueryArgs.forEach((arg) => {
+            if (arg.match(RELATIVE_DATE_QUERY_REGEXP_CREATED)) {
+              ;[...arg.matchAll(RELATIVE_DATE_QUERY_REGEXP_CREATED)].forEach(
+                (match) => {
+                  if (match[1]?.length) {
+                    this.dateCreatedRelativeDate =
+                      RELATIVE_DATE_QUERYSTRINGS.find(
+                        (qS) => qS.dateQuery == match[1]
+                      )?.relativeDate
+                  }
+                }
+              )
+            } else if (arg.match(RELATIVE_DATE_QUERY_REGEXP_ADDED)) {
+              ;[...arg.matchAll(RELATIVE_DATE_QUERY_REGEXP_ADDED)].forEach(
+                (match) => {
+                  if (match[1]?.length) {
+                    this.dateAddedRelativeDate =
+                      RELATIVE_DATE_QUERYSTRINGS.find(
+                        (qS) => qS.dateQuery == match[1]
+                      )?.relativeDate
+                  }
+                }
+              )
+            } else {
+              textQueryArgs.push(arg)
+            }
+          })
+          if (textQueryArgs.length) {
+            this._textFilter = textQueryArgs.join(',')
+            this.textFilterTarget = TEXT_FILTER_TARGET_FULLTEXT_QUERY
+          }
           break
         case FILTER_FULLTEXT_MORELIKE:
           this._moreLikeId = +rule.value
@@ -471,6 +528,89 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
         value: this.dateAddedAfter,
       })
     }
+    if (
+      this.dateAddedRelativeDate !== null ||
+      this.dateCreatedRelativeDate !== null
+    ) {
+      let queryArgs: Array<string> = []
+      let existingRule = filterRules.find(
+        (fr) => fr.rule_type == FILTER_FULLTEXT_QUERY
+      )
+
+      // if had a title / content search and added a relative date we need to carry it over...
+      if (
+        !existingRule &&
+        this._textFilter?.length > 0 &&
+        (this.textFilterTarget == TEXT_FILTER_TARGET_TITLE_CONTENT ||
+          this.textFilterTarget == TEXT_FILTER_TARGET_TITLE)
+      ) {
+        existingRule = filterRules.find(
+          (fr) =>
+            fr.rule_type == FILTER_TITLE_CONTENT || fr.rule_type == FILTER_TITLE
+        )
+        existingRule.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) {
+        existingRule.value = queryArgs.join(',')
+      } else {
+        filterRules.push({
+          rule_type: FILTER_FULLTEXT_QUERY,
+          value: queryArgs.join(','),
+        })
+      }
+    }
+    if (
+      this.dateCreatedRelativeDate == null &&
+      this.dateAddedRelativeDate == null
+    ) {
+      const existingRule = filterRules.find(
+        (fr) => fr.rule_type == FILTER_FULLTEXT_QUERY
+      )
+      if (
+        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
+          .replace(RELATIVE_DATE_QUERY_REGEXP_CREATED, '')
+          .replace(RELATIVE_DATE_QUERY_REGEXP_ADDED, '')
+        if (existingRule.value.replace(',', '').trim() === '') {
+          // if its empty now, remove it entirely
+          filterRules.splice(filterRules.indexOf(existingRule), 1)
+        }
+      }
+    }
     return filterRules
   }
 

src-ui/src/styles.scss

@@ -372,6 +372,10 @@ textarea,
   &:hover, &:focus {
     background-color: var(--bs-body-bg);
   }
+
+  &:focus {
+    color: var(--bs-body-color);
+  }
 }
 
 .dropdown-menu {