@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/common/filters/tests/TextFilter.spec.ts

@@ -0,0 +1,260 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import TextFilter from '../TextFilter.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+import type { FilterType } from '../../types'
+import { filterItems } from '../../tableFilterUtils'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('TextFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof TextFilter>>
+	const header = { title: 'Test Column', key: 'test' }
+	const filters: { key: string, value: string, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SyTextField).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SyTextField', () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		// Use attributes for stubbed components
+		expect(syTextField.attributes('label')).toBe('Test Column')
+		expect(syTextField.attributes('clearable')).toBe('true')
+		expect(syTextField.attributes('density')).toBe('compact')
+		expect(syTextField.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when value changes', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'test value', type: 'text' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is empty', async () => {
+		// First set a value
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Then clear it
+		await syTextField.vm.$emit('update:modelValue', '')
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 'old value', type: 'text' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'new value')
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 'new value', type: 'text' as FilterType },
+		])
+	})
+
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = { title: 'Test Column' }
+		const newWrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const syTextField = newWrapper.findComponent(SyTextField)
+		syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Column')
+		expect(emittedFilters[0].value).toBe('test value')
+		expect(emittedFilters[0].type).toBe('text')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		// Mock Date.now() pour avoir une valeur prévisible dans le test
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000 // 2021-06-01T12:00:00.000Z
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		// Recréer le wrapper avec un header complètement vide
+		const emptyHeader = {}
+		const newWrapper = mount(TextFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: '',
+				debounceTime: 0, // Set debounce time to 0 for testing
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const syTextField = newWrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 'test value')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le timestamp
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0].value).toBe('test value')
+		expect(emittedFilters[0].type).toBe('text')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+
+	describe('Text filter rules', () => {
+		const testItems = [
+			{ id: 1, text: 'apple' },
+			{ id: 2, text: 'banana' },
+			{ id: 3, text: 'Cherry' },
+			{ id: 4, text: 'date' },
+			{ id: 5, text: 'Elderberry' },
+			{ id: 6, text: 'fig' },
+			{ id: 7, text: 'grape' },
+			{ id: 8, text: '' }, // Empty string
+			{ id: 9, text: null }, // Null value
+		]
+
+		it('performs case-insensitive search by default', () => {
+			const filters = [{ key: 'text', value: 'cherry', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(3)
+		})
+
+		it('supports wildcard * for any string of characters', () => {
+			const filters = [{ key: 'text', value: 'a*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result.map(item => item.id)).toEqual([1])
+		})
+
+		it('supports wildcard ? for any single character', () => {
+			const filters = [{ key: 'text', value: '????', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(6) // the word should have at least 4 characterss
+			expect(result.map(item => item.id)).toEqual([1, 2, 3, 4, 5, 7])
+		})
+
+		it('supports case-sensitive search with double quotes', () => {
+			const filters = [{ key: 'text', value: '"Cherry"', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(3)
+
+			// Should not match lowercase
+			const filters2 = [{ key: 'text', value: '"cherry"', type: 'text' as FilterType }]
+			const result2 = filterItems(testItems, filters2)
+			expect(result2).toHaveLength(0)
+		})
+
+		it('supports prefix search with wildcard', () => {
+			const filters = [{ key: 'text', value: 'e*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result[0].id).toBe(5)
+		})
+
+		it('supports exact length search equal and question marks', () => {
+			const filters = [{ key: 'text', value: '=????', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(1)
+			expect(result.map(item => item.id)).toEqual([4])
+
+			// Test with different length
+			const filters2 = [{ key: 'text', value: '=?????', type: 'text' as FilterType }]
+			const result2 = filterItems(testItems, filters2)
+			expect(result2).toHaveLength(2)
+			expect(result2.map(item => item.id)).toEqual([1, 7])
+		})
+
+		it('supports empty or null value search with not equal operator', () => {
+			const filters = [{ key: 'text', value: '<>?*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toEqual([8, 9])
+		})
+
+		it('supports alphabetical comparison with superior operator', () => {
+			const filters = [{ key: 'text', value: '>f', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(2)
+			expect(result.map(item => item.id)).toEqual([6, 7])
+		})
+
+		it('combines multiple wildcards correctly', () => {
+			const filters = [{ key: 'text', value: '*r*', type: 'text' as FilterType }]
+			const result = filterItems(testItems, filters)
+			expect(result).toHaveLength(3)
+			expect(result.map(item => item.id)).toEqual([3, 5, 7])
+		})
+	})
+})

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

@@ -0,0 +1,72 @@
+/**
+ * Fonctions utilitaires pour formater les données dans les tableaux
+ */
+
+/**
+ * Formate un objet période pour l'affichage
+ *
+ * @param value - L'objet période à formater
+ * @returns Chaîne de période formatée
+ */
+export function formatPeriod(value: unknown): string {
+	// Traite les valeurs null ou undefined
+	if (value === null || value === undefined) {
+		return ''
+	}
+
+	// Traite les objets période
+	if (typeof value === 'object' && value !== null && 'from' in value && 'to' in value) {
+		const periodValue = value as { from?: string | null, to?: string | null }
+		const from = periodValue.from || ''
+		const to = periodValue.to || ''
+
+		// Formate comme "du [date] au [date]"
+		if (from && to) {
+			return `du ${from} au ${to}`
+		}
+		// Si seule la date de début est présente
+		else if (from) {
+			return `du ${from}`
+		}
+		// Si seule la date de fin est présente
+		else if (to) {
+			return `au ${to}`
+		}
+	}
+
+	// Repli sur la représentation en chaîne de caractères
+	return String(value)
+}
+
+/**
+ * Traite les éléments du tableau pour formater les champs spéciaux comme les périodes
+ *
+ * @param items - Les éléments du tableau à traiter
+ * @returns Éléments traités avec des valeurs formatées
+ */
+export function processItems(items: Record<string, unknown>[]): Record<string, unknown>[] {
+	if (!items || !Array.isArray(items)) return []
+
+	return items.map((item) => {
+		if (!item) return item
+
+		const newItem = { ...item } as Record<string, unknown>
+
+		// Traite tous les champs de l'élément
+		Object.keys(newItem).forEach((key) => {
+			const value = newItem[key]
+
+			// Vérifie si ce champ est un objet de type période (possède les propriétés from et to)
+			if (value
+				&& typeof value === 'object'
+				&& value !== null
+				&& 'from' in value
+				&& 'to' in value) {
+				// Formate la période et la stocke à nouveau
+				newItem[key] = formatPeriod(value)
+			}
+		})
+
+		return newItem
+	})
+}

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

@@ -0,0 +1,31 @@
+export const locales = {
+	// Table locales
+	resetFilters: 'Réinitialiser les filtres',
+	noData: 'Aucune donnée disponible',
+	columnOrder: (columnTitle: string) => `Ordonner par ${columnTitle}`,
+	ResizableColumn: 'Redimensionner la colonne',
+	resizeColumn: (columnTitle: string) => `Redimensionner la colonne ${columnTitle}`,
+	selectAllRows: 'Sélectionner toutes les lignes',
+	selectRow: 'Sélectionner la ligne',
+
+	// Pagination locales
+	pagination: {
+		itemsPerPageText: 'Lignes par page:',
+		previous: 'Précédent',
+		next: 'Suivant',
+		all: 'Tous',
+		showingItems: (start: number, end: number, total: number) => `${start}-${end} sur ${total} éléments`,
+		pageText: (page: number) => `${page}`,
+		pageAriaLabel: (page: number) => `Page ${page}`,
+		currentPageAriaLabel: (page: number) => `Page courante, Page ${page}`,
+		paginationNavAriaLabel: 'Navigation de pagination',
+	},
+	reorganizeColumns: 'Gestion des colonnes',
+	close: 'Fermer',
+	apply: 'Appliquer',
+	reorganizeColumnsTitle: 'Gestion des colonnes',
+	hideColumn: (columnTitle: string) => `Masquer la colonne ${columnTitle}`,
+	showColumn: (columnTitle: string) => `Afficher la colonne ${columnTitle}`,
+	moveColumnLeft: (columnTitle: string) => `Déplacer la colonne ${columnTitle} vers la gauche`,
+	moveColumnRight: (columnTitle: string) => `Déplacer la colonne ${columnTitle} vers la droite`,
+}

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)
+	})
+}