@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-	import { computed, ref, useAttrs, watch, provide, nextTick } from 'vue'
+	import { computed, nextTick, onMounted, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTableServer } from 'vuetify/components'
+	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 	import SyTableFilter from '../common/SyTableFilter.vue'
 	import TableHeader from '../common/TableHeader.vue'
+	import SyTablePagination from '../common/SyTablePagination.vue'
 	import { processItems } from '../common/formatters'
 	import { locales } from '../common/locales'
 	import { useTableUtils } from '../common/tableUtils'
-	import type { DataOptions, FilterOption, SyServerTableProps, TableColumnHeader } from '../common/types'
+	import type { DataOptions, SyServerTableProps } from '../common/types'
 	import { useTableFilter } from '../common/useTableFilter'
+	import { usePagination } from '../common/usePagination'
+	import { useTableOptions } from '../common/useTableOptions'
+	import { useTableHeaders } from '../common/useTableHeaders'
+	import { useTableItems } from '../common/useTableItems'
+	import OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
+	import { useTableCheckbox } from '../common/useTableCheckbox'
 
 	const props = withDefaults(defineProps<SyServerTableProps>(), {
-		itemsPerPage: undefined,
 		caption: '',
 		showFilters: false,
 		items: () => [],
@@ -19,31 +26,34 @@
 		filterInputConfig: () => ({}),
 		density: 'default',
 		striped: false,
+		showSelect: false,
+		multiSort: false,
+		mustSort: false,
 	})
 
+	const emit = defineEmits<{
+		(e: 'update:options', options: Partial<DataOptions>): void
+	}>()
+
 	const options = defineModel<Partial<DataOptions>>('options', {
 		required: false,
 		default: () => ({}),
 	})
 
-	const table = ref<VDataTableServer>()
-
-	// Computed pour les filtres
-	const filters = computed({
-		get: () => options.value.filters || [],
-		set: (newFilters: FilterOption[]) => {
-			options.value = {
-				...options.value,
-				filters: newFilters,
-			}
-		},
+	const model = defineModel<unknown[]>('modelValue', {
+		required: false,
+		default: () => [],
 	})
 
-	// Récupère la fonction filterItems du composable
-	// Cela peut être utilisé pour la prévisualisation du filtrage côté client ou pour les tests
+	const table = ref<VDataTableServer>()
+
+	// Get filter utilities
 	const { filterItems } = useTableFilter()
 
-	defineExpose({ filterItems })
+	// Use the table options composable
+	const { filters } = useTableOptions({
+		options,
+	})
 
 	const componentAttributes = useAttrs()
 
@@ -57,11 +67,11 @@
 		setupLocalStorage,
 		columnWidths,
 		updateColumnWidth,
+		headers: storageHeaders,
 	} = useTableUtils({
 		tableId: uniqueTableId.value,
 		prefix: 'server-table',
 		suffix: props.suffix,
-		itemsPerPage: props.itemsPerPage,
 		caption: props.caption,
 		serverItemsLength: props.serverItemsLength,
 		componentAttributes,
@@ -69,9 +79,79 @@
 		density: props.density,
 	})
 
+	// Use the table headers composable
+	const { headers, displayHeaders, getEnhancedHeader } = useTableHeaders({
+		headersProp: storageHeaders.value ? storageHeaders : toRef(props, 'headers'),
+		filterInputConfig: props.filterInputConfig,
+	})
+
+	// Create a reactive reference for items
+	const itemsRef = computed(() => props.items)
+
+	// For server-side tables, we don't use the filteredItems from useTableItems
+	// Instead, we use the items directly from props as they are already filtered server-side
+	// But we still need the createEmptyItemWithStructure function
+	const { createEmptyItemWithStructure } = useTableItems({
+		items: itemsRef,
+		headers,
+		filters,
+		options,
+		filterItems,
+	})
+
+	// Use the pagination composable with serverItemsLength
+	const itemsLength = computed(() => props.serverItemsLength)
+	const { page, pageCount, itemsPerPageValue, updateItemsPerPage } = usePagination({
+		options,
+		itemsLength,
+		table,
+		emit,
+	})
+
+	// Create a computed property for items to ensure reactivity
+	const tableItems = computed(() => props.items)
+
+	// Function to add accessibility attributes to row checkboxes
+	const accessibilityRowCheckboxes = () => {
+		nextTick(() => {
+			setTimeout(() => {
+				const tableElement = document.getElementById(uniqueTableId.value)
+				if (!tableElement) return
+
+				// Find all row checkboxes
+				const rowCheckboxes = tableElement.querySelectorAll('td .v-selection-control input[type="checkbox"]')
+				rowCheckboxes.forEach((checkbox, index) => {
+					const rowLabel = `${locales.selectRow} ${index + 1}`
+					checkbox.setAttribute('aria-label', rowLabel)
+					checkbox.setAttribute('title', rowLabel)
+				})
+			}, 100) // Small delay to ensure DOM is updated
+		})
+	}
+
+	// Watch for changes that might affect the table and update accessibility
+	watch(() => props.items, accessibilityRowCheckboxes, { deep: true })
+	watch(() => props.serverItemsLength, accessibilityRowCheckboxes)
+	watch(() => page.value, accessibilityRowCheckboxes)
+
+	// Apply accessibility attributes when component is mounted
+	onMounted(() => {
+		accessibilityRowCheckboxes()
+	})
+
+	const { getItemValue, toggleAllRows } = useTableCheckbox({
+		items: tableItems,
+		modelValue: model,
+		updateModelValue: (value) => {
+			model.value = value
+		},
+	})
+
+	defineExpose({ filterItems })
+
 	setupAccessibility()
 
-	const { watchOptions } = setupLocalStorage()
+	const { watchOptions, saveHeaders } = setupLocalStorage()
 
 	// Create a reactive reference to column widths that will be provided to children
 	const reactiveColumnWidths = ref(columnWidths.value)
@@ -108,47 +188,14 @@
 		{ deep: true },
 	)
 
