diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue index 3a63e4f..65003ee 100644 --- a/components/calendar/form/CreateEvent.vue +++ b/components/calendar/form/CreateEvent.vue @@ -5,6 +5,9 @@ import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar()) const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar() const popoverOpen = ref(false) + +const { t } = useI18n() + const isLoading = ref(false) const formErrors = reactive<{ message: string | null }>({ @@ -88,7 +91,7 @@ function handleCancel() { :collision-padding="60" :disable-outside-pointer-events="true" :trap-focus="true" - class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950" + class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950" @escape-key-down="handleClosing" @focus-outside="handleClosing" @interact-outside="handleClosing" @@ -104,8 +107,14 @@ function handleCancel() { name="new-event-title" required :placeholder="$t('entity.calendar.event.title')" - class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600" + :maxlength="120" + pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}" + class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500" > + +
+ {{ t('entity.calendar.event.patterns.title') }} +
@@ -113,8 +122,13 @@ function handleCancel() { id="new-event-description" v-model="eventSkeleton.description" name="new-event-description" - :placeholder="$t('entity.addDescription')" class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600" + :placeholder="$t('entity.addDescription')" + :maxlength="1200" + class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500" /> +
+ {{ t('entity.calendar.event.patterns.description') }} +
@@ -142,7 +156,10 @@ function handleCancel() {
- +
@@ -158,13 +175,21 @@ function handleCancel() {
- +
+ +
+ {{ t('entity.calendar.event.patterns.location') }} +
+
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue index 644e550..3bf6975 100644 --- a/components/calendar/form/UpdateEvent.vue +++ b/components/calendar/form/UpdateEvent.vue @@ -97,16 +97,22 @@ function handleCancel() {
- +
+ +
+ {{ t('entity.calendar.event.patterns.title') }} +
+
@@ -116,9 +122,12 @@ function handleCancel() { v-model="eventSkeleton.description" name="new-event-description" :placeholder="$t('entity.addDescription')" - class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600" :maxlength="1200" + class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500" /> +
+ {{ t('entity.calendar.event.patterns.description') }} +
@@ -147,7 +156,10 @@ function handleCancel() {
- +
@@ -157,7 +169,7 @@ function handleCancel() {
- +
--> @@ -166,15 +178,22 @@ function handleCancel() {
- +
+ + +
+ {{ t('entity.calendar.event.patterns.location') }} +
+
diff --git a/i18n.config.ts b/i18n.config.ts index 628b124..c4ff153 100644 --- a/i18n.config.ts +++ b/i18n.config.ts @@ -136,6 +136,11 @@ export default defineI18nConfig(() => ({ addLocation: "Add a place", prevPage: "Previous page with events", nextPage: "Next page with events", + patterns: { + title: "Between 3 and 120 caracters, without special symbols, except & - ~ ()", + description: "1200 caracters max.", + location: "Between 3 and 160 caracters, without special symbols, except & - ~ ()", + }, editDialog: { title: "Edit event", subtitle: "Update event data", @@ -350,6 +355,11 @@ export default defineI18nConfig(() => ({ addLocation: "Ajouter un endroit", prevPage: "Précédente page à évènements", nextPage: "Prochaine page à évènements", + patterns: { + title: "Entre 3 et 120 charactères, sans symboles spéciaux, sauf & - ~ ()", + description: "Maximum 1200 charactères.", + location: "Entre 3 et 160 charactères, sans symboles spéciaux, sauf & - ~ ()", + }, editDialog: { title: "Modifier l'évènement", subtitle: "Mettre à jour les données de l'évènement",