@xh/hoist 71.0.0-SNAPSHOT.1735247152243 → 71.0.0-SNAPSHOT.1735310060928

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -0,0 +1,181 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+
+import {TabContainerModel} from '@xh/hoist/cmp/tab';
+import {HoistModel, managed, lookup} from '@xh/hoist/core';
+import {action, computed} from '@xh/hoist/mobx';
+import {wait} from '@xh/hoist/promise';
+import {isEmpty} from 'lodash';
+import {GridFilterFieldSpec} from '@xh/hoist/cmp/grid';
+import {customTab} from './custom/CustomTab';
+import {CustomTabModel} from './custom/CustomTabModel';
+import {valuesTab} from './values/ValuesTab';
+import {ValuesTabModel} from './values/ValuesTabModel';
+import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
+
+export class HeaderFilterModel extends HoistModel {
+    override xhImpl = true;
+
+    fieldSpec: GridFilterFieldSpec;
+
+    @lookup(ColumnHeaderFilterModel)
+    parent: ColumnHeaderFilterModel;
+
+    @managed tabContainerModel: TabContainerModel;
+    @managed valuesTabModel: ValuesTabModel;
+    @managed customTabModel: CustomTabModel;
+
+    get filterModel() {
+        return this.parent.filterModel;
+    }
+
+    get field() {
+        return this.fieldSpec.field;
+    }
+
+    get store() {
+        return this.filterModel.gridModel.store;
+    }
+
+    get fieldType() {
+        return this.store.getField(this.field).type;
+    }
+
+    get currentGridFilter() {
+        return this.filterModel.filter;
+    }
+
+    get columnFilters() {
+        return this.filterModel.getColumnFilters(this.field);
+    }
+
+    get columnCompoundFilter() {
+        return this.filterModel.getColumnCompoundFilter(this.field);
+    }
+
+    get hasFilter() {
+        return !isEmpty(this.columnFilters);
+    }
+
+    get hasPendingFilter() {
+        const {activeTabId} = this.tabContainerModel;
+        return activeTabId === 'valuesFilter'
+            ? !!this.valuesTabModel.filter
+            : !!this.customTabModel.filter;
+    }
+
+    @computed
+    get isCustomFilter() {
+        const {columnCompoundFilter, columnFilters} = this;
+        if (columnCompoundFilter) return true;
+        if (isEmpty(columnFilters)) return false;
+        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
+    }
+
+    get commitOnChange() {
+        return this.filterModel.commitOnChange;
+    }
+
+    override onLinked() {
+        super.onLinked();
+        this.fieldSpec = this.filterModel.getFieldSpec(this.parent.column.field);
+
+        const {enableValues} = this.fieldSpec;
+        this.valuesTabModel = enableValues ? new ValuesTabModel(this) : null;
+        this.customTabModel = new CustomTabModel(this);
+        this.tabContainerModel = new TabContainerModel({
+            switcher: false,
+            tabs: [
+                {
+                    id: 'valuesFilter',
+                    title: 'Values',
+                    content: valuesTab,
+                    omit: !enableValues
+                },
+                {
+                    id: 'customFilter',
+                    title: 'Custom',
+                    content: customTab
+                }
+            ],
+            xhImpl: true
+        });
+
+        this.addReaction({
+            track: () => this.valuesTabModel?.filter,
+            run: () => this.doCommitOnChange('valuesFilter'),
+            debounce: 100
+        });
+
+        this.addReaction({
+            track: () => this.customTabModel.filter,
+            run: () => this.doCommitOnChange('customFilter'),
+            debounce: 100
+        });
+
+        this.syncWithFilter();
+    }
+
+    @action
+    commit(close: boolean = true) {
+        const {tabContainerModel, customTabModel, valuesTabModel} = this,
+            {activeTabId} = tabContainerModel,
+            valuesIsActive = activeTabId === 'valuesFilter',
+            activeTabModel = valuesIsActive ? valuesTabModel : customTabModel,
+            otherTabModel = valuesIsActive ? customTabModel : valuesTabModel;
+
+        this.setColumnFilters(activeTabModel.filter);
+        if (close) {
+            this.parent.close();
+        } else {
+            // We must wait before resetting as GridFilterModel.setFilter() is async
+            wait().then(() => otherTabModel?.reset());
+        }
+    }
+
+    @action
+    clear(close: boolean = true) {
+        this.setColumnFilters(null);
+        if (close) {
+            this.parent.close();
+        } else {
+            // We must wait before resetting as GridFilterModel.setFilter() is async
+            wait().then(() => this.resetTabModels());
+        }
+    }
+
+    //-------------------
+    // Implementation
+    //-------------------
+    @action
+    private syncWithFilter() {
+        const {isCustomFilter, valuesTabModel, customTabModel, tabContainerModel} = this,
+            useCustomTab = isCustomFilter || !valuesTabModel,
+            toTab = useCustomTab ? customTabModel : valuesTabModel,
+            toTabId = useCustomTab ? 'customFilter' : 'valuesFilter';
+
+        this.resetTabModels();
+        toTab.syncWithFilter();
+
+        tabContainerModel.activateTab(toTabId);
+    }
+
+    private setColumnFilters(filters) {
+        this.filterModel.setColumnFilters(this.field, filters);
+    }
+
+    private doCommitOnChange(tab) {
+        if (!this.commitOnChange) return;
+        if (this.tabContainerModel.activeTabId !== tab) return;
+        this.commit(false);
+    }
+
+    private resetTabModels() {
+        this.customTabModel.reset();
+        this.valuesTabModel?.reset();
+    }
+}