-	// Fonction pour améliorer les en-têtes de colonnes avec les types de filtres appropriés
-	function getEnhancedHeader(column: TableColumnHeader): TableColumnHeader {
-		// Trouve l'en-tête correspondant dans les props si disponible
-		const matchingHeader = props.headers?.find(h => h.key === column.key || h.value === column.value)
-
-		// Crée un en-tête amélioré avec les types appropriés
-		return {
-			...column,
-			title: column.name || matchingHeader?.title,
-			filterType: column.filterType || matchingHeader?.filterType,
-			filterOptions: column.filterOptions || matchingHeader?.filterOptions,
-			filterable: matchingHeader?.filterable !== undefined ? matchingHeader.filterable : column.filterable,
-		} as TableColumnHeader
-	}
+	watch(
+		headers,
+		() => {
+			saveHeaders(headers.value)
+		},
+		{ deep: true },
+	)
 
-	// Fonction pour créer un élément vide qui maintient la structure des colonnes
-	function createEmptyItemWithStructure(): Record<string, unknown>[] {
-		// Si nous avons des éléments, utilise le premier élément comme modèle
-		if (props.items.length > 0) {
-			// Crée un objet vide avec les mêmes clés que le premier élément
-			const template = Object.keys(props.items[0]).reduce((obj, key) => {
-				obj[key] = ''
-				return obj
-			}, {} as Record<string, unknown>)
-			return [template]
-		}
-
-		// Si nous avons des en-têtes, les utilise pour créer une structure
-		if (props.headers && props.headers.length > 0) {
-			// Crée un objet vide avec les clés des en-têtes
-			const template = props.headers.reduce((obj, header) => {
-				const key = header.key || header.value || ''
-				if (key) obj[key] = ''
-				return obj
-			}, {} as Record<string, unknown>)
-			return [template]
-		}
-
-		// Repli vers un objet vide
-		return [{}]
-	}
 </script>
 
 <template>
@@ -159,10 +206,17 @@
 		<VDataTableServer
 			ref="table"
 			v-bind="propsFacade"
+			v-model="model"
+			:headers="displayHeaders"
 			color="primary"
 			:items="processItems(props.items.length > 0 ? props.items : createEmptyItemWithStructure())"
 			:items-length="props.serverItemsLength || 0"
 			:density="props.density"
+			:show-select="props.showSelect"
+			:item-selectable="(item) => true"
+			:item-value="getItemValue"
+			:multi-sort="props.multiSort"
+			:must-sort="props.mustSort"
 			@update:options="updateOptions"
 		>
 			<template #top>
@@ -182,12 +236,31 @@
 							:key="column.key"
 						>
 							<th>
-								<TableHeader
-									:table="table"
-									:header-params="slotProps as any"
-									:column="column"
-									:resizable-columns="props.resizableColumns"
-								/>
+								<template v-if="column.key === 'data-table-select' && props.showSelect">
+									<SyCheckbox
+										:model-value="slotProps.allSelected"
+										:indeterminate="slotProps.someSelected && !slotProps.allSelected"
+										color="primary"
+										density="compact"
+										hide-details
+										:is-header="true"
+										:aria-label="locales.selectAllRows"
+										:title="locales.selectAllRows"
+										@click="toggleAllRows"
+									>
+										<template #label>
+											<span class="d-sr-only">{{ locales.selectAllRows }}</span>
+										</template>
+									</SyCheckbox>
+								</template>
+								<template v-else>
+									<TableHeader
+										:table="table"
+										:header-params="slotProps"
+										:column="column"
+										:resizable-columns="props.resizableColumns"
+									/>
+								</template>
 							</th>
 						</template>
 					</tr>
