update props types

3YOURMIND · Nov 29, 2024 · 18c9c72 · 18c9c72
1 parent 818f8ef
commit 18c9c72
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 114 deletions.
diff --git a/packages/documentation/pages/usage/components/standard-table.vue b/packages/documentation/pages/usage/components/standard-table.vue
@@ -2,14 +2,13 @@
 	<div>
 		<ComponentInfo v-bind="{ component }" />
 
-		<KtStandardTable id="example-local-data" title="Title" />
+		<KtStandardTable tableId="example-local-data" title="Title" />
 
 		<br /><br />
 
 		<KtI18nContext :locale="settings.locale">
 			<KtStandardTable
-				id="example-remote-data"
-				:options="options"
+				tableId="example-remote-data"
 				:title="settings.title"
 				@update:dataFetchDependencies="fetchData"
 			>
@@ -254,8 +253,8 @@ export default defineComponent({
 				hideFilters: Kotti.FieldToggle.Value
 				hideSearch: Kotti.FieldToggle.Value
 			}
-			columnsPopoverSize: Kotti.FieldSingleSelect.Value
-			filtersPopoverSize: Kotti.FieldSingleSelect.Value
+			columnsPopoverSize: Kotti.Popover.Size
+			filtersPopoverSize: Kotti.Popover.Size
 			locale: Kotti.I18n.SupportedLanguages
 			searchPlaceholder?: Kotti.FieldText.Value
 			showInlineFilters: Kotti.FieldToggle.Value
@@ -296,6 +295,7 @@ export default defineComponent({
 			},
 			{
 				dataTest: 'single-select-filter',
+				displayInline: settings.value.showInlineFilters ?? false,
 				id: 'singleSelectFilter',
 				isUnsorted: true,
 				label: 'Single select filter',
@@ -362,68 +362,59 @@ export default defineComponent({
 				type: Kotti.StandardTable.FilterType.NUMBER_RANGE,
 				unit: 'Kg',
 			},
-			...(settings.value.showInlineFilters
-				? [
-						{
-							dataTest: 'single-select-filter-inline',
-							displayInline: true,
-							id: 'singleSelectFilterInline',
-							isUnsorted: true,
-							label: 'Single select filter Inline',
-							options: [
-								{
-									dataTest: 'opt-1',
-									isDisabled: false,
-									label: 'Option 1',
-									value: 101,
-								},
-								{
-									dataTest: 'opt-2',
-									isDisabled: false,
-									label: 'Option 2',
-									value: 102,
-								},
-								{
-									dataTest: 'opt-3',
-									isDisabled: false,
-									label: 'Option 3',
-									value: 103,
-								},
-							],
-							type: Kotti.StandardTable.FilterType.SINGLE_SELECT,
-						},
-					]
-				: []),
 		])
 
 		useKottiStandardTable<TodoRow>(
 			computed(() => ({
-				columns: todosColumns.value,
-				data: todosData.value,
 				id: 'example-local-data',
 				pagination: {
 					pageSize: 5,
 					// eslint-disable-next-line no-magic-numbers
-					pageSizeOptions: [5, 10, 15, 20],
+					pageSizeOptions: [5, 10, 15, 30, 50, 100],
+					rowCount: recipesRowCount.value,
 					type: Kotti.StandardTable.PaginationType.LOCAL,
 				},
+				table: {
+					columns: todosColumns.value,
+					data: todosData.value,
+					getRowBehavior: ({ row }: { row: TodoRow }) => ({
+						id: String(row.id),
+					}),
+				},
 			})),
 		)
 
 		useKottiStandardTable<RecipeRow>(
 			computed(() => ({
-				columns: recipesColumns.value,
-				data: recipesData.value,
 				filters: filters.value,
 				id: 'example-remote-data',
 				isLoading: isLoadingRecipes.value,
+				options: {
+					hideControls: {
+						columns: settings.value.booleanFlags.hideColumns ?? undefined,
+						filters: settings.value.booleanFlags.hideFilters ?? undefined,
+						search: settings.value.booleanFlags.hideSearch ?? undefined,
+					},
+					popoversSize: {
+						columns: settings.value.columnsPopoverSize,
+						filters: settings.value.filtersPopoverSize,
+					},
+					searchPlaceholder: settings.value.searchPlaceholder ?? undefined,
+				},
 				pagination: {
 					pageSize: 5,
 					// eslint-disable-next-line no-magic-numbers
 					pageSizeOptions: [5, 10, 15, 30, 50, 100],
 					rowCount: recipesRowCount.value,
 					type: Kotti.StandardTable.PaginationType.REMOTE,
 				},
+				table: {
+					columns: recipesColumns.value,
+					data: recipesData.value,
+					getRowBehavior: ({ row }: { row: RecipeRow }) => ({
+						id: String(row.id),
+					}),
+				},
 			})),
 		)
 
@@ -468,19 +459,6 @@ export default defineComponent({
 					throw error
 				}
 			},
-			isLoadingRecipes,
-			options: computed(() => ({
-				hideControls: {
-					columns: settings.value.booleanFlags.hideColumns,
-					filters: settings.value.booleanFlags.hideFilters,
-					search: settings.value.booleanFlags.hideSearch,
-				},
-				popoversSize: {
-					columns: settings.value.columnsPopoverSize,
-					filters: settings.value.filtersPopoverSize,
-				},
-				searchPlaceholder: settings.value.searchPlaceholder,
-			})),
 			settings,
 			sizeOptions: computed((): Kotti.FieldSingleSelect.Props['options'] =>
 				Object.entries(Kotti.Popover.Size).map(([key, value]) => ({

diff --git a/packages/kotti-ui/source/kotti-table/KtStandardTable.vue b/packages/kotti-ui/source/kotti-table/KtStandardTable.vue
@@ -82,7 +82,7 @@
 				v-else
 				class="kt-standard-table__table"
 				:isLoading="isLoading"
-				:tableId="id"
+				:tableId="tableId"
 			/>
 		</div>
 		<div class="kt-standard-table__footer">
@@ -138,16 +138,17 @@ export default defineComponent({
 	emits: ['update:dataFetchDependencies'],
 	setup(props, { emit }) {
 		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-		const standardTableContext = useStandardTableContext(props.id)
+		const standardTableContext = useStandardTableContext(props.tableId)
 		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-		const tableContext = useTableContext(props.id)
+		const tableContext = useTableContext(props.tableId)
 
 		const appliedFilters = ref<KottiStandardTable.AppliedFilter[]>([])
 		const searchValue = ref<KottiFieldText.Value>(null)
 
 		const filters = computed(() => standardTableContext.value.internal.filters)
 		const table = computed(() => tableContext.value.internal.table.value)
 		const tablePagination = computed(() => table.value.getState().pagination)
+		const options = computed(() => standardTableContext.value.internal.options)
 
 		watch(
 			[
@@ -204,9 +205,9 @@ export default defineComponent({
 			),
 			hideTableActions: computed(
 				() =>
-					props.options?.hideControls?.columns &&
-					props.options.hideControls.filters &&
-					props.options.hideControls.search,
+					options.value?.hideControls?.columns &&
+					options.value.hideControls.filters &&
+					options.value.hideControls.search,
 			),
 			inlineFilters: computed(() =>
 				filters.value.filter((filter) => filter.displayInline),
@@ -232,6 +233,7 @@ export default defineComponent({
 			onUpdateSearchValue: (value: KottiFieldText.Value) => {
 				searchValue.value = value
 			},
+			options,
 			pageIndex: computed(() => tablePagination.value.pageIndex),
 			pageSize: computed(() => tablePagination.value.pageSize),
 			pageSizeOptions: computed(

diff --git a/packages/kotti-ui/source/kotti-table/standard-table/context.ts b/packages/kotti-ui/source/kotti-table/standard-table/context.ts
@@ -16,6 +16,7 @@ export type StandardTableContext<
 			id: KottiStandardTable.FilterInternal['id'],
 		) => KottiStandardTable.FilterInternal | null
 		isLoading: boolean
+		options?: KottiStandardTable.Options
 		pageSizeOptions: number[]
 		paginationType: KottiStandardTable.PaginationType
 	}

diff --git a/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts b/packages/kotti-ui/source/kotti-table/standard-table/hooks.ts
@@ -1,9 +1,13 @@
-import type { Ref } from 'vue'
+import type { Ref, UnwrapRef } from 'vue'
 import { computed, watch } from 'vue'
+import { z } from 'zod'
 
-import { useKottiTable } from '../table/hooks'
+import type { KottiTableParameter } from '../table/hooks'
+import {
+	paramsSchema as KottiTableHookParamsSchema,
+	useKottiTable,
+} from '../table/hooks'
 import type { AnyRow } from '../table/types'
-import type { KottiTable } from '../table/types'
 
 import type { StandardTableContext } from './context'
 import { useProvideStandardTableContext } from './context'
@@ -13,54 +17,55 @@ type KottiStandardTableParameters<
 	ROW extends AnyRow,
 	COLUMN_IDS extends string = string,
 > = Ref<{
-	columns: KottiTable.Column<ROW, COLUMN_IDS>[]
-	data: ROW[]
 	filters?: KottiStandardTable.Filter[]
 	id: string
 	isLoading?: boolean
+	options?: KottiStandardTable.Options
 	pagination: KottiStandardTable.Pagination
+	table: Omit<
+		UnwrapRef<KottiTableParameter<ROW, COLUMN_IDS>>,
+		'id' | 'pagination'
+	>
 }>
 
+const paramsSchema = z.object({
+	filters: KottiStandardTable.filterSchema.array().default(() => []),
+	id: z.string(),
+	isLoading: z.boolean().default(false),
+	options: KottiStandardTable.optionsSchema.optional(),
+	pagination: KottiStandardTable.paginationSchema,
+	table: KottiTableHookParamsSchema.omit({
+		id: true,
+		pagination: true,
+	}),
+})
+
 export const useKottiStandardTable = <ROW extends AnyRow>(
-	params: KottiStandardTableParameters<ROW>,
+	_params: KottiStandardTableParameters<ROW>,
 ): {
 	context: StandardTableContext<ROW>
 	tableHook: ReturnType<typeof useKottiTable<ROW>>
 } => {
-	const filters = computed(() =>
-		KottiStandardTable.filterSchema
-			.array()
-			.default(() => [])
-			.parse(params.value.filters),
-	)
-	const paginationParams = computed(() =>
-		KottiStandardTable.paginationSchema.parse(params.value.pagination),
-	)
+	const params = computed(() => paramsSchema.parse(_params.value))
 
 	const tableHook = useKottiTable<ROW>(
 		computed(() => ({
-			columns: params.value.columns,
-			data: params.value.data,
-			getRowBehavior: ({ row }: { row: ROW }) => ({
-				id: String(row.id),
-			}),
-			hasDragAndDrop: true,
+			..._params.value.table,
 			id: params.value.id,
-			isSelectable: true,
 			pagination:
-				paginationParams.value.type === KottiStandardTable.PaginationType.LOCAL
+				params.value.pagination.type === KottiStandardTable.PaginationType.LOCAL
 					? {
 							state: {
 								pageIndex: 0,
-								pageSize: paginationParams.value.pageSize,
+								pageSize: params.value.pagination.pageSize,
 							},
 							type: KottiStandardTable.PaginationType.LOCAL,
 						}
 					: {
-							rowCount: paginationParams.value.rowCount,
+							rowCount: params.value.pagination.rowCount,
 							state: {
 								pageIndex: 0,
-								pageSize: paginationParams.value.pageSize,
+								pageSize: params.value.pagination.pageSize,
 							},
 							type: KottiStandardTable.PaginationType.REMOTE,
 						},
@@ -69,13 +74,14 @@ export const useKottiStandardTable = <ROW extends AnyRow>(
 
 	const standardTableContext: StandardTableContext<ROW> = computed(() => ({
 		internal: {
-			columns: params.value.columns,
-			filters: filters.value,
+			columns: _params.value.table.columns,
+			filters: params.value.filters,
 			getFilter: (id) =>
-				filters.value.find((filter) => filter.id === id) ?? null,
-			isLoading: params.value.isLoading ?? false,
-			pageSizeOptions: paginationParams.value.pageSizeOptions,
-			paginationType: paginationParams.value.type,
+				params.value.filters.find((filter) => filter.id === id) ?? null,
+			isLoading: params.value.isLoading,
+			options: params.value.options,
+			pageSizeOptions: params.value.pagination.pageSizeOptions,
+			paginationType: params.value.pagination.type,
 		},
 	}))
 	useProvideStandardTableContext(params.value.id, standardTableContext)

diff --git a/packages/kotti-ui/source/kotti-table/standard-table/types.ts b/packages/kotti-ui/source/kotti-table/standard-table/types.ts
@@ -168,6 +168,24 @@ export namespace KottiStandardTable {
 		})
 	export type AppliedFilter = z.output<typeof appliedFilterSchema>
 
+	export const optionsSchema = z.object({
+		hideControls: z
+			.object({
+				columns: z.boolean().default(false),
+				filters: z.boolean().default(false),
+				search: z.boolean().default(false),
+			})
+			.optional(),
+		popoversSize: z
+			.object({
+				columns: KottiPopover.propsSchema.shape.size,
+				filters: KottiPopover.propsSchema.shape.size,
+			})
+			.optional(),
+		searchPlaceholder: z.string().optional(),
+	})
+	export type Options = z.input<typeof optionsSchema>
+
 	const sharedPaginationSchema = z.object({
 		pageIndex: z.number().int().finite().min(0),
 		pageSize: z.number().int().finite().gt(0),
@@ -203,25 +221,7 @@ export namespace KottiStandardTable {
 	export type Pagination = z.input<typeof paginationSchema>
 
 	export const propsSchema = z.object({
-		id: z.string().min(1, { message: 'Field cannot be empty' }),
-		options: z
-			.object({
-				hideControls: z
-					.object({
-						columns: z.boolean().default(false),
-						filters: z.boolean().default(false),
-						search: z.boolean().default(false),
-					})
-					.optional(),
-				popoversSize: z
-					.object({
-						columns: KottiPopover.propsSchema.shape.size,
-						filters: KottiPopover.propsSchema.shape.size,
-					})
-					.optional(),
-				searchPlaceholder: z.string().optional(),
-			})
-			.optional(),
+		tableId: z.string().min(1, { message: 'Field cannot be empty' }),
 		title: z.string().optional(),
 	})
 	export type Props = z.input<typeof propsSchema>

diff --git a/packages/kotti-ui/source/kotti-table/table/hooks.ts b/packages/kotti-ui/source/kotti-table/table/hooks.ts
@@ -32,7 +32,7 @@ export const EXPANSION_COLUMN_ID = 'kt-table-inner-expand'
 export const SELECTION_COLUMN_ID = 'kt-table-inner-select'
 export const ARRAY_START = 2
 
-type KottiTableParameter<
+export type KottiTableParameter<
 	ROW extends AnyRow,
 	COLUMN_IDS extends string = string,
 > = Ref<{
@@ -50,7 +50,7 @@ type KottiTableParameter<
 	pagination?: KottiTable.Pagination
 }>
 
-const paramsSchema = z
+export const paramsSchema = z
 	.object({
 		//TODO:
 		// actions : list of buttons (based on baseOptionSchema)