@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+	import useCustomizableOptions, {
+		type CustomizableOptions,
+	} from '@/composables/useCustomizableOptions'
+	import { useWidthable, type Widthable } from '@/composables/widthable'
+	import { required } from '@/utils/rules/required'
+	import { computed, reactive, ref, toRef, watch } from 'vue'
+	import DialogBox from '../DialogBox/DialogBox.vue'
+	import FileList from '../FileList/FileList.vue'
+	import FilePreview from '../FilePreview/FilePreview.vue'
+	import FileUpload from '../FileUpload/FileUpload.vue'
+	import { config } from './config'
+	import { locales as defaultLocales } from './locales'
+	import type { FileItem, SelectedFile, UploadItem } from './types'
+	import useFileUploadJourney from './useFileUploadJourney'
+	import useFileList from './useFileList'
+
+	const props = withDefaults(
+		defineProps<
+			Widthable &
+			CustomizableOptions & {
+				uploadList: UploadItem[]
+				sectionTitle?: string
+				showFilePreview?: boolean
+				locales?: typeof defaultLocales
+			}
+		>(),
+		{
+			sectionTitle: undefined,
+			showFilePreview: false,
+			locales: () => defaultLocales,
+		},
+	)
+
+	const emits = defineEmits<{
+		(e: 'error', value: string[]): void
+		(e: 'update:modelValue', value: SelectedFile[]): void
+	}>()
+
+	const selectedFiles = defineModel<SelectedFile[]>({
+		type: Array,
+		default: reactive([]),
+	})
+	watch(
+		selectedFiles,
+		(value) => {
+			emits('update:modelValue', value)
+		},
+		{ deep: true },
+	)
+
+	const { widthStyles } = useWidthable(props)
+	const options = useCustomizableOptions(config, props)
+
+	const fileUpload = ref<typeof FileUpload>()
+	const { selectItems, selectedItem } = useFileUploadJourney(
+		toRef(props, 'uploadList'),
+	)
+
+	const title = computed(
+		() => props.sectionTitle ?? props.locales.title(!!props.uploadList.length),
+	)
+
+	const { addOrReplaceFile, resetFile, setItemOnError, filledUploadList }
+		= useFileList(selectedFiles, toRef(props, 'uploadList'))
+
+	// handle FileList
+	let inlineSelectedItemId: string | undefined = undefined
+	function uploadInline(item: FileItem) {
+		inlineSelectedItemId = item.id
+
+		fileUpload.value!.fileInput!.click()
+	}
+	function previewFile(file: FileItem & { file?: File }) {
+		showPreviewDialog.value = true
+		fileToPreview.value = file.file
+	}
+
+	// handle FileUpload
+	const uploadedFiles = ref<File[]>([])
+
+	const showFileUpload = computed(
+		() => (
+			selectedFiles.value.length < props.uploadList.length
+			|| props.uploadList.find(uploadItem => uploadItem.state === 'error') !== undefined
+		),
+	)
+
+	function fileSelected(files: File[]) {
+		const fileId
+			= inlineSelectedItemId ?? (props.uploadList.length === 1
+				? props.uploadList[0].id
+				: undefined)
+		inlineSelectedItemId = undefined
+
+		if (props.showFilePreview || fileId === undefined) {
+			showSelectDialog.value = true
+			selectedItem.value = fileId
+
+			return
+		}
+
+		addOrReplaceFile(files[0], fileId)
+	}
+
+	function uploadError(errors: string[]) {
+		emits('error', errors)
+		if (!inlineSelectedItemId) {
+			return
+		}
+		setItemOnError(inlineSelectedItemId)
+		inlineSelectedItemId = undefined
+	}
+
+	// handle DialogBox
+	const showSelectDialog = ref(false)
+
+	function dialogConfirm() {
+		if (!selectedItem.value) {
+			return
+		}
+
+		addOrReplaceFile(uploadedFiles.value[0], selectedItem.value)
+
+		showSelectDialog.value = false
+		selectedItem.value = undefined
+	}
+
+	// handle preview
+	const fileToPreview = ref<File>()
+	const showPreviewDialog = ref(false)
+</script>
+
+<template>
+	<div
+		:style="widthStyles"
+		class="sy-upload-workflow white"
+	>
+		<slot name="title">
+			<h4 class="text-h6 mb-2">
+				{{ title }}
+			</h4>
+		</slot>
+
+		<FileList
+			v-bind="options.fileList"
+			:upload-list="filledUploadList"
+			@upload="uploadInline"
+			@retry="uploadInline"
+			@delete="resetFile"
+			@preview="previewFile"
+		/>
+
+		<Transition>
+			<FileUpload
+				v-if="showFileUpload"
+				ref="fileUpload"
+				v-bind="options.fileUpload"
+				v-model="uploadedFiles"
+				@error="uploadError"
+				@update:model-value="fileSelected"
+			/>
+		</Transition>
+
+		<DialogBox
+			v-model="showSelectDialog"
+			v-bind="options.dialog"
+			@cancel="showSelectDialog = false"
+			@confirm="dialogConfirm"
+		>
+			<template #title>
+				<slot name="modal-title">
+					{{ locales.modalTitle }}
+				</slot>
+			</template>
+			<slot name="modal-description" />
+
+			<VForm
+				v-if="true"
+				ref="form"
+				v-bind="options.form"
+				class="mb-2"
+			>
+				<VSelect
+					v-model="selectedItem"
+					v-bind="options.select"
+					:items="selectItems"
+					item-title="text"
+					item-value="value"
+					:rules="[required]"
+					color="primary"
+				/>
+			</VForm>
+
+			<FilePreview
+				v-if="showFilePreview"
+				:options="options.filePreview"
+				:file="uploadedFiles[0]"
+			/>
+		</DialogBox>
+
+		<DialogBox
+			v-model="showPreviewDialog"
+			v-bind="options.previewDialog"
+			hide-actions
+		>
+			<slot name="preview-description" />
+
+			<FilePreview
+				:options="options.filePreview"
+				:file="fileToPreview"
+			/>
+		</DialogBox>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.v-enter-active,
+.v-leave-active {
+	interpolate-size: allow-keywords;
+	transition: height 0.2s ease, opacity 0.2s ease;
+	overflow: hidden;
+}
+
+.v-enter-from,
+.v-leave-to {
+	height: 0;
+	opacity: 0;
+}
+</style>