@@ -195,8 +268,9 @@
 						v-if="props.showFilters"
 						class="filters"
 					>
+						<th v-if="props.showSelect" />
 						<template
-							v-for="column in slotProps.columns"
+							v-for="column in slotProps.columns.filter(c => c.key !== 'data-table-select')"
 							:key="column.key"
 						>
 							<th>
@@ -278,6 +352,35 @@
 					</tr>
 				</template>
 			</template>
+
+			<!-- Dynamically forward all slots to maintain flexibility -->
+			<template
+				v-for="slotName in Object.keys($slots)"
+				#[slotName]="slotProps"
+			>
+				<slot
+					:name="slotName"
+					v-bind="slotProps ?? {}"
+				/>
+			</template>
+
+			<template #bottom>
+				<div class="d-flex align-center pa-2">
+					<OrganizeColumns
+						v-if="props.enableColumnControls && headers"
+						v-model:headers="headers"
+					/>
+					<SyTablePagination
+						v-if="props.serverItemsLength > 0"
+						:page="page"
+						:items-per-page="itemsPerPageValue"
+						:page-count="pageCount"
+						:items-length="props.serverItemsLength"
+						@update:page="page = $event"
+						@update:items-per-page="updateItemsPerPage"
+					/>
+				</div>
+			</template>
 		</VDataTableServer>
 	</div>
 </template>

package/src/components/Tables/SyServerTable/tests/SyServerTable.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, afterEach } from 'vitest'
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
 import { mount } from '@vue/test-utils'
 
 import { vuetify } from '@tests/unit/setup'
@@ -28,7 +28,15 @@ const fakeItems = [
 	},
 ]
 
