arreglar ultimos coletazos

src/components/@inputs/Calendar.vue

@@ -10,17 +10,16 @@ import IconCalendar from "../icons/IconCalendar.vue";
 export default defineComponent({
   name: "calendar-input",
   components: { IconCalendar },
-  props: ["modelValue", "bindValue", "setValues"],
+  props: ["modelValue", "bindValue", "setValues", "dateCookies"],
-  setup({ setValues }, { emit }) {
+  setup({ setValues, dateCookies, modelValue }, { emit }) {
     const formStore = useFormStore();
     const { availability, postalCodeValid } = storeToRefs(formStore);
 
     const [year, month, day] = fullCurrentDate.replaceAll("/", "-").split("-");
     const currentDate = `${day}-${month}-${year}`;
-    const proxyDate = ref(invertDate(currentDate));
+    const proxyDate = ref(invertDate(modelValue));
-
     function updateProxy() {
-      proxyDate.value = invertDate(currentDate);
+      proxyDate.value = invertDate(proxyDate.value);
     }
 
     function optionsValidDates(date) {
@@ -37,6 +36,8 @@ export default defineComponent({
 
     watch(proxyDate, (newProxy) => {
       setValues({ date: invertDate(newProxy) });
+      const btn = document.querySelector(".buttons-close-modal button")
+      if(btn) btn.click()
     });
 
     const LOCALE = {
@@ -71,7 +72,6 @@ export default defineComponent({
       <IconCalendar />
 
       <q-popup-proxy
-        @before-show="updateProxy"
         cover
         transition-show="scale"
         transition-hide="scale"
@@ -83,9 +83,9 @@ export default defineComponent({
           :readonly="!postalCodeValid.isValid"
           mask="YYYY-MM-DD"
         >
-          <div class="row items-center justify-end q-gutter-sm">
+          <div class="row items-center justify-end q-gutter-sm buttons-close-modal">
             <q-btn label="Cancel" color="primary" flat v-close-popup />
-            <q-btn label="OK" color="primary" flat v-close-popup />
+            <q-btn label="OK" color="primary" flat v-close-popup class="modal-close"/>
           </div>
         </q-date>
       </q-popup-proxy>
@@ -108,4 +108,4 @@ export default defineComponent({
       />
     </div>
   </div>
-</template>
+</template>

src/components/quasar-components/carousel/VerticalCarouselImgs.vue

@@ -9,6 +9,7 @@ import { usePostalCalendar } from "src/hooks/usePostalCalendar";
 import { useVerticalCarouselImgs } from "src/hooks/useVerticalCarouselImgs";
 import { useFormStore } from "src/stores/forms";
 import { onMounted } from "vue";
+import { useLocalStorage } from "../../../hooks/useLocalStorage";
 
 export default defineComponent({
   name: "vertical-carousel-imgs",
@@ -30,14 +31,19 @@ export default defineComponent({
     const { navPos, screenWidth, slide, target } = useVerticalCarouselImgs();
 
     const formStore = useFormStore();
-    const {postalCodeValid } = storeToRefs(formStore);
+    const { getItem } = useLocalStorage();
+    const localValues = getItem("availability")
+
+    const { postalCodeValid } = storeToRefs(formStore);
+    let isEventKeyActive = false
 
     function handleFormKeyPress() {
       const postalCodeField = document.querySelector("#carousel-form .postal-code-control input")
       const modalDate = document.querySelector("#carousel-form .calendar .custom-date-btn")
-      let isEventKeyActive = false
       postalCodeField.addEventListener('input', (e) =>{
-        isEventKeyActive = true
+        if (e.target.value.length === 5) {
+          isEventKeyActive = true
+        }
       })
       postalCodeField.addEventListener('keypress', e => {
         if (e.target.value.length === 5 && isEventKeyActive) {
@@ -66,6 +72,7 @@ export default defineComponent({
       postalCodeAttrs,
       calendar,
       calendarAttrs,
+      localValues
     };
   },
 });
@@ -75,7 +82,7 @@ export default defineComponent({
   <div ref="target" class="vertical-carousel-container" style="min-height: 100dvh">
     <q-carousel navigation-position="right" style="min-height: 100dvh" v-model="slide" navigation autoplay infinite
       animated v-if="!!banners.length" class="custom-carousel">
-      <q-carousel-slide v-for="(item, i) in banners[0]" :key="i" :name="item.longName" :img-src="item.url">
+      <q-carousel-slide v-for="(item, i) in banners" :key="i" :name="item.longName" :img-src="item.url">
         <div class="vertical-carousel-content">
           <header class="carousel-content-header">
             <h1 class="carousel-header-title">
@@ -93,7 +100,7 @@ export default defineComponent({
         </div>
 
         <div class="carousel-content-item date-expired-control">
-          <Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" />
+          <Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" :dateCookies="localValues.dateExpired"/>
         </div>
 
         <q-btn type="submit" class="btn carousel-content-item">

src/hooks/usePostalCalendar.js

@@ -74,9 +74,17 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
 
     return isAvailabilityEmpty.value;
   });
-
+  let DATE_INITIAL
   const [YEAR, MONTH, DAY] = fullCurrentDate.replaceAll("/", "-").split("-");
   const CURRENT_DATE = `${DAY}-${MONTH}-${YEAR}`;
+  DATE_INITIAL = CURRENT_DATE
+  if (availability.value.dateExpired) {
+    const [yearStorage, monthStorage, dayStorage] = availability.value.dateExpired.replaceAll("/", "-").split("-");
+    const STORAGE_DATE = `${dayStorage}-${monthStorage}-${yearStorage}`;
+    DATE_INITIAL = STORAGE_DATE
+  }
+  const POSTAL_CODE_INITIAL = availability.value.postalCode ? availability.value.postalCode : ""
+
   const {
     handleSubmit,
     handleReset,
@@ -94,11 +102,11 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
         min,
         max,
       },
-      postalCode: "",
+      postalCode: POSTAL_CODE_INITIAL,
-      date: CURRENT_DATE,
+      date: DATE_INITIAL,
     },
     initialTouched: {
-      date: false,
+      date: availability.value.dateExpired ? true : false,
       postalCode: true,
     },
   });