try

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', {

front/core/components/smart-table/index.html

@@ -103,3 +103,7 @@
         </div>
     </tpl-body>
 </vn-popover>
+<vn-button
+    label="TEST"
+    ng-click="$ctrl.test()">
+</vn-button>

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'];