@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/common/tableAccessibilityUtils.ts

@@ -0,0 +1,61 @@
+import { onMounted } from 'vue'
+
+/**
+ * Utility function to enhance table accessibility
+ */
+export function useTableAccessibility({
+	tableId,
+}: {
+	tableId: string
+}) {
+	function setupAccessibility() {
+		onMounted(() => {
+			const captionElement = document.querySelector(`#${tableId} caption`)
+			if (captionElement && captionElement.textContent?.trim() === '') {
+				captionElement.setAttribute('aria-label', 'Table caption')
+			}
+
+			const inputs = document.querySelectorAll(`#${tableId} input`)
+			inputs.forEach((input) => {
+				(input as HTMLElement).removeAttribute('aria-describedby')
+			})
+
+			const fields = document.querySelectorAll(`#${tableId} .v-field`)
+			fields.forEach((field) => {
+				const element = field as HTMLElement
+				element.setAttribute('tabindex', '0')
+
+				// Remove immediately if it exists
+				if (element.hasAttribute('aria-controls')) {
+					element.removeAttribute('aria-controls')
+				}
+
+				// Check again after a delay
+				setTimeout(() => {
+					if (element.hasAttribute('aria-controls')) {
+						element.removeAttribute('aria-controls')
+					}
+				}, 500)
+			})
+
+			const fieldLabels = document.querySelectorAll(`#${tableId} .v-field`)
+			fieldLabels.forEach((fieldLabel) => {
+				(fieldLabel as HTMLElement).setAttribute('aria-label', 'items per page')
+			})
+
+			const fieldTitles = document.querySelectorAll(`#${tableId} .v-field`)
+			fieldTitles.forEach((fieldTitle) => {
+				(fieldTitle as HTMLElement).setAttribute('title', 'items per page')
+			})
+
+			const th = document.querySelectorAll(`#${tableId} th`)
+			for (let i = 0; i < th.length; i++) {
+				th[i].setAttribute('scope', 'col')
+			}
+		})
+	}
+
+	return {
+		setupAccessibility,
+	}
+}

package/src/components/Tables/common/tableFilterUtils.ts

@@ -0,0 +1,75 @@
+import type { FilterOption } from './types'
+import filterByPeriod from './filters/logics/period'
+import filterByExactDate from './filters/logics/date'
+import filterByNumber from './filters/logics/number'
+import filterBySelect from './filters/logics/select'
+import filterByText from './filters/logics/text'
+
+export function filterItems<T extends Record<string, unknown>>(items: T[], filters: FilterOption[]): T[] {
+	if (!Array.isArray(items) || items.length === 0) return []
+	if (!Array.isArray(filters) || filters.length === 0) return items
+
+	return items.filter((item) => {
+		return filters.every(filter => applyFilter(item, filter))
+	})
+}
+
+function applyFilter<T extends Record<string, unknown>>(item: T, filter: FilterOption): boolean {
+	if (!filter.key) return true
+
+	const itemValue = item[filter.key]
+	const filterValue = filter.value
+
+	if (filterValue == null) return true
+
+	switch (filter.type) {
+		case 'text': {
+			return filterByText(itemValue, filterValue)
+		}
+		case 'number': {
+			return filterByNumber(itemValue, filterValue)
+		}
+		case 'select': {
+			return filterBySelect(itemValue, filterValue)
+		}
+		case 'custom': {
+			// Traiter les filtres personnalisés comme des filtres de sélection
+			return filterBySelect(itemValue, filterValue)
+		}
+		case 'period':{
+			return filterByPeriod(itemValue, filterValue)
+		}
+		case 'date': {
+			return filterByExactDate(itemValue, filterValue)
+		}
+		default:
+			return true
+	}
+}
+
+export function parseDate(value: unknown): Date | null {
+	if (value instanceof Date) return value
+	if (typeof value === 'string') {
+		try {
+			if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value)) {
+				const [day, month, year] = value.split('/').map(Number)
+				return new Date(year, month - 1, day)
+			}
+			const parsed = new Date(value)
+			return isNaN(parsed.getTime()) ? null : parsed
+		}
+		catch {
+			return null
+		}
+	}
+	// Traite le type nombre
+	if (typeof value === 'number') {
+		const parsed = new Date(value)
+		return isNaN(parsed.getTime()) ? null : parsed
+	}
+	// Ignore les objets vides
+	if (value === null || value === undefined || (typeof value === 'object' && Object.keys(value as object).length === 0)) {
+		return null
+	}
+	return null
+}

