addOrderToMovement

src/components/CProductCard/CProductCard.scss

@@ -13,7 +13,7 @@
 .prod_price {
   font-size: 1.25rem;
   @media (max-width: 718px) {
-    font-size: 1rem;
+    font-size: 1.15rem;
   }
 }
 
@@ -71,7 +71,7 @@
 .icone_prod{
   font-size: 1.25rem;
   @media (max-width: 718px) {
-    font-size: 1rem;
+    font-size: 1.15rem;
   }
 }
 

src/components/CProductCard/CProductCard.vue

@@ -1,28 +1,56 @@
 <template>
-  <div class="row items-start q-gutter-md">
+  <div class="row items-start q-gutter-sm">
-
     <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
 
-    <q-card :class="{
+    <q-card
+      :class="{
         'my-card-big': complete,
         'my-card-prod': !complete,
         'my-card-selected':
           myorder && myorder.quantity + myorder.quantitypreordered > 0,
-    }" v-if="!!myproduct && endload && !!myproduct.productInfo" bordered>
+      }"
+      v-if="!!myproduct && endload && !!myproduct.productInfo"
+      bordered
+    >
       <q-card-section horizontal class="image-section">
         <div class="image-container">
-          <q-img :src="`` + myproduct.productInfo.img" :alt="myproduct.productInfo.name" class="cursor-pointer img-pic"
+          <q-img
-          @click="complete ? toggleFullScreen : naviga(`/product/` + myproduct._id + '/' + cosa)"></q-img>
+            :src="`` + myproduct.productInfo.img"
-          <q-btn color="primary" round icon="fas fa-eye" class="absolute semi-transparent" size="md" 
+            :alt="myproduct.productInfo.name"
+            class="cursor-pointer img-pic"
+            @click="
+              complete
+                ? toggleFullScreen
+                : naviga(`/product/` + myproduct._id + '/' + cosa)
+            "
+          ></q-img>
+          <q-btn
+            color="primary"
+            round
+            icon="fas fa-eye"
+            class="absolute semi-transparent"
+            size="md"
             @click="toggleFullScreen"
-            style="bottom: -10px; right: 0px; transform: translateY(-50%);" />
+            style="bottom: -10px; right: 0px; transform: translateY(-50%)"
+          />
         </div>
-        <q-btn v-if="!complete" fab color="primary" icon="fas fa-info" class="absolute semi-transparent"
+        <q-btn
-          style="top: 0; right: 12px; transform: translateY(-90%)" :to="`/product/` + myproduct._id + '/' + cosa" />
+          v-if="!complete"
+          fab
+          color="primary"
+          icon="fas fa-info"
+          class="absolute semi-transparent"
+          style="top: 0; right: -15px; transform: translateY(-66%)"
+          :to="`/product/` + myproduct._id + '/' + cosa"
+        />
         <q-list>
           <q-item>
             <q-item-section avatar>
-              <q-icon color="moneygreen" name="fas fa-euro-sign" class="icone_prod" />
+              <q-icon
+                color="moneygreen"
+                name="fas fa-euro-sign"
+                class="icone_prod"
+              />
             </q-item-section>
 
             <q-item-section>
@@ -34,9 +62,16 @@
                   myproduct.after_price
                 }}</span>
               </q-item-label>
-              <q-item-label v-if="myproduct.scontisticas && myproduct.scontisticas.length > 0
+              <q-item-label
-                  ">
+                v-if="
-                <div class="prod_sconti" v-for="(sconti, index) of myproduct.scontisticas" :key="index">
+                  myproduct.scontisticas && myproduct.scontisticas.length > 0
+                "
+              >
+                <div
+                  class="prod_sconti"
+                  v-for="(sconti, index) of myproduct.scontisticas"
+                  :key="index"
+                >
                   {{ sconti.description }}
                 </div>
               </q-item-label>
@@ -48,24 +83,33 @@
             </q-item-section>
             <q-item-section v-if="myproduct.productInfo.weight">
               <q-item-label>
