@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/Tables/SyTable/SyTable.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-	import { computed, ref, useAttrs, watch, provide, nextTick } from 'vue'
+	import { computed, onMounted, nextTick, provide, ref, toRef, useAttrs, watch } from 'vue'
 	import type { VDataTable } 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 OrganizeColumns from '../common/organizeColumns/OrganizeColumns.vue'
 	import { useTableUtils } from '../common/tableUtils'
-	import type { DataOptions, FilterOption, SyTableProps, TableColumnHeader } from '../common/types'
+	import type { DataOptions, SyTableProps } 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 { useTableCheckbox } from '../common/useTableCheckbox'
 
 	const props = withDefaults(defineProps<SyTableProps>(), {
-		itemsPerPage: undefined,
 		caption: '',
 		showFilters: false,
 		resizableColumns: false,
@@ -18,35 +25,31 @@
 		filterInputConfig: () => ({}),
 		density: 'default',
 		striped: false,
+		showSelect: false,
 	})
 
+	const emit = defineEmits<{
+		(e: 'update:options', options: Partial<DataOptions>): void
+	}>()
+
 	const options = defineModel<Partial<DataOptions>>('options', {
 		required: false,
 		default: () => ({}),
 	})
 
+	const model = defineModel<unknown[]>('modelValue', {
+		required: false,
+		default: () => [],
+	})
+
 	const table = ref<VDataTable>()
 
+	// Get filter utilities
 	const { filterItems } = useTableFilter()
 
-	// Éléments filtrés en fonction des filtres
-	const filteredItems = computed(() => {
-		const itemsCopy = props.items.map((item) => {
-			return JSON.parse(JSON.stringify(item))
-		})
-
-		// Applique les filtres aux éléments copiés
-		return filterItems(itemsCopy, filters.value)
-	})
-
-	const filters = computed({
-		get: () => options.value.filters || [],
-		set: (newFilters: FilterOption[]) => {
-			options.value = {
-				...options.value,
-				filters: newFilters,
-			}
-		},
+	// Use the table options composable
+	const { filters } = useTableOptions({
+		options,
 	})
 
 	const componentAttributes = useAttrs()
@@ -61,20 +64,87 @@
 		setupLocalStorage,
 		columnWidths,
 		updateColumnWidth,
+		headers: storageHeaders,
 	} = useTableUtils({
 		tableId: uniqueTableId.value,
 		prefix: 'table',
 		suffix: props.suffix,
-		itemsPerPage: props.itemsPerPage,
 		caption: props.caption,
 		componentAttributes,
 		options,
 		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)
+
+	// Use the table items composable
+	const { filteredItems, createEmptyItemWithStructure } = useTableItems({
+		items: itemsRef,
+		headers,
+		filters,
+		options,
+		filterItems,
+	})
+
+	// Use the pagination composable
+	const itemsLength = computed(() => filteredItems.value.length)
+	const { page, pageCount, itemsPerPageValue, updateItemsPerPage } = usePagination({
+		options,
+		itemsLength,
+		table,
+		emit,
+	})
+
+	// Create a computed property for items to ensure reactivity
+	const tableItems = computed(() => props.items)
+
+	// Use the table checkbox composable
+	const { getItemValue, toggleAllRows } = useTableCheckbox({
+		items: tableItems,
+		modelValue: model,
+		updateModelValue: (value) => {
+			model.value = value
+		},
+	})
+
+	// 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(() => filteredItems.value, accessibilityRowCheckboxes)
+	watch(() => page.value, accessibilityRowCheckboxes)
+
+	// Apply accessibility attributes when component is mounted
+	onMounted(() => {
+		accessibilityRowCheckboxes()
+	})
+
 	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)
@@ -111,47 +181,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,
-			// Utilise le filterType de la colonne si disponible, sinon utilise le filterType de l'en-tête correspondant
-			filterType: column.filterType || matchingHeader?.filterType,
-			// Utilise les filterOptions de la colonne si disponibles, sinon utilise les filterOptions de l'en-tête correspondant
-			filterOptions: column.filterOptions || matchingHeader?.filterOptions,
-		} 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>
@@ -161,10 +198,15 @@
 	>
 		<VDataTable
 			ref="table"
+			v-model="model"
 			color="primary"
+			:headers="displayHeaders"
 			v-bind="propsFacade"
 			:items="processItems(filteredItems.length > 0 ? filteredItems : createEmptyItemWithStructure())"
 			:density="props.density"
+			:show-select="props.showSelect"
+			:item-selectable="(item) => true"
+			:item-value="getItemValue"
 			@update:options="updateOptions"
 		>
 			<template #top>
@@ -184,12 +226,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>
@@ -197,8 +258,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>
@@ -230,14 +292,14 @@
 							:colspan="slotProps.columns.length"
 							class="text-right px-4 py-2"
 						>
-							<v-btn
+							<VBtn
 								size="small"
 								color="primary"
 								variant="outlined"
 								@click="filters = []"
 							>
 								{{ locales.resetFilters }}
-							</v-btn>
+							</VBtn>
 						</td>
 					</tr>
 					<tr v-if="filteredItems.length === 0">
@@ -293,6 +355,24 @@
 					</tr>
 				</template>
 			</template>
+
+			<template #bottom>
+				<div class="d-flex align-center pa-2">
+					<OrganizeColumns
+						v-if="props.enableColumnControls && headers"
+						v-model:headers="headers"
+					/>
+					<SyTablePagination
+						v-if="filteredItems.length > 0"
+						:page="page"
+						:items-per-page="itemsPerPageValue"
+						:page-count="pageCount"
+						:items-length="filteredItems.length"
+						@update:page="page = $event"
+						@update:items-per-page="updateItemsPerPage"
+					/>
+				</div>
+			</template>
 		</VDataTable>
 	</div>
 </template>