diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue index 204e5280d7..158cfabce2 100644 --- a/packages/kotti-ui/source/kotti-table/KtTable.vue +++ b/packages/kotti-ui/source/kotti-table/KtTable.vue @@ -39,19 +39,20 @@ import { import { KtTableColumn } from './KtTableColumn' import { TableStore } from './logic/store' import { TableLayout } from './table-layout' -import type { CreateElement } from 'vue' +import type { CreateElement, PropType } from 'vue' +import type { Kotti } from '../types' let tableIdSeed = 1 export const INITIAL_TABLE_STORE_PROPS = [ - 'rowKey', - 'sortMultiple', 'expandMultiple', + 'filteredColumns', + 'hiddenColumns', 'remoteSort', + 'rowKey', 'sortable', 'sortedColumns', - 'hiddenColumns', - 'filteredColumns', + 'sortMultiple', ] export default { @@ -80,7 +81,10 @@ export default { emptyText: { default: 'No Data', type: String }, id: { default: null, type: String }, // FIXME: Props should either be required or have a default - rowKey: { required: false, type: [String, Function] }, + rowKey: { + required: false, + type: [String, Function] as PropType, + }, rows: { default: () => [], type: Array }, useColumnDragToOrder: { default: false, type: Boolean }, diff --git a/packages/kotti-ui/source/kotti-table/logic/column.ts b/packages/kotti-ui/source/kotti-table/logic/column.ts index 02eca5606a..085b32931c 100644 --- a/packages/kotti-ui/source/kotti-table/logic/column.ts +++ b/packages/kotti-ui/source/kotti-table/logic/column.ts @@ -10,6 +10,7 @@ import { setFilteredColumn } from './filter' import { setHiddenColumn, getResolvedHiddenColumns } from './hide' import { resolveColumnsOrder, getOrderedColumns } from './order' import { setSortedColumn } from './sort' +import type { Store } from './types' export function getColumnRealIndex(state: any, column: any) { return state._columnsArray.findIndex(({ id }: any) => id == column.id) @@ -101,12 +102,12 @@ function didRestoreDestroyedColumns({ ) } -export const defaultState = { - _destroyedColumns: {}, - refreshColumnArray: true, +export const defaultState: Store.StateComponents.Column = { _columns: {}, _columnsArray: [], + _destroyedColumns: {}, columns: [], + refreshColumnArray: true, } export const mutations = { diff --git a/packages/kotti-ui/source/kotti-table/logic/disable.ts b/packages/kotti-ui/source/kotti-table/logic/disable.ts index 148e994090..d8c91291e3 100644 --- a/packages/kotti-ui/source/kotti-table/logic/disable.ts +++ b/packages/kotti-ui/source/kotti-table/logic/disable.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/no-explicit-any */ import negate from 'lodash/negate' +import type { Store } from './types' -export const defaultState = { +export const defaultState: Store.StateComponents.Disable = { enabledRows: [], isAllRowsDisabled: false, } diff --git a/packages/kotti-ui/source/kotti-table/logic/expand.ts b/packages/kotti-ui/source/kotti-table/logic/expand.ts index 7f9da0efeb..50886bd7d4 100644 --- a/packages/kotti-ui/source/kotti-table/logic/expand.ts +++ b/packages/kotti-ui/source/kotti-table/logic/expand.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/no-explicit-any */ import isEqual from 'lodash/isEqual' +import type { Store } from './types' -export const defaultState = { +export const defaultState: Store.StateComponents.Expand = { expandMultiple: false, expanded: [], } diff --git a/packages/kotti-ui/source/kotti-table/logic/filter.ts b/packages/kotti-ui/source/kotti-table/logic/filter.ts index 6a21336144..6e76cb07e1 100644 --- a/packages/kotti-ui/source/kotti-table/logic/filter.ts +++ b/packages/kotti-ui/source/kotti-table/logic/filter.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/no-explicit-any */ import { setColumnsArray } from './column' +import type { Store } from './types' function getFilteredColumnIndex(state: any, column: any) { return state.filteredColumns.findIndex( @@ -8,7 +9,7 @@ function getFilteredColumnIndex(state: any, column: any) { ) } -export const defaultState = { +export const defaultState: Store.StateComponents.Filter = { filteredColumns: [], } diff --git a/packages/kotti-ui/source/kotti-table/logic/hide.ts b/packages/kotti-ui/source/kotti-table/logic/hide.ts index 4d69a12302..63361679c5 100644 --- a/packages/kotti-ui/source/kotti-table/logic/hide.ts +++ b/packages/kotti-ui/source/kotti-table/logic/hide.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/no-explicit-any */ import { setColumnsArray } from './column' +import type { Store } from './types' function getHiddenColumnIndex(state: any, column: any) { return state.hiddenColumns.findIndex(({ prop }: any) => prop === column.prop) @@ -26,7 +27,7 @@ export function setHiddenColumn(state: any, column: any) { } } -export const defaultState = { +export const defaultState: Store.StateComponents.Hide = { hiddenColumns: [], } diff --git a/packages/kotti-ui/source/kotti-table/logic/order.ts b/packages/kotti-ui/source/kotti-table/logic/order.ts index 00a27eb941..b06b4daa9a 100644 --- a/packages/kotti-ui/source/kotti-table/logic/order.ts +++ b/packages/kotti-ui/source/kotti-table/logic/order.ts @@ -3,6 +3,7 @@ import pick from 'lodash/pick' import { setColumnsArray, getColumnIndex, getColumnRealIndex } from './column' +import type { Store } from './types' function byOrder(a: any, b: any) { return a.order < b.order @@ -48,7 +49,7 @@ export function resolveColumnsOrder({ }) } -export const defaultState = { +export const defaultState: Store.StateComponents.Order = { orderedColumns: [], } diff --git a/packages/kotti-ui/source/kotti-table/logic/row.ts b/packages/kotti-ui/source/kotti-table/logic/row.ts index 62f7f080c5..e9c1a1c052 100644 --- a/packages/kotti-ui/source/kotti-table/logic/row.ts +++ b/packages/kotti-ui/source/kotti-table/logic/row.ts @@ -2,8 +2,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { updateAllSelected, cleanSelection, clearSelection } from './select' import { sortData } from './sort' +import type { Store } from './types' -export const defaultState = { +export const defaultState: Store.StateComponents.Row = { _data: [], filteredData: null, focusedRow: null, diff --git a/packages/kotti-ui/source/kotti-table/logic/select.ts b/packages/kotti-ui/source/kotti-table/logic/select.ts index b3516f2030..c14f2c8937 100644 --- a/packages/kotti-ui/source/kotti-table/logic/select.ts +++ b/packages/kotti-ui/source/kotti-table/logic/select.ts @@ -2,6 +2,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import debounce from 'lodash/debounce' import isEqual from 'lodash/isEqual' +import type { Store } from './types' function toggleRowSelection(state: any, row: any, selected: any) { let changed = false @@ -64,10 +65,10 @@ export function clearSelection(store: any) { } } -export const defaultState = { - selection: [], +export const defaultState: Store.StateComponents.Select = { isAllSelected: false, reserveSelection: false, + selection: [], } export const mutations = { diff --git a/packages/kotti-ui/source/kotti-table/logic/sort.ts b/packages/kotti-ui/source/kotti-table/logic/sort.ts index 7ade0550e1..405f657217 100644 --- a/packages/kotti-ui/source/kotti-table/logic/sort.ts +++ b/packages/kotti-ui/source/kotti-table/logic/sort.ts @@ -9,6 +9,7 @@ import { IS_ASC, IS_DSC, PUBLIC_SORT_PROPS } from '../constants' import { KottiTable } from '../types' import { setColumnsArray } from './column' +import type { Store } from './types' function getSortedColumnIndex(state: any, column: any) { return state.sortedColumns.findIndex(({ prop }: any) => prop === column.prop) @@ -113,11 +114,11 @@ export function sortData(data: any, state: any) { return orderBy(data, state.sortedColumns) } -export const defaultState = { - sortMultiple: false, +export const defaultState: Store.StateComponents.Sort = { remoteSort: false, sortable: false, sortedColumns: [], + sortMultiple: false, } export const mutations = { diff --git a/packages/kotti-ui/source/kotti-table/logic/store.ts b/packages/kotti-ui/source/kotti-table/logic/store.ts index 5e72a222a8..8abb44c6b4 100644 --- a/packages/kotti-ui/source/kotti-table/logic/store.ts +++ b/packages/kotti-ui/source/kotti-table/logic/store.ts @@ -14,15 +14,16 @@ import * as order from './order' import * as rows from './row' import * as select from './select' import * as sort from './sort' +import type { Store } from './types' export class TableStore { getters: any mutations: any - state: any + state: Store.State table: any id: string | undefined - constructor(table: any, initialState: any = {}) { + constructor(table: any, initialState: Partial = {}) { this.setTable(table) // we deep clone initial state in order to not refer to the same objects this.state = cloneDeep({ @@ -67,7 +68,7 @@ export class TableStore { // eslint-disable-next-line @typescript-eslint/restrict-plus-operands this.id = table.tableId + '_store' } - setInitialState(initialState: any) { + setInitialState(initialState: Partial) { this.state = cloneDeep({ ...this.state, ...pickBy(initialState, negate(isUndefined)), diff --git a/packages/kotti-ui/source/kotti-table/logic/types.ts b/packages/kotti-ui/source/kotti-table/logic/types.ts new file mode 100644 index 0000000000..61ca437dca --- /dev/null +++ b/packages/kotti-ui/source/kotti-table/logic/types.ts @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import type { Kotti } from '../../types' + +export module Store { + export module StateComponents { + export type Column = { + _columns: any + _columnsArray: any + _destroyedColumns: Record + columns: any + refreshColumnArray: boolean + } + + export type Disable = { + enabledRows: any + isAllRowsDisabled: boolean + } + + export type Expand = { + expanded: any + expandMultiple: boolean + } + + export type Filter = { + filteredColumns: any + } + + export type Hide = { + hiddenColumns: any + } + + export type Order = { + orderedColumns: any + } + + export type Row = { + _data: any + filteredData: any + focusedRow: any + rows: any + } + + export type Select = { + isAllSelected: boolean + reserveSelection: boolean + selection: any + } + + export type Sort = { + remoteSort: boolean + sortable: boolean | string + sortedColumns: any + sortMultiple: boolean + } + } + + export type State = StateComponents.Column & + StateComponents.Disable & + StateComponents.Expand & + StateComponents.Filter & + StateComponents.Hide & + StateComponents.Order & + StateComponents.Row & + StateComponents.Select & + StateComponents.Sort & { + /** + * This is passed to state exclusively via `setInitialState` and thus is not defined + * in any of the above objects. + * + * Note: rowKey is right now not a required prop of KtTable, but from what I can see + * the store either depends on its existence or at least has better performance if + * it exists. + * + * TODO: investigate if rowKey should be a required prop. + */ + rowKey?: Kotti.Table.RowKey + } +} diff --git a/packages/kotti-ui/source/kotti-table/types.ts b/packages/kotti-ui/source/kotti-table/types.ts index f80e85b07c..96edfcef1a 100644 --- a/packages/kotti-ui/source/kotti-table/types.ts +++ b/packages/kotti-ui/source/kotti-table/types.ts @@ -136,6 +136,8 @@ export module KottiTable { } } + export type RowKey = string | ((row: Row.Props) => string | number) + export type Props = { columns: Column.Props[] | null emptyText: string