Improvement/date picker change delete system (#3670)

assurance-maladie-digital · Jul 30, 2024 · 117b83a · 117b83a
1 parent 2a3c34e
commit 117b83a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 39 deletions.
diff --git a/.../synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap b/.../synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
@@ -268,8 +268,7 @@ exports[`FormBuilder > renders correctly 1`] = `
     </div>
     <div data-v-9067cb71="" class="vd-form-field">
       <!--v-if-->
-      <!--v-if-->
-      <div data-v-2a54188f="" data-v-9067cb71="" class="vd-date-picker vd-form-input mt-4" variant="outlined" textfield="[object Object]">
+      <!--v-if--> Date: - inputValue: <div data-v-2a54188f="" class="vd-date-picker">
         <!--	doc:	https://vue3datepicker.com-->
         <div data-v-2a54188f="" class="dp__main dp__theme_light" data-datepicker-instance="">
           <div>

diff --git a/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue b/packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
@@ -212,9 +212,6 @@ export default defineComponent({
 			if (newVal) {
 				this.lastTypeAddedDate = 'date'
 				this.$emit('change', newVal)
-				if (newVal.length === 10) {
-					this.validate(newVal)
-				}
 				if (typeof newVal === 'string' && newVal.length === 10) {
 					this.$emit('update:model-value', this.formatDate(newVal))
 				}
@@ -239,6 +236,7 @@ export default defineComponent({
 				)
 				if (newVal.length === 10) {
 					this.validate(newVal)
+					this.inputValue = newVal
 				}
 			} else if (
 				typeof newVal === 'string' &&
@@ -296,6 +294,7 @@ export default defineComponent({
 		if (typeof this.modelValue === 'string') {
 			const [day, month, year] = this.modelValue.split(/[-/]/)
 			this.date = new Date(Number(year), Number(month) - 1, Number(day))
+			this.inputValue = this.modelValue
 		}
 	},
 	methods: {
@@ -526,18 +525,11 @@ export default defineComponent({
 				? 'underlined'
 				: 'outlined'
 		},
-		onClear() {
+		onClearInput() {
 			this.date = null
 			this.inputValue = ''
 			this.$emit('update:model-value', null)
 		},
-		handleKeyDown(event: KeyboardEvent) {
-			if (event.key === 'Backspace' || event.key === 'Delete') {
-				this.inputValue = ''
-				this.date = null
-				this.$emit('update:model-value', null)
-			}
-		},
 		async handleCut(event?: ClipboardEvent) {
 			if (event && event.clipboardData) {
 				this.inputValue = '';
@@ -596,7 +588,7 @@ export default defineComponent({
 					{{ date.getDate() }}
 				</div>
 			</template>
-			<template #dp-input="{onClear}">
+			<template #dp-input="{}">
 				<VTextField
 					:model-value="date"
 					v-bind="textFieldOptions"
@@ -626,8 +618,6 @@ export default defineComponent({
 					"
 					:variant="getVariant"
 					@blur="emitUpdateEvent"
-					@keydown="handleKeyDown"
-					@click:clear="onClear"
 					@paste="handlePaste"
 					@cut="handleCut"
 				>
@@ -653,7 +643,7 @@ export default defineComponent({
 
 					<template v-slot:clear v-if="clearable" >
 						<VIcon
-							@click='onClear'
+							@click='onClearInput'
 							tabindex="-1"
 							aria-hidden="true"
 						>

diff --git a/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts b/packages/synapse-bridge/src/patterns/DatePicker/tests/DatePicker.spec.ts
@@ -380,16 +380,6 @@ describe('Methods', () => {
 		expect(wrapper.vm.determineVariant()).toEqual('underlined')
 	})
 
-	it('emits update:model-value event with null when onClear is called', () => {
-		const wrapper = shallowMount(DatePicker)
-		wrapper.vm.onClear()
-		const emittedEvent = wrapper.emitted('update:model-value')
-		expect(emittedEvent).toBeTruthy()
-		if (emittedEvent) {
-			expect(emittedEvent[1]).toEqual([null])
-		}
-	})
-
 	it('returns correct formatted date when formatDate is called', () => {
 		const wrapper = shallowMount(DatePicker)
 		const date = new Date(2023, 3, 15) // April 15, 2023
@@ -658,18 +648,6 @@ describe('Mounted', () => {
 
 		expect(wrapper.vm.errorMessages).toContain('Une erreur est survenue')
 	})
-	it('calls handleKeyDown with correct arguments when handleKeyDown Backspace is called', async () => {
-		const wrapper = shallowMount(DatePicker)
-		const handleKeyDownMock = vi.fn()
-		wrapper.vm.handleKeyDown = handleKeyDownMock
-		const mockEvent = { key: 'Backspace' }
-		wrapper.vm.handleKeyDown(<KeyboardEvent>mockEvent)
-		expect(handleKeyDownMock).toHaveBeenCalledWith(mockEvent)
-
-		expect(wrapper.emitted('update:model-value')).toStrictEqual([[null]])
-		expect(wrapper.vm.date).toBe(null)
-		expect(wrapper.vm.inputValue).toBe('')
-	})
 
 	it('handleCut method updates state and clipboard correctly', async () => {
 		const wrapper = shallowMount(DatePicker)