refacto DatePicker #3763

4dr1en · 2024-09-16T08:37:26Z

Description

Réecriture du componsant DatePicker, réduction de la taille du code, augmentation de la couverture de test et meilleur compatibilité avec la V2

Playground

Tests basique format DD/MM/YYYY

<template>
	<PageContainer>
		<v-row>
			<v-col cols="12" md="6">
				<h3>Basique Outlined</h3>
				Date: {{ date }}
				<date-picker
					v-model="date"
					label="Date"
					:hint="defaultHint"
					outlined
					clearable
				/>
				<h3>No icon</h3>
				Date: {{ date }}
				<date-picker
					v-model="date"
					label="Date"
					:hint="defaultHint"
					no-icon
				/>
				<h3>Basique with change event</h3>
				Date: {{ date1 }}
				<date-picker
					v-model="date1"
					label="Date"
					:hint="defaultHint"
					@change="handleDateChange"
				/>
				<h3>Basique</h3>
				Date: {{ date2 }}
				<date-picker
					v-model="date2"
					label="Date"
					:hint="defaultHint"
					clearable
				/>
				<h3>Clearable</h3>
				Date: {{ date3 }}
				<date-picker
					v-model="date3"
					label="Date"
					:hint="defaultHint"
					clearable
					outlined
					append-icon
				/>
				<date-picker
					v-model="date3"
					label="Date"
					:hint="defaultHint"
					clearable
				/>

				<h3>Required</h3>
				Date: {{ date4 }}
				<date-picker
					v-model="date4"
					label="Date"
					:hint="defaultHint"
					:rules="validRules"
				/>

				<h3>Not After Today</h3>
				Date: {{ date5 }}
				<date-picker
					v-model="date5"
					label="Date"
					:hint="defaultHint"
					:warning-rules="notAfterTodayRules"
				/>

				<h3>Not Before Today</h3>
				Date: {{ date6 }}
				<date-picker
					v-model="date6"
					label="Date"
					:hint="defaultHint"
					:warning-rules="notBeforeTodayRules"
				/>

				<h3>Not Before Date</h3>
				Date: {{ date7 }}
				<date-picker
					v-model="date7"
					label="Date"
					:hint="defaultHint"
					:rules="notBeforeDateRules"
				/>

				<h3>Not After Date</h3>
				Date: {{ date8 }}
				<date-picker
					v-model="date8"
					label="Date"
					:hint="defaultHint"
					:rules="notAfterDateRules"
				/>

				<h3>Warning Rules</h3>
				Date: {{ date9 }}
				<date-picker
					v-model="date9"
					label="Date"
					:hint="defaultHint"
					:warning-rules="warningRules"
					outlined
				/>

				<h3 class="mt-4">No-prepend-icon</h3>
				Date: {{ date10 }}
				<date-picker
					v-model="date10"
					label="Date"
					:hint="defaultHint"
					no-prepend-icon
				/>
			</v-col>
			<v-col cols="12" md="6">
				<h3 class="mt-4">Append-icon</h3>
				Date: {{ date11 }}
				<date-picker
					v-model="date11"
					label="Date"
					:hint="defaultHint"
					append-icon
				/>

				<h3>No Calendar</h3>
				Date: {{ date12 }}
				<date-picker
					v-model="date12"
					label="Date"
					:hint="defaultHint"
					no-calendar
				/>

				<h3>TextField Activator</h3>
				Date: {{ date13 }}
				<date-picker
					v-model="date13"
					label="Date"
					:hint="defaultHint"
					text-field-activator
				/>

				<h3 class="mt-4">Show weekends</h3>
				Date: {{ date14 }}
				<date-picker
					v-model="date14"
					label="Date"
					:hint="defaultHint"
					show-weekends
				/>

				<h3 class="mt-4">Disabled</h3>
				Date: {{ date15 }}
				<date-picker
					v-model="date15"
					label="Date"
					:hint="defaultHint"
					disabled
				/>

				<h3 class="mt-4">Outlined</h3>
				Date: {{ date16 }}
				<date-picker
					v-model="date16"
					label="Date"
					:hint="defaultHint"
					outlined
				/>

				<h3 class="mt-4">Birthdate</h3>
				Date: {{ date17 }}
				<date-picker
					v-model="date17"
					birthdate
					label="Date d'anniversaire"
					:hint="defaultHint"
				/>

				<h3 class="mt-4">Range</h3>
				<div>
					{{ startdate }} - {{ enddate }}
					<date-picker
						v-model="startdate"
						label="Start date"
						date-format-return="YYYY-MM-DD"
					/>
					<date-picker
						v-model="enddate"
						label="End date"
						:start-date="startdate"
						date-format-return="YYYY-MM-DD"
					/>
				</div>

				<h3 class="mt-4">DateFormat</h3>
				{{ dateToFormat }}
				<date-picker
					v-model="dateToFormat"
					label="Date"
					hint="JJ-MM-YYYY"
					dateFormat="DD-MM-YYYY"
				/>
				<h3 class="mt-4">DateFormatReturn</h3>
				{{ dateFormatReturn }}
				<date-picker
					v-model="dateFormatReturn"
					label="Date"
					hint="range"
					dateFormatReturn="DD/MM/YY"
				/>
			</v-col>
		</v-row>
	</PageContainer>
