aggiornamento visualizzazione Ordini e Carrello

2023-12-09 19:38:30 +01:00
parent 2b6411eb77
commit 59c03f28f2
13 changed files with 371 additions and 226 deletions
--- a/src/components/CProductCard/CProductCard.ts
+++ b/src/components/CProductCard/CProductCard.ts
@@ -31,17 +31,6 @@ export default defineComponent({
      required: false,
      default: false,
    },
-    order: {
-      type: Object as PropType<IOrder>,
-      required: false,
-      default: () => {
-        return {
-          idapp: process.env.APP_ID,
-          quantity: 1,
-          idStorehouse: ''
-        }
-      },
-    },
  },
  components: { CTitleBanner, CCardState, CCopyBtn },
  setup(props, { emit }) {
@@ -51,9 +40,13 @@ export default defineComponent({
    const globalStore = useGlobalStore()
    const products = useProducts()

-    const myorder = toRef(props, 'order')
+    const myorder = ref(<IOrder>{
+      idapp: process.env.APP_ID,
+      quantity: 1,
+      idStorehouse: ''
+    })

-    const myproduct = ref(<IProduct> {})
+    const myproduct = ref(<IProduct>{})

    const storeSelected = ref('')

@@ -75,7 +68,7 @@ export default defineComponent({
        myorder.value.quantity++
    }

-    function addtoCart() {
+    function addtoCart(add: boolean) {

      if (!userStore.isLogged) {
        tools.showNeutralNotif($q, t('ecomm.area_personale'))
@@ -83,113 +76,127 @@ export default defineComponent({
        return false
      }

-      // Controlla se esiste già nel carrello il prodotto
-      if (products.existProductInCart(myproduct.value._id)) {
-        tools.showNegativeNotif($q, t('ecomm.already_in_cart'))
-      } else {
-        products.addToCart({ product: myproduct.value, order: props.order }).then((ris) => {
-          let strprod = t('ecomm.prodotto')
-          if (myorder.value.quantity > 1)
-            strprod = t('ecomm.prodotti')
-          if (ris)
-            tools.showPositiveNotif($q, t('ecomm.haveadded') + ' ' + myorder.value.quantity + ' ' + strprod + ' ' + t('ecomm.tocart'))
-          else
-            tools.showNegativeNotif($q, t('ecomm.error_cart'))
-        })
-      }
+      products.addToCart({ product: myproduct.value, order: myorder.value, addqty: add }).then((ris) => {
+        let strprod = t('ecomm.prodotto')
+        if (myorder.value.quantity > 1 || myorder.value.quantity === 0)
+          strprod = t('ecomm.prodotti')
+
+        let msg = ''
+        if (ris === null)
+          msg = t('ecomm.error_cart')
+        else {
+          if (myorder.value.quantity === 0) {
+            msg = t('ecomm.prodotto_tolto')
+          } else {
+            msg = t('ecomm.prod_sul_carrello', { strprod, qty: myorder.value.quantity })
+          }
+
+        }
+
+        if (ris === null || myorder.value.quantity === 0)
+          tools.showNotif($q, msg)
+        else
+          tools.showPositiveNotif($q, msg)
+
+    })
    }

-    function getnumstore() {
-      if (myproduct.value.storehouses)
-        return myproduct.value.storehouses.length
-      else
-        return 0
-    }
+function getnumstore() {
+  if (myproduct.value.storehouses)
+    return myproduct.value.storehouses.length
+  else
+    return 0
+}

-    function getSingleStorehouse() {
-      const mystore = myproduct.value.storehouses[0]
-      if (mystore)
-        return mystore.name + ' (' + mystore.city + ')'
-      else
-        return ''
-    }
+function getSingleStorehouse() {
+  const mystore = myproduct.value.storehouses[0]
+  if (mystore)
+    return mystore.name + ' (' + mystore.city + ')'
+  else
+    return ''
+}

-    function getStorehouses() {
+function getStorehouses() {

-      const myarr: any = []
-      let ind = 1
-      myproduct.value.storehouses.forEach((store) => {
-        myarr.push(
-          {
-            id: ind,
-            label: store.name + ' (' + store.city + ')',
-            value: store._id
-          })
-
-        ind++
+  const myarr: any = []
+  let ind = 1
+  myproduct.value.storehouses.forEach((store) => {
+    myarr.push(
+      {
+        id: ind,
+        label: store.name + ' (' + store.city + ')',
+        value: store._id
      })

-      // console.log('arraystore', myarr)
-      return myarr
-    }
+    ind++
+  })

-    function checkifCartDisable() {
-      return !myorder.value.idStorehouse
-    }
+  // console.log('arraystore', myarr)
+  return myarr
+}

-    watch(() => props.code, (newval, oldval) => {
-      console.log('change code')
-      load()
-    })
+function checkifCartDisable() {
+  return !myorder.value.idStorehouse
+}

-    watch(() => storeSelected.value, (newval, oldval) => {
-      myorder.value.idStorehouse = newval
-    })
+watch(() => props.code, (newval, oldval) => {
+  console.log('change code')
+  load()
+})

-    async function load() {
-      // console.log('created Cproductcard', code)
-      if (props.code) {
-        myproduct.value = await products.loadProduct({ code: props.code })
-      } else {
-        // @ts-ignore
-        myproduct.value = props.product
-      }
+watch(() => storeSelected.value, (newval, oldval) => {
+  myorder.value.idStorehouse = newval
+})

-      console.log('myproduct', myproduct, 'product', props.product)
+async function load() {
+  // console.log('created Cproductcard', code)
+  if (props.code) {
+    myproduct.value = await products.loadProduct({ code: props.code })
+  } else {
+    // @ts-ignore
+    myproduct.value = props.product
+  }

-      if (!!myproduct.value) {
-        if (myproduct.value.storehouses.length === 1) {
-          myorder.value.idStorehouse = myproduct.value.storehouses[0]._id
-        }
-      }
-    }
+  console.log('myproduct', myproduct, 'product', props.product)

-    function getmycardcl() {
-      return (props.complete) ? 'my-card-big' : 'my-card'
-    }
-
-    function getclimg() {
-      return (props.complete) ? 'myimgtitle centermydiv' : 'centermydiv'
-    }
-
-    load()
-
-    return {
-      decqty,
-      addqty,
-      addtoCart,
-      iconWhishlist,
-      getmycardcl,
-      getclimg,
-      getnumstore,
-      getSingleStorehouse,
-      getStorehouses,
-      checkifCartDisable,
-      myproduct,
-      myorder,
-      tools,
-      t,
-      storeSelected,
+  if (!!myproduct.value) {
+    if (myproduct.value.storehouses.length === 1) {
+      myorder.value.idStorehouse = myproduct.value.storehouses[0]._id
    }
  }
+}
+
+function getmycardcl() {
+  return (props.complete) ? 'my-card-big' : 'my-card'
+}
+
+function getclimg() {
+  return (props.complete) ? 'myimgtitle centermydiv' : 'centermydiv'
+}
+
+function enableSubQty() {
+  return myorder.value ? myorder.value.quantity > 0 : true
+}
+
+load()
+
+return {
+  decqty,
+  addqty,
+  addtoCart,
+  iconWhishlist,
+  getmycardcl,
+  getclimg,
+  getnumstore,
+  getSingleStorehouse,
+  getStorehouses,
+  checkifCartDisable,
+  myproduct,
+  myorder,
+  tools,
+  t,
+  storeSelected,
+  enableSubQty,
+}
+  }
 })
--- a/src/components/CProductCard/CProductCard.vue
+++ b/src/components/CProductCard/CProductCard.vue
@@ -1,14 +1,23 @@
 <template>
  <q-card :class="getmycardcl()" v-if="!!myproduct">
-    <div v-if="myorder">
-      myorder: {{ myorder }}
-    </div>
+    <div v-if="myorder">myorder: {{ myorder }}</div>

-    <q-img :src="`` + myproduct.img" :alt="myproduct.name" :class="getclimg()"></q-img>
+    <q-img
+      :src="`` + myproduct.img"
+      :alt="myproduct.name"
+      :class="getclimg()"
+    ></q-img>

    <q-card-section>
-      <q-btn v-if="!complete" fab color="primary" icon="fas fa-info" class="absolute"
-        style="top: 0; right: 12px; transform: translateY(-50%);" :to="`/product/` + myproduct.code" />
+      <q-btn
+        v-if="!complete"
+        fab
+        color="primary"
+        icon="fas fa-info"
+        class="absolute"
+        style="top: 0; right: 12px; transform: translateY(-50%)"
+        :to="`/product/` + myproduct.code"
+      />

      <div class="row items-center centeritems">
        <div class="text-h7 boldhigh">
@@ -24,20 +33,34 @@
        <div v-if="complete && myproduct.producer.city">
          <div class="text-grey text-title row items-center q-mt-sm">
            <q-icon name="map" class="q-mr-xs" />
-            {{ t('products.origine') }}: <span class="text-blue q-ml-xs text-h8"> {{ myproduct.producer.city }} ({{
-              myproduct.producer.region
-            }})</span>
+            {{ t('products.origine') }}:
+            <span class="text-blue q-ml-xs text-h8">
+              {{ myproduct.producer.city }} ({{
+                myproduct.producer.region
+              }})</span
+            >
          </div>
-
        </div>
-        <div v-if="complete && myproduct.producer.name" class="text-grey text-title row items-center">
+        <div
+          v-if="complete && 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>
+          {{ t('products.producer') }}:
+          <span class="text-black q-ml-xs text-h8">
+            {{ myproduct.producer.name }}</span
+          >
        </div>
-        <div v-if="complete && myproduct.weight" class="text-grey text-title row items-center">
+        <div
+          v-if="complete && myproduct.weight"
+          class="text-grey text-title row items-center"
+        >
          <q-icon name="fas fa-balance-scale" class="q-mr-xs" />
-          {{ t('products.weight') }}: <span class="text-black q-ml-xs text-h8"> {{ myproduct.weight }} {{
-            tools.getUnitsMeasure(myproduct.unit, true) }}</span>
+          {{ t('products.weight') }}:
+          <span class="text-black q-ml-xs text-h8">
+            {{ myproduct.weight }}
+            {{ tools.getUnitsMeasure(myproduct.unit, true) }}</span
+          >
        </div>
      </div>

@@ -45,33 +68,83 @@

      <div class="row q-mb-sm no-wrap items-center centeritems">
        <div class="text-price no-wrap">
-          <span v-if="!!myproduct.price">€ {{ myproduct.price ? myproduct.price.toFixed(2) : 0 }}</span>
-          <span v-if="!!myproduct.after_price">{{ myproduct.after_price }}</span>
+          <span v-if="!!myproduct.price"
+            >€ {{ myproduct.price ? myproduct.price.toFixed(2) : 0 }}</span
+          >
+          <span v-if="!!myproduct.after_price">{{
+            myproduct.after_price
+          }}</span>
        </div>
      </div>
      <div class="row q-mb-sm no-wrap items-center centeritems">
-        <q-btn round size="xs" text-color="grey" icon="fas fa-minus" @click="decqty()"></q-btn>
-        <q-field outlined dense style="width: 40px; height: 30px;" class="q-mx-xs">
+        <!--<q-btn
+          round
+          size="xs"
+          text-color="grey"
+          icon="fas fa-minus"
+          @click="decqty()"
+        ></q-btn>-->
+
+        <q-btn
+          icon="fas fa-cart-arrow-down"
+          :color="enableSubQty() ? 'negative': 'grey'"
+          :disable="checkifCartDisable() || !enableSubQty()"
+          rounded
+          size="md"
+          :label="t('products.subcart', { qta: 1 })"
+          @click="addtoCart(false)"
+        >
+        </q-btn>
+
+        <q-field
+          outlined
+          dense
+          style="width: 40px; height: 30px"
+          class="q-mx-xs"
+        >
          <template v-slot:control>
-            <div class="self-center no-outline" tabindex="0">{{ order.quantity }}</div>
+            <div class="self-center no-outline" tabindex="0">
+              {{ myorder.quantity }}
+            </div>
          </template>
        </q-field>
-        <q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty()"></q-btn>
+
+        <!--<q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty()"></q-btn>-->
+        <q-btn
+          icon-right="fas fa-cart-plus"
+          color="positive"
+          :disable="checkifCartDisable()"
+          rounded
+          size="md"
+          :label="t('products.addcart', { qta: 1 })"
+          @click="addtoCart(true)"
+        >
+        </q-btn>
      </div>
      <div v-if="complete || getnumstore() > 1">
        <div class="text-blue text-title row items-center q-mr-md centeritems">
          <q-icon size="sm" name="fas fa-shipping-fast" 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"
-              :options="getStorehouses()" :label="t('products.magazzino') + `:`" emit-value map-options>
+            <q-select
+              :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>
-            <span class="text-title text-center">{{ getSingleStorehouse() }}</span>
+            <span class="text-title text-center">{{
+              getSingleStorehouse()
+            }}</span>
          </div>
        </div>
      </div>
@@ -80,9 +153,6 @@
    <q-separator />

    <q-card-actions vertical align="center">
-      <q-btn icon="fas fa-cart-plus" color="primary" :disable="checkifCartDisable()" rounded size="md"
-        :label="t('products.addcart', {qta: order.quantity})" @click="addtoCart()">
-      </q-btn>
      <!--
      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
      </q-btn>
--- a/src/components/CSingleCart/CSingleCart.vue
+++ b/src/components/CSingleCart/CSingleCart.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="q-pa-xs q-gutter-xs">

-    <div class="row items-center justify-evenly no-wrap">
+    <div v-if="order.product" class="row items-center justify-evenly no-wrap">
      <div class="col-2 text-h6 ellipsis">
        <img
-          v-if="true" :src="`` + order.product.img" :alt="order.product.name" :class="myimgclass">
+          v-if="order.product && order.product.img" :src="`` + order.product.img" :alt="order.product.name" :class="myimgclass">
      </div>
      <div class="col-4 q-ml-xs">
        {{ order.product.name }}