-                <span class="text-black q-ml-xs text-h8" v-if="myproduct.productInfo.unit">
+                <span
+                  class="text-black q-ml-xs text-h8"
+                  v-if="myproduct.productInfo.unit"
+                >
                   {{ myproduct.productInfo.weight }}
                   {{
                     tools.getUnitsMeasure(myproduct.productInfo.unit, true)
-                  }}</span>
+                  }}</span
+                >
               </q-item-label>
             </q-item-section>
           </q-item>
-          <q-item v-if="cosa === shared_consts.PROD.BOTTEGA ||
+          <q-item
+            v-if="
+              cosa === shared_consts.PROD.BOTTEGA ||
               (cosa === shared_consts.PROD.GAS &&
                 products.getQtyAvailable(myproduct) > 0)
-              " :clickable="tools.isManager()" @click="
+            "
+            :clickable="tools.isManager()"
+            @click="
               tools.isManager() &&
               myproduct.QuantitaOrdinateInAttesa &&
               myproduct.QuantitaOrdinateInAttesa > 0
                 ? visuListDisponibili()
                 : null
-      ">
+            "
+          >
             <q-item-section avatar>
               <q-icon color="green" name="fas fa-store" class="icone_prod" />
             </q-item-section>
@@ -79,9 +123,11 @@
                   {{ products.getQtyAvailable(myproduct) }}
                 </span>
                 <div class="prod_qtywarn">
