Enhancement: reorganize dates dropdown, add more relative options (#9307)

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

@@ -93,6 +93,7 @@
         }
         <pngx-dates-dropdown class="flex-fill fade" [class.show]="show"
           title="Dates" i18n-title
+          placement="bottom-end"
           (datesSet)="updateRules()"
           [(createdDateTo)]="dateCreatedTo"
           [(createdDateFrom)]="dateCreatedFrom"

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

@@ -96,7 +96,10 @@ import {
 import { environment } from 'src/environments/environment'
 import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
 import { CustomFieldsQueryDropdownComponent } from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
-import { DatesDropdownComponent } from '../../common/dates-dropdown/dates-dropdown.component'
+import {
+  DatesDropdownComponent,
+  RelativeDate,
+} from '../../common/dates-dropdown/dates-dropdown.component'
 import {
   FilterableDropdownComponent,
   Intersection,
@@ -422,7 +425,7 @@ describe('FilterEditorComponent', () => {
         value: 'created:[-1 week to now]',
       },
     ]
-    expect(component.dateCreatedRelativeDate).toEqual(0) // RELATIVE_DATE_QUERYSTRINGS['-1 week to now']
+    expect(component.dateCreatedRelativeDate).toEqual(1) // RELATIVE_DATE_QUERYSTRINGS['-1 week to now']
     expect(component.textFilter).toBeNull()
   }))
 
@@ -434,7 +437,7 @@ describe('FilterEditorComponent', () => {
         value: 'added:[-1 week to now]',
       },
     ]
-    expect(component.dateAddedRelativeDate).toEqual(0) // RELATIVE_DATE_QUERYSTRINGS['-1 week to now']
+    expect(component.dateAddedRelativeDate).toEqual(1) // RELATIVE_DATE_QUERYSTRINGS['-1 week to now']
     expect(component.textFilter).toBeNull()
   }))
 
@@ -1587,10 +1590,8 @@ describe('FilterEditorComponent', () => {
     const dateCreatedDropdown = fixture.debugElement.queryAll(
       By.directive(DatesDropdownComponent)
     )[0]
-    const dateCreatedBeforeRelativeButton = dateCreatedDropdown.queryAll(
-      By.css('button')
-    )[1]
-    dateCreatedBeforeRelativeButton.triggerEventHandler('click')
+    component.dateCreatedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    dateCreatedDropdown.triggerEventHandler('datesSet')
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
@@ -1606,10 +1607,8 @@ describe('FilterEditorComponent', () => {
     const dateCreatedDropdown = fixture.debugElement.queryAll(
       By.directive(DatesDropdownComponent)
     )[0]
-    const dateCreatedBeforeRelativeButton = dateCreatedDropdown.queryAll(
-      By.css('button')
-    )[1]
-    dateCreatedBeforeRelativeButton.triggerEventHandler('click')
+    component.dateCreatedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    dateCreatedDropdown.triggerEventHandler('datesSet')
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
@@ -1692,16 +1691,14 @@ describe('FilterEditorComponent', () => {
     const datesDropdown = fixture.debugElement.query(
       By.directive(DatesDropdownComponent)
     )
-    const dateCreatedBeforeRelativeButton = datesDropdown.queryAll(
-      By.css('button')
-    )[1]
-    dateCreatedBeforeRelativeButton.triggerEventHandler('click')
+    component.dateAddedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    datesDropdown.triggerEventHandler('datesSet')
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'created:[-1 week to now]',
+        value: 'added:[-1 week to now]',
       },
     ])
   }))
@@ -1711,16 +1708,14 @@ describe('FilterEditorComponent', () => {
     const datesDropdown = fixture.debugElement.query(
       By.directive(DatesDropdownComponent)
     )
-    const dateCreatedBeforeRelativeButton = datesDropdown.queryAll(
-      By.css('button')
-    )[1]
-    dateCreatedBeforeRelativeButton.triggerEventHandler('click')
+    component.dateAddedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    datesDropdown.triggerEventHandler('datesSet')
     fixture.detectChanges()
     tick(400)
     expect(component.filterRules).toEqual([
       {
         rule_type: FILTER_FULLTEXT_QUERY,
-        value: 'foo,created:[-1 week to now]',
+        value: 'foo,added:[-1 week to now]',
       },
     ])
   }))

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

@@ -135,24 +135,44 @@ 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_QUERY_REGEXP_CREATED = /created:[\["]([^\]]+)[\]"]/g
+const RELATIVE_DATE_QUERY_REGEXP_ADDED = /added:[\["]([^\]]+)[\]"]/g
 const RELATIVE_DATE_QUERYSTRINGS = [
   {
     relativeDate: RelativeDate.WITHIN_1_WEEK,
     dateQuery: '-1 week to now',
+    isRange: true,
   },
   {
     relativeDate: RelativeDate.WITHIN_1_MONTH,
     dateQuery: '-1 month to now',
+    isRange: true,
   },
   {
     relativeDate: RelativeDate.WITHIN_3_MONTHS,
     dateQuery: '-3 month to now',
+    isRange: true,
   },
   {
     relativeDate: RelativeDate.WITHIN_1_YEAR,
     dateQuery: '-1 year to now',
+    isRange: true,
+  },
+  {
+    relativeDate: RelativeDate.THIS_YEAR,
+    dateQuery: 'this year',
+  },
+  {
+    relativeDate: RelativeDate.THIS_MONTH,
+    dateQuery: 'this month',
+  },
+  {
+    relativeDate: RelativeDate.TODAY,
+    dateQuery: 'today',
+  },
+  {
+    relativeDate: RelativeDate.YESTERDAY,
+    dateQuery: 'yesterday',
   },
 ]
 
@@ -907,12 +927,11 @@ export class FilterEditorComponent
 
       let existingRuleArgs = existingRule?.value.split(',')
       if (this.dateCreatedRelativeDate !== null) {
+        const rd = RELATIVE_DATE_QUERYSTRINGS.find(
+          (qS) => qS.relativeDate == this.dateCreatedRelativeDate
+        )
         queryArgs.push(
-          `created:[${
-            RELATIVE_DATE_QUERYSTRINGS.find(
-              (qS) => qS.relativeDate == this.dateCreatedRelativeDate
-            ).dateQuery
-          }]`
+          `created:${rd.isRange ? `[${rd.dateQuery}]` : `"${rd.dateQuery}"`}`
         )
         if (existingRule) {
           queryArgs = existingRuleArgs
@@ -921,12 +940,11 @@ export class FilterEditorComponent
         }
       }
       if (this.dateAddedRelativeDate !== null) {
+        const rd = RELATIVE_DATE_QUERYSTRINGS.find(
+          (qS) => qS.relativeDate == this.dateAddedRelativeDate
+        )
         queryArgs.push(
-          `added:[${
-            RELATIVE_DATE_QUERYSTRINGS.find(
-              (qS) => qS.relativeDate == this.dateAddedRelativeDate
-            ).dateQuery
-          }]`
+          `added:${rd.isRange ? `[${rd.dateQuery}]` : `"${rd.dateQuery}"`}`
         )
         if (existingRule) {
           queryArgs = existingRuleArgs