@cnamts/synapse 1.0.0 → 1.0.1

package/src/components/Tables/common/SyTableFilter.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+	import { ref, watch, provide, defineAsyncComponent, markRaw, shallowRef, computed } from 'vue'
+	import type { FilterOption, TableColumnHeader } from './types'
+	import { filterItems } from './tableFilterUtils'
+	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+
+	// Utilisation de shallowRef pour stocker les composants chargés dynamiquement
+	const loadedComponents = shallowRef<Record<string, unknown>>({})
+
+	// Fonction pour charger et récupérer un composant de filtre à la demande
+	function getFilterComponent(filterType?: string, filterOptions?: unknown) {
+		// Déterminer le type de composant à charger
+		let componentType = 'text'
+
+		if (filterType === 'select' || filterOptions) {
+			componentType = 'select'
+		}
+		else if (filterType === 'date') {
+			componentType = 'date'
+		}
+		else if (filterType === 'period') {
+			componentType = 'period'
+		}
+		else if (filterType === 'number') {
+			componentType = 'number'
+		}
+
+		// Si le composant est déjà chargé, le retourner
+		if (loadedComponents.value[componentType]) {
+			return loadedComponents.value[componentType]
+		}
+
+		// Sinon, charger le composant de manière asynchrone
+		let asyncComponent
+		switch (componentType) {
+		case 'select':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./filters/SelectFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'SelectFilter' })
+			break
+		case 'date':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./filters/DateFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'DateFilter' })
+			break
+		case 'period':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./filters/PeriodFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'PeriodFilter' })
+			break
+		case 'number':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./filters/NumberFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'NumberFilter' })
+			break
+		default:
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./filters/TextFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'TextFilter' })
+		}
+
+		// Stocker le composant pour éviter de le recharger
+		loadedComponents.value[componentType] = asyncComponent
+		return asyncComponent
+	}
+
+	const props = defineProps({
+		header: {
+			type: Object as () => TableColumnHeader,
+			required: true,
+		},
+		// Propriété pour déterminer si le filtre doit être affiché
+		filterable: {
+			type: Boolean,
+			default: true,
+		},
+		filters: {
+			type: Array as () => FilterOption[],
+			default: () => [],
+		},
+		// Propriétés customisables des champs de saisie
+		inputConfig: {
+			type: Object as () => {
+				disableErrorHandling?: boolean
+				variant?: string
+				hideDetails?: boolean
+				density?: 'default' | 'comfortable' | 'compact'
+				clearable?: boolean
+			},
+			default: () => ({}),
+		},
+		// Propriétés de configuration des champs de saisie
+		disableErrorHandling: {
+			type: Boolean,
+			default: true,
+		},
+		variant: {
+			type: String,
+			default: 'outlined',
+		},
+		hideDetails: {
+			type: Boolean,
+			default: true,
+		},
+		density: {
+			type: String as () => 'default' | 'comfortable' | 'compact',
+			default: 'compact',
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+	})
+
+	const emit = defineEmits(['update:filters'])
+
+	// Utilisation d'un seul ref pour stocker tous les filtres, organisés par type
+	const filtersMap = ref<{
+		text: Record<string, string>
+		number: Record<string, number>
+		date: Record<string, DateValue>
+		period: Record<string, { from: string | null, to: string | null }>
+		select: Record<string, string | number | Record<string, unknown> | undefined>
+	}>({
+		text: {},
+		number: {},
+		date: {},
+		period: {},
+		select: {},
+	})
+
+	// Computed properties pour accéder aux différents types de filtres
+	const textFilters = computed(() => filtersMap.value.text)
+	const numberFilters = computed(() => filtersMap.value.number)
+	const dateFilters = computed(() => filtersMap.value.date)
+	const periodFilters = computed(() => filtersMap.value.period)
+	const selectFilters = computed(() => filtersMap.value.select)
+
+	// Fonction pour traiter un filtre individuel
+	function processFilter(filter: FilterOption) {
+		const key = filter.key
+		const value = filter.value
+
+		switch (filter.type) {
+		case 'text':
+			filtersMap.value.text[key] = value as string
+			break
+		case 'number':
+			filtersMap.value.number[key] = value as number
+			break
+		case 'date':
+			filtersMap.value.date[key] = value as DateValue
+			break
+		case 'period':
+			if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
+				const periodValue = value as { from: Date | string | null, to: Date | string | null }
+
+				const from = periodValue.from instanceof Date
+					? periodValue.from.toLocaleDateString('fr-FR')
+					: periodValue.from
+
+				const to = periodValue.to instanceof Date
+					? periodValue.to.toLocaleDateString('fr-FR')
+					: periodValue.to
+
+				filtersMap.value.period[key] = { from, to }
+			}
+			break
+		case 'select':
+			filtersMap.value.select[key] = value !== null ? value as string | number | Record<string, unknown> : undefined
+			break
+		}
+	}
+
+	// Initialise les filtres à partir des props, sans deep watching
+	watch(() => props.filters, (newFilters) => {
+		// Efface tous les filtres si le tableau de filtres est vide
+		if (newFilters.length === 0) {
+			filtersMap.value = {
+				text: {},
+				number: {},
+				date: {},
+				period: {},
+				select: {},
+			}
+			return
+		}
+
+		// Traiter uniquement les filtres qui ont changé
+		newFilters.forEach(processFilter)
+	}, { immediate: true })
+
+	// Expose la fonction de filtrage via le modèle provide/inject
+	provide('filterItems', filterItems)
+
+	// Exporte la fonction filterItems pour l'importation directe
+	defineExpose({ filterItems })
+
+	// Fonction pour mettre à jour les filtres (utilisée par les composants enfants)
+	function updateFilters(newFilters: FilterOption[]) {
+		emit('update:filters', newFilters)
+	}
+
+	// Fonction pour obtenir la valeur du filtre en fonction du type de filtre
+	function getFilterValue(header: TableColumnHeader) {
+		const key = String(header.key || header.value || '')
+
+		if (header.filterType === 'select' || header.filterOptions) {
+			return selectFilters.value[key]
+		}
+		else if (header.filterType === 'date') {
+			return dateFilters.value[key]
+		}
+		else if (header.filterType === 'period') {
+			return periodFilters.value[key] || { from: null, to: null }
+		}
+		else if (header.filterType === 'number') {
+			return numberFilters.value[key]
+		}
+		else {
+			return textFilters.value[key]
+		}
+	}
+
+	// Fonction pour mettre à jour un filtre spécifique
+	function updateFilter(header: TableColumnHeader, value: unknown) {
+		const key = String(header.key || header.value || '')
+
+		if (header.filterType === 'select' || header.filterOptions) {
+			filtersMap.value.select[key] = value as string | number | Record<string, unknown> | undefined
+		}
+		else if (header.filterType === 'date') {
+			filtersMap.value.date[key] = value as DateValue
+		}
+		else if (header.filterType === 'period') {
+			filtersMap.value.period[key] = value as { from: string | null, to: string | null }
+		}
+		else if (header.filterType === 'number') {
+			filtersMap.value.number[key] = value as number
+		}
+		else if (header.filterType === 'custom') {
+			// Pour les filtres personnalisés, nous stockons la valeur dans selectFilters
+			// car ils fonctionnent généralement comme des sélecteurs
+			filtersMap.value.select[key] = value as string | number | Record<string, unknown> | undefined
+		}
+		else {
+			filtersMap.value.text[key] = value as string
+		}
+
+		// Créer un tableau de FilterOption à partir des données des filtres
+		const newFilters: FilterOption[] = []
+
+		// Ajouter les filtres de texte
+		Object.entries(filtersMap.value.text).forEach(([filterKey, filterValue]) => {
+			if (filterValue !== undefined && filterValue !== '') {
+				newFilters.push({ key: filterKey, value: filterValue, type: 'text' })
+			}
+		})
+
+		// Ajouter les filtres numériques
+		Object.entries(filtersMap.value.number).forEach(([filterKey, filterValue]) => {
+			if (filterValue !== undefined && filterValue !== null) {
+				newFilters.push({ key: filterKey, value: filterValue, type: 'number' })
+			}
+		})
+
+		// Ajouter les filtres de date
+		Object.entries(filtersMap.value.date).forEach(([filterKey, filterValue]) => {
+			if (filterValue !== undefined && filterValue !== null) {
+				newFilters.push({ key: filterKey, value: filterValue, type: 'date' })
+			}
+		})
+
+		// Ajouter les filtres de période
+		Object.entries(filtersMap.value.period).forEach(([filterKey, filterValue]) => {
+			if (filterValue && (filterValue.from || filterValue.to)) {
+				newFilters.push({ key: filterKey, value: filterValue, type: 'period' })
+			}
+		})
+
+		// Ajouter les filtres de sélection et personnalisés
+		Object.entries(filtersMap.value.select).forEach(([filterKey, filterValue]) => {
+			if (filterValue !== undefined && filterValue !== null) {
+				// Déterminer si c'est un filtre personnalisé en vérifiant les en-têtes
+				const matchingHeader = props.header.key === filterKey || props.header.value === filterKey
+				const filterType = matchingHeader && props.header.filterType === 'custom' ? 'custom' : 'select'
+				newFilters.push({ key: filterKey, value: filterValue, type: filterType })
+			}
+		})
+
+		updateFilters(newFilters)
+	}
+</script>
+
+<template>
+	<div
+		v-if="props.filterable"
+		class="sy-table-filter"
+	>
+		<div class="sy-table-filter-item">
+			<!-- Utilise le slot personnalisé si filterType est 'custom', sinon utilise le composant dynamique -->
+			<template v-if="props.header.filterType === 'custom'">
+				<slot
+					name="custom-filter"
+					:header="props.header"
+					:value="getFilterValue(props.header)"
+					:update-filter="(value) => updateFilter(props.header, value)"
+				>
+					<!-- Contenu par défaut si aucun slot n'est fourni -->
+					<div class="custom-filter-placeholder">
+						Filtre personnalisé
+					</div>
+				</slot>
+			</template>
+			<component
+				:is="getFilterComponent(props.header.filterType, props.header.filterOptions)"
+				v-else
+				:header="props.header"
+				:filters="props.filters"
+				:filter-value="getFilterValue(props.header)"
+				:input-config="props.inputConfig"
+				:disable-error-handling="props.disableErrorHandling"
+				:variant="props.variant"
+				:hide-details="props.hideDetails"
+				:density="props.density"
+				:clearable="props.clearable"
+				@update:filters="updateFilters"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.sy-table-filter {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	padding: 16px 0;
+	background-color: var(--v-theme-surface);
+	border-bottom: 1px solid var(--v-border-color);
+
+	&-item {
+		min-width: 200px;
+		flex: 1;
+	}
+}
+</style>