-const headers = [
+// Define a more complete DataTableHeaders type for testing
+interface TestDataTableHeader {
+	title: string
+	key: string
+	hidden?: boolean
+	order?: number
+}
+
+const headers: TestDataTableHeader[] = [
 	{
 		title: 'ID',
 		key: 'id',
@@ -44,6 +52,24 @@ const headers = [
 ]
 
 describe('SyServerTable', () => {
+	beforeAll(() => {
+		// Mock visualViewport for Vuetify's VMenu component
+		global.visualViewport = {
+			width: 1024,
+			height: 768,
+			scale: 1,
+			offsetLeft: 0,
+			offsetTop: 0,
+			pageLeft: 0,
+			pageTop: 0,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+			onresize: null,
+			onscroll: null,
+		}
+	})
+
 	afterEach(() => {
 		vi.resetAllMocks()
 	})
@@ -168,9 +194,8 @@ describe('SyServerTable', () => {
 	it('passes itemsPerPage prop correctly', () => {
 		const wrapper = mount(SyServerTable, {
 			props: {
-				options: {} as DataOptions,
+				options: { itemsPerPage: 5 } as DataOptions,
 				serverItemsLength: 10,
-				itemsPerPage: 5,
 				suffix: 'test',
 			},
 			attrs: {
@@ -447,4 +472,231 @@ describe('SyServerTable', () => {
 		expect(customFilterSlot.exists()).toBe(true)
 		expect(customFilterSlot.text()).toBe(customSlotText)
 	})
+
+	describe('SyServerTable Checkbox Selection', () => {
+		it('enables selection when showSelect is true', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has showSelect prop set to true
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+
+		it('disables selection when showSelect is false', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: false,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has showSelect prop set to false
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(false)
+		})
+
+		it('passes the correct item-value function to the data table', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Access the internal getItemValue function
+			// Since it's not exposed, we'll test the selection behavior instead
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('itemValue')).toBeDefined()
+
+			// Instead of testing the internal function directly, we'll verify the component works correctly
+			// by checking if the data table has the correct props
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+
+		it('properly binds the v-model for selection', async () => {
+			const selectedItems = [fakeItems[0].id, fakeItems[2].id]
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					modelValue: selectedItems,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has the correct model value
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('modelValue')).toEqual(selectedItems)
+		})
+
+		it('exposes the toggleAllRows method', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					'items': fakeItems,
+					'serverItemsLength': fakeItems.length,
+					'showSelect': true,
+					'modelValue': [],
+					'suffix': '',
+					'onUpdate:modelValue': (val: unknown[]) => {
+						wrapper.setProps({ modelValue: val })
+					},
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Since toggleAllRows is not exposed, we'll test if the component renders correctly
+			// and has the expected structure for selection
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+	})
+
+	describe('Column management', () => {
+		it('should hide a column when hideColumn is called', async () => {
+			// Create a mock for OrganizeColumns component
+			const mockOrganizeColumns = {
+				name: 'OrganizeColumns',
+				props: ['headers'],
+				template: '<div></div>',
+				emits: ['update:headers'],
+			}
+
+			// Create test items that will ensure all columns are rendered
+			const testItems = [
+				{ id: 1, name: 'Test 1', age: 25 },
+				{ id: 2, name: 'Test 2', age: 30 },
+			]
+
+			const wrapper = mount(SyServerTable, {
+				props: {
+					options: {} as DataOptions,
+					suffix: 'test',
+					headers: [...headers],
+					items: testItems,
+					serverItemsLength: testItems.length,
+					enableColumnControls: true,
+				},
+				global: {
+					plugins: [vuetify],
+					stubs: {
+						OrganizeColumns: mockOrganizeColumns,
+					},
+				},
+				attachTo: document.body, // Attach to DOM for better rendering
+			})
+
+			// Get the OrganizeColumns component
+			const organizeColumnsComponent = wrapper.findComponent({ name: 'OrganizeColumns' })
+			expect(organizeColumnsComponent.exists()).toBe(true)
+
+			// Verify initial column count
+			let columns = wrapper.findAll('th')
+			expect(columns.length).toBe(3)
+
+			// Simulate hiding a column by directly updating the headers
+			const updatedHeaders = [...headers] as TestDataTableHeader[]
+			updatedHeaders[1].hidden = true // Hide the Name column
+			organizeColumnsComponent.vm.$emit('update:headers', updatedHeaders)
+			await wrapper.vm.$nextTick()
+
+			// Check that the column is hidden
+			columns = wrapper.findAll('th')
+			expect(columns.length).toBe(2) // One less column should be visible
+		})
+
+		it('should move the column ID to the bottom', async () => {
+			// Import the sortHeaders function directly
+			const { sortHeaders } = await import('../../common/organizeColumns/sortHeaders')
+
+			// Add order property to headers for proper sorting
+			const headersWithOrder = headers.map((header, index) => ({
+				...header,
+				order: index + 1,
+			}))
+
+			// Verify initial order after sorting
+			let sortedHeaders = sortHeaders([...headersWithOrder])
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('ID')
+			expect(sortedHeaders[1].title).toBe('Name')
+			expect(sortedHeaders[2].title).toBe('Age')
+
+			// Update the headers to move ID to the bottom
+			const updatedHeaders = [
+				{ ...headersWithOrder[0], order: 3 }, // ID moves to position 3
+				{ ...headersWithOrder[1], order: 1 }, // Name stays at position 1
+				{ ...headersWithOrder[2], order: 2 }, // Age moves to position 2
+			]
+
+			// Check that the columns are in the correct order after sorting
+			sortedHeaders = sortHeaders(updatedHeaders)
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('Name')
+			expect(sortedHeaders[1].title).toBe('Age')
+			expect(sortedHeaders[2].title).toBe('ID')
+		})
+
+		it('should move the column age to the top', async () => {
+			// Import the sortHeaders function directly
+			const { sortHeaders } = await import('../../common/organizeColumns/sortHeaders')
+
+			// Add order property to headers for proper sorting
+			const headersWithOrder = headers.map((header, index) => ({
+				...header,
+				order: index + 1,
+			}))
+
+			// Verify initial order after sorting
+			let sortedHeaders = sortHeaders([...headersWithOrder])
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('ID')
+			expect(sortedHeaders[1].title).toBe('Name')
+			expect(sortedHeaders[2].title).toBe('Age')
+
+			// Update the headers to move Age to the top
+			const updatedHeaders = [
+				{ ...headersWithOrder[0], order: 2 }, // ID moves to position 2
+				{ ...headersWithOrder[1], order: 3 }, // Name moves to position 3
+				{ ...headersWithOrder[2], order: 1 }, // Age moves to position 1
+			]
+
+			// Check that the columns are in the correct order after sorting
+			sortedHeaders = sortHeaders(updatedHeaders)
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('Age')
+			expect(sortedHeaders[1].title).toBe('ID')
+			expect(sortedHeaders[2].title).toBe('Name')
+		})
+	})
 })