diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue index de624942c4..aa90d80fed 100644 --- a/packages/kotti-ui/source/kotti-table/KtTable.vue +++ b/packages/kotti-ui/source/kotti-table/KtTable.vue @@ -209,10 +209,10 @@ export default { return colSpan }, isExpandable() { - return Boolean(this.$scopedSlots.expand || this.renderExpand) + return Boolean(this.$slots.expand || this.renderExpand) }, hasActions() { - return Boolean(this.$scopedSlots.actions || this.renderActions) + return Boolean(this.$slots.actions || this.renderActions) }, _renderExpand() { return (h: CreateElement, rowData: any) => { @@ -220,7 +220,7 @@ export default { // @ts-expect-error $slots will exist at runtime - return this.$scopedSlots.expand(rowData) + return this.$slots.expand(rowData) } }, _renderActions() { @@ -229,7 +229,7 @@ export default { // @ts-expect-error $slots will exist at runtime - return this.$scopedSlots.actions(rowData) + return this.$slots.actions(rowData) } }, _renderLoading() { diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts index ccc8e12159..3ceea3da4c 100644 --- a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts +++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts @@ -103,7 +103,6 @@ export const KtTableColumn: any = { this[KT_STORE].commit('insertColumn', { column: this.columnConfig, ...(columnIndex !== -1 ? { index: columnIndex } : {}), - fromTableColumn: true, }) }, destroyed(): void { diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.ts b/packages/kotti-ui/source/kotti-table/components/TableRow.ts index 262324dc4a..17ffe7c2d6 100644 --- a/packages/kotti-ui/source/kotti-table/components/TableRow.ts +++ b/packages/kotti-ui/source/kotti-table/components/TableRow.ts @@ -128,7 +128,7 @@ export const TableRow: any = { // @ts-expect-error isInteractive and isDisabled will exist at runtime if (this.isInteractive && !this.isDisabled) { // @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts - this[KT_STORE].commit('focuseRow', row) + this[KT_STORE].commit('focusRow', row) // @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts this[KT_TABLE].$emit('rowFocus', row, index) } diff --git a/packages/kotti-ui/source/kotti-table/logic/column.ts b/packages/kotti-ui/source/kotti-table/logic/column.ts index 53d684a12c..432c225a24 100644 --- a/packages/kotti-ui/source/kotti-table/logic/column.ts +++ b/packages/kotti-ui/source/kotti-table/logic/column.ts @@ -110,14 +110,14 @@ export const defaultState: Store.StateComponents.Column = { refreshColumnArray: true, } -export const mutations = { - insertColumn(store: any, { column, index }: any) { +export const mutations: Store.MutationComponents.Column = { + insertColumn(store, { column, index }) { const deleted = store.state._destroyedColumns[column.prop] setColumn(store.state, { column, index, deleted }) deleted && (store.state._destroyedColumns[column.prop] = 0) store.commit('updateColumns', { emitChange: false }) }, - removeColumn(store: any, column: any) { + removeColumn(store, column) { // eslint-disable-next-line no-param-reassign column = getColumn(store.state, column) if (column) { @@ -126,7 +126,7 @@ export const mutations = { store.commit('updateColumns', { emitChange: false }) } }, - setColumns(store: any, columns = store.state._columnsArray) { + setColumns(store, columns = store.state._columnsArray) { const { state } = store const pickedColumns = columns.map((col: any) => pick(col, PUBLIC_COLUMN_PROPS), @@ -147,7 +147,7 @@ export const mutations = { }) }, updateColumns( - store: any, + store, { emitChange = true, refreshColumnArray = store.state.refreshColumnArray, diff --git a/packages/kotti-ui/source/kotti-table/logic/disable.ts b/packages/kotti-ui/source/kotti-table/logic/disable.ts index d8c91291e3..21ff6431ad 100644 --- a/packages/kotti-ui/source/kotti-table/logic/disable.ts +++ b/packages/kotti-ui/source/kotti-table/logic/disable.ts @@ -18,8 +18,8 @@ function getEnabledRows(rows: any, disableRow: any) { return getDisabledRows(rows, negate(disableRow)) } -export const mutations = { - updateDisabledRows({ state, table }: any): void { +export const mutations: Store.MutationComponents.Disable = { + updateDisabledRows({ state, table }): void { state.enabledRows = getEnabledRows(state.rows, table.disableRow) state.isAllRowsDisabled = state.enabledRows.length === 0 }, diff --git a/packages/kotti-ui/source/kotti-table/logic/expand.ts b/packages/kotti-ui/source/kotti-table/logic/expand.ts index 50886bd7d4..5c7d008566 100644 --- a/packages/kotti-ui/source/kotti-table/logic/expand.ts +++ b/packages/kotti-ui/source/kotti-table/logic/expand.ts @@ -22,8 +22,8 @@ function toggleRowExpansion(state: any, row: any) { return shouldExpand } -export const mutations = { - expandRow(store: any, row: any) { +export const mutations: Store.MutationComponents.Expand = { + expandRow(store, row) { const { state } = store const isExpanded = toggleRowExpansion(state, row) store.emit('expandChange', [...state.expanded]) diff --git a/packages/kotti-ui/source/kotti-table/logic/filter.ts b/packages/kotti-ui/source/kotti-table/logic/filter.ts index 6e76cb07e1..40f359f882 100644 --- a/packages/kotti-ui/source/kotti-table/logic/filter.ts +++ b/packages/kotti-ui/source/kotti-table/logic/filter.ts @@ -13,8 +13,8 @@ export const defaultState: Store.StateComponents.Filter = { filteredColumns: [], } -export const mutations = { - setFilteredColumns(store: any, columns: any = store.state.filteredColumns) { +export const mutations: Store.MutationComponents.Filter = { + setFilteredColumns(store, columns = store.state.filteredColumns) { setColumnsArray(store.state, 'filteredColumns', ['prop', 'hidden'], columns) store.commit('updateColumns', { emitChange: false }) }, diff --git a/packages/kotti-ui/source/kotti-table/logic/hide.ts b/packages/kotti-ui/source/kotti-table/logic/hide.ts index 63361679c5..20b364c655 100644 --- a/packages/kotti-ui/source/kotti-table/logic/hide.ts +++ b/packages/kotti-ui/source/kotti-table/logic/hide.ts @@ -31,8 +31,8 @@ export const defaultState: Store.StateComponents.Hide = { hiddenColumns: [], } -export const mutations = { - hide(store: any, column: any, hide: any = !column.hidden) { +export const mutations: Store.MutationComponents.Hide = { + hide(store, column, hide = !column.hidden) { const { state } = store column.hidden = hide @@ -44,17 +44,17 @@ export const mutations = { store.commit('updateColumns') store.emit('hiddenChange', state.hiddenColumns) }, - showAll(store: any) { + setHiddenColumns(store, columns = store.state.hiddenColumns) { + setColumnsArray(store.state, 'hiddenColumns', ['prop', 'hidden'], columns) + store.commit('updateColumns', { emitChange: false }) + }, + showAll(store) { store.state._columnsArray.forEach((column: any) => (column.hidden = false)) store.state.hiddenColumns = [] store.commit('updateColumns') store.emit('hiddenChange', store.state.hiddenColumns) }, - setHiddenColumns(store: any, columns = store.state.hiddenColumns) { - setColumnsArray(store.state, 'hiddenColumns', ['prop', 'hidden'], columns) - store.commit('updateColumns', { emitChange: false }) - }, } export const getters = {} diff --git a/packages/kotti-ui/source/kotti-table/logic/order.ts b/packages/kotti-ui/source/kotti-table/logic/order.ts index b06b4daa9a..35ff94bafe 100644 --- a/packages/kotti-ui/source/kotti-table/logic/order.ts +++ b/packages/kotti-ui/source/kotti-table/logic/order.ts @@ -53,8 +53,8 @@ export const defaultState: Store.StateComponents.Order = { orderedColumns: [], } -export const mutations = { - orderBefore(store: any, fromColumn: any, toColumn: any) { +export const mutations: Store.MutationComponents.Order = { + orderBefore(store, fromColumn, toColumn) { const { state } = store if (fromColumn.id === toColumn.id) return const fromIndex = getColumnIndex(state, fromColumn) @@ -70,7 +70,7 @@ export const mutations = { store.emit('orderChange', getOrderedColumns(state)) store.commit('updateColumns') }, - setOrderedColumns(store: any, columns: any) { + setOrderedColumns(store, columns) { setColumnsArray(store.state, 'orderedColumns', ['prop', 'order'], columns) store.commit('updateColumns', { emitChange: false, diff --git a/packages/kotti-ui/source/kotti-table/logic/row.ts b/packages/kotti-ui/source/kotti-table/logic/row.ts index e9c1a1c052..1a0b79fc8a 100644 --- a/packages/kotti-ui/source/kotti-table/logic/row.ts +++ b/packages/kotti-ui/source/kotti-table/logic/row.ts @@ -11,8 +11,14 @@ export const defaultState: Store.StateComponents.Row = { rows: null, } -export const mutations = { - setRows(store: any, data: any) { +export const mutations: Store.MutationComponents.Row = { + blurRow({ state }) { + state.focusedRow = null + }, + focusRow({ state }, row) { + state.focusedRow = row + }, + setRows(store, data) { const { state } = store const { _data } = state const dataInstanceChanged = _data !== data @@ -28,12 +34,6 @@ export const mutations = { } updateAllSelected(state) }, - focuseRow({ state }: any, row: any) { - state.focusedRow = row - }, - blurRow({ state }: any) { - state.focusedRow = null - }, } export const getters = { diff --git a/packages/kotti-ui/source/kotti-table/logic/select.ts b/packages/kotti-ui/source/kotti-table/logic/select.ts index c14f2c8937..b851e8532b 100644 --- a/packages/kotti-ui/source/kotti-table/logic/select.ts +++ b/packages/kotti-ui/source/kotti-table/logic/select.ts @@ -71,8 +71,8 @@ export const defaultState: Store.StateComponents.Select = { selection: [], } -export const mutations = { - selectRow(store: any, row: any, selected: any) { +export const mutations: Store.MutationComponents.Select = { + selectRow(store, row, selected) { const { state } = store const changed = toggleRowSelection(state, row, selected) const { selection } = state @@ -82,7 +82,11 @@ export const mutations = { } updateAllSelected(state) }, - toggleAllSelection: debounce((store: any) => { + setSelected({ state }, selection) { + state.selection = selection + updateAllSelected(state) + }, + toggleAllSelection: debounce((store) => { const { state } = store // refresh disabled rows status in case of external influence store.commit('updateDisabledRows') @@ -101,18 +105,6 @@ export const mutations = { store.emit('selectionChange', selection) store.emit('selectAll', selection) }), - - setSelectedIndices(store: any, indices: any) { - store.commit( - 'setSelected', - indices.map((index: any) => store.get('getRowByVisibleIndex', index)), - ) - }, - - setSelected({ state }: any, selection: any) { - state.selection = selection - updateAllSelected(state) - }, } export const getters = { diff --git a/packages/kotti-ui/source/kotti-table/logic/sort.ts b/packages/kotti-ui/source/kotti-table/logic/sort.ts index 405f657217..a02d687f0b 100644 --- a/packages/kotti-ui/source/kotti-table/logic/sort.ts +++ b/packages/kotti-ui/source/kotti-table/logic/sort.ts @@ -121,33 +121,12 @@ export const defaultState: Store.StateComponents.Sort = { sortMultiple: false, } -export const mutations = { - sort(store: any, options: any) { - const { column, order } = options - setSortedColumn(store.state, column) - column.sortOrder = order || getNextSortOrder(column) - if (column.sortOrder === KottiTable.Column.SortOrders.NONE) { - store.commit('removeSortedColumn', column) - } else { - store.commit('changeSortConditions', { column }) - } - }, - - removeSortedColumn(store: any, column: any) { - const { state } = store - const index = getSortedColumnIndex(state, column) - const isInsortOrder = index !== -1 - if (isInsortOrder) { - state.sortedColumns.splice(index, 1) - } - column.sortOrder = KottiTable.Column.SortOrders.NONE - store.commit('changeSortConditions', { column }) - }, - - changeSortConditions(store: any, options: any) { +export const mutations: Store.MutationComponents.Sort = { + changeSortConditions(store, options) { const { state } = store state.rows = sortData(state.filteredData || state._data || [], state) + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!options?.silent) { const sortedColumns = state.sortedColumns.map((column: any) => { return { @@ -164,10 +143,30 @@ export const mutations = { }) } }, - setSortedColumns(store: any, columns: any) { + removeSortedColumn(store, column) { + const { state } = store + const index = getSortedColumnIndex(state, column) + const isInsortOrder = index !== -1 + if (isInsortOrder) { + state.sortedColumns.splice(index, 1) + } + column.sortOrder = KottiTable.Column.SortOrders.NONE + store.commit('changeSortConditions', { column }) + }, + setSortedColumns(store, columns) { setColumnsArray(store.state, 'sortedColumns', PUBLIC_SORT_PROPS, columns) store.commit('updateColumns', { emitChange: false }) }, + sort(store, options) { + const { column, order } = options + setSortedColumn(store.state, column) + column.sortOrder = order || getNextSortOrder(column) + if (column.sortOrder === KottiTable.Column.SortOrders.NONE) { + store.commit('removeSortedColumn', column) + } else { + store.commit('changeSortConditions', { column }) + } + }, } export const getters = { diff --git a/packages/kotti-ui/source/kotti-table/logic/store.ts b/packages/kotti-ui/source/kotti-table/logic/store.ts index 8abb44c6b4..eee81f7f7f 100644 --- a/packages/kotti-ui/source/kotti-table/logic/store.ts +++ b/packages/kotti-ui/source/kotti-table/logic/store.ts @@ -18,7 +18,7 @@ import type { Store } from './types' export class TableStore { getters: any - mutations: any + mutations: Store.Mutations state: Store.State table: any id: string | undefined @@ -28,27 +28,27 @@ export class TableStore { // we deep clone initial state in order to not refer to the same objects this.state = cloneDeep({ ...column.defaultState, - ...rows.defaultState, + ...disable.defaultState, ...expand.defaultState, + ...filter.defaultState, + ...hide.defaultState, ...order.defaultState, - ...disable.defaultState, + ...rows.defaultState, ...select.defaultState, - ...hide.defaultState, ...sort.defaultState, - ...filter.defaultState, }) this.setInitialState(initialState) this.mutations = { ...column.mutations, - ...rows.mutations, + ...disable.mutations, ...expand.mutations, + ...filter.mutations, + ...hide.mutations, ...order.mutations, - ...disable.mutations, + ...rows.mutations, ...select.mutations, - ...hide.mutations, ...sort.mutations, - ...filter.mutations, } this.getters = { @@ -75,12 +75,19 @@ export class TableStore { }) } - commit(name: any, ...args: any) { + commit( + name: T, + ...args: Store.MutationParameters + ) { const mutations = this.mutations + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (mutations[name]) { - return mutations[name].call(this, this, ...args) + // FIXME: Can be fixed by e.g. refactoring mutations to take at most one argument + // @ts-expect-error not easy to represent variadic arguments + mutations[name].call(this, this, ...args) + return } else { - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions throw new Error(`Mutation not found: ${name}`) } } diff --git a/packages/kotti-ui/source/kotti-table/logic/types.ts b/packages/kotti-ui/source/kotti-table/logic/types.ts index 61ca437dca..cb45d7daee 100644 --- a/packages/kotti-ui/source/kotti-table/logic/types.ts +++ b/packages/kotti-ui/source/kotti-table/logic/types.ts @@ -1,12 +1,13 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { Kotti } from '../../types' +import type { TableStore } from './store' export module Store { export module StateComponents { export type Column = { _columns: any - _columnsArray: any + _columnsArray: any[] _destroyedColumns: Record columns: any refreshColumnArray: boolean @@ -76,4 +77,122 @@ export module Store { */ rowKey?: Kotti.Table.RowKey } + + export module MutationComponents { + export type Column = { + insertColumn( + this: TableStore, + store: TableStore, + payload: { column: any; index?: number }, + ): void + removeColumn(this: TableStore, store: TableStore, column: any): void + setColumns(this: TableStore, store: TableStore, columns: any): void + updateColumns( + this: TableStore, + store: TableStore, + config?: { + emitChange?: boolean + refreshColumnArray?: boolean + }, + ): void + } + export type Disable = { + updateDisabledRows(this: TableStore, store: TableStore): void + } + export type Expand = { + expandRow( + this: TableStore, + store: TableStore, + row: State['expanded'][number], + ): void + } + export type Filter = { + setFilteredColumns( + this: TableStore, + store: TableStore, + columns: any, + ): void + } + export type Hide = { + hide( + this: TableStore, + store: TableStore, + column: State['hiddenColumns'][number], + hide: boolean, + ): void + setHiddenColumns(this: TableStore, store: TableStore, columns: any): void + showAll(this: TableStore, store: TableStore): void + } + export type Order = { + orderBefore( + this: TableStore, + store: TableStore, + fromColumn: State['_columnsArray'][number], + toColumn: any, + ): void + setOrderedColumns(this: TableStore, store: TableStore, columns: any): void + } + export type Row = { + blurRow(this: TableStore, store: TableStore): void + focusRow( + this: TableStore, + store: TableStore, + row: State['focusedRow'], + ): void + setRows(this: TableStore, store: TableStore, data: State['_data']): void + } + export type Select = { + selectRow( + this: TableStore, + store: TableStore, + row: State['selection'][number], + selected?: boolean, + ): void + setSelected( + this: TableStore, + store: TableStore, + selection: State['selection'], + ): void + toggleAllSelection(this: TableStore, store: TableStore): void + } + export type Sort = { + changeSortConditions( + this: TableStore, + store: TableStore, + options: { + column: any + silent?: boolean + }, + ): void + removeSortedColumn(this: TableStore, store: TableStore, column: any): void + setSortedColumns(this: TableStore, store: TableStore, columns: any): void + sort( + this: TableStore, + store: TableStore, + options: { + column: any + order: any + }, + ): void + } + } + + export type Mutations = MutationComponents.Column & + MutationComponents.Disable & + MutationComponents.Expand & + MutationComponents.Filter & + MutationComponents.Hide & + MutationComponents.Order & + MutationComponents.Row & + MutationComponents.Select & + MutationComponents.Sort + + export type MutationParameters = + Mutations[K] extends ( + this: TableStore, + store: TableStore, + ...args: infer P + ) => void + ? P + : never }