@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/common/filters/logics/period.ts

@@ -0,0 +1,25 @@
+import { parseDate } from '../../tableFilterUtils'
+
+export default function filter(itemValue: unknown, filterValue: unknown): boolean {
+	const itemDate = parseDate(itemValue)
+	if (
+		typeof filterValue !== 'object'
+		|| filterValue === null
+		|| 'from' in filterValue === false
+		|| 'to' in filterValue === false
+	) throw new Error('Invalid filter value for period type')
+
+	const min = parseDate(filterValue.from)
+	const max = parseDate(filterValue.to)
+
+	if (itemDate) {
+		if (min && itemDate < min) {
+			return false
+		}
+		if (max && itemDate > max) {
+			return false
+		}
+	}
+
+	return true
+}

package/src/components/Tables/common/filters/logics/select.ts

@@ -0,0 +1,27 @@
+export default function filter(itemValue: unknown, filterValue: unknown): boolean {
+	// Handle multiple selection (filterValue is array)
+	if (Array.isArray(filterValue)) {
+		// If itemValue is also an array (e.g., item.skills = ['JavaScript', 'Vue'])
+		if (Array.isArray(itemValue)) {
+			// Check if any value in filterValue matches any value in itemValue
+			return filterValue.some(fv =>
+				itemValue.some(iv =>
+					// Handle both primitive values and objects
+					typeof fv === 'object' && fv !== null && typeof iv === 'object' && iv !== null
+						? JSON.stringify(fv) === JSON.stringify(iv)
+						: fv === iv,
+				),
+			)
+		}
+		else {
+			// If itemValue is a single value, check if it's included in filterValue
+			return filterValue.includes(itemValue as unknown as typeof filterValue[0])
+		}
+	}
+	// Handle object comparison
+	if (typeof filterValue === 'object' && filterValue !== null) {
+		return JSON.stringify(filterValue) === JSON.stringify(itemValue)
+	}
+	// Handle single value comparison
+	return itemValue === filterValue
+}

package/src/components/Tables/common/filters/logics/tests/TextFilterLogic.spec.ts

