@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+	import { ref, watch, provide, computed } from 'vue'
+	import type { FilterOption, TableColumnHeader } from './types'
+	import { filterItems } from './tableFilterUtils'
+	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+	import getFilterComponent from './filters/getFilterComponent'
+
+	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/SyTablePagination.vue

@@ -0,0 +1,375 @@
+<script setup lang="ts">
+	import { computed, ref, nextTick, watch, onMounted } from 'vue'
+	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import { locales } from './locales'
+
+	// Generate unique ID for this pagination instance
+	const uniqueId = ref(`pagination-${Math.random().toString(36).substr(2, 9)}`)
+
+	// Reference to the SySelect component
+	const selectRef = ref<InstanceType<typeof SySelect> | null>(null)
+
+	// Items per page options - standard options and current value
+	const itemsPerPageOptions = computed(() => {
+		const standardOptions = [5, 10, 25, 50, 100]
+
+		// Add the current itemsPerPage if it's not already in the standard options
+		// and it's not -1 (which represents "Tous")
+		if (!standardOptions.includes(props.itemsPerPage) && props.itemsPerPage !== -1) {
+			standardOptions.push(props.itemsPerPage)
+			// Sort the options numerically
+			standardOptions.sort((a, b) => a - b)
+		}
+
+		// Map to the format expected by SySelect
+		const options = standardOptions.map(value => ({
+			text: value.toString(),
+			value,
+		}))
+
+		// Add "Tous" option to display all elements
+		options.push({
+			text: locales.pagination.all,
+			value: -1,
+		})
+
+		return options
+	})
+
+	const props = defineProps<{
+		page: number
+		pageCount: number
+		itemsPerPage: number
+		itemsLength: number
+	}>()
+
+	const emit = defineEmits<{
+		/**
+		 * Emitted when the page changes
+		 */
+		(e: 'update:page', page: number): void
+		/**
+		 * Emitted when the items per page changes
+		 */
+		(e: 'update:items-per-page', itemsPerPage: number): void
+	}>()
+
+	/**
+	 * Visible page numbers to display
+	 * Shows current page, previous and next 2 pages when available
+	 */
+	const visiblePageNumbers = computed(() => {
+		const pages: (number | string)[] = []
+		const currentPage = props.page
+		const totalPages = props.pageCount
+
+		// Always show first page
+		pages.push(1)
+
+		// Add ellipsis if needed
+		if (currentPage > 4) {
+			pages.push('ellipsis-start')
+		}
+
+		// Show pages around current page
+		for (let i = Math.max(2, currentPage - 2); i <= Math.min(totalPages - 1, currentPage + 2); i++) {
+			pages.push(i)
+		}
+
+		// Add ellipsis if needed
+		if (currentPage < totalPages - 3) {
+			pages.push('ellipsis-end')
+		}
+
+		// Always show last page if more than 1 page
+		if (totalPages > 1) {
+			pages.push(totalPages)
+		}
+
+		return pages
+	})
+
+	/**
+	 * Extract only the numeric middle pages from visiblePageNumbers
+	 */
+	const middlePages = computed(() => {
+		return visiblePageNumbers.value.filter(
+			page => typeof page === 'number' && page !== 1 && page !== props.pageCount,
+		) as number[]
+	})
+
+	/**
+	 * Navigate to previous page
+	 */
+	function previousPage() {
+		if (props.page > 1) {
+			emit('update:page', props.page - 1)
+		}
+	}
+
+	/**
+	 * Navigate to next page
+	 */
+	function nextPage() {
+		if (props.page < props.pageCount) {
+			emit('update:page', props.page + 1)
+		}
+	}
+
+	/**
+	 * Navigate to a specific page
+	 */
+	function goToPage(pageNumber: number) {
+		emit('update:page', pageNumber)
+	}
+
+	/**
+	 * Local items per page with two-way binding
+	 */
+	// Use a ref instead of a computed property for better compatibility with v-model
+	const localItemsPerPage = ref(props.itemsPerPage)
+
+	// Watch for changes from parent
+	watch(() => props.itemsPerPage, (newValue) => {
+		localItemsPerPage.value = newValue
+	})
+
+	// Watch for local changes and emit events
+	watch(localItemsPerPage, (newValue) => {
+		// First reset to page 1 when changing items per page
+		emit('update:page', 1)
+		// Then update the items per page
+		emit('update:items-per-page', newValue)
+
+		// Force a re-render of the component
+		nextTick(() => {
+			// This will trigger a re-render of the parent components
+			emit('update:items-per-page', newValue)
+		})
+	})
+
+	// Remove aria-describedby attribute after component is mounted
+	onMounted(() => {
+		// Use nextTick to ensure the DOM is fully rendered
+		nextTick(() => {
+			if (selectRef.value && selectRef.value.$el) {
+				// Find the input element
+				const inputElement = selectRef.value.$el.querySelector('input')
+				if (inputElement) {
+					// Remove the aria-describedby attribute
+					inputElement.removeAttribute('aria-describedby')
+				}
+			}
+		})
+	})
+</script>
+
+<template>
+	<div class="sy-table-pagination">
+		<div class="info">
+			{{ itemsPerPage === -1
+				? locales.pagination.showingItems(1, itemsLength, itemsLength)
+				: locales.pagination.showingItems((page - 1) * itemsPerPage + 1, Math.min(page * itemsPerPage, itemsLength), itemsLength)
+			}}
+		</div>
+
+		<nav
+			v-if="pageCount > 1"
+			class="pagination"
+			:aria-labelledby="uniqueId"
+		>
+			<h2
+				:id="uniqueId"
+				class="d-sr-only"
+			>
+				{{ locales.pagination.paginationNavAriaLabel }}
+			</h2>
+			<ul class="list">
+				<!-- Previous link -->
+				<li>
+					<a
+						href="#"
+						:class="{ 'disabled': page <= 1 }"
+						@click.prevent="previousPage"
+					>{{ locales.pagination.previous }}</a>
+				</li>
+
+				<!-- First page -->
+				<li>
+					<a
+						href="#"
+						class="list-first"
+						:aria-current="page === 1 ? 'page' : undefined"
+						@click.prevent="goToPage(1)"
+					>{{ locales.pagination.pageText(1) }}</a>
+				</li>
+
+				<!-- Start ellipsis if needed -->
+				<li v-if="visiblePageNumbers.includes('ellipsis-start')">
+					<a class="ellipsis">&#8230;</a>
+				</li>
+
+				<!-- Middle pages (6, 7, 8, 9, 10) -->
+				<li
+					v-for="pageNum in middlePages"
+					:key="pageNum"
+				>
+					<a
+						href="#"
+						:aria-current="page === pageNum ? 'page' : undefined"
+						@click.prevent="goToPage(pageNum)"
+					>{{ locales.pagination.pageText(pageNum) }}</a>
+				</li>
+
+				<!-- End ellipsis if needed -->
+				<li v-if="visiblePageNumbers.includes('ellipsis-end')">
+					<a class="ellipsis">&#8230;</a>
+				</li>
+
+				<!-- Last page (if not already shown) -->
+				<li v-if="pageCount > 1">
+					<a
+						href="#"
+						class="list-last"
+						:aria-current="page === pageCount ? 'page' : undefined"
+						@click.prevent="goToPage(pageCount)"
+					>{{ locales.pagination.pageText(pageCount) }}</a>
+				</li>
+
+				<!-- Next link -->
+				<li>
+					<a
+						href="#"
+						:class="{ 'disabled': page >= pageCount }"
+						@click.prevent="nextPage"
+					>{{ locales.pagination.next }}</a>
+				</li>
+			</ul>
+		</nav>
+
+		<div class="rows-per-page">
+			<span class="rows-per-page-label">{{ locales.pagination.itemsPerPageText }}</span>
+			<SySelect
+				ref="selectRef"
+				v-model="localItemsPerPage"
+				:items="itemsPerPageOptions"
+				hide-details
+				hide-messages
+				density="compact"
+				class="rows-per-page-select"
+				:aria-label="locales.pagination.itemsPerPageText"
+				:label="''"
+				style="width: 80px;"
+				:clearable="false"
+			/>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.sy-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 12px 16px;
+	flex-wrap: wrap;
+	gap: 1rem;
+
+	.info {
+		font-size: 0.875rem;
+		color: rgb(0 0 0 / 60%);
+	}
+
+	.rows-per-page {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		&-label {
+			font-size: 0.875rem;
+			color: rgb(0 0 0 / 60%);
+		}
+
+		&-select {
+			:deep(.v-field__field) {
+				min-height: 32px !important;
+			}
+
+			:deep(.v-field__input) {
+				min-height: 32px !important;
+				padding-top: 0 !important;
+				padding-bottom: 0 !important;
+			}
+
+			:deep(.v-field__append-inner) {
+				padding-top: 4px !important;
+			}
+		}
+	}
+
+	.pagination {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		align-items: center;
+
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			list-style: none;
+			padding: 0;
+			margin: 0;
+
+			li {
+				display: inline-block;
+			}
+
+			a {
+				display: inline-block;
+				padding: 0.5rem 0.75rem;
+				text-decoration: none;
+				color: tokens.$primary-base;
+				border: 1px solid tokens.$primary-base;
+				border-radius: 4px;
+				transition: all 0.2s ease;
+				font-size: 0.875rem;
+				line-height: 1;
+
+				&:hover,
+				&:focus {
+					background-color: rgba(tokens.$primary-base, 0.1);
+				}
+
+				&[aria-current='page'] {
+					background-color: tokens.$primary-base;
+					color: white;
+					font-weight: 500;
+				}
+
+				&.disabled {
+					color: rgb(0 0 0 / 60%); /* Increased from 40% to 60% for better contrast */
+					border-color: rgb(0 0 0 / 20%);
+					pointer-events: none;
+				}
+
+				&.ellipsis {
+					border: none;
+					pointer-events: none;
+				}
+			}
+
+			li:first-child a,
+			li:last-child a {
+				background-color: transparent;
+				border: none;
+				padding-left: 0.25rem;
+				padding-right: 0.25rem;
+			}
+		}
+	}
+}
+</style>