package/src/components/Tables/common/TableHeader.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+	import { computed, nextTick, onMounted, ref, inject, watch, type Ref } from 'vue'
+	import type { VDataTable, VDataTableServer } from 'vuetify/components'
+	import { locales } from './locales'
+
+	// Define a type for our column structure
+	type TableColumn = {
+		key: string | null
+		title?: string
+		value: unknown
+		sortable: boolean
+		rowspan?: number
+		colspan?: number
+		width?: number | string
+		sortBy?: string
+	}
+
+	// Define a type for the header parameters
+	interface TableData {
+		columns: TableColumn[]
+		sortBy?: unknown
+		someSelected?: boolean
+		allSelected?: boolean
+		getSortIcon: (column: unknown) => string | undefined
+		toggleSort: (column: unknown) => void
+	}
+
+	const props = withDefaults(defineProps<{
+		column: TableColumn
+		headerParams: TableData
+		table: VDataTable | VDataTableServer | null | undefined
+		resizableColumns?: boolean
+		storageKey?: string
+	}>(), {
+		resizableColumns: false,
+		storageKey: undefined,
+	})
+
+	const header = computed(() => {
+		return props.headerParams.columns.find(header => header.key === props.column.key)
+	})
+
+	const isLastColumn = computed(() => {
+		const columnIndex = props.headerParams.columns.findIndex(header => header.key === props.column.key)
+		return columnIndex === props.headerParams.columns.length - 1
+	})
+
+	const wrapper = ref<HTMLElement | null>(null)
+
+	const initialWidth = ref<number | null>(null)
+
+	// Inject stored column widths if available
+	const storedColumnWidths = inject<Ref<Record<string, number | string>>>('columnWidths', ref({}))
+
+	onMounted(() => {
+		nextTick(() => {
+			if (wrapper.value) {
+				initialWidth.value = wrapper.value.offsetWidth
+
+				// Apply stored width if available for this column
+				if (header.value?.key && storedColumnWidths?.value?.[header.value.key]) {
+					header.value.width = storedColumnWidths.value[header.value.key]
+				}
+			}
+		})
+	})
+
+	// Re-apply column width on header changes (ex when table re-renders due to pagination)
+	watch(
+		() => props.column,
+		() => {
+			nextTick(() => {
+				if (header.value?.key && storedColumnWidths?.value?.[header.value.key]) {
+					header.value.width = storedColumnWidths.value[header.value.key]
+				}
+			})
+		},
+		{ immediate: true },
+	)
+
+	// Watch for changes to column widths and apply them
+	watch(
+		() => storedColumnWidths?.value,
+		(newWidths) => {
+			if (newWidths && header.value?.key && newWidths[header.value.key]) {
+				header.value.width = newWidths[header.value.key]
+			}
+		},
+		{ deep: true },
+	)
+
+	const updateColumnWidth = inject<(key: string, width: number | string) => void>('updateColumnWidth', () => {})
+
+	function resetColumnWidth() {
+		if (header.value && initialWidth.value) {
+			header.value.width = initialWidth.value
+
+			// Save the reset width to localStorage if column key exists
+			if (header.value.key) {
+				updateColumnWidth(header.value.key, initialWidth.value)
+			}
+		}
+	}
+
+	function startResize(event: MouseEvent) {
+		const startX = event.clientX
+		const startWidth = wrapper.value!.offsetWidth + 24 + 1 / 2 * 16
+
+		function onMouseMove(e: MouseEvent) {
+			const newWidth = Math.max(50, startWidth + (e.clientX - startX))
+			if (wrapper.value) {
+				header.value!.width = newWidth
+			}
+		}
+
+		function onMouseUp() {
+			document.removeEventListener('mousemove', onMouseMove)
+			document.removeEventListener('mouseup', onMouseUp)
+
+			// Save column width to localStorage if column key exists
+			if (header.value?.key) {
+				updateColumnWidth(header.value.key, header.value.width || initialWidth.value || 0)
+			}
+		}
+
+		document.addEventListener('mousemove', onMouseMove)
+		document.addEventListener('mouseup', onMouseUp)
+	}
+
+	const tableWidth = ref(0)
+	onMounted(async () => {
+		await nextTick()
+		if (props.table) {
+			tableWidth.value = props.table.$el.offsetWidth
+		}
+	})
+	window.addEventListener('resize', () => {
+		if (props.table) {
+			tableWidth.value = props.table.$el.offsetWidth
+		}
+	})
+
+	function resizeKeyboardColumn(increment: number) {
+		const currentWidth = wrapper.value?.offsetWidth || 0
+		if (wrapper.value) {
+			const newWidth = Math.max(50, currentWidth + increment)
+			header.value!.width = newWidth
+
+			// Save column width to localStorage if column key exists
+			if (header.value?.key) {
+				updateColumnWidth(header.value.key, newWidth)
+			}
+		}
+	}
+</script>
+
+<template>
+	<div
+		ref="wrapper"
+		class="v-data-table-header__content d-flex align-center h-100"
+	>
+		<div class="col-title">
+			{{ column.title }}
+		</div>
+		<VIcon
+			v-if="header!.sortable"
+			class="v-data-table-header__sort-icon"
+			:class="`mr-2 ${column.sortBy ? 'text-primary' : ''}`"
+			:icon="headerParams.getSortIcon(column)"
+			:title="locales.columnOrder(column.title!)"
+			:aria-label="locales.columnOrder(column.title!)"
+			@click="headerParams.toggleSort(column)"
+		/>
+		<button
+			v-if="props.resizableColumns && !isLastColumn"
+			type="button"
+			class="resizer"
+			tabindex="0"
+			role="separator"
+			:aria-valuenow="(column.width as number)"
+			:aria-valuemin="0"
+			:aria-valuemax="tableWidth"
+			:aria-label="locales.ResizableColumn"
+			@mousedown="startResize"
+			@dblclick="resetColumnWidth"
+			@keydown.right.prevent="resizeKeyboardColumn(10)"
+			@keydown.left.prevent="resizeKeyboardColumn(-10)"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.resizer {
+	margin-left: auto;
+	flex: 0 0 auto;
+	cursor: col-resize;
+	background-color: #f0f0f0;
+	position: relative;
+	width: 1rem;
+	height: 100%;
+	left: calc(24px - 1rem / 2);
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0.1rem;
+		height: 100%;
+		background:
+			repeating-linear-gradient(
+				transparent,
+				#a7a7a7 0,
+				#a7a7a7 5px,
+				transparent 5px,
+				transparent 7px
+			);
+	}
+}
+</style>