@@ -0,0 +1,177 @@
+import { it, expect, describe } from 'vitest'
+import filter from '../text'
+
+describe('Text filter logic', () => {
+	it('should return true for empty string and empty filter', () => {
+		expect(filter('', '')).toBe(true)
+	})
+
+	it('should return true for null item value and empty filter', () => {
+		expect(filter(null, '')).toBe(true)
+	})
+
+	it('should return false for null item value and non-empty filter', () => {
+		expect(filter(null, 'test')).toBe(false)
+	})
+
+	it('should return true for exact match', () => {
+		expect(filter('test', 'test')).toBe(true)
+	})
+
+	it('should return false for non-matching strings', () => {
+		expect(filter('test', 'example')).toBe(false)
+	})
+
+	it('should perform case-insensitive search by default', () => {
+		expect(filter('Test', 'test')).toBe(true)
+	})
+
+	it('should handle special characters in filter', () => {
+		expect(filter('hello world!', 'world')).toBe(true)
+		expect(filter('hello world!', 'WORLD')).toBe(true)
+	})
+
+	it('should handle empty filter string', () => {
+		expect(filter('any text', '')).toBe(true)
+	})
+
+	it('should not take accents into account', () => {
+		expect(filter('café', 'cafe')).toBe(true)
+		expect(filter('café', 'Café')).toBe(true)
+		expect(filter('café', 'CAFE')).toBe(true)
+		expect(filter('éèêëùûüîïñ', 'eeeuuuiin')).toBe(true)
+		expect(filter('éèêëùûüîïñ', 'ÉÈÊËÙÛÜÎÏÑ')).toBe(true)
+	})
+
+	it('return true for a sequence found in the middle of a string or a word', () => {
+		expect(filter('hello world', 'lo wo')).toBe(true)
+		expect(filter('hello world', 'lo W')).toBe(true)
+		expect(filter('hello world', 'loW')).toBe(false)
+	})
+
+	it('handles guillemets to case-sensitive search', () => {
+		expect(filter('Hello World', '"Hello"')).toBe(true)
+		expect(filter('Hello World', '"hello"')).toBe(false)
+		expect(filter('Hello World', '"WORLD"')).toBe(false)
+		expect(filter('Hello World', '"world"')).toBe(false)
+	})
+
+	it('handles guillemets to accents sensitive search', () => {
+		expect(filter('café', '"cafe"')).toBe(false)
+		expect(filter('éèêëùûüîïñ', '"éèêëùûüîïñ"')).toBe(true)
+		expect(filter('éèêëùûüîïñ', '"eeeuuuiin"')).toBe(false)
+		expect(filter('éèêëùûüîïñ', '"ÉÈÊËÙÛÜÎÏÑ"')).toBe(false)
+	})
+
+	it('perform a scrict comparaison when the search string begin by a =', () => {
+		expect(filter('lorem ipsum', '=lorem ipsum')).toBe(true)
+		expect(filter('lorem ipsum', '=lorem Ipsum')).toBe(false)
+		expect(filter('lorem ipsum', '=lorem ipsum ')).toBe(false)
+		expect(filter('lorem ipsum', '=ipsum')).toBe(false)
+		expect(filter('lorem ipsum', '=lorem')).toBe(false)
+	})
+
+	it('permorm a non equal comparaison when the search string begin by <>', () => {
+		expect(filter('lorem ipsum', '<>lorem ipsum')).toBe(false)
+		expect(filter('lorem ipsum', '<>lorem Ipsum')).toBe(true)
+	})
+
+	it('accepts the wildcard ? in the search string', () => {
+		expect(filter('lorem ipsum', 'lorem ?psum')).toBe(true)
+		expect(filter('lorem ipsum', 'lorem ?psu?')).toBe(true)
+		expect(filter('lorem ipsum', '???????????')).toBe(true)
+		expect(filter('lorem ipsum', 'lorem ?psu?m')).toBe(false)
+	})
+
+	it('accepts the wildcard * in the search string', () => {
+		expect(filter('lorem ipsum', 'lorem *um')).toBe(true)
+		expect(filter('lorem ipsum', 'lorem*psu*')).toBe(true)
+		expect(filter('lorem ipsum', '*ipsum')).toBe(true)
+		expect(filter('lorem ipsum', 'lorem*')).toBe(true)
+	})
+
+	it('accepts the mixed use of the secials caracters in the search string', () => {
+		expect(filter('lorem ipsum', '=l?rem ip*')).toBe(true)
+		expect(filter('lorem ipsum', '=l?rEm ip*')).toBe(false)
+		expect(filter('lorem ipsum', '<>l?rem ip*')).toBe(false)
+		expect(filter('lorem ipsum', '<>l?rem ipsul')).toBe(true)
+		expect(filter('lorem ipsum', '"lorem*psum"')).toBe(true)
+		expect(filter('lorem ipsum', '"lorém*psum"')).toBe(false)
+	})
+
+	it('returns true when a next letter is found and the superior than operator is used', () => {
+		expect(filter('b', '>a')).toBe(true)
+		expect(filter('b', '>b')).toBe(false)
+		expect(filter('b', '>c')).toBe(false)
+		expect(filter('café', '>b')).toBe(true)
+		expect(filter('café', '>c')).toBe(true)
+		expect(filter('café', '>cd')).toBe(false)
+		expect(filter('café', '>d')).toBe(false)
+	})
+
+	it('returns true when a next letter is found and the inferior than operator is used', () => {
+		expect(filter('b', '<c')).toBe(true)
+		expect(filter('b', '<b')).toBe(false)
+		expect(filter('b', '<a')).toBe(false)
+		expect(filter('café', '<d')).toBe(true)
+		expect(filter('café', '<c')).toBe(false)
+		expect(filter('café', '<ca')).toBe(false)
+		expect(filter('café', '<e')).toBe(true)
+	})
+
+	it('returns true when a next letter is found and the superior or equal than operator is used', () => {
+		expect(filter('b', '>=a')).toBe(true)
+		expect(filter('b', '>=b')).toBe(true)
+		expect(filter('b', '>=c')).toBe(false)
+		expect(filter('café', '>=b')).toBe(true)
+		expect(filter('café', '>=c')).toBe(true)
+		expect(filter('café', '>=cd')).toBe(false)
+		expect(filter('café', '>=d')).toBe(false)
+	})
+
+	it('returns true when a next letter is found and the inferior or equal than operator is used', () => {
+		expect(filter('b', '<=c')).toBe(true)
+		expect(filter('b', '<=b')).toBe(true)
+		expect(filter('b', '<=a')).toBe(false)
+		expect(filter('café', '<=d')).toBe(true)
+		expect(filter('café', '<=c')).toBe(false)
+		expect(filter('café', '<=ca')).toBe(false)
+		expect(filter('café', '<=e')).toBe(true)
+	})
+
+	describe('specs specifics tests', () => {
+		it('matches all words starting with "p" regardless of case', () => {
+			expect(filter('pomme', 'p*')).toBe(true)
+			expect(filter('Pomme', 'p*')).toBe(true)
+			expect(filter('banane', 'p*')).toBe(false)
+		})
+
+		it('matches all words of exactly 4 letters', () => {
+			expect(filter('test', '=????')).toBe(true)
+			expect(filter('test', '=????')).toBe(true)
+			expect(filter('tests', '=????')).toBe(false)
+			expect(filter('tes', '=????')).toBe(false)
+		})
+
+		it('matches all empty values', () => {
+			expect(filter('', '<>?*')).toBe(true)
+			expect(filter(null, '<>?*')).toBe(true)
+			expect(filter('test', '<>?*')).toBe(false)
+			expect(filter(' ', '<>?*')).toBe(false)
+		})
+
+		it('matches all words containing a capital "W"', () => {
+			expect(filter('Hello World', '"W"')).toBe(true)
+			expect(filter('hello world', '"W"')).toBe(false)
+			expect(filter('World', '"W"')).toBe(true)
+			expect(filter('world', '"W"')).toBe(false)
+		})
+
+		it('matches all words alphabetically after "zu"', () => {
+			expect(filter('zucchini', '>zu')).toBe(true)
+			expect(filter('zu', '>zu')).toBe(false)
+			expect(filter('zebra', '>zu')).toBe(false)
+			expect(filter('apple', '>zu')).toBe(false)
+		})
+	})
+})

