@zeedhi/teknisa-components-vuetify 1.127.0 → 1.128.0

package/dist/tek-components-vuetify.esm.js

@@ -4342,10 +4342,81 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
     constructor() {
         super(...arguments);
         this.instanceType = TekGridLayoutOptions$1;
+        this.updateFilterWatcher = true;
+        this.updateDynamicFilterWatcher = true;
+        this.applying = false;
     }
     created() {
         this.instance.viewApplyLayout = this.applyLayout;
         this.instance.viewGetCurrentLayout = this.getCurrentLayout;
+        this.$nextTick(() => {
+            var _a, _b;
+            if ((_b = (_a = this.instance.grid) === null || _a === void 0 ? void 0 : _a.datasource) === null || _b === void 0 ? void 0 : _b.filter) {
+                this.updateFilterWatcher = false;
+                this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+                this.$nextTick(() => { this.updateFilterWatcher = true; });
+                if (this.instance.grid.datasource instanceof TekRestDatasource) {
+                    this.updateDynamicFilterWatcher = false;
+                    this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+                    this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
+                }
+            }
+        });
+    }
+    createFilterProxy(filter) {
+        const self = this;
+        return new Proxy(filter, {
+            set(target, prop, value) {
+                if (target[prop] !== value) {
+                    target[prop] = value;
+                    self.checkFilterChanged();
+                }
+                return true;
+            },
+        });
+    }
+    createDynamicFilterProxy(filter) {
+        const self = this;
+        const handler = {
+            set(target, prop, value) {
+                if (target[prop] !== value) {
+                    target[prop] = value;
+                    self.checkFilterChanged();
+                }
+                return true;
+            },
+            get(target, prop) {
+                const value = target[prop];
+                if (prop !== '__ob__' && typeof value === 'object' && value !== null) {
+                    return new Proxy(value, handler);
+                }
+                return value;
+            },
+        };
+        return new Proxy(filter, handler);
+    }
+    checkFilterChanged() {
+        if (!this.applying && this.layoutHasFilter(this.instance.currentLayoutName)) {
+            this.instance.layoutEdited = true;
+        }
+    }
+    datasourceFilterChanged() {
+        if (!this.updateFilterWatcher)
+            return;
+        this.updateFilterWatcher = false;
+        this.checkFilterChanged();
+        this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+        this.$nextTick(() => { this.updateFilterWatcher = true; });
+    }
+    datasourceDynamicFilterChanged() {
+        if (!this.updateDynamicFilterWatcher)
+            return;
+        this.updateDynamicFilterWatcher = false;
+        this.checkFilterChanged();
+        if (this.instance.grid.datasource instanceof TekRestDatasource) {
+            this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+        }
+        this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
     }
     confirmLayoutClick({ component }) {
         const layoutName = component.value;
@@ -4367,6 +4438,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         const tableElement = this.getParentTable();
         if (!tableElement)
             return;
+        this.applying = true;
         const { grid } = this.instance;
         const gridColumns = {};
         let layoutChanged = false;
@@ -4397,8 +4469,8 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
                 this.instance.updateLayout(layout.name, this.getCurrentLayout(layout.name));
             }
             tableElement.style.width = layout.gridWidth || 'auto';
-            grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
-            grid.datasource.filter = layout.filter !== undefined ? layout.filter : grid.datasource.filter;
+            grid.datasource.order = layout.order !== undefined ? [...layout.order] : grid.datasource.order;
+            grid.datasource.filter = layout.filter !== undefined ? Object.assign({}, layout.filter) : grid.datasource.filter;
             if (grid.datasource instanceof TekRestDatasource
                 && layout.dynamicFilter !== undefined) {
                 grid.datasource.dynamicFilter = this.getHelperValues(layout.dynamicFilter, layout.columns || grid.columns);
@@ -4475,6 +4547,7 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             }
         }
         this.$refs.layoutMenu.isActive = false;