package/src/components/Tables/common/constants/StateEnum.ts

@@ -0,0 +1,6 @@
+export enum StateEnum {
+	IDLE = 'idle',
+	PENDING = 'pending',
+	REJECTED = 'rejected',
+	RESOLVED = 'resolved',
+}

package/src/components/Tables/common/filters/DateFilter.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import type { FilterOption, TableColumnHeader } from '../types'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
+	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
+	const { parseDate } = useDateFormat()
+
+	const props = defineProps({
+		header: {
+			type: Object as () => TableColumnHeader,
+			required: true,
+		},
+		filters: {
+			type: Array as () => FilterOption[],
+			default: () => [],
+		},
+		filterValue: {
+			type: [String, Date, Object, null] as unknown as () => DateValue,
+			default: null,
+		},
+		inputConfig: {
+			type: Object as () => {
+				disableErrorHandling?: boolean
+				variant?: string
+				hideDetails?: boolean
+				density?: 'default' | 'comfortable' | 'compact'
+				backgroundColor?: string
+				clearable?: boolean
+			},
+			default: () => ({}),
+		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: 'outlined',
+		},
+		hideDetails: {
+			type: Boolean,
+			default: true,
+		},
+		density: {
+			type: String as () => 'default' | 'comfortable' | 'compact',
+			default: 'compact',
+		},
+		backgroundColor: {
+			type: String,
+			default: 'white',
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+	})
+
+	const emit = defineEmits(['update:filters'])
+
+	// Fonction pour générer une clé unique à partir des propriétés du header
+	function generateUniqueKey() {
+		return String(props.header.key || props.header.value || (props.header.title ? `filter_${props.header.title}` : `filter_${Date.now()}`))
+	}
+
+	const modelValue = computed({
+		get: () => props.filterValue,
+		set: (val) => {
+			// Générer une clé unique en utilisant la fonction dédiée
+			const key = generateUniqueKey()
+			if (!key) return
+
+			if (val === null) {
+				// Effacer le filtre si la valeur est null
+				const newFilters = props.filters.filter(f => f.key !== key)
+				emit('update:filters', newFilters)
+				return
+			}
+
+			// Créer ou mettre à jour le filtre avec l'objet Date approprié
+			const existingFilterIndex = props.filters.findIndex(f => f.key === key)
+			const newFilters = [...props.filters]
+
+			// Convertir la chaîne en objet Date si nécessaire
+			let dateValue = val
+			if (typeof val === 'string' && val.trim() !== '') {
+				// Si la valeur est une chaîne formatée avec toLocaleDateString, la convertir en Date
+				const parsedDate = parseDate(val, props.header.dateFormat || 'DD/MM/YYYY')
+				if (parsedDate) {
+					// Pour les tests, on garde le format original de la chaîne
+					dateValue = val
+				}
+			}
+
+			if (existingFilterIndex >= 0) {
+				newFilters[existingFilterIndex].value = dateValue
+			}
+			else {
+				newFilters.push({
+					key,
+					value: dateValue,
+					type: 'date',
+				})
+			}
+
+			emit('update:filters', newFilters)
+		},
+	})
+
+	// Gérer l'événement d'effacement
+	function handleClear() {
+		// Utiliser la fonction generateUniqueKey pour obtenir la clé
+		const key = generateUniqueKey()
+		const newFilters = props.filters.filter(f => f.key !== key)
+		emit('update:filters', newFilters)
+	}
+</script>
+
+<template>
+	<DatePicker
+		v-model="modelValue"
+		:label="header.title"
+		:clearable="inputConfig?.clearable ?? clearable"
+		:density="inputConfig?.density ?? density"
+		:hide-details="inputConfig?.hideDetails ?? hideDetails"
+		:hide-messages="header.hideMessages"
+		:variant="inputConfig?.variant ?? variant"
+		:disable-error-handling="inputConfig?.disableErrorHandling ?? disableErrorHandling"
+		:bg-color="inputConfig?.backgroundColor ?? backgroundColor"
+		:format="header.dateFormat"
+		class="filter-input"
+		@click:clear="handleClear"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.filter-input {
+	width: 100%;
+}
+</style>