@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/UploadWorkflow/useFileUploadJourney.ts

@@ -0,0 +1,18 @@
+import { computed, ref, type Ref } from 'vue'
+import type { UploadItem } from './types'
+
+export default function useFileUploadJourney(
+	fileListItems: Ref<UploadItem[]>,
+) {
+	const selectItems = computed(() => fileListItems.value.map(item => ({
+		value: item.id,
+		text: item.title,
+	})))
+
+	const selectedItem = ref<string>()
+
+	return ({
+		selectItems,
+		selectedItem,
+	})
+}

package/src/components/Usages/Usages.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+	import { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { checkIcon, croixIcon } from '@/constants/icons'
+	import { ref } from 'vue'
+
+	withDefaults(defineProps<CustomizableOptions & {
+		items1?: string[]
+		items2?: string[]
+
+	}>(), {
+		items1: undefined,
+		items2: undefined,
+	})
+
+	const iconCheck = ref(checkIcon)
+	const iconCross = ref(croixIcon)
+
+</script>
+
+<template>
+	<VRow
+		class="mt-8"
+		style="display: flex;justify-content: center;"
+	>
+		<VCol
+			cols="12"
+			sm="5"
+			class="m-2 p-2 mr-2 v-col-auto check"
+		>
+			<div
+				style="display: flex;"
+				class="d-flex check-text"
+			>
+				<VIcon :icon="iconCheck" />
+				<p class="font-weight-bold mb-2">
+					À faire
+				</p>
+			</div>
+			<ul style="font-size: 13px;margin-left: 20px;">
+				<li
+					v-for="(item, index) in items1"
+					:key="index"
+					style="margin-bottom: 5px;"
+				>
+					<span>
+						{{ item }}
+					</span>
+				</li>
+			</ul>
+		</VCol>
+		<VCol
+			cols="12"
+			sm="5"
+			class="m-2 p-2 v-col-auto not-check"
+		>
+			<div class="d-flex not-check-text">
+				<VIcon :icon="iconCross" />
+				<p class="font-weight-bold mb-2">
+					À ne pas faire
+				</p>
+			</div>
+			<ul style="font-size: 13px;margin-left: 20px;">
+				<li
+					v-for="(item, index) in items2"
+					:key="index"
+					style="margin-bottom: 5px;"
+				>
+					<span>
+						{{ item }}
+					</span>
+				</li>
+			</ul>
+		</VCol>
+	</VRow>
+</template>
+
+<style lang="scss" scoped>
+.check {
+	background-color: #e5f7f4;
+
+	.check-text {
+		color: #004439;
+		font-weight: bold;
+	}
+}
+
+.not-check {
+	background: #fcedeb;
+
+	.not-check-text {
+		color: #b33f2e;
+		font-weight: bold;
+	}
+}
+</style>

package/src/components/index.ts

@@ -4,6 +4,7 @@ export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
+export { default as ChipList } from './ChipList/ChipList.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
 export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
@@ -25,6 +26,8 @@ export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
 export { default as FileList } from './FileList/FileList.vue'
 export { default as FilePreview } from './FilePreview/FilePreview.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
+export { default as FilterInline } from './FilterInline/FilterInline.vue'
+export { default as FilterSideBar } from './FilterSideBar/FilterSideBar.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -47,6 +50,7 @@ export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as PaginatedTable } from './PaginatedTable/PaginatedTable.vue'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'
 export { default as PeriodField } from './PeriodField/PeriodField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
@@ -57,4 +61,5 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/rules/useFieldValidation.ts

@@ -1,3 +1,6 @@
+// Regular expressions
+export const EMAIL_REGEXP = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+
 export type ValidationResult = {
 	success?: string
 	error?: string
@@ -29,6 +32,62 @@ export function useFieldValidation() {
 		return ignoreSpace ? value.replace(/\s/g, '').length : value.length
 	}
 
+	// Fonction pour parser une date selon le format spécifié
+	const parseDate = (dateStr: string | Date, format: string = 'DD/MM/YYYY'): Date | null => {
+		if (!dateStr) return null
+
+		// If dateStr is already a Date object, return it
+		if (dateStr instanceof Date) {
+			return dateStr
+		}
+
+		const parts = dateStr.split(/[-/.]/)
+		const formatParts = format.split(/[-/.]/)
+
+		if (parts.length !== formatParts.length) {
+			return null
+		}
+
+		let day = 1, month = 0, year = 1970
+
+		// Mapper les parties selon le format
+		for (let i = 0; i < formatParts.length; i++) {
+			const value = parseInt(parts[i], 10)
+			if (isNaN(value)) {
+				return null
+			}
+
+			switch (formatParts[i].toUpperCase()) {
+				case 'DD':
+					day = value
+					break
+				case 'MM':
+					month = value - 1 // JavaScript months are 0-based
+					break
+				case 'YY':
+					year = value + 2000 // Assuming 20xx for YY format
+					break
+				case 'YYYY':
+					year = value
+					break
+			}
+		}
+
+		// Valider les limites
+		if (month < 0 || month > 11) return null
+		if (day < 1 || day > 31) return null
+		if (year < 1900 || year > 2100) return null
+
+		const date = new Date(year, month, day)
+
+		// Vérifier si la date est valide (ex: 31/04 n'existe pas)
+		if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+			return null
+		}
+
+		return date
+	}
+
 	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		return (value: any): ValidationResult => {
@@ -44,7 +103,7 @@ export function useFieldValidation() {
 
 			const baseMessages = {
 				success: options.successMessage || 'Le champ est valide.',
-				error: options.message || `Validation échouée pour ${identifier}.`,
+				error: options.message || `Validation pour ${identifier}.`,
 				warning: options.warningMessage || `Attention : ${identifier} peut contenir une erreur.`,
 			}
 
@@ -98,7 +157,7 @@ export function useFieldValidation() {
 
 				case 'email':
 					return createValidationResult(
-						typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+						typeof value === 'string' && EMAIL_REGEXP.test(value),
 						options.message || options.warningMessage || `${identifier} doit être un email valide.`,
 					)
 
@@ -137,16 +196,20 @@ export function useFieldValidation() {
 						return { error: 'Configuration de la règle invalide' }
 					}
 
-					const dateValue = new Date(value)
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
 						throw new Error('Date reference must be a string in DD/MM/YYYY format')
 					}
 
-					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
-					const [day, month, year] = options.date.split('/')
-					const referenceDate = new Date(`${year}-${month}-${day}`)
+					const referenceDate = parseDate(options.date)
+					if (!referenceDate) {
+						return { error: 'Date de référence invalide' }
+					}
 
 					return createValidationResult(
 						dateValue >= referenceDate,
@@ -159,16 +222,20 @@ export function useFieldValidation() {
 						return { error: 'Configuration de la règle invalide' }
 					}
 
-					const dateValue = new Date(value)
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
 						throw new Error('Date reference must be a string in DD/MM/YYYY format')
 					}
 
-					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
-					const [day, month, year] = options.date.split('/')
-					const referenceDate = new Date(`${year}-${month}-${day}`)
+					const referenceDate = parseDate(options.date)
+					if (!referenceDate) {
+						return { error: 'Date de référence invalide' }
+					}
 
 					return createValidationResult(
 						dateValue <= referenceDate,
@@ -181,14 +248,19 @@ export function useFieldValidation() {
 						return { error: 'Configuration de la règle invalide' }
 					}
 
-					const dateValue = new Date(value)
+					const dateValue = parseDate(value)
+					if (!dateValue) {
+						return { error: 'Date invalide' }
+					}
 
 					if (typeof options.date !== 'string') {
 						throw new Error('Date reference must be a string in DD/MM/YYYY format')
 					}
 
-					const [day, month, year] = options.date.split('/')
-					const referenceDate = new Date(`${year}-${month}-${day}`)
+					const referenceDate = parseDate(options.date)
+					if (!referenceDate) {
+						return { error: 'Date de référence invalide' }
+					}
 
 					return createValidationResult(
 						dateValue.getTime() === referenceDate.getTime(),
@@ -216,5 +288,8 @@ export function useFieldValidation() {
 		return fieldRules.map(rule => createRule(rule.type, rule.options))
 	}
 
-	return { generateRules }
+	return {
+		generateRules,
+		parseDate,
+	}
 }