From 20f4ad8c744ec5235f048d9dfb8d2fe3339ac080 Mon Sep 17 00:00:00 2001 From: Aaron George <79060613+octatau@users.noreply.github.com> Date: Mon, 27 May 2024 02:54:23 -0400 Subject: [PATCH 1/4] Initial implementation of datatable column filters --- .../main/lwc/manageRollups/manageRollups.html | 3 +- dlrs/main/lwc/manageRollups/manageRollups.js | 60 ++++++++++++++++++- 2 files changed, 59 insertions(+), 4 deletions(-) diff --git a/dlrs/main/lwc/manageRollups/manageRollups.html b/dlrs/main/lwc/manageRollups/manageRollups.html index a4c17446..25064995 100644 --- a/dlrs/main/lwc/manageRollups/manageRollups.html +++ b/dlrs/main/lwc/manageRollups/manageRollups.html @@ -32,13 +32,14 @@ diff --git a/dlrs/main/lwc/manageRollups/manageRollups.js b/dlrs/main/lwc/manageRollups/manageRollups.js index 967703e5..4ebe9ac3 100644 --- a/dlrs/main/lwc/manageRollups/manageRollups.js +++ b/dlrs/main/lwc/manageRollups/manageRollups.js @@ -68,19 +68,44 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { { label: "Rollup Type", fieldName: "aggregateOperation", - sortable: true + sortable: true, + actions: [ + { label: 'All', checked: true, name: 'All' }, + { label: "Sum", checked: false, name: "Sum" }, + { label: "Max", checked: false, name: "Max" }, + { label: "Min", checked: false, name: "Min" }, + { label: "Avg", checked: false, name: "Avg" }, + { label: "Count", checked: false, name: "Count" }, + { label: "Count Distinct", checked: false, name: "Count Distinct" }, + { label: "Concatenate", checked: false, name: "Concatenate" }, + { label: "Concatenate Distinct", checked: false, name: "Concatenate Distinct" }, + { label: "First", checked: false, name: "First" }, + { label: "Last", checked: false, name: "Last" } + ] }, { label: "Calc Mode", fieldName: "calculationMode", - sortable: true + sortable: true, + actions: [ + { label: 'All', checked: true, name: 'All' }, + { label: "Watch for Changes and Process Later", checked: false, name: "Watch and Process" }, + { label: "Realtime", checked: false, name: "Realtime" }, + { label: "Invocable by Automation", checked: false, name: "Process Builder" }, + { label: "Developer", checked: false, name: "Developer" } + ] }, { label: "Active", fieldName: "active", initialWidth: 75, type: "boolean", - sortable: true + sortable: true, + actions: [ + { label: 'All', checked: true, name: 'All' }, + { label: 'Active', checked: false, name: 'checked' }, + { label: 'Inactive', checked: false, name: 'unchecked' }, + ] }, { type: "button-icon", @@ -109,6 +134,7 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { searchFilter = ""; isLoading = true; selectedRollup = undefined; + filters = {}; connectedCallback() { this.refreshRollups(); @@ -117,6 +143,22 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { this.handleSubscribe(); } + get visibleRollups() { + return this.rollupList.filter(rollup => { + let filteredFieldNames = Object.keys(this.filters).filter(fieldName => this.filters[fieldName].value !== 'All'); + + return filteredFieldNames.every(fieldName => { + switch (this.filters[fieldName].type) { + case 'boolean': + return rollup[fieldName] === (this.filters[fieldName].value === 'checked' ? true : false) + + default: + return rollup[fieldName] === this.filters[fieldName].value + } + }) + }); + } + async refreshRollups() { this.isLoading = true; this.rollups = await getAllRollupConfigs(); @@ -280,6 +322,18 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { this.calcRollupList(); } + handleHeaderAction(event) { + let filters = { + ...this.filters, + [event.detail.columnDefinition.fieldName]: { + type: event.detail.columnDefinition.type, + value: event.detail.action.name + } + } + + this.filters = filters; + } + disconnectedCallback() { this.handleUnsubscribe(); } From 169f581e9cbd663110a4ddfa34dc0b969f15ac01 Mon Sep 17 00:00:00 2001 From: Aaron George <79060613+octatau@users.noreply.github.com> Date: Fri, 14 Jun 2024 23:39:33 -0400 Subject: [PATCH 2/4] Refine datatable column filtering logic --- .../main/lwc/manageRollups/manageRollups.html | 2 +- dlrs/main/lwc/manageRollups/manageRollups.js | 126 ++++++++++-------- 2 files changed, 73 insertions(+), 55 deletions(-) diff --git a/dlrs/main/lwc/manageRollups/manageRollups.html b/dlrs/main/lwc/manageRollups/manageRollups.html index 25064995..20b7c492 100644 --- a/dlrs/main/lwc/manageRollups/manageRollups.html +++ b/dlrs/main/lwc/manageRollups/manageRollups.html @@ -32,7 +32,7 @@ { - let filteredFieldNames = Object.keys(this.filters).filter(fieldName => this.filters[fieldName].value !== 'All'); - - return filteredFieldNames.every(fieldName => { - switch (this.filters[fieldName].type) { - case 'boolean': - return rollup[fieldName] === (this.filters[fieldName].value === 'checked' ? true : false) - - default: - return rollup[fieldName] === this.filters[fieldName].value - } - }) - }); - } - async refreshRollups() { this.isLoading = true; this.rollups = await getAllRollupConfigs(); @@ -182,19 +166,7 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { calcRollupList() { this.rollupList = Object.values(this.rollups).filter((r) => { - if (this.searchFilter.trim().length === 0) { - return true; - } - for (const c of this.dtColumns) { - if ( - r[c.fieldName] && - ("" + r[c.fieldName]).toLowerCase().indexOf(this.searchFilter) >= 0 - ) { - return true; - } - } - // didn't match any of the displayed fields - return false; + return this.meetsSearchFilter(r) && this.meetsColumnFilters(r); }); this.rollupList.sort((a, b) => { const dirModifier = this.sortDirection === "asc" ? 1 : -1; @@ -221,6 +193,34 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { }); } + meetsSearchFilter(rollup) { + if (this.searchFilter.trim().length === 0) { + return true; + } + for (const c of this.dtColumns) { + if ( + rollup[c.fieldName] && + ("" + rollup[c.fieldName]).toLowerCase().indexOf(this.searchFilter) >= 0 + ) { + return true; + } + } + // didn't match any of the displayed fields + return false; + } + + meetsColumnFilters(rollup) { + return Object.keys(this.filters).every(fieldName => { + switch (this.filters[fieldName].type) { + case 'boolean': + return rollup[fieldName] === (this.filters[fieldName].value === 'checked' ? true : false) + + default: + return rollup[fieldName] === this.filters[fieldName].value + } + }) + } + rollupSelectHandler(event) { const action = event.detail.action; const row = event.detail.row; @@ -323,15 +323,33 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { } handleHeaderAction(event) { - let filters = { - ...this.filters, - [event.detail.columnDefinition.fieldName]: { - type: event.detail.columnDefinition.type, - value: event.detail.action.name + const filteredFieldName = event.detail.columnDefinition.fieldName; + const columnRef = [...this.dtColumns]; + const currentColumn = columnRef.find(f => f.fieldName === filteredFieldName); + const previousAction = currentColumn.actions.find(action => action.checked); + const currentAction = currentColumn.actions.find(action => action.name === event.detail.action.name); + + if (event.detail.action.type === 'filter') { + if (event.detail.action.name === 'All') { + delete this.filters[filteredFieldName]; + delete currentColumn.iconName; + } else { + this.filters = { + ...this.filters, + [filteredFieldName]: { + type: event.detail.columnDefinition.type, + value: event.detail.action.name + } + } + currentColumn.iconName = 'utility:filterList'; } + + this.calcRollupList(); } - this.filters = filters; + previousAction.checked = false; + currentAction.checked = true; + this.dtColumns = columnRef; } disconnectedCallback() { From 871a802a12c9a2866b11ec8fb1c095ae6818582e Mon Sep 17 00:00:00 2001 From: Aaron George <79060613+octatau@users.noreply.github.com> Date: Sun, 30 Jun 2024 02:05:22 -0400 Subject: [PATCH 3/4] Dynamically populate column filter options --- dlrs/main/lwc/manageRollups/manageRollups.js | 78 ++++++++++++-------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/dlrs/main/lwc/manageRollups/manageRollups.js b/dlrs/main/lwc/manageRollups/manageRollups.js index e3ce389a..77817f85 100644 --- a/dlrs/main/lwc/manageRollups/manageRollups.js +++ b/dlrs/main/lwc/manageRollups/manageRollups.js @@ -69,31 +69,13 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { label: "Rollup Type", fieldName: "aggregateOperation", sortable: true, - actions: [ - { type:"filter", label: 'All', checked: true, name: 'All' }, - { type:"filter", label: "Sum", checked: false, name: "Sum" }, - { type:"filter", label: "Max", checked: false, name: "Max" }, - { type:"filter", label: "Min", checked: false, name: "Min" }, - { type:"filter", label: "Avg", checked: false, name: "Avg" }, - { type:"filter", label: "Count", checked: false, name: "Count" }, - { type:"filter", label: "Count Distinct", checked: false, name: "Count Distinct" }, - { type:"filter", label: "Concatenate", checked: false, name: "Concatenate" }, - { type:"filter", label: "Concatenate Distinct", checked: false, name: "Concatenate Distinct" }, - { type:"filter", label: "First", checked: false, name: "First" }, - { type:"filter", label: "Last", checked: false, name: "Last" } - ] + filterable: true }, { label: "Calc Mode", fieldName: "calculationMode", sortable: true, - actions: [ - { type:"filter", label: 'All', checked: true, name: 'All' }, - { type:"filter", label: "Watch and Process", checked: false, name: "Watch and Process" }, - { type:"filter", label: "Realtime", checked: false, name: "Realtime" }, - { type:"filter", label: "Automatable", checked: false, name: "Automatable" }, - { type:"filter", label: "Developer", checked: false, name: "Developer" } - ] + filterable: true }, { label: "Active", @@ -101,11 +83,7 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { initialWidth: 75, type: "boolean", sortable: true, - actions: [ - { type:"filter", label: 'All', checked: true, name: 'All' }, - { type:"filter", label: 'Active', checked: false, name: 'checked' }, - { type:"filter", label: 'Inactive', checked: false, name: 'unchecked' }, - ] + filterable: true }, { type: "button-icon", @@ -160,10 +138,52 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { // no rollups in the database, start to create a new one this.openEditor(null); } + this.updateColumnFilters(); this.calcRollupList(); this.isLoading = false; } + updateColumnFilters() { + this.dtColumns = [...this.dtColumns].map(conf => { + if (conf.filterable) { + // reset actions + if (conf.actions) { + conf.actions = conf.actions.filter(action => action.type !== "filter"); + } else { + conf.actions = []; + } + + const availableValues = this.rollups.reduce((result, rollup) => { + const fieldValue = rollup[conf.fieldName]; + + if (!result.includes(fieldValue)) { + result.push(fieldValue) + } + + return result; + }, []); + + conf.actions.push({ + type: "filter", + label: "All", + checked: true, + name: "All" + }); + + availableValues.sort().forEach(val => { + conf.actions.push({ + type: "filter", + label: val, + checked: false, + name: val + }); + }); + } + + return conf; + }); + } + calcRollupList() { this.rollupList = Object.values(this.rollups).filter((r) => { return this.meetsSearchFilter(r) && this.meetsColumnFilters(r); @@ -211,13 +231,7 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { meetsColumnFilters(rollup) { return Object.keys(this.filters).every(fieldName => { - switch (this.filters[fieldName].type) { - case 'boolean': - return rollup[fieldName] === (this.filters[fieldName].value === 'checked' ? true : false) - - default: - return rollup[fieldName] === this.filters[fieldName].value - } + return rollup[fieldName] === this.filters[fieldName].value }) } From 6d4d774f22649c3fe95333138a88f179cc3201ba Mon Sep 17 00:00:00 2001 From: Aaron George <79060613+octatau@users.noreply.github.com> Date: Sun, 14 Jul 2024 21:28:53 -0400 Subject: [PATCH 4/4] Reset column filters on list refresh --- dlrs/main/lwc/manageRollups/manageRollups.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/dlrs/main/lwc/manageRollups/manageRollups.js b/dlrs/main/lwc/manageRollups/manageRollups.js index 77817f85..7487c94f 100644 --- a/dlrs/main/lwc/manageRollups/manageRollups.js +++ b/dlrs/main/lwc/manageRollups/manageRollups.js @@ -178,6 +178,20 @@ export default class ManageRollups extends NavigationMixin(LightningElement) { name: val }); }); + + if (conf.fieldName in this.filters) { + const filteredValue = this.filters[conf.fieldName].value; + + // check if currently filtered value is still relevant + if (availableValues.includes(filteredValue)) { + conf.actions.find(a => a.type === "filter" && a.name === "All").checked = false; + conf.actions.find(a => a.type === "filter" && a.name === filteredValue).checked = true; + } else { + // remove filter + delete this.filters[conf.fieldName]; + conf.iconName = ''; + } + } } return conf;