package/src/components/Tables/common/tableStorageUtils.ts

@@ -0,0 +1,127 @@
+import { computed, ref, type Ref } from 'vue'
+import type { DataOptions, DataTableHeaders } from './types'
+import { LocalStorageUtility } from '@/utils/localStorageUtility'
+
+/**
+ * Interface for column width storage
+ */
+export interface ColumnWidthsStorage {
+	[key: string]: number | string
+}
+
+/**
+ * Utility function to manage table state persistence in local storage
+ */
+export function useTableStorage({
+	prefix,
+	suffix,
+	serverItemsLength,
+	options,
+}: {
+	prefix: string
+	suffix?: string
+	serverItemsLength?: number
+	options: Ref<Partial<DataOptions>>
+}) {
+	const localStorageUtility = new LocalStorageUtility()
+	const localOptions = ref({})
+
+	const storageKey = computed(() => {
+		return suffix ? `${prefix}-${suffix}` : prefix
+	})
+
+	// Separate key for column widths
+	const columnWidthsKey = computed(() => {
+		return `${storageKey.value}-column-widths`
+	})
+
+	// Separate key for headers
+	const heardersKey = computed(() => {
+		return `${storageKey.value}-headers`
+	})
+
+	// Column widths storage
+	const columnWidths = ref<ColumnWidthsStorage>({})
+
+	// Headers storage
+	const headers = ref<DataTableHeaders[] | undefined>(undefined)
+
+	// Configuration of local storage synchronization
+	function setupLocalStorage() {
+		// Watch for option changes and update local storage
+		const watchOptions = () => {
+			const storageData = {
+				...(options.value as Record<string, unknown>),
+			}
+
+			// Add itemsLength only for server-side tables
+			if (serverItemsLength !== undefined) {
+				storageData.itemsLength = serverItemsLength
+			}
+
+			localStorageUtility.setItem(storageKey.value, storageData)
+			localOptions.value = options.value
+		}
+
+		// Initialize local options from storage or default values
+		const initFromStorage = (defaultOptions: Record<string, unknown>) => {
+			localOptions.value = localStorageUtility.getItem(storageKey.value) ?? defaultOptions
+
+			// Load column widths from storage
+			const storedColumnWidths = localStorageUtility.getItem<ColumnWidthsStorage>(columnWidthsKey.value)
+			if (storedColumnWidths) {
+				columnWidths.value = storedColumnWidths
+			}
+
+			// Load headers from storage
+			const storedHeaders = localStorageUtility.getItem<DataTableHeaders[]>(heardersKey.value)
+			if (storedHeaders) {
+				headers.value = storedHeaders
+			}
+		}
+
+		// Save column widths to localStorage
+		const saveColumnWidths = (widths: ColumnWidthsStorage) => {
+			columnWidths.value = widths
+			localStorageUtility.setItem(columnWidthsKey.value, widths)
+		}
+
+		// Update a single column width
+		const updateColumnWidth = (columnKey: string, width: number | string) => {
+			const updatedWidths = {
+				...columnWidths.value,
+				[columnKey]: width,
+			}
+			saveColumnWidths(updatedWidths)
+		}
+
+		// Save headers to localStorage
+		const saveHeaders = (headers: DataTableHeaders[] | undefined) => {
+			if (!headers) {
+				localStorageUtility.removeItem(heardersKey.value)
+				return
+			}
+
+			localStorageUtility.setItem(heardersKey.value, headers)
+		}
+
+		return { watchOptions, initFromStorage, saveColumnWidths, updateColumnWidth, saveHeaders }
+	}
+
+	return {
+		localOptions,
+		columnWidths,
+		headers,
+		storageKey,
+		columnWidthsKey,
+		setupLocalStorage,
+		updateColumnWidth: (key: string, width: number | string) => {
+			const updatedWidths = {
+				...columnWidths.value,
+				[key]: width,
+			}
+			columnWidths.value = updatedWidths
+			localStorageUtility.setItem(columnWidthsKey.value, updatedWidths)
+		},
+	}
+}

package/src/components/Tables/common/tableStyles.scss