package/src/components/UploadWorkflow/config.ts

@@ -0,0 +1,29 @@
+export const config = {
+	fileUpload: {
+		class: 'mt-6',
+	},
+	dialog: {
+		persistent: true,
+		width: '550',
+	},
+	card: {
+		class: 'pa-4',
+	},
+	select: {
+		variant: 'outlined',
+		validateOnBlur: true,
+		label: 'Nature du fichier',
+	},
+	layout: {
+		wrap: true,
+		class: 'mt-2',
+	},
+	cancelBtn: {
+		text: true,
+		class: 'mr-4',
+		color: 'accent',
+	},
+	confirmBtn: {
+		color: 'accent',
+	},
+} as const

package/src/components/UploadWorkflow/locales.ts

@@ -0,0 +1,8 @@
+export const locales = {
+	title: (plural: boolean): string =>
+		`Document${plural ? 's' : ''} à nous transmettre`,
+	importTitle: 'Importer des fichiers',
+	modalTitle: 'Fichier transmis',
+	cancelBtn: 'Retour',
+	confirmBtn: 'Confirmer',
+} as const

package/src/components/UploadWorkflow/tests/UploadWorkflow.spec.ts

@@ -0,0 +1,257 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import UploadWorkflow from '../UploadWorkflow.vue'
+import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
+import { locales as FileUploadLocales } from '@/components/FileUpload/locales'
+import { afterEach } from 'node:test'
+import { VSelect } from 'vuetify/components'
+
+describe('UploadWorkflow', () => {
+	afterEach(() => {
+		vi.clearAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('render the upload list', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.findAll('.file-item')).toHaveLength(2)
+		expect(wrapper.find('.sy-file-upload').isVisible()).toBeTruthy()
+	})
+
+	it('shows the file in the list when set with the list button', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.file-item button').trigger('click')
+
+		const file: File = new File([''], 'theFilename.pdf', {
+			type: 'application/pdf',
+		})
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.find('.file-item').text()).toContain('theFilename.pdf')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+	})
+
+	it('shows the item as error in the list when set with the list button', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.findAll('.file-item button')[1].trigger('click')
+
+		const file: File = new File([''], 'theFilename.invalid', {
+			type: 'application/invalid',
+		})
+
+		const input = wrapper.find('input')
+		input.element.files = [file] as unknown as FileList
+		await input.trigger('change')
+
+		expect(wrapper.emitted('error')).toEqual([
+			[
+				[
+					FileUploadLocales.errorExtension('theFilename.invalid', [
+						'pdf',
+						'jpg',
+						'jpeg',
+						'png',
+					]),
+				],
+			],
+		])
+		expect(wrapper.findAll('.file-item')[1].text()).toContain(
+			fileListLocales.error,
+		)
+	})
+
+	it('accept the file when we use the FileUpload component with many items in the uploadList', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					VDialog: {
+						template: '<div><slot /></div>',
+					},
+				},
+			},
+		})
+
+		const file: File = new File([''], 'uploadInField.pdf', {
+			type: 'application/pdf',
+		})
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		wrapper.find('.v-select input').setValue('bill')
+		wrapper.findComponent(VSelect).vm.$emit('update:modelValue', 'bill')
+
+		await wrapper.find('[data-test-id="confirm-btn"]').trigger('click')
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.emitted('update:modelValue')?.[0][0] as any[]).find(item => item.fileName === 'uploadInField.pdf')).toBeTruthy()
+
+		expect(wrapper.findAll('.file-item')[1].text()).toContain('uploadInField.pdf')
+	})
+
+	it('replace the selected file', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+				modelValue: [
+					{
+						fileName: 'file1.pdf',
+						file: new File([''], 'file1.pdf', {
+							type: 'application/pdf',
+						}),
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.file-item button').trigger('click')
+
+		const file: File = new File([''], 'file2.pdf', {
+			type: 'application/pdf',
+		})
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		expect(wrapper.find('.file-item').text()).toContain('file2.pdf')
+	})
+
+	it('show the preview of an image', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				modelValue: [],
+				uploadList: [
+					{
+						id: 'CERFA1',
+						title: 'CERFA 1',
+						showPreviewBtn: true,
+					},
+					{
+						id: 'CERFA2',
+						title: 'CERFA 2',
+						showPreviewBtn: true,
+					},
+				],
+				showFilePreview: false,
+			},
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					VDialog: {
+						template: '<div><slot /></div>',
+					},
+				},
+			},
+		})
+
+		const image = new File(
+			[Buffer.from([100, 97, 116, 97, 58, 14, 79, 8, 113, 97, 65, 43, 57, 55, 89, 69, 88, 51, 66, 101, 70, 86, 112, 121, 112, 121, 121, 121, 80, 81, 104])],
+			'image.png',
+			{ type: 'image/png' },
+		)
+
+		await wrapper.find('.file-item button').trigger('click')
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [image],
+			},
+		})
+
+		await wrapper.find('.file-item__action-preview').trigger('click')
+
+		expect(wrapper.find('.sy-file-preview img').exists()).toBeTruthy()
+	})
+})