</template>

<script lang="ts">
import DatePicker from '@/patterns/DatePicker/DatePicker.vue'
import { required } from '@/rules/required/index.ts'
import { notAfterToday } from '@/rules/notAfterToday/index.ts'
import { notBeforeToday } from '@/rules/notBeforeToday/index.ts'
import PageContainer from '@/elements/PageContainer/PageContainer.vue'
import dayjs from 'dayjs'
import { notBeforeDate } from '@/main'
import { notAfterDate } from '@/main'
export default {
	emits: ['change'],
	components: {
		DatePicker,
		PageContainer,
	},
	data() {
		return {
			date: dayjs().format('DD/MM/YYYY'),
			date1: dayjs().add(1, 'day').format('DD/MM/YYYY'),
			date2: dayjs().add(2, 'day').format('DD/MM/YYYY'),
			date3: dayjs().add(3, 'day').format('DD/MM/YYYY'),
			date4: dayjs().add(4, 'day').format('DD/MM/YYYY'),
			date5: dayjs().add(5, 'day').format('DD/MM/YYYY'),
			date6: dayjs().add(6, 'day').format('DD/MM/YYYY'),
			date7: dayjs().add(7, 'day').format('DD/MM/YYYY'),
			date8: dayjs().add(8, 'day').format('DD/MM/YYYY'),
			date9: dayjs().add(9, 'day').format('DD/MM/YYYY'),
			date10: dayjs().add(10, 'day').format('DD/MM/YYYY'),
			date11: dayjs().add(11, 'day').format('DD/MM/YYYY'),
			date12: dayjs().add(12, 'day').format('DD/MM/YYYY'),
			date13: dayjs().add(13, 'day').format('DD/MM/YYYY'),
			date14: dayjs().add(14, 'day').format('DD/MM/YYYY'),
			date15: dayjs().add(15, 'day').format('DD/MM/YYYY'),
			date16: dayjs().add(16, 'day').format('DD/MM/YYYY'),
			date17: dayjs().add(17, 'day').format('DD/MM/YYYY'),
			dateRange: undefined,
			startdate: null,
			enddate: null,
			dateDefinie: dayjs().format('DD/MM/YYYY'),
			dateToFormat: dayjs().format('DD/MM/YYYY'),
			dateFormatReturn: dayjs().format('DD/MM/YYYY'),
			validRules: [required, notAfterToday, notBeforeToday],
			notAfterTodayRules: [notAfterToday],
			notBeforeTodayRules: [notBeforeToday],
			notBeforeDateRules: [notBeforeDate(dayjs().format('DD/MM/YYYY'))],
			notAfterDateRules: [notAfterDate(dayjs().format('DD/MM/YYYY'))],
			defaultHint: 'Format JJ/MM/YYYY',
			warningRules: [notAfterToday, notBeforeToday],
		}
	},
	mounted() {
		const date = dayjs().add(8, 'day').format('DD/MM/YYYY')
		const date1 = dayjs().add(10, 'day').format('DD/MM/YYYY')

		setTimeout(() => {
			this.date = date
		}, 4000)
		setTimeout(() => {
			this.date1 = date1
		}, 4000)
	},
	methods: {
		notAfterToday,
		handleDateChange(value: any) {
			console.log('Date changed to ' + value)
		},
	},
}
</script>

Tests rules/warnings format DD/MM/YYYY

<template>
	<PageContainer>
		<v-row>
			<v-col cols="12" md="6">
				<h2>Rules</h2>
				<h3>notAfterDate: Tomorrow</h3>
				<DatePicker v-model="date" :rules="notAfterDateRules" />
				<h3>notBeforeDate: Tomorrow</h3>
				<DatePicker v-model="date1" :rules="notBeforeDateRules" />
				<h3>notAfterToday</h3>
				<DatePicker v-model="date2" :rules="notAfterTodayRules" />
				<h3>notBeforeToday</h3>
				<DatePicker v-model="date3" :rules="notBeforeTodayRules" />
				<h3>Required</h3>
				<DatePicker v-model="date4" :rules="requiredRules" />
				<h3>Multi Rules</h3>
				<DatePicker v-model="date5" :rules="validRules" />
			</v-col>
			<v-col cols="12" md="6">
				<h2>Warnings</h2>
				<h3>notAfterDate: Tomorrow</h3>
				<DatePicker v-model="date6" :warning-rules="notAfterToday" />
				<h3>notBeforeDate: Tomorrow</h3>
				<DatePicker v-model="date7" :warning-rules="notBeforeToday" />
				<h3>notAfterToday</h3>
				<DatePicker v-model="date8" :warning-rules="notAfterToday" />
				<h3>notBeforeToday</h3>
				<DatePicker v-model="date9" :warning-rules="notBeforeToday" />
				<h3>Required</h3>
				<DatePicker v-model="date10" :warning-rules="requiredRules" />
				<h3>Multi Warnings</h3>
				<DatePicker v-model="date11" :warning-rules="warningRules" />
			</v-col>
		</v-row>
	</PageContainer>