@@ -0,0 +1,80 @@
+@use '@/assets/tokens';
+
+@mixin tablestyles {
+	.v-table {
+		border: 1px solid tokens.$grey-lighten-80;
+	}
+
+	table thead tr {
+		white-space: nowrap;
+	}
+
+	table thead tr.filters,
+	table thead tr.reset {
+		background-color: tokens.$blue-lighten-90;
+	}
+
+	caption,
+	table thead tr.headers,
+	table thead tr.reset {
+		background-color: rgba(tokens.$blue-lighten-80, 0.2);
+	}
+
+	&.row-clickable table tbody tr {
+		cursor: pointer;
+	}
+
+	&.fixed-min-height {
+		.v-data-table__wrapper {
+			min-height: 540px;
+		}
+	}
+
+	&.no-mobile-header {
+		.v-data-table-header-mobile {
+			display: none;
+		}
+	}
+
+	.v-field {
+		&--active {
+			.v-field__prepend-inner > .v-icon,
+			.v-field__append-inner > .v-icon,
+			.v-field__clearable > .v-icon {
+				opacity: 1;
+				color: tokens.$primary-base;
+			}
+		}
+
+		&--focused {
+			border-color: tokens.$primary-base;
+			color: tokens.$primary-base;
+		}
+	}
+
+	// Override Vuetify's checkbox styles to use primary color
+	.v-table .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	.v-table .v-selection-control--dirty .v-selection-control__input::before {
+		background-color: rgb(var(--v-theme-primary)) !important;
+		border-color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Target the header checkbox specifically
+	.v-data-table-header__checkbox .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Target the row checkboxes specifically
+	.v-data-table-row__checkbox .v-selection-control {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
+
+	// Add a global style for all checkboxes in the table
+	.v-checkbox .v-selection-control__input::before,
+	.v-checkbox-btn .v-selection-control__input::before {
+		border-color: rgb(var(--v-theme-primary)) !important;
+	}
+}

package/src/components/Tables/common/tableUtils.ts

@@ -0,0 +1,102 @@
+import { computed, watch, type Ref } from 'vue'
+import type { DataOptions, TableDensityType } from './types'
+import { useTableAccessibility } from './tableAccessibilityUtils'
+import { useTableStorage } from './tableStorageUtils'
+
+/**
+ * Crée et renvoie des fonctionnalités communes pour les tableaux
+ */
+export function useTableUtils({
+	tableId,
+	prefix,
+	suffix,
+	serverItemsLength,
+	componentAttributes,
+	options,
+}: {
+	tableId: string
+	prefix: string
+	suffix?: string
+	caption?: string
+	serverItemsLength?: number
+	componentAttributes: Record<string, unknown>
+	options: Ref<Partial<DataOptions>>
+	density?: TableDensityType
+}) {
+	// Use the separated storage utility
+	const { localOptions, columnWidths, headers, storageKey, setupLocalStorage, updateColumnWidth } = useTableStorage({
+		prefix,
+		suffix,
+		serverItemsLength,
+		options,
+	})
+
+	// Use the separated accessibility utility
+	const { setupAccessibility } = useTableAccessibility({
+		tableId,
+	})
+
+	const optionsFacade = computed(() => {
+		return {
+			page: options.value.page || componentAttributes['page'],
+			itemsPerPage: options.value.itemsPerPage || 10,
+			sortBy: options.value.sortBy,
+			groupBy: options.value.groupBy,
+			multiSort: options.value.multiSort,
+			mustSort: options.value.mustSort,
+		}
+	})
+
+	const propsFacade = computed(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { 'onUpdate:options': _, ...attrs } = componentAttributes
+
+		const props = {
+			...attrs,
+			...localOptions.value,
+			...(serverItemsLength !== undefined ? { itemsLength: serverItemsLength } : {}),
+		}
+
+		// Ajoute itemsLength uniquement pour les tableaux côté serveur
+		if (serverItemsLength !== undefined) {
+			props.itemsLength = serverItemsLength
+		}
+
+		return props
+	})
+
+	function updateOptions(tableOptions: Partial<DataOptions>): void {
+		options.value = {
+			...options.value,
+			...tableOptions,
+		}
+	}
+
+	// Accessibility setup is now handled by the imported utility
+
+	// Storage setup is now handled by the imported utility
+	const { watchOptions, initFromStorage } = setupLocalStorage()
+
+	// Initialize local options from storage or default values
+	initFromStorage(optionsFacade.value)
+
+	// Watch for options changes
+	watch(
+		() => options.value,
+		watchOptions,
+		{ deep: true },
+	)
+
+	return {
+		localOptions,
+		columnWidths,
+		storageKey,
+		optionsFacade,
+		propsFacade,
+		updateOptions,
+		setupAccessibility,
+		setupLocalStorage,
+		updateColumnWidth,
+		headers,
+	}
+}