package/src/components/UploadWorkflow/tests/__snapshots__/UploadWorkflow.spec.ts.snap

@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UploadWorkflow > render the upload list 1`] = `
+"<div data-v-2a35ee7d="" style="width: 100%;" class="sy-upload-workflow white">
+  <h4 data-v-2a35ee7d="" class="text-h6 mb-2">Documents à nous transmettre</h4>
+  <ul data-v-1c29bdca="" data-v-2a35ee7d="" class="upload-list" style="width: 100%;">
+    <li data-v-55f3ab7e="" data-v-1c29bdca="" class="file-item">
+      <div data-v-55f3ab7e="" class="file-item__description">
+        <div data-v-55f3ab7e="" class="file-item__content"><span data-v-55f3ab7e="" class="file-item__icon"><!--v-if--><i data-v-55f3ab7e="" class="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i></span>
+          <div data-v-55f3ab7e="">
+            <div data-v-55f3ab7e="" class="file-item__title">Carte d'identité</div>
+            <div data-v-55f3ab7e="" class="file-item__name text-base"></div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+        </div>
+        <div data-v-55f3ab7e="" class="file-item__actions"><button data-v-55f3ab7e="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text file-item__action file-item__action-upload text-primary"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i data-v-55f3ab7e="" class="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""><span data-v-55f3ab7e="">Importer</span></span>
+            <!---->
+            <!---->
+          </button>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+      <!--v-if-->
+    </li>
+    <li data-v-55f3ab7e="" data-v-1c29bdca="" class="file-item">
+      <div data-v-55f3ab7e="" class="file-item__description">
+        <div data-v-55f3ab7e="" class="file-item__content"><span data-v-55f3ab7e="" class="file-item__icon"><!--v-if--><i data-v-55f3ab7e="" class="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 24px; height: 24px; width: 24px;" aria-hidden="true"></i></span>
+          <div data-v-55f3ab7e="">
+            <div data-v-55f3ab7e="" class="file-item__title">Facture de soin</div>
+            <div data-v-55f3ab7e="" class="file-item__name text-base"></div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+        </div>
+        <div data-v-55f3ab7e="" class="file-item__actions"><button data-v-55f3ab7e="" type="button" class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text file-item__action file-item__action-upload text-primary"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i data-v-55f3ab7e="" class="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""><span data-v-55f3ab7e="">Importer</span></span>
+            <!---->
+            <!---->
+          </button>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+      <!--v-if-->
+    </li>
+  </ul>
+  <transition-stub data-v-2a35ee7d="" appear="false" persisted="false" css="true"><label data-v-3451b201="" data-v-2a35ee7d="" for="file-upload-v-0" class="sy-file-upload d-block pa-4 mt-6" style="width: 100%;"><input data-v-3451b201="" id="file-upload-v-0" type="file" accept=".pdf, .jpg, .jpeg, .png" class="sy-file-upload-input"><span data-v-5bd3b751="" data-v-3451b201="" class="sy-file-upload-placeholder"><i data-v-5bd3b751="" class="M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z mdi v-icon notranslate v-theme--light text-primary" style="font-size: 40px; height: 40px; width: 40px;" aria-hidden="true"></i><span data-v-5bd3b751="" class="mt-1 font-weight-medium text-black"><span data-v-5bd3b751="">Déposer votre fichier ici</span></span><span data-v-5bd3b751="" class="mb-2 sy-file-upload-caption">Ou</span><span data-v-5bd3b751="" class="sy-file-upload-btn bg-primary text-white elevation-2">Choisir un fichier</span><span data-v-5bd3b751="" class="mt-4 sy-file-upload-caption">Taille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png</span></span></label></transition-stub>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>"
+`;

package/src/components/UploadWorkflow/types.ts

@@ -0,0 +1,21 @@
+import type { FileState } from '@/components/FileList/FileList.vue'
+export type { Item as FileItem } from '@/components/FileList/FileList.vue'
+
+export type UploadItem = {
+	id: string
+	title: string
+	state?: FileState | string
+	optional?: boolean
+	showPreviewBtn?: boolean
+}
+
+export type SelectedFile = {
+	id: string
+	title: string
+	state?: FileState
+	progress?: number
+	optional?: boolean
+	showPreviewBtn?: boolean
+	fileName: string
+	file: File
+}

package/src/components/UploadWorkflow/useFileList.ts

@@ -0,0 +1,84 @@
+import { computed, ref, type DeepReadonly, type Ref } from 'vue'
+import type { FileState, Item as FileListItem } from '../FileList/FileList.vue'
+import type { FileItem, SelectedFile, UploadItem } from './types'
+
+export default function useFileList(
+	selectedFiles: Ref<SelectedFile[]>,
+	uploadList: DeepReadonly<Ref<UploadItem[]>>,
+) {
+	const errorSelectedFiles = ref<string[]>([])
+
+	function removeFromErrorList(fileId: string) {
+		const errorIndex = errorSelectedFiles.value.findIndex(item => item === fileId)
+		if (errorIndex !== -1) {
+			errorSelectedFiles.value.splice(errorIndex, 1)
+		}
+	}
+
+	function findSelectedFile(fileId: string) {
+		return selectedFiles.value.find(item => item.id === fileId)
+	}
+
+	function resetFile(fileItem: FileListItem | SelectedFile) {
+		const itemIndex = selectedFiles.value.findIndex(item => item.id === fileItem.id)
+		selectedFiles.value.splice(itemIndex, 1)
+	}
+
+	function replaceFile(file: File, item: SelectedFile, state: FileState = 'success') {
+		item.file = file
+		item.fileName = file.name
+		item.state = state
+	}
+
+	function addOrReplaceFile(file: File, fileId: string, state: FileState = 'success') {
+		const selectedFile = findSelectedFile(fileId)
+
+		if (selectedFile) {
+			replaceFile(file, selectedFile, state)
+		}
+		else {
+			const uploadItemIndex = uploadList.value.findIndex(item => item.id === fileId)
+
+			selectedFiles.value.push({
+				id: uploadList.value[uploadItemIndex].id,
+				title: uploadList.value[uploadItemIndex].title,
+				state: state,
+				optional: !!uploadList.value[uploadItemIndex].optional,
+				showPreviewBtn: !!uploadList.value[uploadItemIndex].showPreviewBtn,
+				fileName: file.name,
+				file,
+			})
+			removeFromErrorList(fileId)
+		}
+	}
+
+	function setItemOnError(fileId: string) {
+		const selectedFile = findSelectedFile(fileId)
+		if (selectedFile) {
+			resetFile(selectedFile)
+		}
+		errorSelectedFiles.value.push(fileId)
+	}
+
+	const filledUploadList = computed<FileItem[]>(() => {
+		return uploadList.value.map((uploadItem) => {
+			const matchingUploadedItem = findSelectedFile(uploadItem.id)
+			const error = errorSelectedFiles.value.includes(uploadItem.id)
+			const state = uploadItem.state ?? (error ? 'error' : 'initial')
+
+			return ({
+				...uploadItem,
+				state,
+				...matchingUploadedItem,
+			})
+		})
+	})
+
+	return {
+		addOrReplaceFile,
+		replaceFile,
+		resetFile,
+		setItemOnError,
+		filledUploadList,
+	}
+}