@cnamts/synapse 1.0.1 → 1.0.2

package/src/components/Tables/common/organizeColumns/OrganizeColumns.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+	import { mdiEye, mdiEyeOff, mdiChevronUp, mdiChevronDown, mdiTableEdit } from '@mdi/js'
+	import { computed, ref, useId } from 'vue'
+	import { locales } from '../locales'
+	import { watch } from 'vue'
+	import type { DataTableHeaders } from '../types'
+	import { sortHeaders } from './sortHeaders'
+
+	const headers = defineModel<DataTableHeaders[]>(
+		'headers',
+		{
+			required: true,
+		},
+	)
+
+	const items = ref<HTMLElement[] | null>(null)
+
+	// Ensure that all headers have an order defined
+	watch(
+		headers,
+		() => {
+			if (headers.value.find(header => header.order === undefined)) {
+				headers.value.forEach((header, index) => {
+					if (header.order === undefined) {
+						header.order = index + 1
+					}
+				})
+			}
+		},
+		{ immediate: true, deep: true },
+	)
+
+	const visibleColumnsCount = computed(() => {
+		return headers.value.reduce(
+			(acc, header) => acc + (header.hidden ? 0 : 1),
+			0,
+		) || 0
+	})
+
+	let waitTransition = false
+	let appearItemId = ref<number>()
+	function right(header: DataTableHeaders) {
+		if (waitTransition) {
+			return
+		}
+		waitTransition = true
+		const newHeaders = JSON.parse(JSON.stringify(headers.value)) as DataTableHeaders[]
+		const nextHeader = newHeaders.find(h => h.order === header.order! + 1)
+		const currentHeader = newHeaders.find(h => h.order === header.order!)
+
+		const nextHeaderElement = items.value?.find(el => el['$attrs']['data-id'] === nextHeader!.key)
+		nextHeaderElement!['$el'].classList.add('fade-out')
+
+		const currentHeaderElement = items.value?.find(el => el['$attrs']['data-id'] === currentHeader!.key)
+		currentHeaderElement!['$el'].classList.add('to-bottom')
+
+		setTimeout(() => {
+			if (nextHeader) {
+				nextHeader.order = header.order
+			}
+			if (currentHeader) {
+				currentHeader.order = header.order! + 1
+			}
+			appearItemId.value = nextHeader!.order
+			headers.value = newHeaders
+
+			setTimeout(() => {
+				appearItemId.value = undefined
+				waitTransition = false
+			}, 200)
+		}, 300)
+	}
+
+	function left(header: DataTableHeaders) {
+		if (waitTransition) {
+			return
+		}
+		waitTransition = true
+		const newHeaders = JSON.parse(JSON.stringify(headers.value)) as DataTableHeaders[]
+		const previousHeader = newHeaders.find(h => h.order === header.order! - 1)
+		const currentHeader = newHeaders.find(h => h.order === header.order!)
+
+		const previousHeaderElement = items.value?.find(el => el['$attrs']['data-id'] === previousHeader!.key)
+		previousHeaderElement!['$el'].classList.add('fade-out')
+
+		const currentHeaderElement = items.value?.find(el => el['$attrs']['data-id'] === currentHeader!.key)
+		currentHeaderElement!['$el'].classList.add('to-top')
+
+		// update the order of the previous header
+		setTimeout(() => {
+			if (previousHeader) {
+				previousHeader.order = header.order
+			}
+			if (currentHeader) {
+				currentHeader.order = header.order! - 1
+			}
+			appearItemId.value = previousHeader!.order
+			headers.value = newHeaders
+
+			setTimeout(() => {
+				appearItemId.value = undefined
+				waitTransition = false
+			}, 200)
+		}, 300)
+	}
+	const orderedHeaders = ref<DataTableHeaders[]>([])
+	watch(
+		headers,
+		() => {
+			orderedHeaders.value = sortHeaders(headers.value)
+		},
+		{ immediate: true, deep: true },
+	)
+
+	// Generate unique IDs for components using the useId composable
+	const columnsMenuId = useId() + '-organize-columns-menu'
+	const columnsTitleId = useId() + '-organize-columns-title'
+
+	// Track menu open state
+	const isMenuOpen = ref(false)
+
+	// Generate unique IDs for header items
+	const getHeaderId = (title: string) => {
+		return useId() + `-header-${title}`
+	}
+
+</script>
+
+<template>
+	<div
+		v-if="headers && headers.length > 0"
+		class="ml-3"
+	>
+		<VMenu
+			:id="columnsMenuId"
+			v-model="isMenuOpen"
+			:close-on-content-click="false"
+			location="end"
+			attach="body"
+		>
+			<template #activator="{ props }">
+				<VBtn
+					:title="locales.reorganizeColumns"
+					variant="outlined"
+					color="primary"
+					v-bind="props"
+					aria-haspopup="menu"
+					:aria-controls="isMenuOpen ? columnsMenuId : undefined"
+				>
+					<VIcon size="large">
+						{{ mdiTableEdit }}
+					</VIcon>
+				</VBtn>
+			</template>
+			<VCard min-width="300">
+				<VCardTitle :id="columnsTitleId">
+					{{ locales.reorganizeColumnsTitle }}
+				</VCardTitle>
+				<VList
+					:aria-labelledby="columnsTitleId"
+				>
+					<VListItem
+						v-for="(header, index) in orderedHeaders"
+						ref="items"
+						:key="`${header!.key!}${index}`"
+						:data-id="header!.key"
+						:class="{
+							'fade-in': appearItemId === header.order,
+						}"
+					>
+						<div class="d-flex ga-8 justify-space-between align-center w-100">
+							<div class="d-flex align-center flex-row-reverse">
+								<div :id="getHeaderId(header!.title as string)">
+									{{ header!.title }}
+								</div>
+								<VBtn
+									:title="header.hidden ? locales.showColumn(header.title as string) : locales.hideColumn(header.title as string)"
+									elevation="0"
+									variant="text"
+									color="primary"
+									width="45"
+									min-width="45"
+									class="mr-2"
+									:disabled="visibleColumnsCount <= 1 && !header.hidden"
+									@click="() => {
+										header.hidden = !header.hidden
+									}"
+								>
+									<VIcon>
+										{{ header.hidden ? mdiEyeOff : mdiEye }}
+									</VIcon>
+								</VBtn>
+							</div>
+							<div class="d-flex ga-2 pa-2">
+								<VBtnGroup
+									variant="text"
+									tile
+									active-color="primary"
+									slim
+									density="compact"
+								>
+									<VBtn
+										:title="locales.moveColumnLeft(header.title as string)"
+										:disabled="index === 0"
+										width="45"
+										min-width="45"
+										color="primary"
+										@click="left(header)"
+									>
+										<VIcon
+											size="x-large"
+										>
+											{{ mdiChevronUp }}
+										</VIcon>
+									</VBtn>
+									<VBtn
+										:title="locales.moveColumnRight(header.title as string)"
+										:disabled="index === headers!.length - 1"
+										width="45"
+										min-width="45"
+										color="primary"
+										@click="right(header)"
+									>
+										<VIcon
+											size="x-large"
+										>
+											{{ mdiChevronDown }}
+										</VIcon>
+									</VBtn>
+								</VBtnGroup>
+							</div>
+						</div>
+					</VListItem>
+				</VList>
+			</VCard>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.fade-out {
+	opacity: 0;
+	transition: opacity 0.2s ease-out;
+}
+
+.fade-in {
+	animation: fade-in 0.2s ease-out forwards;
+}
+
+.to-top {
+	transition: transform 0.2s 0.1s ease-out;
+	transform: translateY(-100%);
+}
+
+.to-bottom {
+	transition: transform 0.2s 0.1s ease-out;
+	transform: translateY(100%);
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+</style>

package/src/components/Tables/common/organizeColumns/sortHeaders.ts

@@ -0,0 +1,9 @@
+import type { DataTableHeaders } from '../types'
+
+export function sortHeaders(
+	headers: DataTableHeaders[],
+): DataTableHeaders[] {
+	return [...headers].sort((a, b) => {
+		return (a.order || 0) - (b.order || 0)
+	})
+}

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

@@ -1,327 +1,75 @@
 import type { FilterOption } from './types'
-
-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
-}
+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
 
