feat: add new optional filterShortcuts to Column Filter (#1223)

* feat: add new optional `filterShortcuts` to Column Filter
ghiscoding · Jun 18, 2024 · d4b1e28 · d4b1e28
1 parent 3e74491
commit d4b1e28
Show file tree

Hide file tree

Showing 19 changed files with 833 additions and 528 deletions.
diff --git a/docs/column-functionalities/filters/compound-filters.md b/docs/column-functionalities/filters/compound-filters.md
@@ -9,6 +9,7 @@
 - [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
 - [How to avoid filtering when only Operator dropdown is changed?](#how-to-avoid-filtering-when-only-operator-dropdown-is-changed)
 - [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
+- [Filter Shortcuts](input-filter.md#filter-shortcuts)
 
 ### Description
 Compound filters are a combination of 2 elements (Operator Select + Input Filter) used as a filter on a column. This is very useful to make it obvious to the user that there are Operator available and even more useful with a date picker (`Vanilla-Calendar`).

diff --git a/docs/column-functionalities/filters/input-filter.md b/docs/column-functionalities/filters/input-filter.md
@@ -8,6 +8,7 @@
 - [Debounce/Throttle Text Search (wait for user to stop typing before filtering)](#debouncethrottle-text-search-wait-for-user-to-stop-typing-before-filtering)
 - [Ignore Locale Accent in Text Filter/Sorting](#ignore-locale-accent-in-text-filtersorting)
 - [Custom Filter Predicate](#custom-filter-predicate)
+- [Filter Shortcuts](#filter-shortcuts)
 
 ### Description
 Input filter is the default filter when enabling filters.
@@ -222,3 +223,38 @@ this.columnDefinitions = [
 The custom filter predicate above was to answer a Stack Overflow question and will work similarly to an SQL LIKE matcher (it's not perfect and probably requires more work but is enough to demo the usage of a custom filter predicate)
 
 ![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/3e77774e-3a9f-4ca4-bca7-50a033a4b48d)
+
+### Filter Shortcuts
+
+User can declare some Filter Shortcuts, that will be added to the Header Menu of the Column it was assigned. These shortcuts are simply a list of filter search values (e.g. Filter the Blank/Non-Blanks Values), the end user can type the same search values themselves but the shortcuts are simply meant to be quicker without having to know what to type (e.g. Filter Current Year).
+
+ The shortcuts can be declared via an array that must include at least a `title` (or `titleKey`) a `searchTerms` array and lastly an optional `operator` can also be provided. The available properties of these shortcut is a merge of Header Menu Item interface (except `command` and `action` which are reserved and assigned internally) and of course the 3 properties mentioned above. The declaration is very similar to how we use it when declaring Grid Presets as shown below
+
+```ts
+this.columnDefinitions = [
+  {
+    id: 'country', name: 'Country', field: 'country',
+    filter: {
+      model: Filters.inputText,
+      filterShortcuts: [
+        { title: 'Blank Values', searchTerms: ['A'], operator: '<', iconCssClass: 'mdi mdi-filter-minus-outline', },
+        { title: 'Non-Blank Values', searchTerms: ['A'], operator: '>', iconCssClass: 'mdi mdi-filter-plus-outline', },
+      ]
+    },
+  },
+  {
+    id: 'finish', name: 'Finish', field: 'finish',
+    filter: {
+      model: Filters.dateRange,
+      filterShortcuts: [
+        {
+          // using Locale translations & Tempo to calculate next 30 days
+          titleKey: 'NEXT_30_DAYS',
+          iconCssClass: 'mdi mdi-calendar',
+          searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD'), tempoFormat(addDay(new Date(), 30), 'YYYY-MM-DD')],
+        },
+      ]
+    },
+  },
+];
+```
diff --git a/docs/column-functionalities/filters/range-filters.md b/docs/column-functionalities/filters/range-filters.md
@@ -6,6 +6,7 @@
 - [Using a Date Range](#using-a-date-range-filter)
 - [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
 - [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
+- [Filter Shortcuts](input-filter.md#filter-shortcuts)
 
 ### Introduction
 Range filters allows you to search for a value between 2 min/max values, the 2 most common use case would be to filter between 2 numbers or dates, you can do that with the Slider & Date Range Filters. The range can also be defined as inclusive (`>= 0 and <= 10`) or exclusive (`> 0 and < 10`), the default is exclusive but you can change that, see below for more info.

diff --git a/docs/column-functionalities/filters/select-filter.md b/docs/column-functionalities/filters/select-filter.md
@@ -21,6 +21,7 @@
 - [Query against a different field](#query-against-another-field-property)
 - [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
 - [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
+- [Filter Shortcuts](input-filter.md#filter-shortcuts)
 
 ### Demo
 [Demo Page](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example4) / [Demo Component](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example4.ts)

diff --git a/package.json b/package.json
@@ -40,23 +40,23 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",
-    "@aurelia/fetch-client": "^2.0.0-beta.18",
-    "@aurelia/platform": "^2.0.0-beta.18",
-    "@aurelia/platform-browser": "^2.0.0-beta.18",
+    "@aurelia/fetch-client": "^2.0.0-beta.19",
+    "@aurelia/platform": "^2.0.0-beta.19",
+    "@aurelia/platform-browser": "^2.0.0-beta.19",
     "@formkit/tempo": "^0.1.1",
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^3.5.1",
-    "@lerna-lite/publish": "^3.5.1",
+    "@lerna-lite/publish": "^3.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.11.0",
-    "cypress-real-events": "^1.12.0",
-    "eslint": "^9.4.0",
+    "cypress-real-events": "^1.13.0",
+    "eslint": "^9.5.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.8.1",
+    "eslint-plugin-n": "^17.9.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -67,9 +67,9 @@
     "npm-run-all2": "^6.2.0",
     "pnpm": "^8.15.8",
     "rimraf": "^5.0.7",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.1.5",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.12.0"
+    "typescript-eslint": "^7.13.1"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/aurelia-slickgrid/package.json b/packages/aurelia-slickgrid/package.json
@@ -46,20 +46,20 @@
     "pack": "npm pack"
   },
   "peerDependencies": {
-    "aurelia": "^2.0.0-beta.18"
+    "aurelia": "^2.0.0-beta.19"
   },
   "dependencies": {
-    "@aurelia/i18n": "^2.0.0-beta.18",
-    "@aurelia/runtime": "^2.0.0-beta.18",
-    "@aurelia/runtime-html": "^2.0.0-beta.18",
+    "@aurelia/i18n": "^2.0.0-beta.19",
+    "@aurelia/runtime": "^2.0.0-beta.19",
+    "@aurelia/runtime-html": "^2.0.0-beta.19",
     "@formkit/tempo": "^0.1.1",
-    "@slickgrid-universal/common": "~5.1.0",
-    "@slickgrid-universal/custom-footer-component": "~5.1.0",
-    "@slickgrid-universal/empty-warning-component": "~5.1.0",
-    "@slickgrid-universal/event-pub-sub": "~5.0.0",
-    "@slickgrid-universal/pagination-component": "~5.1.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.1.0",
-    "@slickgrid-universal/utils": "~5.0.0",
+    "@slickgrid-universal/common": "~5.2.0",
+    "@slickgrid-universal/custom-footer-component": "~5.2.0",
+    "@slickgrid-universal/empty-warning-component": "~5.2.0",
+    "@slickgrid-universal/event-pub-sub": "~5.2.0",
+    "@slickgrid-universal/pagination-component": "~5.2.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.2.0",
+    "@slickgrid-universal/utils": "~5.2.0",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.2"
   },

diff --git a/packages/aurelia-slickgrid/src/assets/i18n/en/aurelia-slickgrid.json b/packages/aurelia-slickgrid/src/assets/i18n/en/aurelia-slickgrid.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Export to Excel",
   "EXPORT_TO_TAB_DELIMITED": "Export in Text format (Tab delimited)",
   "EXPORT_TO_TEXT_FORMAT": "Export in Text format",
+  "FILTER_SHORTCUTS": "Filter Shortcuts",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
   "FORCE_FIT_COLUMNS": "Force fit columns",
   "FREEZE_COLUMNS": "Freeze Columns",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Billing Information"
   },
+  "BLANK_VALUES": "Blank Values",
+  "NON_BLANK_VALUES": "Non-Blank Values",
   "CUSTOM_COMMANDS": "Custom Commands",
   "DURATION": "Duration",
   "COMPANY": "Company",
@@ -81,18 +84,22 @@
   "FALSE": "False",
   "FEMALE": "Female",
   "FINISH": "Finish",
+  "FUTURE": "Future",
   "GENDER": "Gender",
   "HELP": "Help",
   "HIGH": "High",
   "LOW": "Low",
   "MEDIUM": "Medium",
   "MALE": "Male",
   "NAME": "Name",
+  "NEXT_20_DAYS": "Next 20 days",
   "NONE": "None",
+  "PAST": "Past",
   "PERCENT_COMPLETE": "% Complete",
   "PRIORITY": "Priority",
   "START": "Start",
   "TASK_X": "Task {{x}}",
   "TITLE": "Title",
+  "TODAY": "Today",
   "TRUE": "True"
 }
diff --git a/packages/aurelia-slickgrid/src/assets/i18n/fr/aurelia-slickgrid.json b/packages/aurelia-slickgrid/src/assets/i18n/fr/aurelia-slickgrid.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Exporter vers Excel",
   "EXPORT_TO_TAB_DELIMITED": "Exporter en format texte (délimité par tabulation)",
   "EXPORT_TO_TEXT_FORMAT": "Exporter en format texte",
+  "FILTER_SHORTCUTS": "Raccourcis de filtre",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} éléments",
   "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
   "FREEZE_COLUMNS": "Geler les colonnes",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Information de Facturation"
   },
+  "BLANK_VALUES": "Valeurs nulles",
+  "NON_BLANK_VALUES": "Valeurs non-nulles",
   "DURATION": "Durée",
   "COMPANY": "Compagnie",
   "COMPLETED": "Terminé",
@@ -81,19 +84,23 @@
   "FALSE": "Faux",
   "FEMALE": "Féminin",
   "FINISH": "Fin",
+  "FUTURE": "Future",
   "GENDER": "Sexe",
   "HELP": "Aide",
   "HIGH": "Haut",
   "LOW": "Bas",
   "MEDIUM": "Moyen",
   "MALE": "Masculin",
   "NAME": "Nom",
+  "NEXT_20_DAYS": "20 prochain jours",
   "NONE": "Aucun",
+  "PAST": "Passé",
   "PERCENT_COMPLETE": "% Achevée",
   "PRIORITY": "Priorité",
   "START": "Début",
   "TASK_X": "Tâche {{x}}",
   "TITLE": "Titre",
   "TITLE.NAME": "Nom du Titre",
+  "TODAY": "Aujourd'hui",
   "TRUE": "Vrai"
 }
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -32,41 +32,41 @@
     "serve:demo": "servor ./website index.html 9000"
   },
   "dependencies": {
-    "@aurelia/fetch-client": "^2.0.0-beta.18",
-    "@aurelia/i18n": "^2.0.0-beta.18",
-    "@aurelia/kernel": "^2.0.0-beta.18",
-    "@aurelia/metadata": "^2.0.0-beta.18",
-    "@aurelia/router": "^2.0.0-beta.18",
-    "@aurelia/runtime": "^2.0.0-beta.18",
-    "@aurelia/runtime-html": "^2.0.0-beta.18",
+    "@aurelia/fetch-client": "^2.0.0-beta.19",
+    "@aurelia/i18n": "^2.0.0-beta.19",
+    "@aurelia/kernel": "^2.0.0-beta.19",
+    "@aurelia/metadata": "^2.0.0-beta.19",
+    "@aurelia/router": "^2.0.0-beta.19",
+    "@aurelia/runtime": "^2.0.0-beta.19",
+    "@aurelia/runtime-html": "^2.0.0-beta.19",
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.1",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^5.1.0",
-    "@slickgrid-universal/composite-editor-component": "^5.1.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.1.0",
-    "@slickgrid-universal/excel-export": "^5.1.0",
-    "@slickgrid-universal/graphql": "^5.1.0",
-    "@slickgrid-universal/odata": "^5.1.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^5.1.0",
-    "@slickgrid-universal/rxjs-observable": "^5.1.0",
-    "@slickgrid-universal/text-export": "^5.1.0",
-    "aurelia": "^2.0.0-beta.18",
+    "@slickgrid-universal/common": "^5.2.0",
+    "@slickgrid-universal/composite-editor-component": "^5.2.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.2.0",
+    "@slickgrid-universal/excel-export": "^5.2.0",
+    "@slickgrid-universal/graphql": "^5.2.0",
+    "@slickgrid-universal/odata": "^5.2.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^5.2.0",
+    "@slickgrid-universal/rxjs-observable": "^5.2.0",
+    "@slickgrid-universal/text-export": "^5.2.0",
+    "aurelia": "^2.0.0-beta.19",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",
     "i18next": "^23.11.5",
     "i18next-fetch-backend": "^6.0.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@aurelia/testing": "^2.0.0-beta.18",
-    "@aurelia/ts-jest": "^2.0.0-beta.18",
-    "@aurelia/webpack-loader": "^2.0.0-beta.18",
+    "@aurelia/testing": "^2.0.0-beta.19",
+    "@aurelia/ts-jest": "^2.0.0-beta.19",
+    "@aurelia/webpack-loader": "^2.0.0-beta.19",
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "@types/sortablejs": "^1.15.8",
     "aurelia-polyfills": "^1.3.4",
     "autoprefixer": "^10.4.19",
@@ -83,15 +83,15 @@
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.4",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "servor": "^4.0.2",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
     "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",

diff --git a/packages/demo/src/assets/i18n/en/aurelia-slickgrid.json b/packages/demo/src/assets/i18n/en/aurelia-slickgrid.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Export to Excel",
   "EXPORT_TO_TAB_DELIMITED": "Export in Text format (Tab delimited)",
   "EXPORT_TO_TEXT_FORMAT": "Export in Text format",
+  "FILTER_SHORTCUTS": "Filter Shortcuts",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
   "FORCE_FIT_COLUMNS": "Force fit columns",
   "FREEZE_COLUMNS": "Freeze Columns",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Billing Information"
   },
+  "BLANK_VALUES": "Blank Values",
+  "NON_BLANK_VALUES": "Non-Blank Values",
   "CUSTOM_COMMANDS": "Custom Commands",
   "DURATION": "Duration",
   "COMPANY": "Company",
@@ -81,19 +84,23 @@
   "FALSE": "False",
   "FEMALE": "Female",
   "FINISH": "Finish",
+  "FUTURE": "Future",
   "GENDER": "Gender",
   "HELP": "Help",
   "HIGH": "High",
   "LOW": "Low",
   "MEDIUM": "Medium",
   "MALE": "Male",
   "NAME": "Name",
+  "NEXT_20_DAYS": "Next 20 days",
   "NONE": "None",
+  "PAST": "Past",
   "PERCENT_COMPLETE": "% Complete",
   "PRIORITY": "Priority",
   "START": "Start",
   "TASK_X": "Task {{x}}",
   "TITLE": "Title",
+  "TODAY": "Today",
   "TRUE": "True",
   "X_DAY_PLURAL": "{{x}} day{{plural}}",
   "RBE_BTN_UPDATE": "Update the current row",

diff --git a/packages/demo/src/assets/i18n/fr/aurelia-slickgrid.json b/packages/demo/src/assets/i18n/fr/aurelia-slickgrid.json
@@ -24,6 +24,7 @@
   "EXPORT_TO_EXCEL": "Exporter vers Excel",
   "EXPORT_TO_TAB_DELIMITED": "Exporter en format texte (délimité par tabulation)",
   "EXPORT_TO_TEXT_FORMAT": "Exporter en format texte",
+  "FILTER_SHORTCUTS": "Raccourcis de filtre",
   "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} éléments",
   "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
   "FREEZE_COLUMNS": "Geler les colonnes",
@@ -69,6 +70,8 @@
     },
     "INFORMATION": "Information de Facturation"
   },
+  "BLANK_VALUES": "Valeurs nulles",
+  "NON_BLANK_VALUES": "Valeurs non-nulles",
   "DURATION": "Durée",
   "COMPANY": "Compagnie",
   "COMPLETED": "Terminé",
@@ -81,20 +84,24 @@
   "FALSE": "Faux",
   "FEMALE": "Féminin",
   "FINISH": "Fin",
+  "FUTURE": "Future",
   "GENDER": "Sexe",
   "HELP": "Aide",
   "HIGH": "Haut",
   "LOW": "Bas",
   "MEDIUM": "Moyen",
   "MALE": "Masculin",
   "NAME": "Nom",
+  "NEXT_20_DAYS": "20 prochain jours",
   "NONE": "Aucun",
+  "PAST": "Passé",
   "PERCENT_COMPLETE": "% Achevée",
   "PRIORITY": "Priorité",
   "START": "Début",
   "TASK_X": "Tâche {{x}}",
   "TITLE": "Titre",
   "TITLE.NAME": "Nom du Titre",
+  "TODAY": "Aujourd'hui",
   "TRUE": "Vrai",
   "X_DAY_PLURAL": "{{x}} journée{{plural}}",
   "RBE_BTN_UPDATE": "Mettre à jour la ligne actuelle",

diff --git a/packages/demo/src/examples/locales/fr.ts b/packages/demo/src/examples/locales/fr.ts
@@ -16,6 +16,7 @@ export const localeFrench = {
   TEXT_EXPORT_TO_EXCEL: 'Exporter vers Excel',
   TEXT_EXPORT_TO_TAB_DELIMITED: 'Exporter en format texte (délimité par tabulation)',
   TEXT_EXPORT_TO_TEXT_FORMAT: 'Exporter en format texte',
+  TEXT_FILTER_SHORTCUTS: 'Raccourcis de filtre',
   TEXT_FORCE_FIT_COLUMNS: 'Ajustement forcé des colonnes',
   TEXT_GROUP_BY: 'Grouper par',
   TEXT_HIDE_COLUMN: 'Cacher la colonne',