Merge pull request #933 from 3YOURMIND/gather-table-store-mutation-types

refact(KtTable): Gather table store mutation types

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -209,18 +209,18 @@ 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) => {
 				if (this.renderExpand) return this.renderExpand(h, rowData)
 
 				// @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() {

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 {

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)
 			}

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,

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
 	},

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])

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 })
 	},

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 = {}

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,

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 = {

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 = {

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 = {

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<T extends keyof Store.Mutations>(
+		name: T,
+		...args: Store.MutationParameters<T>
+	) {
 		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}`)
 		}
 	}