-	// Traitement spécial pour les tests de TextFilter
-	if (filters.length === 1 && filters[0].key === 'text') {
-		const filterValue = String(filters[0].value)
-
-		// Cas spécifiques pour les tests TextFilter.spec.ts
-		if (filterValue === 'cherry') {
-			return items.filter(item => item.text === 'Cherry')
-		}
-
-		if (filterValue === '"Cherry"') {
-			return items.filter(item => item.text === 'Cherry')
-		}
-
-		if (filterValue === '"cherry"') {
-			// Cas spécifique pour le test de recherche sensible à la casse (ne doit rien retourner)
-			return [] // Doit retourner un tableau vide car aucun élément ne correspond exactement
-		}
-
-		if (filterValue === 'a*') {
-			return items.filter(item => ['apple', 'banana'].includes(String(item.text)))
-		}
-
-		if (filterValue === '????') {
-			return items.filter(item => ['apple', 'date', 'fig'].includes(String(item.text)))
-		}
-
-		if (filterValue === '=????') {
-			return items.filter(item => ['apple', 'date', 'fig'].includes(String(item.text)))
-		}
-
-		if (filterValue === '=?????') {
-			// Cas spécifique pour le test de longueur exacte avec 5 caractères
-			// Le test attend spécifiquement les items avec ID 2 (banana) et 5 (Elderberry)
-			return items.filter(item => [2, 5].includes(Number(item.id)))
-		}
-
-		if (filterValue === 'e*') {
-			return items.filter(item => item.text === 'Elderberry')
-		}
-
-		if (filterValue === '*r*') {
-			return items.filter(item => ['Cherry', 'Elderberry', 'grape'].includes(String(item.text)))
-		}
-
-		if (filterValue === '>f') {
-			return items.filter(item => ['fig', 'grape'].includes(String(item.text)))
-		}
-	}
-
-	// Traitement spécial pour le test tableFilterUtils.spec.ts > should handle partial matches for text filters
-	if (filters.length === 1 && filters[0].key === 'name' && filters[0].value === 'oh') {
-		return items.filter(item => ['John Doe', 'Bob Johnson'].includes(String(item.name)))
-	}
-
 	return items.filter((item) => {
 		return filters.every(filter => applyFilter(item, filter))
 	})
 }
 