package/src/components/Tables/common/filters/logics/text.ts

@@ -0,0 +1,62 @@
+export default function filter(itemValue: unknown, filterValue: unknown): boolean {
+	const str = String(itemValue ?? '')
+	const search = String(filterValue ?? '')
+
+	if (search.startsWith('"') && search.endsWith('"')) {
+		const regex = generateRegex(search.slice(1, -1), true)
+		return regex.test(str)
+	}
+
+	else if (search.startsWith('=')) {
+		const regex = generateRegex(search.slice(1), true, true)
+		return regex.test(str)
+	}
+
+	else if (search.startsWith('<>')) {
+		const regex = generateRegex(search.slice(2), true, true)
+		return !regex.test(str)
+	}
+
+	else if (search.startsWith('<=')) {
+		const cleanedSearch = search.slice(2).trim()
+		return str.localeCompare(cleanedSearch) <= 0
+	}
+
+	else if (search.startsWith('>=')) {
+		const cleanedSearch = search.slice(2).trim()
+		return str.localeCompare(cleanedSearch) >= 0
+	}
+
+	else if (search.startsWith('>')) {
+		const cleanedSearch = search.slice(1).trim()
+		return str.localeCompare(cleanedSearch) > 0
+	}
+
+	else if (search.startsWith('<')) {
+		const cleanedSearch = search.slice(1).trim()
+		return str.localeCompare(cleanedSearch) < 0
+	}
+
+	else {
+		const regex = generateRegex(removeAccents(search))
+		return regex.test(removeAccents(str))
+	}
+}
+
+function generateRegex(search: string, caseSensitive = false, strict = false): RegExp {
+	const escapedSearch = search.replace(/[-[\]{}()+.,\\^$|#\s]/g, '\\$&')
+	const regexSequenceWithWildcards = escapedSearch.replace(/\?/g, '.')
+	let regex = regexSequenceWithWildcards.replace(/\*/g, '.*')
+	if (strict) {
+		regex = '^' + regex + '$'
+	}
+	else if (regex !== escapedSearch) {
+		regex = '^' + regex
+	}
+
+	return new RegExp(regex, caseSensitive ? 'g' : 'gi')
+}
+
+function removeAccents(str: string): string {
+	return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+}

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

@@ -0,0 +1,187 @@
+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 DateFilter from '../DateFilter.vue'
+import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
+import type { FilterType } from '../../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('DateFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof DateFilter>>
+	const header = { title: 'Test Date', key: 'test' }
+	const filters: { key: string, value: string | Date, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails" :format="format"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: null,
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(DatePicker).exists()).toBe(true)
+	})
+
+	it('passes the correct props to DatePicker', () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		// Use attributes for stubbed components
+		expect(datePicker.attributes('label')).toBe('Test Date')
+		expect(datePicker.attributes('clearable')).toBe('true')
+		expect(datePicker.attributes('density')).toBe('compact')
+		expect(datePicker.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when date value changes (string format)', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '01/01/2023', type: 'date' as FilterType },
+		])
+	})
+
+	it('emits update:filters event when date value changes (Date object)', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		const dateObj = new Date('2023-01-01')
+		await datePicker.vm.$emit('update:modelValue', dateObj)
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: dateObj, type: 'date' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		// First set a value
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// Then clear it
+		await datePicker.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.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: '01/01/2023', type: 'date' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '02/01/2023')
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '02/01/2023', type: 'date' as FilterType },
+		])
+	})
+
+	it('handles date format from header prop', async () => {
+		const headerWithFormat = { ...header, dateFormat: 'DD/MM/YYYY' }
+		await wrapper.setProps({ header: headerWithFormat })
+
+		const datePicker = wrapper.findComponent(DatePicker)
+		expect(datePicker.props('format')).toBe('DD/MM/YYYY')
+	})
+
+	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 Date' }
+		const newWrapper = mount(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: null,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const datePicker = newWrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// 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 Date')
+		expect(emittedFilters[0].value).toBe('01/01/2023')
+		expect(emittedFilters[0].type).toBe('date')
+	})
+
+	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(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: null,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const datePicker = newWrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// 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('01/01/2023')
+		expect(emittedFilters[0].type).toBe('date')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+})