package/desktop/cmp/grid/impl/filter/{custom → headerfilter/custom}/CustomRowModel.ts

@@ -6,7 +6,7 @@
  */
 import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
-import {ColumnHeaderFilterModel} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
+import {HeaderFilterModel} from '../HeaderFilterModel';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
 import {isArray, isNil} from 'lodash';
 import {CustomTabModel} from './CustomTabModel';
@@ -20,7 +20,7 @@ export class CustomRowModel extends HoistModel {
     override xhImpl = true;
 
     parentModel: CustomTabModel;
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
 
     @bindable op: OperatorOptionValue;
     @bindable inputVal: any;

package/desktop/cmp/grid/impl/filter/{custom → headerfilter/custom}/CustomTabModel.ts

@@ -8,14 +8,14 @@ import {HoistModel, XH} from '@xh/hoist/core';
 import {CompoundFilterOperator, FilterLike} from '@xh/hoist/data';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {compact, isEmpty} from 'lodash';
-import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
+import {HeaderFilterModel} from '../HeaderFilterModel';
 
 import {CustomRowModel} from './CustomRowModel';
 
 export class CustomTabModel extends HoistModel {
     override xhImpl = true;
 
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
 
     @bindable op: CompoundFilterOperator = 'AND';
     @observable.ref rowModels: CustomRowModel[] = [];
@@ -42,7 +42,7 @@ export class CustomTabModel extends HoistModel {
         return this.headerFilterModel.columnFilters;
     }
 
-    constructor(headerFilterModel: ColumnHeaderFilterModel) {
+    constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
         this.headerFilterModel = headerFilterModel;

package/desktop/cmp/grid/impl/filter/{values → headerfilter/values}/ValuesTabModel.ts

@@ -7,7 +7,7 @@
 import {GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {FieldFilterSpec} from '@xh/hoist/data';
-import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
+import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
@@ -15,7 +15,7 @@ import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
 
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
 
     /** Checkbox grid to display enumerated set of values */
     @managed @observable.ref gridModel: GridModel;
@@ -59,7 +59,7 @@ export class ValuesTabModel extends HoistModel {
     }
 
     get gridFilterModel() {
-        return this.headerFilterModel.gridFilterModel;
+        return this.headerFilterModel.filterModel;
     }
 
     get values() {
@@ -74,7 +74,7 @@ export class ValuesTabModel extends HoistModel {
         return this.values.length < this.valueCount;
     }
 
-    constructor(headerFilterModel: ColumnHeaderFilterModel) {
+    constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
 
@@ -83,7 +83,8 @@ export class ValuesTabModel extends HoistModel {
 
         this.addReaction({
             track: () => this.pendingValues,
-            run: () => this.syncGrid()
+            run: () => this.syncGrid(),
+            fireImmediately: true
         });
     }
 
@@ -193,7 +194,7 @@ export class ValuesTabModel extends HoistModel {
             {fieldType} = headerFilterModel,
             renderer =
                 fieldSpec.renderer ??
-                (fieldType !== 'tags' ? this.headerFilterModel.column.renderer : null);
+                (fieldType !== 'tags' ? this.headerFilterModel.parent.column.renderer : null);
 
         return new GridModel({
             store: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1735247152243",
+  "version": "71.0.0-SNAPSHOT.1735310060928",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",