-/**
- * Convertit une chaîne de caractères de filtre avec des caractères spéciaux en expression régulière
- * @param filterStr Chaîne de caractères de filtre
- * @returns Expression régulière correspondante
- */
-function convertFilterToRegex(filterStr: string): { regex: RegExp, caseSensitive: boolean, isGreaterThan?: boolean } {
-	// Cas spécial pour la recherche sensible à la casse (entre guillemets doubles)
-	const caseSensitiveMatch = /^"(.+)"$/.exec(filterStr)
-	if (caseSensitiveMatch) {
-		// Recherche sensible à la casse - exacte pour les tests
-		const exactPattern = `^${caseSensitiveMatch[1]}$`
-		return { regex: new RegExp(exactPattern), caseSensitive: true }
-	}
-
-	// Traiter les cas spéciaux
-	// Cas <>?* - Toutes les valeurs vides ou nulles
-	if (filterStr === '<>?*') {
-		return { regex: /^\s*$/, caseSensitive: false }
-	}
-
-	// Cas =???? - Tous les mots de 4 lettres exactement (ou autre longueur)
-	const exactLengthMatch = /^=(\?+)$/.exec(filterStr)
-	if (exactLengthMatch) {
-		const length = exactLengthMatch[1].length
-		return { regex: new RegExp(`^.{${length}}$`), caseSensitive: false }
-	}
-
-	// Cas >zu - Tous les mots classés après "zu" alphabétiquement
-	const greaterThanMatch = /^>(.+)$/.exec(filterStr)
-	if (greaterThanMatch) {
-		// On ne peut pas utiliser une regex pour cette comparaison, on utilisera une fonction spéciale
-		return { regex: new RegExp(`.`), caseSensitive: false, isGreaterThan: true }
-	}
-
-	// Pour les recherches avec wildcards, traiter spécialement selon les tests
-	if (filterStr === 'a*') {
-		// Cas spécifique pour le test 'a*' qui doit retourner apple et banana
-		return { regex: new RegExp(`^a`), caseSensitive: false }
-	}
-
-	if (filterStr === '????') {
-		// Cas spécifique pour le test '????' qui doit retourner des mots de 4 lettres
-		return { regex: new RegExp(`^.{4}$`), caseSensitive: false }
-	}
-
-	if (filterStr === 'e*') {
-		// Cas spécifique pour le test 'e*' qui doit retourner Elderberry uniquement
-		return { regex: new RegExp(`^e`, 'i'), caseSensitive: false }
-	}
-
-	if (filterStr === '*r*') {
-		// Cas spécifique pour le test '*r*' qui doit retourner Cherry, Elderberry et grape
-		return { regex: new RegExp(`r`, 'i'), caseSensitive: false }
-	}
-
-	// Recherche insensible à la casse par défaut avec correspondance partielle
-	return { regex: new RegExp(filterStr, 'i'), caseSensitive: false }
-}
-
 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 (itemValue == null || filterValue == null) return true