+        this.$nextTick(() => { this.applying = false; });
     }
     setHelperValue(column, value) {
         if (column instanceof TekGridColumn) {
@@ -4562,7 +4635,9 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
             this.$refs.layoutMenu.isActive = false;
         }
         else {
+            this.applying = true;
             this.instance.applyLayout(layoutName);
+            this.$nextTick(() => { this.applying = false; });
         }
     }
     deleteLayout(event, layoutName) {
@@ -4573,6 +4648,12 @@ let TekGridLayoutOptions = class TekGridLayoutOptions extends ZdComponentRender
         return this.instance.layoutHasFilter(layoutName);
     }
 };
+__decorate([
+    Watch('instance.grid.datasource.filter')
+], TekGridLayoutOptions.prototype, "datasourceFilterChanged", null);
+__decorate([
+    Watch('instance.grid.datasource.dynamicFilter')
+], TekGridLayoutOptions.prototype, "datasourceDynamicFilterChanged", null);
 TekGridLayoutOptions = __decorate([
     Component
 ], TekGridLayoutOptions);

package/dist/tek-components-vuetify.umd.js

@@ -4342,10 +4342,81 @@
         constructor() {
             super(...arguments);
             this.instanceType = teknisaComponentsCommon.TekGridLayoutOptions;
+            this.updateFilterWatcher = true;
+            this.updateDynamicFilterWatcher = true;
+            this.applying = false;
         }
         created() {
             this.instance.viewApplyLayout = this.applyLayout;
             this.instance.viewGetCurrentLayout = this.getCurrentLayout;
+            this.$nextTick(() => {
+                var _a, _b;
+                if ((_b = (_a = this.instance.grid) === null || _a === void 0 ? void 0 : _a.datasource) === null || _b === void 0 ? void 0 : _b.filter) {
+                    this.updateFilterWatcher = false;
+                    this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+                    this.$nextTick(() => { this.updateFilterWatcher = true; });
+                    if (this.instance.grid.datasource instanceof teknisaComponentsCommon.TekRestDatasource) {
+                        this.updateDynamicFilterWatcher = false;
+                        this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+                        this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
+                    }
+                }
+            });
+        }
+        createFilterProxy(filter) {
+            const self = this;
+            return new Proxy(filter, {
+                set(target, prop, value) {
+                    if (target[prop] !== value) {
+                        target[prop] = value;
+                        self.checkFilterChanged();
+                    }
+                    return true;
+                },
+            });
+        }
+        createDynamicFilterProxy(filter) {
+            const self = this;
+            const handler = {
+                set(target, prop, value) {
+                    if (target[prop] !== value) {
+                        target[prop] = value;
+                        self.checkFilterChanged();
+                    }
+                    return true;
+                },
+                get(target, prop) {
+                    const value = target[prop];
+                    if (prop !== '__ob__' && typeof value === 'object' && value !== null) {
+                        return new Proxy(value, handler);
+                    }
+                    return value;
+                },
+            };
+            return new Proxy(filter, handler);
+        }
+        checkFilterChanged() {
+            if (!this.applying && this.layoutHasFilter(this.instance.currentLayoutName)) {
+                this.instance.layoutEdited = true;
+            }
+        }
+        datasourceFilterChanged() {
+            if (!this.updateFilterWatcher)
+                return;
+            this.updateFilterWatcher = false;
+            this.checkFilterChanged();
+            this.instance.grid.datasource.filter = this.createFilterProxy(this.instance.grid.datasource.filter);
+            this.$nextTick(() => { this.updateFilterWatcher = true; });
+        }
+        datasourceDynamicFilterChanged() {
+            if (!this.updateDynamicFilterWatcher)
+                return;
+            this.updateDynamicFilterWatcher = false;
+            this.checkFilterChanged();
+            if (this.instance.grid.datasource instanceof teknisaComponentsCommon.TekRestDatasource) {
+                this.instance.grid.datasource.dynamicFilter = this.createDynamicFilterProxy(this.instance.grid.datasource.dynamicFilter);
+            }
+            this.$nextTick(() => { this.updateDynamicFilterWatcher = true; });
         }
         confirmLayoutClick({ component }) {
             const layoutName = component.value;
@@ -4367,6 +4438,7 @@
             const tableElement = this.getParentTable();
             if (!tableElement)
                 return;
+            this.applying = true;
             const { grid } = this.instance;
             const gridColumns = {};
             let layoutChanged = false;
@@ -4397,8 +4469,8 @@
                     this.instance.updateLayout(layout.name, this.getCurrentLayout(layout.name));
                 }
                 tableElement.style.width = layout.gridWidth || 'auto';