</template>

<script lang="ts">
import DatePicker from "@/patterns/DatePickerField/DatePickerField.vue"
import { required } from "@/rules/required/index.ts";
import { notAfterToday } from "@/rules/notAfterToday/index.ts";
import { notBeforeToday } from "@/rules/notBeforeToday/index.ts";
import PageContainer from "@/elements/PageContainer/PageContainer.vue";
import dayjs from 'dayjs';
import {notBeforeDate} from "@/main";
import {notAfterDate} from "@/main";
export default {
	emits:['change'],
	components: {
		DatePicker,
		PageContainer
	},
	data() {
		return {
			date: dayjs().format('DD/MM/YYYY'),
			date1: dayjs().add(1, 'day').format('DD/MM/YYYY'),
			date2: dayjs().add(2, 'day').format('DD/MM/YYYY'),
			date3: dayjs().add(3, 'day').format('DD/MM/YYYY'),
			date4: dayjs().add(4, 'day').format('DD/MM/YYYY'),
			date5: dayjs().add(5, 'day').format('DD/MM/YYYY'),
			date6: dayjs().add(6, 'day').format('DD/MM/YYYY'),
			date7: dayjs().add(7, 'day').format('DD/MM/YYYY'),
			date8: dayjs().add(8, 'day').format('DD/MM/YYYY'),
			date9: dayjs().add(9, 'day').format('DD/MM/YYYY'),
			date10: dayjs().add(10, 'day').format('DD/MM/YYYY'),
			date11: dayjs().add(11, 'day').format('DD/MM/YYYY'),
			date12: dayjs().add(12, 'day').format('DD/MM/YYYY'),
			date13: dayjs().add(13, 'day').format('DD/MM/YYYY'),
			date14: dayjs().add(14, 'day').format('DD/MM/YYYY'),
			date15: dayjs().add(15, 'day').format('DD/MM/YYYY'),
			date16: dayjs().add(16, 'day').format('DD/MM/YYYY'),
			date17: dayjs().add(17, 'day').format('DD/MM/YYYY'),
			dateRange:[dayjs().format('DD/MM/YYYY'), dayjs().add(12, 'day').format('DD/MM/YYYY')],
			startDate: null,
			endDate: null,
			dateDefinie: dayjs().format('DD/MM/YYYY'),
			dateToFormat: dayjs().format('DD/MM/YYYY'),
			dateFormatReturn: dayjs().format('DD/MM/YYYY'),
			requiredRules: [required],
			validRules: [required,notAfterToday, notAfterDate(dayjs().format('DD/MM/YYYY'))],
			notAfterTodayRules: [notAfterToday],
			notBeforeTodayRules: [notBeforeToday],
			notBeforeDateRules: [notBeforeDate(dayjs().format('DD/MM/YYYY'))],
			notAfterDateRules: [notAfterDate(dayjs().format('DD/MM/YYYY'))],
			defaultHint: "Format JJ/MM/YYYY",
			warningRules: [notAfterToday, notAfterDate(dayjs().format('DD/MM/YYYY'))],
		}
	},
	mounted() {
		const date = dayjs().add(8, 'day').format('DD/MM/YYYY');
		const date1 = dayjs().add(10, 'day').format('DD/MM/YYYY');
		const startDate = dayjs().add(18, 'day').format('DD/MM/YYYY');
		const endDate = dayjs().add(21, 'day').format('DD/MM/YYYY');

		this.dateRange = [date, date1]

		setTimeout(() => {
			this.date = date;
		}, 4000);
		setTimeout(() => {
			this.date1 = date1;
		}, 4000);
		setTimeout(() => {
			this.dateRange = [startDate, endDate]
		}, 5000);
	},
	methods: {
		notAfterToday,
	}
};
</script>

Type de changement

Correction de bug
Changement cassant
Refactoring
Ce changement nécessite une mise à jour de la documentation

Checklist

