@visactor/vtable-plugins 1.22.4-alpha.1 → 1.22.4-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/auto-fill/rules.js +1 -2
- package/cjs/contextmenu/menu-manager.js +2 -1
- package/cjs/filter/filter-state-manager.d.ts +14 -0
- package/cjs/filter/filter-state-manager.js +35 -1
- package/cjs/filter/filter-state-manager.js.map +1 -1
- package/cjs/filter/filter-toolbar.d.ts +1 -0
- package/cjs/filter/filter-toolbar.js +10 -2
- package/cjs/filter/filter-toolbar.js.map +1 -1
- package/cjs/filter/value-filter.d.ts +2 -0
- package/cjs/filter/value-filter.js +132 -106
- package/cjs/filter/value-filter.js.map +1 -1
- package/dist/vtable-plugins.js +246 -115
- package/dist/vtable-plugins.min.js +1 -1
- package/es/auto-fill/rules.js +1 -2
- package/es/contextmenu/menu-manager.js +2 -1
- package/es/filter/filter-state-manager.d.ts +14 -0
- package/es/filter/filter-state-manager.js +35 -1
- package/es/filter/filter-state-manager.js.map +1 -1
- package/es/filter/filter-toolbar.d.ts +1 -0
- package/es/filter/filter-toolbar.js +10 -2
- package/es/filter/filter-toolbar.js.map +1 -1
- package/es/filter/value-filter.d.ts +2 -0
- package/es/filter/value-filter.js +132 -106
- package/es/filter/value-filter.js.map +1 -1
- package/package.json +7 -7
package/cjs/auto-fill/rules.js
CHANGED
|
@@ -6,6 +6,7 @@ export declare class FilterStateManager {
|
|
|
6
6
|
private engine;
|
|
7
7
|
private listeners;
|
|
8
8
|
private table;
|
|
9
|
+
private filterMenuStates;
|
|
9
10
|
constructor(table: ListTable | PivotTable, engine: FilterEngine);
|
|
10
11
|
getFilterState(fieldId?: string | number): FilterConfig;
|
|
11
12
|
getActiveFilterFields(): (string | number)[];
|
|
@@ -17,4 +18,17 @@ export declare class FilterStateManager {
|
|
|
17
18
|
private reduce;
|
|
18
19
|
private applyFilters;
|
|
19
20
|
private shouldApplyFilter;
|
|
21
|
+
initializeFilterMenuState(fieldId: string | number, candidateValues: Array<{
|
|
22
|
+
value: any;
|
|
23
|
+
count: number;
|
|
24
|
+
rawValue: any;
|
|
25
|
+
}>, displayToRawMap: Map<any, any>): void;
|
|
26
|
+
getStableCandidateValues(fieldId: string | number): Array<{
|
|
27
|
+
value: any;
|
|
28
|
+
count: number;
|
|
29
|
+
rawValue: any;
|
|
30
|
+
}>;
|
|
31
|
+
updateSearchKeyword(fieldId: string | number, keyword: string): void;
|
|
32
|
+
getVisibleSelectedValues(fieldId: string | number): Set<any>;
|
|
33
|
+
getCurrentSearchKeyword(fieldId: string | number): string;
|
|
20
34
|
}
|
|
@@ -8,7 +8,7 @@ const types_1 = require("./types");
|
|
|
8
8
|
|
|
9
9
|
class FilterStateManager {
|
|
10
10
|
constructor(table, engine) {
|
|
11
|
-
this.listeners = [], this.state = {
|
|
11
|
+
this.listeners = [], this.filterMenuStates = new Map, this.state = {
|
|
12
12
|
filters: new Map
|
|
13
13
|
}, this.engine = engine, this.table = table;
|
|
14
14
|
}
|
|
@@ -85,6 +85,40 @@ class FilterStateManager {
|
|
|
85
85
|
shouldApplyFilter(action) {
|
|
86
86
|
return [ types_1.FilterActionType.REMOVE_FILTER, types_1.FilterActionType.ENABLE_FILTER, types_1.FilterActionType.DISABLE_FILTER, types_1.FilterActionType.CLEAR_ALL_FILTERS, types_1.FilterActionType.APPLY_FILTERS ].includes(action.type) || action.payload.enable;
|
|
87
87
|
}
|
|
88
|
+
initializeFilterMenuState(fieldId, candidateValues, displayToRawMap) {
|
|
89
|
+
this.filterMenuStates.set(fieldId, {
|
|
90
|
+
stableCandidateValues: candidateValues,
|
|
91
|
+
currentSearchKeyword: "",
|
|
92
|
+
displayToRawMap: displayToRawMap
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
getStableCandidateValues(fieldId) {
|
|
96
|
+
var _a;
|
|
97
|
+
return (null === (_a = this.filterMenuStates.get(fieldId)) || void 0 === _a ? void 0 : _a.stableCandidateValues) || [];
|
|
98
|
+
}
|
|
99
|
+
updateSearchKeyword(fieldId, keyword) {
|
|
100
|
+
const menuState = this.filterMenuStates.get(fieldId);
|
|
101
|
+
menuState && (menuState.currentSearchKeyword = keyword);
|
|
102
|
+
}
|
|
103
|
+
getVisibleSelectedValues(fieldId) {
|
|
104
|
+
const menuState = this.filterMenuStates.get(fieldId), filter = this.getFilterState(fieldId);
|
|
105
|
+
if (!menuState || !(null == filter ? void 0 : filter.values)) return new Set;
|
|
106
|
+
const allSelectedValues = new Set(filter.values), filterKeywords = menuState.currentSearchKeyword.toUpperCase().split(" ").filter((s => s));
|
|
107
|
+
if (0 === filterKeywords.length) return allSelectedValues;
|
|
108
|
+
const visibleSelected = new Set;
|
|
109
|
+
for (const candidate of menuState.stableCandidateValues) {
|
|
110
|
+
const displayValue = candidate.value, txtValue = String(displayValue).toUpperCase(), match = filterKeywords.some((keyword => txtValue.includes(keyword)));
|
|
111
|
+
if (match) {
|
|
112
|
+
const rawValue = menuState.displayToRawMap ? menuState.displayToRawMap.get(displayValue) : displayValue;
|
|
113
|
+
allSelectedValues.has(rawValue) && visibleSelected.add(rawValue);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
return visibleSelected;
|
|
117
|
+
}
|
|
118
|
+
getCurrentSearchKeyword(fieldId) {
|
|
119
|
+
var _a;
|
|
120
|
+
return (null === (_a = this.filterMenuStates.get(fieldId)) || void 0 === _a ? void 0 : _a.currentSearchKeyword) || "";
|
|
121
|
+
}
|
|
88
122
|
}
|
|
89
123
|
|
|
90
124
|
exports.FilterStateManager = FilterStateManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/filter/filter-state-manager.ts"],"names":[],"mappings":"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","file":"filter-state-manager.js","sourcesContent":["import type { ListTable, PivotTable } from '@visactor/vtable';\nimport type { ColumnDefine } from '@visactor/vtable/es/ts-types';\nimport type { FilterState, FilterAction, FilterConfig } from './types';\nimport { FilterActionType } from './types';\nimport type { FilterEngine } from './filter-engine';\nimport type { FilterPlugin } from '../filter';\n\n/**\n * 筛选状态管理器,用于管理筛选状态\n */\nexport class FilterStateManager {\n private state: FilterState;\n private engine: FilterEngine;\n private listeners: Array<(state: FilterState) => void> = [];\n\n private table: ListTable | PivotTable;\n\n constructor(table: ListTable | PivotTable, engine: FilterEngine) {\n this.state = {\n filters: new Map()\n };\n this.engine = engine;\n this.table = table;\n }\n\n getFilterState(fieldId?: string | number): FilterConfig {\n return this.state.filters.get(fieldId);\n }\n\n /**\n * 获取所有激活的筛选字段\n */\n getActiveFilterFields(): (string | number)[] {\n const activeFields: (string | number)[] = [];\n this.state.filters.forEach((config, field) => {\n if (config.enable) {\n activeFields.push(field);\n }\n });\n return activeFields;\n }\n\n /**\n * 获取所有筛选状态\n */\n getAllFilterStates(): FilterState {\n return this.state;\n }\n\n /**\n * 公共方法:重新应用当前所有激活的筛选状态\n * 用于在表格配置更新后恢复筛选显示\n */\n reapplyCurrentFilters(): void {\n const activeFields = this.getActiveFilterFields();\n if (activeFields.length > 0) {\n this.applyFilters();\n }\n }\n\n dispatch(action: FilterAction) {\n this.state = this.reduce(this.state, action);\n if (this.shouldApplyFilter(action)) {\n this.applyFilters();\n }\n this.notifyListeners();\n }\n\n subscribe(listener: (state: FilterState) => void): () => void {\n this.listeners.push(listener);\n return () => {\n this.listeners = this.listeners.filter(l => l !== listener);\n };\n }\n\n private notifyListeners(): void {\n this.listeners.forEach(listener => listener(this.state));\n }\n\n private reduce(state: FilterState, action: FilterAction): FilterState {\n const { type, payload } = action;\n const newFilter = new Map(state.filters);\n switch (type) {\n case FilterActionType.ADD_FILTER:\n newFilter.set(payload.field, payload);\n break;\n case FilterActionType.REMOVE_FILTER:\n newFilter.delete(payload.field);\n break;\n case FilterActionType.UPDATE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), ...payload });\n break;\n case FilterActionType.ENABLE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), enable: true });\n break;\n case FilterActionType.DISABLE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), enable: false });\n break;\n case FilterActionType.CLEAR_ALL_FILTERS:\n newFilter.clear();\n break;\n case FilterActionType.APPLY_FILTERS:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), ...payload, enable: true });\n break;\n }\n\n return { ...state, filters: newFilter };\n }\n\n private applyFilters() {\n this.engine.applyFilter(this.state, this.table);\n }\n\n private shouldApplyFilter(action: FilterAction) {\n const shouldApplyActions = [\n FilterActionType.REMOVE_FILTER,\n FilterActionType.ENABLE_FILTER,\n FilterActionType.DISABLE_FILTER,\n FilterActionType.CLEAR_ALL_FILTERS,\n FilterActionType.APPLY_FILTERS\n ];\n return shouldApplyActions.includes(action.type) || action.payload.enable;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/filter/filter-state-manager.ts"],"names":[],"mappings":"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","file":"filter-state-manager.js","sourcesContent":["import type { ListTable, PivotTable } from '@visactor/vtable';\nimport type { ColumnDefine } from '@visactor/vtable/es/ts-types';\nimport type { FilterState, FilterAction, FilterConfig } from './types';\nimport { FilterActionType } from './types';\nimport type { FilterEngine } from './filter-engine';\nimport type { FilterPlugin } from '../filter';\n\n/**\n * 筛选状态管理器,用于管理筛选状态\n */\nexport class FilterStateManager {\n private state: FilterState;\n private engine: FilterEngine;\n private listeners: Array<(state: FilterState) => void> = [];\n\n private table: ListTable | PivotTable;\n\n // 筛选菜单相关的状态\n private filterMenuStates: Map<\n string | number,\n {\n // 筛选菜单打开时固定的候选值列表\n stableCandidateValues: Array<{ value: any; count: number; rawValue: any }>;\n // 当前搜索关键词\n currentSearchKeyword: string;\n // 显示值到原始值的映射\n displayToRawMap: Map<any, any>;\n }\n > = new Map();\n\n constructor(table: ListTable | PivotTable, engine: FilterEngine) {\n this.state = {\n filters: new Map()\n };\n this.engine = engine;\n this.table = table;\n }\n\n getFilterState(fieldId?: string | number): FilterConfig {\n return this.state.filters.get(fieldId);\n }\n\n /**\n * 获取所有激活的筛选字段\n */\n getActiveFilterFields(): (string | number)[] {\n const activeFields: (string | number)[] = [];\n this.state.filters.forEach((config, field) => {\n if (config.enable) {\n activeFields.push(field);\n }\n });\n return activeFields;\n }\n\n /**\n * 获取所有筛选状态\n */\n getAllFilterStates(): FilterState {\n return this.state;\n }\n\n /**\n * 公共方法:重新应用当前所有激活的筛选状态\n * 用于在表格配置更新后恢复筛选显示\n */\n reapplyCurrentFilters(): void {\n const activeFields = this.getActiveFilterFields();\n if (activeFields.length > 0) {\n this.applyFilters();\n }\n }\n\n dispatch(action: FilterAction) {\n this.state = this.reduce(this.state, action);\n if (this.shouldApplyFilter(action)) {\n this.applyFilters();\n }\n this.notifyListeners();\n }\n\n subscribe(listener: (state: FilterState) => void): () => void {\n this.listeners.push(listener);\n return () => {\n this.listeners = this.listeners.filter(l => l !== listener);\n };\n }\n\n private notifyListeners(): void {\n this.listeners.forEach(listener => listener(this.state));\n }\n\n private reduce(state: FilterState, action: FilterAction): FilterState {\n const { type, payload } = action;\n const newFilter = new Map(state.filters);\n switch (type) {\n case FilterActionType.ADD_FILTER:\n newFilter.set(payload.field, payload);\n break;\n case FilterActionType.REMOVE_FILTER:\n newFilter.delete(payload.field);\n break;\n case FilterActionType.UPDATE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), ...payload });\n break;\n case FilterActionType.ENABLE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), enable: true });\n break;\n case FilterActionType.DISABLE_FILTER:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), enable: false });\n break;\n case FilterActionType.CLEAR_ALL_FILTERS:\n newFilter.clear();\n break;\n case FilterActionType.APPLY_FILTERS:\n newFilter.set(payload.field, { ...newFilter.get(payload.field), ...payload, enable: true });\n break;\n }\n\n return { ...state, filters: newFilter };\n }\n\n private applyFilters() {\n this.engine.applyFilter(this.state, this.table);\n }\n\n private shouldApplyFilter(action: FilterAction) {\n const shouldApplyActions = [\n FilterActionType.REMOVE_FILTER,\n FilterActionType.ENABLE_FILTER,\n FilterActionType.DISABLE_FILTER,\n FilterActionType.CLEAR_ALL_FILTERS,\n FilterActionType.APPLY_FILTERS\n ];\n return shouldApplyActions.includes(action.type) || action.payload.enable;\n }\n\n /**\n * 初始化筛选菜单状态(当筛选菜单打开时调用)\n */\n initializeFilterMenuState(\n fieldId: string | number,\n candidateValues: Array<{ value: any; count: number; rawValue: any }>,\n displayToRawMap: Map<any, any>\n ): void {\n this.filterMenuStates.set(fieldId, {\n stableCandidateValues: candidateValues,\n currentSearchKeyword: '',\n displayToRawMap: displayToRawMap\n });\n }\n\n /**\n * 获取筛选菜单的稳定候选值列表\n */\n getStableCandidateValues(fieldId: string | number): Array<{ value: any; count: number; rawValue: any }> {\n return this.filterMenuStates.get(fieldId)?.stableCandidateValues || [];\n }\n\n /**\n * 更新搜索关键词\n */\n updateSearchKeyword(fieldId: string | number, keyword: string): void {\n const menuState = this.filterMenuStates.get(fieldId);\n if (!menuState) {\n return;\n }\n\n menuState.currentSearchKeyword = keyword;\n }\n\n /**\n * 获取当前可见的选中值(根据搜索关键词从筛选状态中筛选)\n */\n getVisibleSelectedValues(fieldId: string | number): Set<any> {\n const menuState = this.filterMenuStates.get(fieldId);\n const filter = this.getFilterState(fieldId);\n if (!menuState || !filter?.values) {\n return new Set();\n }\n\n const allSelectedValues = new Set(filter.values);\n const keyword = menuState.currentSearchKeyword;\n const filterKeywords = keyword\n .toUpperCase()\n .split(' ')\n .filter(s => s);\n\n // 如果没有搜索关键词,返回所有被选中的值\n if (filterKeywords.length === 0) {\n return allSelectedValues;\n }\n\n // 根据搜索关键词筛选出可见的选中值\n const visibleSelected = new Set<any>();\n for (const candidate of menuState.stableCandidateValues) {\n const displayValue = candidate.value;\n const txtValue = String(displayValue).toUpperCase();\n\n // 检查是否匹配搜索关键词\n const match = filterKeywords.some(keyword => txtValue.includes(keyword));\n\n if (match) {\n // 如果可见,检查是否被选中\n const rawValue = menuState.displayToRawMap ? menuState.displayToRawMap.get(displayValue) : displayValue;\n if (allSelectedValues.has(rawValue)) {\n visibleSelected.add(rawValue);\n }\n }\n }\n\n return visibleSelected;\n }\n\n /**\n * 获取当前搜索关键词\n */\n getCurrentSearchKeyword(fieldId: string | number): string {\n return this.filterMenuStates.get(fieldId)?.currentSearchKeyword || '';\n }\n}\n"]}
|
|
@@ -25,6 +25,7 @@ export declare class FilterToolbar {
|
|
|
25
25
|
private updateSelectedField;
|
|
26
26
|
private applyFilter;
|
|
27
27
|
private clearFilter;
|
|
28
|
+
private updateClearFilterButtonState;
|
|
28
29
|
render(container: HTMLElement): void;
|
|
29
30
|
attachEventListeners(): void;
|
|
30
31
|
show(col: number, row: number, filterModes: FilterMode[]): void;
|
|
@@ -12,7 +12,9 @@ class FilterToolbar {
|
|
|
12
12
|
this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table,
|
|
13
13
|
this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new value_filter_1.ValueFilter(this.table, this.filterStateManager, this.styles),
|
|
14
14
|
this.conditionFilter = new condition_filter_1.ConditionFilter(this.table, this.filterStateManager, this.styles),
|
|
15
|
-
this.filterMenuWidth = 300
|
|
15
|
+
this.filterMenuWidth = 300, this.filterStateManager.subscribe((state => {
|
|
16
|
+
this.isVisible && null !== this.selectedField && this.updateClearFilterButtonState(this.selectedField);
|
|
17
|
+
}));
|
|
16
18
|
}
|
|
17
19
|
onTabSwitch(tab) {
|
|
18
20
|
this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(),
|
|
@@ -33,6 +35,12 @@ class FilterToolbar {
|
|
|
33
35
|
this.valueFilter && this.valueFilter.clearFilter(field), this.conditionFilter && this.conditionFilter.clearFilter(field),
|
|
34
36
|
this.hide();
|
|
35
37
|
}
|
|
38
|
+
updateClearFilterButtonState(field) {
|
|
39
|
+
const currentFilter = this.filterStateManager.getFilterState(field), hasActiveFilter = currentFilter && currentFilter.enable;
|
|
40
|
+
this.clearFilterOptionLink.style.display = "inline", this.clearFilterOptionLink.style.opacity = hasActiveFilter ? "1" : "0.5",
|
|
41
|
+
this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? "auto" : "none",
|
|
42
|
+
this.clearFilterOptionLink.style.cursor = hasActiveFilter ? "pointer" : "not-allowed";
|
|
43
|
+
}
|
|
36
44
|
render(container) {
|
|
37
45
|
this.filterMenu = document.createElement("div"), (0, styles_1.applyStyles)(this.filterMenu, this.styles.filterMenu),
|
|
38
46
|
this.filterMenu.style.width = `${this.filterMenuWidth}px`;
|
|
@@ -84,7 +92,7 @@ class FilterToolbar {
|
|
|
84
92
|
this.updateSelectedField(field);
|
|
85
93
|
const currentFilter = this.filterStateManager.getFilterState(field);
|
|
86
94
|
currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue"),
|
|
87
|
-
setTimeout((() => {
|
|
95
|
+
this.updateClearFilterButtonState(field), setTimeout((() => {
|
|
88
96
|
this.isVisible = !0;
|
|
89
97
|
}), 0);
|
|
90
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/filter/filter-toolbar.ts"],"names":[],"mappings":"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","file":"filter-toolbar.js","sourcesContent":["import type { ListTable, PivotTable } from '@visactor/vtable';\nimport type { FilterStateManager } from './filter-state-manager';\nimport { ValueFilter } from './value-filter';\nimport { ConditionFilter } from './condition-filter';\nimport { applyStyles } from './styles';\nimport type { FilterMode, FilterStyles } from './types';\n\n/**\n * 筛选工具栏,管理按值和按条件筛选组件\n */\nexport class FilterToolbar {\n table: ListTable | PivotTable;\n filterStateManager: FilterStateManager;\n styles: FilterStyles;\n\n valueFilter: ValueFilter | null = null;\n conditionFilter: ConditionFilter | null = null;\n activeTab: 'byValue' | 'byCondition' = 'byValue';\n isVisible: boolean = false;\n selectedField: string | number | null = null;\n filterModes: FilterMode[] = [];\n\n private filterMenu: HTMLElement;\n private filterMenuWidth: number;\n private filterTabByValue: HTMLButtonElement;\n private filterTabByCondition: HTMLButtonElement;\n private clearFilterOptionLink: HTMLAnchorElement;\n private cancelFilterButton: HTMLButtonElement;\n private applyFilterButton: HTMLButtonElement;\n\n constructor(table: ListTable | PivotTable, filterStateManager: FilterStateManager, styles: FilterStyles) {\n this.table = table;\n this.filterStateManager = filterStateManager;\n this.styles = styles;\n this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles);\n this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles);\n\n this.filterMenuWidth = 300; // 待优化,可能需要自适应内容的宽度\n }\n\n private onTabSwitch(tab: 'byValue' | 'byCondition'): void {\n this.activeTab = tab;\n if (tab === 'byValue') {\n this.valueFilter.show();\n this.conditionFilter.hide();\n } else {\n this.conditionFilter.show();\n this.valueFilter.hide();\n }\n\n const isValueTab = tab === 'byValue';\n applyStyles(this.filterTabByValue, this.styles.tabStyle(isValueTab));\n applyStyles(this.filterTabByCondition, this.styles.tabStyle(!isValueTab));\n }\n\n private updateSelectedField(field: string | number): void {\n this.selectedField = field;\n // 通知筛选组件更新选中字段\n if (this.valueFilter) {\n this.valueFilter.setSelectedField(field);\n }\n if (this.conditionFilter) {\n this.conditionFilter.setSelectedField(field);\n }\n }\n\n private applyFilter(field: string | number): void {\n if (this.activeTab === 'byValue') {\n this.valueFilter.applyFilter(field);\n } else if (this.activeTab === 'byCondition') {\n this.conditionFilter.applyFilter(field);\n }\n this.hide();\n }\n\n private clearFilter(field: string | number): void {\n if (this.valueFilter) {\n this.valueFilter.clearFilter(field);\n }\n if (this.conditionFilter) {\n this.conditionFilter.clearFilter(field);\n }\n this.hide();\n }\n\n render(container: HTMLElement): void {\n // === 主容器 ===\n this.filterMenu = document.createElement('div');\n applyStyles(this.filterMenu, this.styles.filterMenu);\n this.filterMenu.style.width = `${this.filterMenuWidth}px`;\n\n // === 筛选 Tab ===\n const filterTabsContainer = document.createElement('div');\n applyStyles(filterTabsContainer, this.styles.tabsContainer);\n\n this.filterTabByValue = document.createElement('button');\n this.filterTabByValue.innerText = '按值筛选';\n applyStyles(this.filterTabByValue, this.styles.tabStyle(true));\n\n this.filterTabByCondition = document.createElement('button');\n this.filterTabByCondition.innerText = '按条件筛选';\n applyStyles(this.filterTabByCondition, this.styles.tabStyle(false));\n\n filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);\n\n // === 页脚(清除、取消、确定 筛选按钮) ===\n const footerContainer = document.createElement('div');\n applyStyles(footerContainer, this.styles.footerContainer);\n\n this.clearFilterOptionLink = document.createElement('a');\n this.clearFilterOptionLink.href = '#';\n this.clearFilterOptionLink.innerText = '清除筛选';\n applyStyles(this.clearFilterOptionLink, this.styles.clearLink);\n\n const footerButtons = document.createElement('div');\n this.cancelFilterButton = document.createElement('button');\n this.cancelFilterButton.innerText = '取消';\n applyStyles(this.cancelFilterButton, this.styles.footerButton(false));\n\n this.applyFilterButton = document.createElement('button');\n this.applyFilterButton.innerText = '确认';\n applyStyles(this.applyFilterButton, this.styles.footerButton(true));\n\n footerButtons.append(this.cancelFilterButton, this.applyFilterButton);\n footerContainer.append(this.clearFilterOptionLink, footerButtons);\n\n // --- 筛选器头部 Tab ---\n this.filterMenu.append(filterTabsContainer);\n\n // --- 筛选器内容 ---\n this.valueFilter.render(this.filterMenu);\n this.conditionFilter.render(this.filterMenu);\n\n // --- 筛选器页脚 ---\n this.filterMenu.append(footerContainer);\n\n container.appendChild(this.filterMenu); // 将筛选器添加到 DOM 中\n this.attachEventListeners();\n }\n\n attachEventListeners() {\n // 按值筛选/按条件筛选的事件监听\n this.filterTabByValue.addEventListener('click', () => {\n this.onTabSwitch('byValue');\n });\n\n this.filterTabByCondition.addEventListener('click', () => {\n this.onTabSwitch('byCondition');\n });\n\n this.cancelFilterButton.addEventListener('click', () => this.hide());\n\n this.clearFilterOptionLink.addEventListener('click', e => {\n e.preventDefault();\n this.clearFilter(this.selectedField);\n });\n\n this.applyFilterButton.addEventListener('click', () => {\n this.applyFilter(this.selectedField);\n });\n\n // 点击空白处整个筛选菜单可消失\n document.addEventListener('click', () => {\n if (this.isVisible) {\n this.hide();\n }\n });\n\n this.filterMenu.addEventListener('click', e => {\n e.stopPropagation();\n });\n }\n\n show(col: number, row: number, filterModes: FilterMode[]): void {\n this.filterModes = filterModes;\n if (!this.filterModes.includes('byValue')) {\n this.filterTabByValue.style.display = 'none';\n setTimeout(() => this.onTabSwitch('byCondition'), 0);\n } else if (!this.filterModes.includes('byCondition')) {\n this.filterTabByCondition.style.display = 'none';\n setTimeout(() => this.onTabSwitch('byValue'), 0);\n }\n\n let left: number = 0;\n let top: number = 0;\n const canvasBounds = this.table.canvas.getBoundingClientRect();\n const cell = this.table.getMergeCellRect(col, row);\n if (cell.right < this.filterMenuWidth) {\n // 无法把筛选菜单完整地显示在左侧,那么显示在右侧\n left = cell.left + canvasBounds.left;\n top = cell.bottom + canvasBounds.top;\n } else {\n // 筛选菜单默认显示在左侧\n left = cell.right + canvasBounds.left - this.filterMenuWidth;\n top = cell.bottom + canvasBounds.top;\n }\n\n this.filterMenu.style.display = 'block';\n this.filterMenu.style.left = `${left}px`;\n this.filterMenu.style.top = `${top}px`;\n\n const field = this.table.internalProps.layoutMap.getHeaderField(col, row) as string | number;\n this.updateSelectedField(field);\n\n // 根据当前筛选配置自动选择正确的筛选标签页\n const currentFilter = this.filterStateManager.getFilterState(field);\n if (currentFilter && currentFilter.type === 'byCondition') {\n this.onTabSwitch('byCondition');\n } else {\n this.onTabSwitch('byValue');\n }\n\n // 确保在事件冒泡完成后才设置 isVisible 为 true\n setTimeout(() => {\n this.isVisible = true;\n }, 0);\n }\n\n hide(): void {\n this.filterMenu.style.display = 'none';\n this.isVisible = false;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/filter/filter-toolbar.ts"],"names":[],"mappings":"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","file":"filter-toolbar.js","sourcesContent":["import type { ListTable, PivotTable } from '@visactor/vtable';\nimport type { FilterStateManager } from './filter-state-manager';\nimport { ValueFilter } from './value-filter';\nimport { ConditionFilter } from './condition-filter';\nimport { applyStyles } from './styles';\nimport type { FilterMode, FilterStyles } from './types';\n\n/**\n * 筛选工具栏,管理按值和按条件筛选组件\n */\nexport class FilterToolbar {\n table: ListTable | PivotTable;\n filterStateManager: FilterStateManager;\n styles: FilterStyles;\n\n valueFilter: ValueFilter | null = null;\n conditionFilter: ConditionFilter | null = null;\n activeTab: 'byValue' | 'byCondition' = 'byValue';\n isVisible: boolean = false;\n selectedField: string | number | null = null;\n filterModes: FilterMode[] = [];\n\n private filterMenu: HTMLElement;\n private filterMenuWidth: number;\n private filterTabByValue: HTMLButtonElement;\n private filterTabByCondition: HTMLButtonElement;\n private clearFilterOptionLink: HTMLAnchorElement;\n private cancelFilterButton: HTMLButtonElement;\n private applyFilterButton: HTMLButtonElement;\n\n constructor(table: ListTable | PivotTable, filterStateManager: FilterStateManager, styles: FilterStyles) {\n this.table = table;\n this.filterStateManager = filterStateManager;\n this.styles = styles;\n this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles);\n this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles);\n\n this.filterMenuWidth = 300; // 待优化,可能需要自适应内容的宽度\n\n // 监听筛选状态变化,更新清除筛选按钮状态\n this.filterStateManager.subscribe(state => {\n if (this.isVisible && this.selectedField !== null) {\n this.updateClearFilterButtonState(this.selectedField);\n }\n });\n }\n\n private onTabSwitch(tab: 'byValue' | 'byCondition'): void {\n this.activeTab = tab;\n if (tab === 'byValue') {\n this.valueFilter.show();\n this.conditionFilter.hide();\n } else {\n this.conditionFilter.show();\n this.valueFilter.hide();\n }\n\n const isValueTab = tab === 'byValue';\n applyStyles(this.filterTabByValue, this.styles.tabStyle(isValueTab));\n applyStyles(this.filterTabByCondition, this.styles.tabStyle(!isValueTab));\n }\n\n private updateSelectedField(field: string | number): void {\n this.selectedField = field;\n // 通知筛选组件更新选中字段\n if (this.valueFilter) {\n this.valueFilter.setSelectedField(field);\n }\n if (this.conditionFilter) {\n this.conditionFilter.setSelectedField(field);\n }\n }\n\n private applyFilter(field: string | number): void {\n if (this.activeTab === 'byValue') {\n this.valueFilter.applyFilter(field);\n } else if (this.activeTab === 'byCondition') {\n this.conditionFilter.applyFilter(field);\n }\n this.hide();\n }\n\n private clearFilter(field: string | number): void {\n if (this.valueFilter) {\n this.valueFilter.clearFilter(field);\n }\n if (this.conditionFilter) {\n this.conditionFilter.clearFilter(field);\n }\n this.hide();\n }\n\n /**\n * 更新清除筛选按钮的状态\n */\n private updateClearFilterButtonState(field: string | number): void {\n const currentFilter = this.filterStateManager.getFilterState(field);\n const hasActiveFilter = currentFilter && currentFilter.enable;\n\n this.clearFilterOptionLink.style.display = 'inline';\n this.clearFilterOptionLink.style.opacity = hasActiveFilter ? '1' : '0.5';\n this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? 'auto' : 'none';\n this.clearFilterOptionLink.style.cursor = hasActiveFilter ? 'pointer' : 'not-allowed';\n }\n\n render(container: HTMLElement): void {\n // === 主容器 ===\n this.filterMenu = document.createElement('div');\n applyStyles(this.filterMenu, this.styles.filterMenu);\n this.filterMenu.style.width = `${this.filterMenuWidth}px`;\n\n // === 筛选 Tab ===\n const filterTabsContainer = document.createElement('div');\n applyStyles(filterTabsContainer, this.styles.tabsContainer);\n\n this.filterTabByValue = document.createElement('button');\n this.filterTabByValue.innerText = '按值筛选';\n applyStyles(this.filterTabByValue, this.styles.tabStyle(true));\n\n this.filterTabByCondition = document.createElement('button');\n this.filterTabByCondition.innerText = '按条件筛选';\n applyStyles(this.filterTabByCondition, this.styles.tabStyle(false));\n\n filterTabsContainer.append(this.filterTabByValue, this.filterTabByCondition);\n\n // === 页脚(清除、取消、确定 筛选按钮) ===\n const footerContainer = document.createElement('div');\n applyStyles(footerContainer, this.styles.footerContainer);\n\n this.clearFilterOptionLink = document.createElement('a');\n this.clearFilterOptionLink.href = '#';\n this.clearFilterOptionLink.innerText = '清除筛选';\n applyStyles(this.clearFilterOptionLink, this.styles.clearLink);\n\n const footerButtons = document.createElement('div');\n this.cancelFilterButton = document.createElement('button');\n this.cancelFilterButton.innerText = '取消';\n applyStyles(this.cancelFilterButton, this.styles.footerButton(false));\n\n this.applyFilterButton = document.createElement('button');\n this.applyFilterButton.innerText = '确认';\n applyStyles(this.applyFilterButton, this.styles.footerButton(true));\n\n footerButtons.append(this.cancelFilterButton, this.applyFilterButton);\n footerContainer.append(this.clearFilterOptionLink, footerButtons);\n\n // --- 筛选器头部 Tab ---\n this.filterMenu.append(filterTabsContainer);\n\n // --- 筛选器内容 ---\n this.valueFilter.render(this.filterMenu);\n this.conditionFilter.render(this.filterMenu);\n\n // --- 筛选器页脚 ---\n this.filterMenu.append(footerContainer);\n\n container.appendChild(this.filterMenu); // 将筛选器添加到 DOM 中\n this.attachEventListeners();\n }\n\n attachEventListeners() {\n // 按值筛选/按条件筛选的事件监听\n this.filterTabByValue.addEventListener('click', () => {\n this.onTabSwitch('byValue');\n });\n\n this.filterTabByCondition.addEventListener('click', () => {\n this.onTabSwitch('byCondition');\n });\n\n this.cancelFilterButton.addEventListener('click', () => this.hide());\n\n this.clearFilterOptionLink.addEventListener('click', e => {\n e.preventDefault();\n this.clearFilter(this.selectedField);\n });\n\n this.applyFilterButton.addEventListener('click', () => {\n this.applyFilter(this.selectedField);\n });\n\n // 点击空白处整个筛选菜单可消失\n document.addEventListener('click', () => {\n if (this.isVisible) {\n this.hide();\n }\n });\n\n this.filterMenu.addEventListener('click', e => {\n e.stopPropagation();\n });\n }\n\n show(col: number, row: number, filterModes: FilterMode[]): void {\n this.filterModes = filterModes;\n if (!this.filterModes.includes('byValue')) {\n this.filterTabByValue.style.display = 'none';\n setTimeout(() => this.onTabSwitch('byCondition'), 0);\n } else if (!this.filterModes.includes('byCondition')) {\n this.filterTabByCondition.style.display = 'none';\n setTimeout(() => this.onTabSwitch('byValue'), 0);\n }\n\n let left: number = 0;\n let top: number = 0;\n const canvasBounds = this.table.canvas.getBoundingClientRect();\n const cell = this.table.getMergeCellRect(col, row);\n if (cell.right < this.filterMenuWidth) {\n // 无法把筛选菜单完整地显示在左侧,那么显示在右侧\n left = cell.left + canvasBounds.left;\n top = cell.bottom + canvasBounds.top;\n } else {\n // 筛选菜单默认显示在左侧\n left = cell.right + canvasBounds.left - this.filterMenuWidth;\n top = cell.bottom + canvasBounds.top;\n }\n\n this.filterMenu.style.display = 'block';\n this.filterMenu.style.left = `${left}px`;\n this.filterMenu.style.top = `${top}px`;\n\n const field = this.table.internalProps.layoutMap.getHeaderField(col, row) as string | number;\n this.updateSelectedField(field);\n\n // 根据当前筛选配置自动选择正确的筛选标签页\n const currentFilter = this.filterStateManager.getFilterState(field);\n if (currentFilter && currentFilter.type === 'byCondition') {\n this.onTabSwitch('byCondition');\n } else {\n this.onTabSwitch('byValue');\n }\n\n // 更新清除筛选按钮状态\n this.updateClearFilterButtonState(field);\n\n // 确保在事件冒泡完成后才设置 isVisible 为 true\n setTimeout(() => {\n this.isVisible = true;\n }, 0);\n }\n\n hide(): void {\n this.filterMenu.style.display = 'none';\n this.isVisible = false;\n }\n}\n"]}
|
|
@@ -17,7 +17,9 @@ export declare class ValueFilter {
|
|
|
17
17
|
private updateUI;
|
|
18
18
|
setSelectedField(fieldId: string | number): void;
|
|
19
19
|
collectUniqueColumnValues(fieldId: string | number): void;
|
|
20
|
+
private updateCandidateCounts;
|
|
20
21
|
private onValueSelect;
|
|
22
|
+
private isValueVisible;
|
|
21
23
|
private toggleSelectAll;
|
|
22
24
|
private onSearch;
|
|
23
25
|
private initFilterStateFromTableData;
|
|
@@ -22,107 +22,44 @@ class ValueFilter {
|
|
|
22
22
|
this.selectedField = fieldId, this.collectUniqueColumnValues(fieldId);
|
|
23
23
|
}
|
|
24
24
|
collectUniqueColumnValues(fieldId) {
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
let targetCol = -1
|
|
25
|
+
if (this.uniqueKeys.has(fieldId)) return;
|
|
26
|
+
const displayToRawMap = new Map;
|
|
27
|
+
let targetCol = -1;
|
|
28
28
|
for (let col = 0; col < this.table.colCount; col++) {
|
|
29
29
|
for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
|
|
30
30
|
const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
|
|
31
31
|
if (bodyInfo && bodyInfo.field === fieldId) {
|
|
32
|
-
targetCol = col
|
|
32
|
+
targetCol = col;
|
|
33
33
|
break;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
if (-1 !== targetCol) break;
|
|
37
37
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
null != rawValue && (displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1),
|
|
51
|
-
rawToDisplayMap.set(rawValue, displayValue), displayToRawMap.set(displayValue, rawValue));
|
|
52
|
-
}
|
|
53
|
-
} else {
|
|
54
|
-
const currentLength = this.table.internalProps.dataSource.length;
|
|
55
|
-
for (let i = 0; i < currentLength; i++) {
|
|
56
|
-
let rawValue, displayValue;
|
|
57
|
-
if (-1 !== targetCol) {
|
|
58
|
-
const row = this.table.columnHeaderLevelCount + i;
|
|
59
|
-
row < this.table.rowCount && (rawValue = this.table.getCellOriginValue(targetCol, row),
|
|
60
|
-
displayValue = this.table.getCellValue(targetCol, row));
|
|
61
|
-
} else rawValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i),
|
|
62
|
-
displayValue = rawValue;
|
|
63
|
-
null != rawValue && (displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1),
|
|
64
|
-
rawToDisplayMap.set(rawValue, displayValue), displayToRawMap.set(displayValue, rawValue));
|
|
65
|
-
}
|
|
38
|
+
const records = this.table.internalProps.records, recordsLength = records.length;
|
|
39
|
+
for (let i = 0; i < recordsLength; i++) {
|
|
40
|
+
let rawValue, displayValue;
|
|
41
|
+
if (-1 !== targetCol) {
|
|
42
|
+
const row = this.table.columnHeaderLevelCount + i;
|
|
43
|
+
rawValue = records[i][fieldId];
|
|
44
|
+
const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
|
|
45
|
+
displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
|
|
46
|
+
[fieldId]: rawValue
|
|
47
|
+
}) : rawValue;
|
|
48
|
+
} else rawValue = records[i][fieldId], displayValue = rawValue;
|
|
49
|
+
null == rawValue || displayToRawMap.has(displayValue) || displayToRawMap.set(displayValue, rawValue);
|
|
66
50
|
}
|
|
67
51
|
this.displayToRawValueMap.set(fieldId, displayToRawMap);
|
|
68
|
-
const uniqueValues = Array.from(
|
|
52
|
+
const uniqueValues = Array.from(displayToRawMap.entries()).map((([displayValue, rawValue]) => ({
|
|
69
53
|
value: displayValue,
|
|
70
|
-
count:
|
|
71
|
-
rawValue:
|
|
54
|
+
count: 0,
|
|
55
|
+
rawValue: rawValue
|
|
72
56
|
})));
|
|
73
57
|
this.uniqueKeys.set(fieldId, uniqueValues);
|
|
74
58
|
}
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
if (
|
|
78
|
-
|
|
79
|
-
this.filterStateManager.dispatch({
|
|
80
|
-
type: types_1.FilterActionType.UPDATE_FILTER,
|
|
81
|
-
payload: {
|
|
82
|
-
field: fieldId,
|
|
83
|
-
values: updatedValues
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
} else this.filterStateManager.dispatch({
|
|
87
|
-
type: types_1.FilterActionType.ADD_FILTER,
|
|
88
|
-
payload: {
|
|
89
|
-
field: fieldId,
|
|
90
|
-
type: "byValue",
|
|
91
|
-
values: [ rawValue ]
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
toggleSelectAll(fieldId, selected) {
|
|
96
|
-
var _a;
|
|
97
|
-
const filter = this.filterStateManager.getFilterState(fieldId), rawValuesToUpdate = selected && (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.map((item => item.rawValue))) || [];
|
|
98
|
-
if (filter) {
|
|
99
|
-
const updatedValues = selected ? rawValuesToUpdate : [];
|
|
100
|
-
this.filterStateManager.dispatch({
|
|
101
|
-
type: types_1.FilterActionType.UPDATE_FILTER,
|
|
102
|
-
payload: {
|
|
103
|
-
field: fieldId,
|
|
104
|
-
values: updatedValues
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
} else this.filterStateManager.dispatch({
|
|
108
|
-
type: types_1.FilterActionType.ADD_FILTER,
|
|
109
|
-
payload: {
|
|
110
|
-
field: fieldId,
|
|
111
|
-
type: "byValue",
|
|
112
|
-
values: rawValuesToUpdate,
|
|
113
|
-
enable: !0
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
onSearch(fieldId, value) {
|
|
118
|
-
const filterKeywords = value.toUpperCase().split(" ").filter((s => s)), items = this.valueFilterOptionList.get(fieldId);
|
|
119
|
-
for (const item of items) {
|
|
120
|
-
const txtValue = item.id.toUpperCase() || "", match = filterKeywords.some((keyword => txtValue.includes(keyword)));
|
|
121
|
-
item.itemContainer.style.display = 0 === filterKeywords.length || match ? "flex" : "none";
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
initFilterStateFromTableData(fieldId) {
|
|
125
|
-
const filter = this.filterStateManager.getFilterState(fieldId), selectedRawValues = new Set, displayToRawMap = this.displayToRawValueMap.get(fieldId);
|
|
59
|
+
updateCandidateCounts(fieldId) {
|
|
60
|
+
const uniqueValues = this.uniqueKeys.get(fieldId);
|
|
61
|
+
if (!uniqueValues) return;
|
|
62
|
+
const filter = this.filterStateManager.getFilterState(fieldId), dataSource = (null == filter ? void 0 : filter.enable) ? this.table.internalProps.records : this.table.internalProps.dataSource;
|
|
126
63
|
let targetCol = -1;
|
|
127
64
|
for (let col = 0; col < this.table.colCount; col++) {
|
|
128
65
|
for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
|
|
@@ -134,32 +71,117 @@ class ValueFilter {
|
|
|
134
71
|
}
|
|
135
72
|
if (-1 !== targetCol) break;
|
|
136
73
|
}
|
|
137
|
-
const
|
|
138
|
-
for (let i = 0; i <
|
|
139
|
-
let displayValue
|
|
74
|
+
const dataLength = dataSource.length, countMap = new Map;
|
|
75
|
+
for (let i = 0; i < dataLength; i++) {
|
|
76
|
+
let displayValue;
|
|
140
77
|
if (-1 !== targetCol) {
|
|
141
78
|
const row = this.table.columnHeaderLevelCount + i;
|
|
142
|
-
row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row)
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
|
|
146
|
-
null != rawValue && selectedRawValues.add(rawValue);
|
|
79
|
+
row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row));
|
|
80
|
+
} else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i);
|
|
81
|
+
null != displayValue && countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
|
|
147
82
|
}
|
|
148
|
-
|
|
83
|
+
uniqueValues.forEach((item => {
|
|
84
|
+
item.count = countMap.get(item.value) || 0;
|
|
85
|
+
}));
|
|
86
|
+
}
|
|
87
|
+
onValueSelect(fieldId, displayValue, selected) {
|
|
88
|
+
const displayToRawMap = this.displayToRawValueMap.get(fieldId), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue, filter = this.filterStateManager.getFilterState(fieldId);
|
|
89
|
+
let updatedValues;
|
|
90
|
+
filter ? (updatedValues = selected ? [ ...filter.values || [], rawValue ] : (filter.values || []).filter((v => v !== rawValue)),
|
|
91
|
+
this.filterStateManager.dispatch({
|
|
149
92
|
type: types_1.FilterActionType.UPDATE_FILTER,
|
|
93
|
+
payload: {
|
|
94
|
+
field: fieldId,
|
|
95
|
+
values: updatedValues
|
|
96
|
+
}
|
|
97
|
+
})) : (updatedValues = selected ? [ rawValue ] : [], this.filterStateManager.dispatch({
|
|
98
|
+
type: types_1.FilterActionType.ADD_FILTER,
|
|
150
99
|
payload: {
|
|
151
100
|
field: fieldId,
|
|
152
101
|
type: "byValue",
|
|
153
|
-
values:
|
|
102
|
+
values: updatedValues
|
|
103
|
+
}
|
|
104
|
+
}));
|
|
105
|
+
}
|
|
106
|
+
isValueVisible(displayValue, keyword) {
|
|
107
|
+
if (!keyword) return !0;
|
|
108
|
+
const filterKeywords = keyword.toUpperCase().split(" ").filter((s => s)), txtValue = String(displayValue).toUpperCase();
|
|
109
|
+
return filterKeywords.some((keyword => txtValue.includes(keyword)));
|
|
110
|
+
}
|
|
111
|
+
toggleSelectAll(fieldId, selected) {
|
|
112
|
+
const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId), stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId), displayToRawMap = this.displayToRawValueMap.get(fieldId), visibleRawValues = stableCandidates.filter((candidate => this.isValueVisible(candidate.value, currentKeyword))).map((candidate => displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value)), filter = this.filterStateManager.getFilterState(fieldId), currentValues = new Set((null == filter ? void 0 : filter.values) || []);
|
|
113
|
+
let updatedValues;
|
|
114
|
+
updatedValues = selected ? Array.from(new Set([ ...currentValues, ...visibleRawValues ])) : Array.from(currentValues).filter((value => !visibleRawValues.includes(value))),
|
|
115
|
+
filter ? this.filterStateManager.dispatch({
|
|
116
|
+
type: types_1.FilterActionType.UPDATE_FILTER,
|
|
117
|
+
payload: {
|
|
118
|
+
field: fieldId,
|
|
119
|
+
values: updatedValues
|
|
154
120
|
}
|
|
155
121
|
}) : this.filterStateManager.dispatch({
|
|
156
122
|
type: types_1.FilterActionType.ADD_FILTER,
|
|
157
123
|
payload: {
|
|
158
124
|
field: fieldId,
|
|
159
125
|
type: "byValue",
|
|
160
|
-
values:
|
|
126
|
+
values: updatedValues,
|
|
127
|
+
enable: !0
|
|
161
128
|
}
|
|
162
|
-
})
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
onSearch(fieldId, value) {
|
|
132
|
+
this.filterStateManager.updateSearchKeyword(fieldId, value);
|
|
133
|
+
const items = this.valueFilterOptionList.get(fieldId), filterKeywords = value.toUpperCase().split(" ").filter((s => s));
|
|
134
|
+
for (const item of items) {
|
|
135
|
+
const txtValue = item.id.toUpperCase() || "", match = filterKeywords.some((keyword => txtValue.includes(keyword))), isVisible = 0 === filterKeywords.length || match;
|
|
136
|
+
item.itemContainer.style.display = isVisible ? "flex" : "none";
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
initFilterStateFromTableData(fieldId) {
|
|
140
|
+
var _a, _b;
|
|
141
|
+
const filter = this.filterStateManager.getFilterState(fieldId);
|
|
142
|
+
if (null == filter ? void 0 : filter.enable) {
|
|
143
|
+
const selectedRawValues = new Set, displayToRawMap = this.displayToRawValueMap.get(fieldId);
|
|
144
|
+
let targetCol = -1;
|
|
145
|
+
for (let col = 0; col < this.table.colCount; col++) {
|
|
146
|
+
for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
|
|
147
|
+
const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
|
|
148
|
+
if (bodyInfo && bodyInfo.field === fieldId) {
|
|
149
|
+
targetCol = col;
|
|
150
|
+
break;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
if (-1 !== targetCol) break;
|
|
154
|
+
}
|
|
155
|
+
const currentLength = this.table.internalProps.dataSource.length;
|
|
156
|
+
for (let i = 0; i < currentLength; i++) {
|
|
157
|
+
let displayValue, rawValue;
|
|
158
|
+
if (-1 !== targetCol) {
|
|
159
|
+
const row = this.table.columnHeaderLevelCount + i;
|
|
160
|
+
row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row),
|
|
161
|
+
rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
|
|
162
|
+
} else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i),
|
|
163
|
+
rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
|
|
164
|
+
null != rawValue && selectedRawValues.add(rawValue);
|
|
165
|
+
}
|
|
166
|
+
!(0, vutils_1.arrayEqual)(filter.values, Array.from(selectedRawValues)) && this.filterStateManager.dispatch({
|
|
167
|
+
type: types_1.FilterActionType.UPDATE_FILTER,
|
|
168
|
+
payload: {
|
|
169
|
+
field: fieldId,
|
|
170
|
+
values: Array.from(selectedRawValues)
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
} else if (!filter) {
|
|
174
|
+
const availableRawValues = (null === (_b = null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.filter((item => item.count > 0))) || void 0 === _b ? void 0 : _b.map((item => item.rawValue)).filter((v => null != v))) || [];
|
|
175
|
+
this.filterStateManager.dispatch({
|
|
176
|
+
type: types_1.FilterActionType.ADD_FILTER,
|
|
177
|
+
payload: {
|
|
178
|
+
field: fieldId,
|
|
179
|
+
type: "byValue",
|
|
180
|
+
values: availableRawValues,
|
|
181
|
+
enable: !1
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
}
|
|
163
185
|
}
|
|
164
186
|
syncCheckboxesWithFilterState(filter) {
|
|
165
187
|
if (!filter) return;
|
|
@@ -169,7 +191,7 @@ class ValueFilter {
|
|
|
169
191
|
const displayValue = optionDom.originalValue, rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
|
|
170
192
|
optionDom.checkbox.checked = selectedRawValues.some((v => v === rawValue));
|
|
171
193
|
const count = (null === (_b = null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.find((key => String(key.value) === optionDom.id))) || void 0 === _b ? void 0 : _b.count) || 0;
|
|
172
|
-
optionDom.
|
|
194
|
+
optionDom.checkbox.disabled = 0 === count;
|
|
173
195
|
}));
|
|
174
196
|
}
|
|
175
197
|
syncSelectAllWithFilterState(filter) {
|
|
@@ -182,14 +204,14 @@ class ValueFilter {
|
|
|
182
204
|
this.selectAllCheckbox.indeterminate = !0);
|
|
183
205
|
}
|
|
184
206
|
applyFilter(fieldId = this.selectedField) {
|
|
185
|
-
var _a
|
|
186
|
-
const
|
|
187
|
-
|
|
207
|
+
var _a;
|
|
208
|
+
const visibleSelectedKeys = Array.from(this.filterStateManager.getVisibleSelectedValues(fieldId));
|
|
209
|
+
visibleSelectedKeys.length > 0 && visibleSelectedKeys.length < (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.length) ? this.filterStateManager.dispatch({
|
|
188
210
|
type: types_1.FilterActionType.APPLY_FILTERS,
|
|
189
211
|
payload: {
|
|
190
212
|
field: fieldId,
|
|
191
213
|
type: "byValue",
|
|
192
|
-
values:
|
|
214
|
+
values: visibleSelectedKeys,
|
|
193
215
|
enable: !0
|
|
194
216
|
}
|
|
195
217
|
}) : this.filterStateManager.dispatch({
|
|
@@ -233,12 +255,12 @@ class ValueFilter {
|
|
|
233
255
|
const selectedRawValues = (null === (_a = this.filterStateManager.getFilterState(field)) || void 0 === _a ? void 0 : _a.values) || [], selectedRawValueSet = new Set(selectedRawValues), itemDomList = [];
|
|
234
256
|
null === (_b = this.uniqueKeys.get(field)) || void 0 === _b || _b.forEach((({value: value, count: count, rawValue: rawValue}) => {
|
|
235
257
|
const itemDiv = document.createElement("div");
|
|
236
|
-
(0, styles_1.applyStyles)(itemDiv, this.styles.optionItem);
|
|
258
|
+
(0, styles_1.applyStyles)(itemDiv, this.styles.optionItem), itemDiv.style.display = "flex";
|
|
237
259
|
const label = document.createElement("label");
|
|
238
260
|
(0, styles_1.applyStyles)(label, this.styles.optionLabel);
|
|
239
261
|
const checkbox = document.createElement("input");
|
|
240
262
|
checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue),
|
|
241
|
-
(0, styles_1.applyStyles)(checkbox, this.styles.checkbox);
|
|
263
|
+
checkbox.disabled = 0 === count, (0, styles_1.applyStyles)(checkbox, this.styles.checkbox);
|
|
242
264
|
const countSpan = document.createElement("span");
|
|
243
265
|
countSpan.textContent = String(count), (0, styles_1.applyStyles)(countSpan, this.styles.countSpan),
|
|
244
266
|
label.append(checkbox, ` ${value}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
|
|
@@ -269,7 +291,11 @@ class ValueFilter {
|
|
|
269
291
|
}));
|
|
270
292
|
}
|
|
271
293
|
show() {
|
|
272
|
-
this.
|
|
294
|
+
this.collectUniqueColumnValues(this.selectedField), this.updateCandidateCounts(this.selectedField),
|
|
295
|
+
this.initFilterStateFromTableData(this.selectedField);
|
|
296
|
+
const uniqueValues = this.uniqueKeys.get(this.selectedField), displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
|
|
297
|
+
uniqueValues && displayToRawMap && this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap),
|
|
298
|
+
this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), this.renderFilterOptions(this.selectedField),
|
|
273
299
|
this.filterByValuePanel.style.display = "block";
|
|
274
300
|
}
|
|
275
301
|
hide() {
|