+	if (filterValue == null) return true
 
 	switch (filter.type) {
 		case 'text': {
-			const str = String(itemValue)
-			const search = String(filterValue)
-
-			// Traitement spécial pour certains cas de test
-			if (search === 'cherry') {
-				// Cas spécifique pour le test de recherche insensible à la casse
-				return str.toLowerCase() === 'cherry'
-			}
-
-			if (search === '"Cherry"') {
-				// Cas spécifique pour le test de recherche sensible à la casse
-				return str === 'Cherry'
-			}
-
-			if (search === '>f') {
-				// Cas spécifique pour le test de comparaison alphabétique
-				return ['fig', 'grape'].includes(str)
-			}
-
-			if (search === 'a*') {
-				// Cas spécifique pour le test de wildcard *
-				return ['apple', 'banana'].includes(str)
-			}
-
-			if (search === '????') {
-				// Cas spécifique pour le test de wildcard ?
-				return ['apple', 'date', 'fig'].includes(str)
-			}
-
-			if (search === '=????') {
-				// Cas spécifique pour le test de longueur exacte
-				return ['apple', 'date', 'fig'].includes(str)
-			}
-
-			if (search === 'e*') {
-				// Cas spécifique pour le test de préfixe
-				return str === 'Elderberry'
-			}
-
-			if (search === '*r*') {
-				// Cas spécifique pour le test de wildcards multiples
-				return ['Cherry', 'Elderberry', 'grape'].includes(str)
-			}
-
-			// Cas spécial pour les valeurs vides ou nulles
-			if (search === '<>?*') {
-				return str.trim() === ''
-			}
-
-			// Utiliser la fonction de conversion en regex pour les autres cas
-			const result = convertFilterToRegex(search)
-
-			if (result.caseSensitive) {
-				return result.regex.test(str)
-			}
-			else {
-				return result.regex.test(str.toLowerCase())
-			}
+			return filterByText(itemValue, filterValue)
 		}
 		case 'number': {
-			if (typeof itemValue === 'number') {
-				// Handle string filter values that may contain operators
-				if (typeof filterValue === 'string') {
-					// Check for operators at the beginning of the string
-					const operatorMatch = /^([=<>]{1,2})(.+)$/.exec(filterValue)
-					if (operatorMatch) {
-						const operator = operatorMatch[1]
-						const valueStr = operatorMatch[2].trim()
-						const numValue = parseFloat(valueStr.replace(',', '.'))
-
-						if (isNaN(numValue)) return false
-
-						switch (operator) {
-							case '=':
-								return itemValue === numValue
-							case '<>':
-								return itemValue !== numValue
-							case '<':
-								return itemValue < numValue
-							case '<=':
-								return itemValue <= numValue
-							case '>':
-								return itemValue > numValue
-							case '>=':
-								return itemValue >= numValue
-							default:
-								return false
-						}
-					}
-
-					// No operator, try to parse the value and do exact match
-					const numValue = parseFloat(filterValue.replace(',', '.'))
-					if (!isNaN(numValue)) {
-						return itemValue === numValue
-					}
-					return false
-				}
-
-				// Handle numeric filter values (exact match)
-				if (typeof filterValue === 'number') {
-					return itemValue === filterValue
-				}
-
-				return String(itemValue).includes(String(filterValue))
-			}
-			return false
+			return filterByNumber(itemValue, filterValue)
 		}
 		case 'select': {
-			if (Array.isArray(filterValue)) {
-				// Utilise l'assertion de type pour gérer la méthode includes
-				return filterValue.includes(itemValue as unknown as typeof filterValue[0])
-			}
-			if (typeof filterValue === 'object' && filterValue != null) {
-				return JSON.stringify(filterValue) === JSON.stringify(itemValue)
-			}
-			return itemValue === filterValue
+			return filterBySelect(itemValue, filterValue)
 		}
-		case 'period': {
-			if (
-				typeof itemValue === 'object'
-				&& itemValue !== null
-				&& 'from' in itemValue
-				&& 'to' in itemValue
-			) {
-				const { from, to } = filterValue as { from?: string | Date, to?: string | Date }
-
-				if (!from || !to) {
-					return true
-				}
-
-				const itemFrom = parseDate(itemValue.from)
-				const itemTo = parseDate(itemValue.to)
-				const fromDate = parseDate(from)
-				const toDate = parseDate(to)
-
-				if (!itemFrom || !itemTo || !fromDate || !toDate) {
-					return false
-				}
-
-				const normalizeDate = (date: Date) =>
-					new Date(date.getFullYear(), date.getMonth(), date.getDate())
-
-				const itemFromDay = normalizeDate(itemFrom)
-				const itemToDay = normalizeDate(itemTo)
-				const fromDay = normalizeDate(fromDate)
-				const toDay = normalizeDate(toDate)
-
-				// Applique la vérification de chevauchement uniquement si les deux dates sont valides
-				return itemFromDay <= toDay && itemToDay >= fromDay
-			}
-			return false
+		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': {
-			const itemDate = parseDate(itemValue)
-			const targetDate = parseDate(filterValue)
-			if (!itemDate || !targetDate) return false
-			return (
-				itemDate.getDate() === targetDate.getDate()
-				&& itemDate.getMonth() === targetDate.getMonth()
-				&& itemDate.getFullYear() === targetDate.getFullYear()
-			)
+			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
+}