Ma Pull Request pointe vers la bonne branche
Mon code suit le style de code du projet
J'ai effectué une review de mon propre code
J'ai commenté mon code, en particulier dans les parties difficiles à comprendre
J'ai apporté les modifications correspondantes à la documentation
Mes modifications ne génèrent aucun nouveau warning
J'ai ajouté des tests qui prouvent que mon correctif est efficace ou que ma fonctionnalité fonctionne
Les tests unitaires passent localement avec mes modifications
J'ai mis à jour le fichier Changelog

… formatting

VachetVirginie · 2024-09-16T12:26:46Z

…/DatePicker

…dValue

packages/synapse-bridge/src/patterns/DatePickerField/DatePickerField.vue

… null values in modelValue and fileListItems

wip

d72115a

4dr1en requested a review from DavidFyon September 16, 2024 08:37

4dr1en self-assigned this Sep 16, 2024

4dr1en added 4 commits September 16, 2024 10:52

fix: validate on blur

ee788d8

Merge branch 'v2-bridge' into Refacto/DatePicker

a3fa6eb

feat: add vuetify-options

f166cc7

feat: Add birthDateProps

2d1dd15

4dr1en force-pushed the Refacto/DatePicker branch from 213f4b4 to 2d1dd15 Compare September 16, 2024 09:44

4dr1en and others added 4 commits September 16, 2024 12:14

feat: Add missing props

d321ad9

formatter

a7e87b7

feat: Refactor DatePickerField component to improve date handling and…

0e7f18d

… formatting

fix notBeforeDate rule

db9ec33

VachetVirginie and others added 17 commits September 16, 2024 15:29

fix rules

f693f09

feat: handle clearable

434f50c

refactor: Update date format options in DatePickerField component

db33b21

wip

bd6f88e

fix test and textToCalendarMethod

72cddd0

remove useless code

65c55d1

add pnpm-workspace

9b69a56

add didsabled props

55fc132

certains cas ou les icons sont en doubles

6c0c40a

add props textFieldActivator

c4535ab

refactor: method textToCalendar +clg

0e6a574

add noCalendar props

32e7cca

improve textFieldActivator

e3b572b

improve icon slot

644ed75

fix no icon

b72b3a0

fix outlined

6819b3b

fix: messages and field null value

0d0d713

4dr1en added 13 commits September 18, 2024 14:22

Merge remote-tracking branch 'origin/Refacto/DatePicker' into Refacto…

961ab5f

…/DatePicker

fix: updated modelValue when startDate > date

5c0b828

fix: update snapshot

f36fea2

refactor: Filter warning messages as string array in DatePickerField

8d63653

fix: reset text in range mode

dcf7f93

refactor: Update DatePickerField to handle start date after end date

3f5df1f

refactor: Update DatePickerField styles and theme

1fa15ca

lint

4745fe2

refactor: Erase old DatePicke

7e5e111

refactor: Update PeriodField component to be iso v2

e9672d8

Merge remote-tracking branch 'origin/v2-bridge' into Refacto/DatePicker

d41d0c8

lint

b03d007

refactor: Update PeriodField component to handle null values in perio…

52c5911

…dValue

4dr1en requested a review from VachetVirginie September 19, 2024 15:00

fix: build errors

09de8ee

4dr1en marked this pull request as ready for review September 19, 2024 15:13

VachetVirginie approved these changes Sep 23, 2024

View reviewed changes

packages/synapse-bridge/src/patterns/DatePickerField/DatePickerField.vue Outdated Show resolved Hide resolved

This was linked to issues Sep 23, 2024

DatePicker : erreur date non valide persistante #3771

Closed

DatePicker : effacement au milieu du champ #3773

Closed

DatePicker : issues #3727

Closed

DatePicker et suppression de la date entrée #3723

Closed

4dr1en and others added 3 commits September 24, 2024 13:28

refactor: Remove console.log statement in PeriodField.vue

cb1cb57

update package

ad09462

refactor: Update NirField and UploadWorkflowCore components to handle…

ee7b2de

… null values in modelValue and fileListItems

DavidFyon approved these changes Sep 25, 2024

View reviewed changes

DavidFyon merged commit 88d9530 into v2-bridge Sep 25, 2024
2 checks passed

DavidFyon deleted the Refacto/DatePicker branch September 25, 2024 12:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refacto DatePicker #3763

refacto DatePicker #3763

Uh oh!

4dr1en commented Sep 16, 2024 •

edited

Loading

Uh oh!

VachetVirginie commented Sep 16, 2024 •

edited by 4dr1en

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

refacto DatePicker #3763

refacto DatePicker #3763

Uh oh!

Conversation

4dr1en commented Sep 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Playground

Tests basique format DD/MM/YYYY

Tests rules/warnings format DD/MM/YYYY

Type de changement

Checklist

Uh oh!

VachetVirginie commented Sep 16, 2024 • edited by 4dr1en Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

4dr1en commented Sep 16, 2024 •

edited

Loading

VachetVirginie commented Sep 16, 2024 •

edited by 4dr1en

Loading