@cnamts/synapse 1.0.26 → 1.1.0

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import useFilterable, { type FilterItem, type FilterProp } from './useFilterable'
 import type { ChipItem } from '@/components/ChipList/types'
 import { nextTick, ref } from 'vue'
@@ -6,10 +6,7 @@ import { nextTick, ref } from 'vue'
 describe('Filterable', () => {
 	describe('formatFilterName', () => {
 		it('preserves existing behavior for names with spaces', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const name = formatFilterName('Test Name')
 			expect(name).toBe('test-name')
@@ -19,10 +16,7 @@ describe('Filterable', () => {
 		})
 
 		it('preserves existing behavior for names with special characters', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const nameWithSpecialChars = formatFilterName('Filter@Name#Test')
 			expect(nameWithSpecialChars).toBe('filternametest')
@@ -32,10 +26,7 @@ describe('Filterable', () => {
 		})
 
 		it('fixes camelCase issue by preserving case for single words', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const camelCaseName = formatFilterName('totoCase')
 			expect(camelCaseName).toBe('totoCase')
@@ -48,10 +39,7 @@ describe('Filterable', () => {
 		})
 
 		it('handles edge cases correctly', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			// Single lowercase word
 			expect(formatFilterName('name')).toBe('name')
@@ -69,10 +57,7 @@ describe('Filterable', () => {
 
 	describe('getChips', () => {
 		it('uses the formatChip function to compute the chip', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -100,10 +85,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is an empty string', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -118,10 +100,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a string', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -141,10 +120,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a number', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -164,10 +140,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a period field object', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -193,10 +166,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is a period field object with null values', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -213,11 +183,44 @@ describe('Filterable', () => {
 			expect(filterCount).toBe(0)
 		})
 
+		it('returns a chip when only from is set', () => {
+			const { getChips, getFilterCount } = useFilterable(ref([]))
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: '2024-01-01',
+					to: null,
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '2024-01-01 –', value: { from: '2024-01-01', to: null } }])
+			expect(filterCount).toBe(1)
+		})
+
+		it('returns a chip when only to is set', () => {
+			const { getChips, getFilterCount } = useFilterable(ref([]))
+
+			const filter = {
+				name: 'Test',
+				value: {
+					from: null,
+					to: '2024-12-31',
+				},
+			}
+
+			const chips = getChips(filter)
+			const filterCount = getFilterCount(filter)
+
+			expect(chips).toEqual([{ text: '– 2024-12-31', value: { from: null, to: '2024-12-31' } }])
+			expect(filterCount).toBe(1)
+		})
+
 		it('returns the correct text when the value is an object', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -248,10 +251,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -275,10 +275,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -313,10 +310,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects with text properties', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -351,10 +345,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects with text and value properties', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -393,10 +384,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is undefined', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {} as FilterItem
 
@@ -410,10 +398,7 @@ describe('Filterable', () => {
 
 	describe('removeChip', () => {
 		it('removes the chip from the filter', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -431,10 +416,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a number', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -452,10 +434,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an object', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -482,10 +461,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a period field object', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const periodFilter = {
 				name: 'Test',
@@ -509,10 +485,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a period field object with null values', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const periodFilter = {
 				name: 'Test',
@@ -536,10 +509,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -557,10 +527,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array of objects', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -591,10 +558,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an empty array', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -612,10 +576,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array of strings', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -635,10 +596,7 @@ describe('Filterable', () => {
 
 	describe('resetFilter', () => {
 		it('resets the filter', () => {
-			const { resetFilter } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { resetFilter } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -652,42 +610,89 @@ describe('Filterable', () => {
 	})
 
 	describe('resetAllFilters', () => {
-		it('resets all filters', async () => {
-			const filters = ref<FilterProp>([])
-			const emitsFunction = vi.fn()
-			const { resetAllFilters } = useFilterable(
-				filters,
-				emitsFunction,
-			)
-
-			filters.value = [
-				{
-					name: 'Test',
-					value: 'test',
-				},
-				{
-					name: 'Test 2',
-					value: 'test 2',
-				},
+		it('sets all filter values to undefined', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'Test', value: 'test' },
+				{ name: 'Test 2', value: 'test 2' },
+			])
+			const { filters, resetAllFilters } = useFilterable(model)
+
+			resetAllFilters()
+
+			expect(filters.value.every(f => f.value === undefined)).toBe(true)
+		})
+	})
+
+	describe('model sync (full replacement)', () => {
+		it('initializes filters with a deep copy of the model on mount', () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: ['cardio'] },
+			])
+
+			const { filters } = useFilterable(model)
+
+			expect(filters.value).toEqual([{ name: 'folder', value: ['cardio'] }])
+			// Ensure it is a deep copy, not the same object reference
+			expect(filters.value[0]).not.toBe(model.value[0])
+		})
+
+		it('replaces local pending state when model updates another filter externally', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: undefined },
+				{ name: 'profession', value: undefined },
+			])
+
+			const { filters } = useFilterable(model)
+
+			// Simulate a local pending selection in FilterSideBar (not yet applied)
+			filters.value.find(f => f.name === 'profession')!.value = ['infirmier']
+
+			// FilterInline updates 'folder' in the shared model
+			model.value = [
+				{ name: 'folder', value: ['cardiologie'] },
+				{ name: 'profession', value: undefined },
 			]
+			await nextTick()
+
+			// Current behavior: full model deep-copy on external change resets local pending state
+			expect(filters.value.find(f => f.name === 'profession')?.value).toBeUndefined()
+			// 'folder' must reflect the external change
+			expect(filters.value.find(f => f.name === 'folder')?.value).toEqual(['cardiologie'])
+		})
+
+		it('replaces local state when the model externally changes the same filter', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: ['old-value'] },
+			])
+
+			const { filters } = useFilterable(model)
+
+			// User has a local pending selection (not yet applied)
+			filters.value.find(f => f.name === 'folder')!.value = ['local-pending']
 
+			// External update changes the same filter
+			model.value = [{ name: 'folder', value: ['new-external'] }]
 			await nextTick()
 
-			resetAllFilters()
+			expect(filters.value.find(f => f.name === 'folder')?.value).toEqual(['new-external'])
+		})
 
-			expect(emitsFunction).toHaveBeenCalledTimes(1)
-			const emittedCall = emitsFunction.mock.calls[0]
-			expect(emittedCall?.[0]).toBe('update:modelValue')
+		it('replaces local pending state even when model content is identical', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: undefined },
+			])
 
-			// Use JSON serialization for robust comparison in CI environments
-			const emittedArray = emittedCall?.[1]
-			const expectedArray = [
-				{ name: 'Test', value: undefined },
-				{ name: 'Test 2', value: undefined },
-			]
+			const { filters } = useFilterable(model)
+
+			// User has local pending state
+			filters.value.find(f => f.name === 'folder')!.value = ['local']
+
+			// Re-assign the model with the same content (e.g. echo from own emit)
+			model.value = [{ name: 'folder', value: undefined }]
+			await nextTick()
 
-			// Compare as JSON strings to avoid reference/prototype issues
-			expect(JSON.stringify(emittedArray)).toBe(JSON.stringify(expectedArray))
+			// Current behavior: update is applied from model, local pending state is replaced
+			expect(filters.value.find(f => f.name === 'folder')?.value).toBeUndefined()
 		})
 	})
 })

