Arreglar error en el carousel

api/controller/Product/product.controller.js

@@ -95,8 +95,9 @@ class ProductController {
   }
 
   async findById(req, res) {
+    const { dateExpired, postalCode } = req.query
     const id = Number(req.params.id)
-    const _products = await db.getProducts();
+    const _products = await db.getProducts(dateExpired, postalCode);
     const filterProduct = _products[0].filter(item => item.id === id)
 
     return res.status(200).send({

src/components/@inputs/PostalCode.vue

@@ -88,7 +88,7 @@ export default defineComponent({
         :model-value="modelValue"
         @update:model-value="updateModel"
         v-bind="bindValue"
-        class="custom-main-paragraph"
+        class="custom-main-paragraph field-postal-code"
         :error="false"
         placeholder="código postal"
         mask="#####"

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

@@ -1,4 +1,5 @@
 <script>
+import { storeToRefs } from "pinia";
 import { defineComponent } from "vue";
 
 import Calendar from "src/components/@inputs/Calendar.vue";
@@ -6,6 +7,8 @@ import PostalCode from "src/components/@inputs/PostalCode.vue";
 import IconSearch from "src/components/icons/IconSearch.vue";
 import { usePostalCalendar } from "src/hooks/usePostalCalendar";
 import { useVerticalCarouselImgs } from "src/hooks/useVerticalCarouselImgs";
+import { useFormStore } from "src/stores/forms";
+import { onMounted } from "vue";
 
 export default defineComponent({
   name: "vertical-carousel-imgs",
@@ -26,6 +29,30 @@ export default defineComponent({
     } = usePostalCalendar({ type: "home" });
     const { navPos, screenWidth, slide, target } = useVerticalCarouselImgs();
 
+    const formStore = useFormStore();
+    const {postalCodeValid } = storeToRefs(formStore);
+
+    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
+      })
+      postalCodeField.addEventListener('keypress', e => {
+        if (e.target.value.length === 5 && isEventKeyActive) {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            modalDate.click()
+            isEventKeyActive = false
+          }
+        }
+      })
+    }
+    onMounted(() => {
+      handleFormKeyPress()
+    })
+
     return {
       slide,
       navPos,
@@ -48,30 +75,32 @@ 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.title" :img-src="item.image">
         <div class="vertical-carousel-content">
           <header class="carousel-content-header">
             <h1 class="carousel-header-title">
+              {{ item.title }}
             </h1>
           </header>
-
-          <form @submit="onSubmit" class="carousel-content-body">
-            <div class="carousel-content-item">
-              <PostalCode v-model="postalCode" v-bind:bindValue="postalCodeAttrs" :setFieldError="setFieldError" />
-            </div>
-
-            <div class="carousel-content-item">
-              <Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" />
-            </div>
-
-            <q-btn type="submit" class="btn carousel-content-item">
-              <IconSearch /> ver disponibilidad
-            </q-btn>
-          </form>
         </div>
       </q-carousel-slide>
     </q-carousel>
 
+    <div class="carousel-form">
+      <form @submit="onSubmit" class="carousel-content-body" id="carousel-form">
+        <div class="carousel-content-item postal-code-control">
+          <PostalCode v-model="postalCode" v-bind:bindValue="postalCodeAttrs" :setFieldError="setFieldError" />
+        </div>
+
+        <div class="carousel-content-item date-expired-control">
+          <Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" />
+        </div>
+
+        <q-btn type="submit" class="btn carousel-content-item">
+          <IconSearch /> ver disponibilidad
+        </q-btn>
+      </form>
+    </div>
 
   </div>
 </template>
@@ -83,13 +112,74 @@ export default defineComponent({
   & .custom-carousel {
     user-select: none;
   }
-
-  & .vertical-carousel-content {
+  .carousel-form{
+    max-width: 850px;
+    margin: 0 auto;
     position: absolute;
-    min-height: fit-content;
+    bottom: 15vh;
     left: 0;
     right: 0;
-    bottom: 110px;
+  }
+  .carousel-content-body {
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 10px 0 0 10px;
+    overflow: hidden;
+    min-height: 96px;
+
+    /* & .carousel-content {
+      border-radius: 10px 10px 0 0;
+      overflow: hidden;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex: 2;
+      background-color: $white;
+    } */
+
+    & .carousel-content-item {
+      display: flex;
+      align-items: center;
+      padding-inline: 53px 34px;
+      flex: 1;
+      position: relative;
+
+      &:first-child::after {
+        content: "";
+        position: absolute;
+        width: 1px;
+        opacity: 0.2;
+        background-color: $text-normal-100;
+        right: 0;
+        top: 27px;
+        bottom: 29px;
+
+        @media only screen and (max-width: $med-md) {
+          display: none;
+        }
+      }
+
+      &.btn {
+
+        &:focus,
+        &:focus-visible {
+          outline: none;
+        }
+      }
+
+      &:not(:last-child) {
+        background-color: $white;
+      }
+
+      &:last-child {
+        border-radius: 0 10px 10px 0;
+        padding-inline: 56px;
+      }
+    }
+  }
+  & .vertical-carousel-content {
+    min-height: fit-content;
     width: min(100%, 845px);
     margin: 0 auto;
 
@@ -99,6 +189,10 @@ export default defineComponent({
       gap: 17px;
       color: $white;
       text-align: center;
+      position: absolute;
+      bottom: 30vh;
+      left: 0;
+      width: 100%;
       margin-bottom: 27px;
 
       & .carousel-header-title {
@@ -115,65 +209,6 @@ export default defineComponent({
       }
     }
 
-    & .carousel-content-body {
-      display: flex;
-      flex-wrap: wrap;
-      border-radius: 10px 0 0 10px;
-      overflow: hidden;
-      min-height: 96px;
-
-      /* & .carousel-content {
-        border-radius: 10px 10px 0 0;
-        overflow: hidden;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        flex: 2;
-        background-color: $white;
-      } */
-
-      & .carousel-content-item {
-        display: flex;
-        align-items: center;
-        padding-inline: 53px 34px;
-        flex: 1;
-        position: relative;
-
-        &:first-child::after {
-          content: "";
-          position: absolute;
-          width: 1px;
-          opacity: 0.2;
-          background-color: $text-normal-100;
-          right: 0;
-          top: 27px;
-          bottom: 29px;
-
-          @media only screen and (max-width: $med-md) {
-            display: none;
-          }
-        }
-
-        &.btn {
-
-          &:focus,
-          &:focus-visible {
-            outline: none;
-          }
-        }
-
-        &:not(:last-child) {
-          background-color: $white;
-        }
-
-        &:last-child {
-          border-radius: 0 10px 10px 0;
-          padding-inline: 56px;
-        }
-      }
-    }
-
     & .carousel-content-footer {
       display: grid;
       place-items: center;
@@ -181,12 +216,12 @@ export default defineComponent({
 
     @media only screen and (max-width: $med-xmd) {
       padding-inline: 20px;
-      top: 50%;
-      transform: translateY(-50%);
 
       & .carousel-content-header {
         gap: 15px;
-        margin-bottom: 49px;
+        margin-bottom: 20px;
+        bottom: initial;
+        top: calc(10dvh + 120px);
 
         & .carousel-header-title {
           font-size: $font-28;
@@ -199,25 +234,6 @@ export default defineComponent({
         }
       }
 
-      & .carousel-content-body {
-        margin-bottom: initial;
-        flex-direction: column;
-        width: min(100%, 276px);
-        margin: 0 auto;
-
-        & .carousel-content-item {
-          padding-block: 24px;
-
-          &:first-child {
-            border-radius: 10px 10px 0px 0px;
-          }
-
-          &:last-child {
-            border-radius: 0 0 10px 10px;
-          }
-        }
-      }
-
       & .carousel-content-footer {
         display: none;
       }
@@ -229,5 +245,31 @@ export default defineComponent({
       /* background-color: tomato; */
     }
   }
+  @media only screen and (max-width: $med-xmd) {
+    .carousel-form{
+      bottom: 0;
+      top: 120px;
+      display: flex;
+      align-items: center;
+    }
+    & .carousel-content-body {
+      margin-bottom: initial;
+      flex-direction: column;
+      width: min(100%, 276px);
+      margin: 0 auto;
+
+      & .carousel-content-item {
+        padding-block: 24px;
+
+        &:first-child {
+          border-radius: 10px 10px 0px 0px;
+        }
+
+        &:last-child {
+          border-radius: 0 0 10px 10px;
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/ProductPage.vue

@@ -77,7 +77,7 @@ export default defineComponent({
     const { products, addCartLoadingBtn } = storeToRefs(cartStore);
 
     onBeforeMount(async () => {
-      await getProduct(route.params.id);
+      await getProduct(route.params.id, availability.value);
     });
 
     watch(

src/stores/cart.js

@@ -147,11 +147,10 @@ export const useCartStore = defineStore("cart", () => {
       routeId.value = id;
       try {
         const params = transformOptionsToParams(options);
-
         const promises = [
-          apiBack.get(`products/${+id - 1}`),
-          apiBack.get(`products/${+id}`),
-          apiBack.get(`products/${+id + 1}`),
+          apiBack.get(`products/${+id - 1}`, { params }),
+          apiBack.get(`products/${+id}`, { params }),
+          apiBack.get(`products/${+id + 1}`, { params }),
         ];
         const results = await Promise.allSettled(promises);
         const [prev, current, next] = results.map((res) => {