-                grid.datasource.order = layout.order !== undefined ? layout.order : grid.datasource.order;
-                grid.datasource.filter = layout.filter !== undefined ? layout.filter : grid.datasource.filter;
+                grid.datasource.order = layout.order !== undefined ? [...layout.order] : grid.datasource.order;
+                grid.datasource.filter = layout.filter !== undefined ? Object.assign({}, layout.filter) : grid.datasource.filter;
                 if (grid.datasource instanceof teknisaComponentsCommon.TekRestDatasource
                     && layout.dynamicFilter !== undefined) {
                     grid.datasource.dynamicFilter = this.getHelperValues(layout.dynamicFilter, layout.columns || grid.columns);
@@ -4475,6 +4547,7 @@
                 }
             }
             this.$refs.layoutMenu.isActive = false;
+            this.$nextTick(() => { this.applying = false; });
         }
         setHelperValue(column, value) {
             if (column instanceof teknisaComponentsCommon.TekGridColumn) {
@@ -4562,7 +4635,9 @@
                 this.$refs.layoutMenu.isActive = false;
             }
             else {
+                this.applying = true;
                 this.instance.applyLayout(layoutName);
+                this.$nextTick(() => { this.applying = false; });
             }
         }
         deleteLayout(event, layoutName) {
@@ -4573,6 +4648,12 @@
             return this.instance.layoutHasFilter(layoutName);
         }
     };
+    __decorate([
+        vuePropertyDecorator.Watch('instance.grid.datasource.filter')
+    ], TekGridLayoutOptions.prototype, "datasourceFilterChanged", null);
+    __decorate([
+        vuePropertyDecorator.Watch('instance.grid.datasource.dynamicFilter')
+    ], TekGridLayoutOptions.prototype, "datasourceDynamicFilterChanged", null);
     TekGridLayoutOptions = __decorate([
         vuePropertyDecorator.Component
     ], TekGridLayoutOptions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-vuetify",
-  "version": "1.127.0",
+  "version": "1.128.0",
   "description": "Teknisa Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -44,5 +44,5 @@
     "vue": "2.7.*",
     "vuetify": "2.6.*"
   },
-  "gitHead": "c3bd2c897801be9129b637299a244e7a0639607a"
+  "gitHead": "a97c1a002d8ab3dc6159e82cb747ae42bcc550bc"
 }

package/types/components/tek-grid/TekGridLayoutOptions.d.ts

@@ -6,9 +6,17 @@ import { TekGridLayoutOptions as TekGridLayoutOptionsClass } from '@zeedhi/tekni
 export default class TekGridLayoutOptions extends ZdComponentRender {
     instance: TekGridLayoutOptionsClass;
     instanceType: typeof TekGridLayoutOptionsClass;
+    private updateFilterWatcher;
+    private updateDynamicFilterWatcher;
     created(): void;
+    private createFilterProxy;
+    private createDynamicFilterProxy;
+    private checkFilterChanged;
+    datasourceFilterChanged(): void;
+    datasourceDynamicFilterChanged(): void;
     confirmLayoutClick({ component }: any): void;
     private datasourceDynamicFilter;
+    private applying;
     private applyLayout;
     private setHelperValue;
     private getHelperValues;