From 8082e3071ad2e35d163cff01838372a4682dbde7 Mon Sep 17 00:00:00 2001 From: alexm Date: Tue, 27 Sep 2022 15:17:54 +0200 Subject: [PATCH] try --- front/core/components/searchbar/searchbar.js | 82 +++++++++++++++++++- front/core/components/smart-table/index.html | 4 + front/core/components/smart-table/index.js | 82 +++++++++++++++++--- 3 files changed, 152 insertions(+), 16 deletions(-) diff --git a/front/core/components/searchbar/searchbar.js b/front/core/components/searchbar/searchbar.js index 89b5d7df6..fc194bc59 100644 --- a/front/core/components/searchbar/searchbar.js +++ b/front/core/components/searchbar/searchbar.js @@ -139,8 +139,12 @@ export default class Searchbar extends Component { } removeParam(index) { + const field = this.params[index].key; + this.filterSanitizer(field); + this.params.splice(index, 1); - this.doSearch(this.fromBar(), 'bar'); + this.toRemove = field; + this.doSearch(this.fromBar(), 'removeBar'); } fromBar() { @@ -163,7 +167,7 @@ export default class Searchbar extends Component { let keys = Object.keys(filter); keys.forEach(key => { - if (key == 'search') return; + if (key == 'search' || key == 'tableQ') return; let value = filter[key]; let chip; @@ -195,9 +199,10 @@ export default class Searchbar extends Component { doSearch(filter, source) { if (filter === this.filter && source != 'state') return; - let promise = this.onSearch({$params: filter}); + let promise = this.onSearch({$params: filter}, source); promise = promise || this.$q.resolve(); promise.then(data => this.onFilter(filter, source, data)); + this.toBar(filter); } onFilter(filter, source, data) { @@ -247,8 +252,15 @@ export default class Searchbar extends Component { this.filter = filter; + if (source == 'removeBar') { + delete params[this.toRemove]; + delete this.model.userParams[this.toRemove]; + this.model.refresh(); + } + if (!filter && this.model) this.model.clear(); + if (source != 'state') this.transition = this.$state.go(state, params, opts).transition; if (source != 'bar' && (source != 'state' || this.$state.is(this.baseState))) @@ -270,6 +282,12 @@ export default class Searchbar extends Component { return; } + if (Object.keys(filter).length === 0) { + this.filterSanitizer('search'); + if (this.model.userParams) + delete this.model.userParams['search']; + } + let where = null; let params = null; @@ -283,9 +301,65 @@ export default class Searchbar extends Component { params = this.fetchParams({$params: params}); } - return this.model.applyFilter(where ? {where} : null, params) + if (this.$params.q) + Object.assign(params, JSON.parse(this.$params.q)); + + return this.model.addFilter(where ? {where} : null, params) .then(() => this.model.data); } + + filterSanitizer(field) { + const userFilter = this.model.userFilter; + const userParams = this.model.userParams; + const where = userFilter && userFilter.where; + delete this.$params.q[field]; + + if (this.exprBuilder) { + const param = this.exprBuilder({ + param: field, + value: null + }); + if (param) [field] = Object.keys(param); + } + + if (!where) return; + + const whereKeys = Object.keys(where); + for (let key of whereKeys) { + removeProp(where, field, key); + + if (Object.keys(where).length == 0) + delete userFilter.where; + } + + function removeProp(obj, targetProp, prop) { + if (prop == targetProp) + delete obj[prop]; + + if (prop === 'and' || prop === 'or' && obj[prop]) { + const arrayCopy = obj[prop].slice(); + for (let param of arrayCopy) { + const [key] = Object.keys(param); + const index = obj[prop].findIndex(param => { + return Object.keys(param)[0] == key; + }); + if (key == targetProp) + obj[prop].splice(index, 1); + + if (param[key] instanceof Array) + removeProp(param, field, key); + + if (Object.keys(param).length == 0) + obj[prop].splice(index, 1); + } + + if (obj[prop].length == 0) + delete obj[prop]; + } + } + + return {userFilter, userParams}; + } } ngModule.vnComponent('vnSearchbar', { diff --git a/front/core/components/smart-table/index.html b/front/core/components/smart-table/index.html index f26a6b4a2..3168d7ee7 100644 --- a/front/core/components/smart-table/index.html +++ b/front/core/components/smart-table/index.html @@ -103,3 +103,7 @@ + + diff --git a/front/core/components/smart-table/index.js b/front/core/components/smart-table/index.js index 9e6e7009c..7880f257f 100644 --- a/front/core/components/smart-table/index.js +++ b/front/core/components/smart-table/index.js @@ -15,9 +15,15 @@ export default class SmartTable extends Component { this.$inputsScope; this.columns = []; this.autoSave = false; + this.autoState = true; this.transclude(); } + $onInit() { + if (this.model) + this.defaultFilter(); + } + $onDestroy() { const styleElement = document.querySelector('style[id="smart-table"]'); if (this.$.css && styleElement) @@ -49,6 +55,7 @@ export default class SmartTable extends Component { this._model = value; if (value) { this.$.model = value; + this.defaultFilter(); this.defaultOrder(); } } @@ -160,6 +167,26 @@ export default class SmartTable extends Component { } } + defaultFilter() { + if (!this.$params.q) return; + const stateFilter = JSON.parse(this.$params.q).tableQ; + if (!stateFilter || !this.exprBuilder) return; + + const columns = this.columns.map(column => column.field); + + this.displaySearch(); + if (!this.$inputsScope.searchProps) + this.$inputsScope.searchProps = {}; + + for (let param in stateFilter) { + if (columns.includes(param)) { + const whereParams = {[param]: stateFilter[param]}; + Object.assign(this.$inputsScope.searchProps, whereParams); + this.addFilter(param, stateFilter[param]); + } + } + } + defaultOrder() { const order = this.model.order; if (!order) return; @@ -394,29 +421,56 @@ export default class SmartTable extends Component { this.searchByColumn(field); } - searchByColumn(field) { - const searchCriteria = this.$inputsScope.searchProps[field]; - const emptySearch = searchCriteria === '' || searchCriteria == null; + searchPropsSanitizer() { + if (!this.$inputsScope || !this.$inputsScope.searchProps) return null; + let searchProps = this.$inputsScope.searchProps; + const searchPropsArray = Object.entries(searchProps); + searchProps = searchPropsArray.filter( + ([key, value]) => value && value != '' + ); + return Object.fromEntries(searchProps); + } + + searchByColumn(field) { const filters = this.filterSanitizer(field); if (filters && filters.userFilter) this.model.userFilter = filters.userFilter; - if (!emptySearch) - this.addFilter(field, this.$inputsScope.searchProps[field]); - else this.model.refresh(); + this.addFilter(field, this.$inputsScope.searchProps[field]); } addFilter(field, value) { - let where = {[field]: value}; + if (value == '') value = null; - if (this.exprBuilder) { - where = buildFilter(where, (param, value) => - this.exprBuilder({param, value}) - ); + let filterState; + if (this.$params.q) { + filterState = JSON.parse(this.$params.q); + delete filterState.tableQ[field]; } - this.model.addFilter({where}); + const whereParams = {[field]: value}; + if (value) { + let where = {[field]: value}; + if (this.exprBuilder) { + where = buildFilter(whereParams, (param, value) => + this.exprBuilder({param, value}) + ); + } + this.model.addFilter({where}); + } + + const searchProps = this.searchPropsSanitizer(); + + if (filterState.tableQ) + Object.assign(searchProps, filterState.tableQ); + + Object.assign(filterState.tableQ, searchProps); + + const params = {q: JSON.stringify(filterState)}; + + this.$state.go(this.$state.current.name, params, {location: 'replace'}); + this.model.refresh(); } applySort() { @@ -517,6 +571,10 @@ export default class SmartTable extends Component { this.model.refresh() .then(() => this.isRefreshing = false); } + + test() { + console.log('USER_FILTER', this.model.userFilter, 'USER_PARAMS', this.model.userParams); + } } SmartTable.$inject = ['$element', '$scope', '$transclude'];