-                  <div v-if="tools.isManager() &&
+                  <div
-                    !!myproduct.QuantitaOrdinateInAttesa
+                    v-if="
-                    ">
+                      tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
+                    "
+                  >
                     {{
                       t('ecomm.qta_in_attesa', {
                         qty: myproduct.QuantitaOrdinateInAttesa,
@@ -91,25 +137,34 @@
                 </div>
               </q-item-label>
             </q-item-section>
-            <q-item-section v-if="tools.isManager() &&
+            <q-item-section
+              v-if="
+                tools.isManager() &&
                 products.getQtyBloccataAvailable(myproduct) > 0
-                ">
+              "
+            >
               <q-item-section avatar>
-                <q-icon name="fas fa-store" style="padding-right: 16px !important" />
+                <q-icon
+                  name="fas fa-store"
+                  style="padding-right: 16px !important"
+                />
               </q-item-section>
-              <q-item-section v-if="tools.isManager() &&
+              <q-item-section
+                v-if="
+                  tools.isManager() &&
                   products.getQtyBloccataAvailable(myproduct) > 0
-                ">
+                "
+              >
                 <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
                 <q-item-label>
                   <span class="text-black q-ml-xs text-h8">
-                    {{ products.getQtyBloccataAvailable(myproduct) }}</span>
+                    {{ products.getQtyBloccataAvailable(myproduct) }}</span
+                  >
                 </q-item-label>
               </q-item-section>
             </q-item-section>
           </q-item>
         </q-list>
-
       </q-card-section>
 
       <q-card-section>
@@ -125,7 +180,10 @@
       <q-card-section v-if="complete && myproduct.productInfo.description">
         <div class="row items-center">
           <div class="text-title text-grey-9">
-            <span class="text-grey-7" v-html="myproduct.productInfo.description"></span>
+            <span
+              class="text-grey-7"
+              v-html="myproduct.productInfo.description"
+            ></span>
           </div>
         </div>
       </q-card-section>
@@ -136,18 +194,26 @@
         </div>
         <div class="row items-center">
           <div class="text-title text-grey-9">
-            <span class="text-grey-7" v-html="myproduct.productInfo.ingredienti"></span>
+            <span
+              class="text-grey-7"
+              v-html="myproduct.productInfo.ingredienti"
+            ></span>
           </div>
         </div>
       </q-card-section>
-      <q-card-section v-if="complete && myproduct.productInfo.valori_nutrizionali">
+      <q-card-section
+        v-if="complete && myproduct.productInfo.valori_nutrizionali"
+      >
         <div class="text-blue text-title row">
           <q-icon size="sm" name="fas fa-info" class="q-mr-sm" />
           {{ t('products.valori_nutrizionali') }}
         </div>
         <div class="row items-center">
           <div class="text-title text-grey-9">
-            <span class="text-grey-7" v-html="myproduct.productInfo.valori_nutrizionali"></span>
+            <span
+              class="text-grey-7"
+              v-html="myproduct.productInfo.valori_nutrizionali"
+            ></span>
           </div>
         </div>
       </q-card-section>
@@ -156,10 +222,19 @@
           <q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
           {{ t('products.ritiro_presso') }}:
         </div>
-        <div class="text-green-6 text-title row items-center q-my-sm centeritems">
+        <div
+          class="text-green-6 text-title row items-center q-my-sm centeritems"
+        >
           <div v-if="getnumstore() > 1">
-            <q-select :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'" outlined v-model="storeSelected"
+            <q-select
-              :options="getStorehouses()" :label="t('products.magazzino') + `:`" emit-value map-options>
+              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+              outlined
+              v-model="storeSelected"
+              :options="getStorehouses()"
+              :label="t('products.magazzino') + `:`"
+              emit-value
+              map-options
+            >
             </q-select>
           </div>
           <div v-else>
@@ -169,7 +244,9 @@
           </div>
         </div>
       </q-card-section>
-      <q-card-section v-if="complete && myproduct.producer && myproduct.producer.city">
+      <q-card-section
+        v-if="complete && myproduct.producer && myproduct.producer.city"
+      >
         <div>
           <div class="text-grey text-title row items-center q-mt-sm">
             <q-icon name="map" class="q-mr-xs" />
@@ -177,15 +254,19 @@
             <span class="text-blue q-ml-xs text-h8">
               {{ myproduct.producer.city }} ({{
                 myproduct.producer.region
-              }})</span>
+              }})</span
+            >
           </div>
         </div>
-        <div v-if="complete && myproduct.producer && myproduct.producer.name"
+        <div
-          class="text-grey text-title row items-center">
+          v-if="complete && myproduct.producer && myproduct.producer.name"
+          class="text-grey text-title row items-center"
+        >
           <q-icon name="place" class="q-mr-xs" />
           {{ t('products.producer') }}:
           <span class="text-black q-ml-xs text-h8">
-            {{ myproduct.producer.name }}</span>
+            {{ myproduct.producer.name }}</span
+          >
         </div>
       </q-card-section>
 
@@ -203,15 +284,20 @@
         </q-item>
       </q-card-section>
       <q-card-section v-if="isOrdGas()">
-        <q-item v-if="products.getQtyBookableAvailable(myproduct) > 0 ||
+        <q-item
+          v-if="
+            products.getQtyBookableAvailable(myproduct) > 0 ||
             myproduct.maxbookableGASQty > 0
-          " :clickable="tools.isManager()" @click="
+          "
+          :clickable="tools.isManager()"
+          @click="
             tools.isManager() &&
             myproduct.QuantitaPrenotateInAttesa &&
             myproduct.QuantitaPrenotateInAttesa > 0
               ? visuListBookable()
               : null
-    ">
+          "
+        >
           <q-item-section avatar>
             <q-icon color="blue" name="fas fa-edit" />
           </q-item-section>
@@ -225,8 +311,11 @@
                 {{ products.getQtyBookableAvailable(myproduct) }}
               </span>
               <div class="prod_qtywarn">
-                <div v-if="tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
+                <div
-                  ">
+                  v-if="
+                    tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
+                  "
+                >
                   {{
                     t('ecomm.qta_prenotate_in_attesa', {
                       qty: myproduct.QuantitaPrenotateInAttesa,
@@ -236,11 +325,17 @@
               </div>
             </q-item-label>
           </q-item-section>
-          <q-item-section v-if="tools.isManager() &&
+          <q-item-section
+            v-if="
+              tools.isManager() &&
               products.getQtyBloccataBookableAvailable(myproduct) > 0
-              ">
+            "
+          >
             <q-item-section avatar>
-              <q-icon name="fas fa-store" style="padding-right: 16px !important" />
+              <q-icon
+                name="fas fa-store"
+                style="padding-right: 16px !important"
+              />
             </q-item-section>
             <q-item-section>
               <q-item-label class="subtit_prod">
@@ -250,7 +345,8 @@
                 <span class="text-black q-ml-xs text-h8">
                   {{
                     products.getQtyBloccataBookableAvailable(myproduct)
-                  }}</span>
+                  }}</span
+                >
               </q-item-label>
             </q-item-section>
           </q-item-section>
@@ -264,13 +360,23 @@
             <q-item-label class="subtit_prod">
               {{ t('products.gasordine') }}
             </q-item-label>
-            <q-item-label v-if="tools.isArray(myproduct.gasordines) &&
+            <q-item-label
+              v-if="
+                tools.isArray(myproduct.gasordines) &&
                 myproduct.gasordines.length > 1 &&
                 (!myorder.idGasordine ||
                   myorder.quantity + myorder.quantitypreordered === 0)
-              ">
+              "
-              <q-select :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'" outlined v-model="gasordineSelected"
+            >
-                :options="getGasordines()" :label="t('products.select_gasordine') + `:`" emit-value map-options>
+              <q-select
+                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+                outlined
+                v-model="gasordineSelected"
+                :options="getGasordines()"
+                :label="t('products.select_gasordine') + `:`"
+                emit-value
+                map-options
+              >
               </q-select>
             </q-item-label>
             <q-item-label v-else>
@@ -281,26 +387,40 @@
           </q-item-section>
         </q-item>
 
-        <q-item v-if="tools.isManager() && products.getQtyBloccataAvailable(myproduct) > 0
+        <q-item
-            ">
+          v-if="
+            tools.isManager() && products.getQtyBloccataAvailable(myproduct) > 0
+          "
+        >
           <q-item-section>
             <q-item-section avatar>
-              <q-icon name="fas fa-store" style="padding-right: 16px !important" />
+              <q-icon
+                name="fas fa-store"
+                style="padding-right: 16px !important"
+              />
             </q-item-section>
-            <q-item-section v-if="tools.isManager() &&
+            <q-item-section
+              v-if="
+                tools.isManager() &&
                 products.getQtyBloccataAvailable(myproduct) > 0
-              ">
+              "
+            >
               <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
               <q-item-label>
                 <span class="text-black q-ml-xs text-h8">
-                  {{ products.getQtyBloccataAvailable(myproduct) }}</span>
+                  {{ products.getQtyBloccataAvailable(myproduct) }}</span
+                >
               </q-item-label>
             </q-item-section>
           </q-item-section>
         </q-item>
         <q-item v-if="isOrdGas() && myproduct.qtyToReachForGas > 0">
           <q-item-section avatar>
-            <q-icon v-if="getpercqtaraggiunta() < 1" color="orange" name="fas fa-lightbulb" />
+            <q-icon
+              v-if="getpercqtaraggiunta() < 1"
+              color="orange"
+              name="fas fa-lightbulb"
+            />
             <q-icon v-else color="green" name="fas fa-check" />
           </q-item-section>
 
@@ -330,8 +450,11 @@
                 <q-linear-progress size="10px" :value="getpercqtaraggiunta()" />
               </span>
               <div class="prod_qtywarn">
-                <div v-if="tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
+                <div
-                  ">
+                  v-if="
+                    tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
+                  "
+                >
                   {{
                     t('ecomm.qta_in_attesa', {
                       qty: myproduct.QuantitaOrdinateInAttesa,
@@ -341,19 +464,29 @@
               </div>
             </q-item-label>
           </q-item-section>
-          <q-item-section v-if="tools.isManager() &&
+          <q-item-section
+            v-if="
+              tools.isManager() &&
               products.getQtyBloccataAvailable(myproduct) > 0
-              ">
+            "
+          >
             <q-item-section avatar>
-              <q-icon name="fas fa-store" style="padding-right: 16px !important" />
+              <q-icon
+                name="fas fa-store"
+                style="padding-right: 16px !important"
+              />
             </q-item-section>
-            <q-item-section v-if="tools.isManager() &&
+            <q-item-section
+              v-if="
+                tools.isManager() &&
                 products.getQtyBloccataAvailable(myproduct) > 0
-              ">
+              "
+            >
               <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
               <q-item-label>
                 <span class="text-black q-ml-xs text-h8">
-                  {{ products.getQtyBloccataAvailable(myproduct) }}</span>
+                  {{ products.getQtyBloccataAvailable(myproduct) }}</span
+                >
               </q-item-label>
             </q-item-section>
           </q-item-section>
@@ -406,11 +539,23 @@
 
       <q-card-section>
         <div class="row justify-evenly">
-          <q-btn icon="fas fa-cart-arrow-down" :color="products.enableSubQty(myorder) ? 'negative' : 'grey'"
+          <q-btn
-            :disable="checkifCartDisable() || !products.enableSubQty(myorder)" rounded size="md" :label="t('products.subcart', {
+            icon="fas fa-cart-arrow-down"
+            :color="
+              checkifCartDisable() || !products.enableSubQty(myorder)
+                ? 'grey'
+                : 'negative'
+            "
+            :disable="checkifCartDisable() || !products.enableSubQty(myorder)"
+            rounded
+            size="md"
+            :label="
+              t('products.subcart', {
                 qta: products.qtaNextSub(myorder, myproduct),
               })
-              " @click="addtoCart(false)">
+            "
+            @click="addtoCart(false)"
+          >
           </q-btn>
 
           <q-field outlined dense class="q-mx-xs">
@@ -421,14 +566,35 @@
             </template>
           </q-field>
 
-          <q-btn icon-right="fas fa-cart-plus" color="positive" :disable="checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
+          <q-btn
-            " rounded size="md" :label="t('products.addcart', {
+            icon-right="fas fa-cart-plus"
+            :color="
+              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
+                ? 'grey'
+                : 'positive'
+            "
+            :disable="
+              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
+            "
+            rounded
+            size="md"
+            :label="
+              t('products.addcart', {
                 qta: products.qtaNextAdd(myorder, myproduct),
               })
-    " @click="addtoCart(true)">
+            "
+            @click="addtoCart(true)"
+          >
           </q-btn>
-          <q-btn v-if="myorder.quantity + myorder.quantitypreordered > 0" rounded icon="fas fa-shopping-cart"
+          <q-btn
-            color="primary" :label="t('ecomm.btn_cassa')" class="q-mb-xs q-mt-md" to="/checkout"></q-btn>
+            v-if="myorder.quantity + myorder.quantitypreordered > 0"
+            rounded
+            icon="fas fa-shopping-cart"
+            color="primary"
+            :label="t('ecomm.btn_cassa')"
+            class="q-mb-xs q-mt-md"
+            to="/checkout"
+          ></q-btn>
         </div>
       </q-card-section>
     </q-card>
@@ -442,7 +608,12 @@
           <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
         </q-toolbar>
         <q-card-section class="q-pa-xs inset-shadow">
-          <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
+          <q-markup-table
+            wrap-cells
+            bordered
+            separator="horizontal"
+            class="listaev__table"
+          >
             <thead>
               <th>Data</th>
               <th>Persona</th>
@@ -452,7 +623,11 @@
             </thead>
 
             <tbody>
-              <tr v-for="(ordcart, index) of listord" :key="index" class="listaev listaev__table">
+              <tr
+                v-for="(ordcart, index) of listord"
+                :key="index"
+                class="listaev listaev__table"
+              >
                 <td class="text-center">
                   <div>
                     {{ func_tools.getDateTimeShortStr(ordcart.created_at) }}
@@ -470,14 +645,22 @@
                 </td>
                 <td class="text-center">
                   <div v-for="(singleord, index) in ordcart.items" :key="index">
-                    <span v-if="singleord.order.idProduct === myproduct._id &&
+                    <span
+                      v-if="
+                        singleord.order.idProduct === myproduct._id &&
                         singleord.order.quantity > 0
-                      ">
+                      "
-                      {{ singleord.order.quantity }}</span>
+                    >
-                    <span v-if="singleord.order.idProduct === myproduct._id &&
+                      {{ singleord.order.quantity }}</span
+                    >
+                    <span
+                      v-if="
+                        singleord.order.idProduct === myproduct._id &&
                         singleord.order.quantitypreordered > 0
-                      ">
+                      "
-                      {{ singleord.order.quantitypreordered }}</span>
+                    >
+                      {{ singleord.order.quantitypreordered }}</span
+                    >
                   </div>
                 </td>
                 <td class="text-center">
@@ -499,14 +682,38 @@
       </q-card>
     </q-dialog>
 
-    <q-dialog v-model="isFullScreen" position="top" :maximized="true" class="q-pt-none">
+    <q-dialog
-      <div v-if="isFullScreen" class="fullscreen-container" @touchmove.prevent @click="toggleFullScreen">
+      v-model="isFullScreen"
-        <q-img :src="`` + myproduct.productInfo.img" :alt="myproduct.productInfo.name" :fit="tools.isMobile() ? 'fill' : 'none'"
+      position="top"
-          @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" ref="fullscreenImage" />
+      :maximized="true"
+      class="q-pt-none"
+    >
+      <div
+        v-if="isFullScreen"
+        class="fullscreen-container"
+        @touchmove.prevent
+        @click="toggleFullScreen"
+      >
+        <q-img
+          :src="`` + myproduct.productInfo.img"
+          :alt="myproduct.productInfo.name"
+          :fit="tools.isMobile() ? 'fill' : 'none'"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          ref="fullscreenImage"
+        />
         <br />
       </div>
       <div class="text-center">
-        <q-btn class="q-ma-md" @click="isFullScreen = false" label="Chiudi" rounded color="primary" icon="close"></q-btn>
+        <q-btn
+          class="q-ma-md"
+          @click="isFullScreen = false"
+          label="Chiudi"
+          rounded
+          color="primary"
+          icon="close"
+        ></q-btn>
       </div>
     </q-dialog>
   </div>

src/css/app.scss

@@ -388,9 +388,11 @@ h3 {
 }
 
 .my-card-prod {
+  transition: box-shadow 0.3s; /* Add a transition for a smooth effect */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
   width: 100%;
   max-width: 300px;
-  padding: 1rem 1rem;
+  padding: 0.5rem 0.5rem;
 
   box-shadow: none;
 

src/views/ecommerce/orderInfo/orderInfo.ts

@@ -300,11 +300,7 @@ export default defineComponent({
         title: 'Ordine'
       }).onOk(async () => {
 
-        let options = {
+        statusnow.value = await productStore.UpdateOrderCartStatus({ order_id: order._id, status })
-          // userIdStore: order.items ? order.items[0].order.storehouse.username : '',
-        }
-
-        statusnow.value = await productStore.UpdateOrderCartStatus({ order_id: order._id, status, options })
 
         if (statusnow.value === status) {
           order.status = statusnow.value

src/views/ecommerce/productsList/productsList.vue

@@ -53,7 +53,7 @@
       </div>
       <div class="container">
         <div
-          class="q-gutter-y-md column text-center q-mx-auto q-py-sm q-mb-sm"
+          class="column text-center q-mx-auto q-py-sm q-mb-sm"
           style="width: 350px; max-width: 100%"
         >
           <q-input
@@ -96,7 +96,7 @@
         </div>
         <div class="row justify-around">
           <div
-            class="q-pa-md row items-start"
+            class="q-pa-xs row items-start"
             v-for="(product, index) in getArrProducts"
             :key="index"
           >