package/src/composables/useFilterable/useFilterable.ts

@@ -1,4 +1,4 @@
-import { ref, watch, type Ref } from 'vue'
+import { ref, toRaw, watch, type Ref } from 'vue'
 import type { ChipItem } from '@/components/ChipList/types'
 import slugify from 'slugify'
 import { deepCopy } from '@/utils/functions/deepCopy'
@@ -13,11 +13,11 @@ export type FilterItem = {
 
 export type FilterProp = FilterItem[]
 
-export default function useFilterable(model: Ref<FilterProp>, emits) {
+export default function useFilterable(model: Ref<FilterProp>) {
 	const filters = ref<FilterProp>([])
 
 	watch(model, (newFilters) => {
-		filters.value = deepCopy(newFilters)
+		filters.value = deepCopy(toRaw(newFilters))
 	}, { deep: true, immediate: true })
 
 	function getFilterCount(filter: FilterItem): number {
@@ -98,16 +98,20 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				= typedValue.from !== undefined && typedValue.to !== undefined
 
 			if (isPeriodField) {
-				if (typedValue.from === null || typedValue.to === null) {
+				const hasFrom = typedValue.from !== null
+				const hasTo = typedValue.to !== null
+
+				if (!hasFrom && !hasTo) {
 					return []
 				}
 
-				return [
-					{
-						text: `${typedValue.from} – ${typedValue.to}`,
-						value: typedValue,
-					},
-				]
+				const text = hasFrom && hasTo
+					? `${typedValue.from} – ${typedValue.to}`
+					: hasFrom
+						? `${typedValue.from} –`
+						: `– ${typedValue.to}`
+
+				return [{ text, value: typedValue }]
 			}
 
 			// Handle single select objects (VSelect with return-object but without multiple)
@@ -168,7 +172,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				: undefined
 
 			filter.value = newValue
-			updateValue()
 
 			return
 		}
@@ -183,7 +186,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 
 			if (isPeriodField) {
 				filter.value = undefined
-				updateValue()
 
 				return
 			}
@@ -193,7 +195,7 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			if (hasSelectStructure) {
 				// For single select objects, clear the entire value
 				filter.value = undefined
-				updateValue()
+
 				return
 			}
 
@@ -201,29 +203,20 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			delete typedValue[chipValue]
 			filter.value = typedValue
 		}
-		updateValue()
 	}
 
 	function resetFilter(filter: FilterItem): void {
 		filter.value = undefined
-		updateValue()
 	}
 
 	function resetAllFilters(): void {
-		filters.value.forEach((filter) => {
-			filter.value = undefined
+		filters.value.forEach((filter: FilterItem) => {
+			resetFilter(filter)
 		})
-
-		updateValue()
-	}
-
-	function updateValue(): void {
-		emits('update:modelValue', filters.value)
 	}
 
 	return {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		resetAllFilters,

package/src/composables/useFormFieldErrorHandling.ts

@@ -38,7 +38,7 @@ export const useFormFieldErrorHandling = (
 	emitUpdate?: () => void,
 ): UseFormFieldErrorHandlingReturn => {
 	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages ?? true,
+		showSuccessMessages: props.showSuccessMessages ?? false,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling ?? false,
 	})
@@ -84,8 +84,8 @@ export const useFormFieldErrorHandling = (
 
 		const result = await validation.validateField(
 			value,
-			[...defaultRules.value, ...props.customRules!],
-			props.customWarningRules!,
+			[...defaultRules.value, ...(props.customRules ?? [])],
+			props.customWarningRules ?? [],
 		)
 
 		return !result.hasError

package/src/composables/validation/tests/useFormValidation.spec.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { useFormValidation, useValidatableComponent } from '../useFormValidation'
 import type { ValidatableComponent } from '../useFormValidation'
 
@@ -35,6 +35,15 @@ const ParentWithForm = defineComponent({
 })
 
 describe('useFormValidation', () => {
+	beforeEach(() => {
+		lastChildApi = null
+		vi.clearAllMocks()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+	})
+
 	it('registers components and avoids duplicates', () => {
 		lastChildApi = null
 

package/src/composables/validation/tests/useValidatable.spec.ts

@@ -1,14 +1,21 @@
 /* eslint-disable vue/one-component-per-file */
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { useFormValidation } from '../useFormValidation'
 import { useValidatable } from '../useValidatable'
 
 type FormValidationApi = ReturnType<typeof useFormValidation>
 
 describe('useValidatable', () => {
-	it('registers component on mount and unregisters on unmount', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+	})
+	it('registers component on mount and unregisters on unmount', async () => {
 		const ChildComponent = defineComponent({
 			name: 'ValidatableChild',
 			setup() {
@@ -63,10 +70,11 @@ describe('useValidatable', () => {
 		expect(childVm.reset).toHaveBeenCalledTimes(1)
 
 		wrapper.unmount()
+		await flushPromises()
 		expect(form.validatableComponents.value).toHaveLength(0)
 	})
 
-	it('does nothing harmful when no form provider is present', () => {
+	it('does nothing harmful when no form provider is present', async () => {
 		const OrphanComponent = defineComponent({
 			name: 'OrphanValidatable',
 			setup() {
@@ -80,11 +88,13 @@ describe('useValidatable', () => {
 			},
 		})
 
-		const mountOrphan = () => {
+		const mountOrphan = async () => {
 			const wrapper = mount(OrphanComponent)
+			await flushPromises()
 			wrapper.unmount()
+			await flushPromises()
 		}
 
-		expect(mountOrphan).not.toThrow()
+		await expect(mountOrphan()).resolves.not.toThrow()
 	})
 })

package/src/composables/validation/tests/useValidation.spec.ts

@@ -14,7 +14,7 @@ describe('useValidation', () => {
 	})
 
 	it('should handle basic validation rules', async () => {
-		const validation = useValidation()
+		const validation = useValidation({ showSuccessMessages: true })
 		const rules = [{
 			type: 'required',
 			options: {
@@ -206,7 +206,7 @@ describe('useValidation', () => {
 
 	it('should discard a slow async validation when a newer one is triggered after', async () => {
 		vi.useFakeTimers()
-		const validation = useValidation()
+		const validation = useValidation({ showSuccessMessages: true })
 
 		// Slow rule: resolves after 100ms with an error
 		const slowRules = [{

package/src/composables/validation/useValidation.ts

@@ -55,7 +55,7 @@ export interface ValidationResult {
  * @param options Options de configuration de la validation
  * @returns Un objet contenant les états et méthodes de validation
  */
-export function useValidation(options: ValidationOptions = { showSuccessMessages: true }) {
+export function useValidation(options: ValidationOptions = { showSuccessMessages: false }) {
 	const errors = ref<string[]>([])
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])