Ordini

src/components/CProductCard/CProductCard.ts

@@ -17,7 +17,10 @@ import { Products, UserStore } from '@store'
 
 export default class CProductCard extends MixinBase {
   public $t
-  @Prop({ required: true }) public product: IProduct
+  @Prop({ required: false, default: null }) public product: IProduct
+  public myproduct: IProduct = null
+  @Prop({ required: false, default: '' }) public code: string
+  @Prop({ required: false, default: false }) public complete: boolean
   @Prop({
     required: false,
     type: Object,
@@ -50,11 +53,17 @@ export default class CProductCard extends MixinBase {
 
   public addtoCart() {
 
+    if (!UserStore.state.isLogged) {
+      tools.showNeutralNotif(this.$q, 'Devi prima accedere alla tua Area Personale')
+      GlobalStore.state.rightDrawerOpen = true
+      return false
+    }
+
     // Controlla se esiste già nel carrello il prodotto
-    if (Products.getters.existProductInCart(this.product._id)) {
+    if (Products.getters.existProductInCart(this.myproduct._id)) {
       tools.showNegativeNotif(this.$q, 'Questo prodotto è stato già aggiunto al Carrello')
     } else {
-      Products.actions.addToCart({ product: this.product, order: this.order }).then((ris) => {
+      Products.actions.addToCart({ product: this.myproduct, order: this.order }).then((ris) => {
         let strprod = 'prodotto'
         if (this.order.quantity > 1)
           strprod = 'prodotti'
@@ -67,14 +76,14 @@ export default class CProductCard extends MixinBase {
   }
 
   public getnumstore() {
-    if (!!this.product.storehouses)
-      return this.product.storehouses.length
+    if (!!this.myproduct.storehouses)
+      return this.myproduct.storehouses.length
     else
       return 0
   }
 
   public getSingleStorehouse() {
-    const mystore = this.product.storehouses[0]
+    const mystore = this.myproduct.storehouses[0]
     return mystore.name + ' (' + mystore.city + ')'
   }
 
@@ -82,7 +91,7 @@ export default class CProductCard extends MixinBase {
 
     const myarr = []
     let ind = 1
-    this.product.storehouses.forEach((store) => {
+    this.myproduct.storehouses.forEach((store) => {
       myarr.push(
         {
           id: ind,
@@ -101,13 +110,36 @@ export default class CProductCard extends MixinBase {
     return !this.order.idStorehouse
   }
 
-  public infoproduct() {
 
+  @Watch('code')
+  public codechanged(value) {
+    console.log('change code')
+    this.load()
   }
 
-  public created() {
-    if (this.product.storehouses.length === 1) {
-      this.order.idStorehouse = this.product.storehouses[0]._id
+  public async load() {
+    // console.log('created Cproductcard', this.code)
+    if (this.code) {
+      this.myproduct = await Products.actions.loadProduct({ code: this.code })
+    } else {
+      this.myproduct = this.product
+    }
+    // console.log('this.myproduct', this.myproduct)
+
+    if (!!this.myproduct) {
+      if (this.myproduct.storehouses.length === 1) {
+        this.order.idStorehouse = this.myproduct.storehouses[0]._id
+      }
     }
   }
+
+  public async created() {
+    this.load()
+  }
+
+  get getmycardcl() {
+    return (this.complete) ? 'my-card-big' : 'my-card'
+  }
+
+
 }

src/components/CProductCard/CProductCard.vue

@@ -1,50 +1,49 @@
 <template>
-  <q-card class="my-card">
-    <img :src="`statics/` + product.img" :alt="product.name">
+  <q-card :class="getmycardcl" v-if="!!myproduct">
+    <img :src="`statics/` + myproduct.img" :alt="myproduct.name">
 
     <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%);"
-        @click="infoproduct"
+        :to="`/product/`+ myproduct.code"
       />
 
-      <div class="row items-center">
-        <div class="text-h7">
-          {{ product.name }}
+      <div class="row items-center centeritems">
+        <div class="text-h7 boldhigh">
+          {{ myproduct.name }}
         </div>
       </div>
-      <div class="row items-center">
+      <div v-if="complete" class="row items-center">
         <div class="text-title text-grey-9">
-          <span class="text-grey-7">{{ product.description }}</span>
+          <span class="text-grey-7">{{ myproduct.description }}</span>
         </div>
       </div>
       <div>
-        <div>
+        <div v-if="complete">
           <div class="text-grey text-title row items-center q-mt-sm">
             <q-icon name="map" class="q-mr-xs"/>
-            Origine: <span class="text-blue q-ml-xs text-h8"> {{ product.producer.city }} ({{
-              product.producer.region
+            Origine: <span class="text-blue q-ml-xs text-h8"> {{ myproduct.producer.city }} ({{
+              myproduct.producer.region
             }})</span>
           </div>
 
         </div>
-        <div class="text-grey text-title row items-center">
+        <div v-if="complete" class="text-grey text-title row items-center">
           <q-icon name="place" class="q-mr-xs"/>
-          Produttore: <span class="text-black q-ml-xs text-h8"> {{ product.producer.name }}</span>
+          Produttore: <span class="text-black q-ml-xs text-h8"> {{ myproduct.producer.name }}</span>
         </div>
       </div>
 
-      <!--<q-rating v-model="product.stars" :max="5" size="32px" readonly/>-->
-    </q-card-section>
+      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
 
-    <q-card-section class="q-pt-none">
       <div class="row q-mb-sm no-wrap items-center centeritems">
-        <div class="text-price q-mr-md no-wrap">
-          € {{ product.price.toFixed(2) }}
+        <div class="text-price no-wrap">
+          € {{ myproduct.price.toFixed(2) }}
         </div>
       </div>
       <div class="row q-mb-sm no-wrap items-center centeritems">
@@ -56,21 +55,23 @@
         </q-field>
         <q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty"></q-btn>
       </div>
-      <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"/>
-        Ritiro presso:
-      </div>
-      <div class="text-green-6 text-title row items-center q-my-sm centeritems">
-
-        <div v-if="getnumstore() > 1">
-          <q-select
-            outlined v-model="order.idStorehouse"
-            :options="getStorehouses()"
-            label="Magazzino:" emit-value map-options>
-          </q-select>
+      <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"/>
+          Ritiro presso:
         </div>
-        <div v-else>
-          <span class="text-title text-center">{{ getSingleStorehouse() }}</span>
+        <div class="text-green-6 text-title row items-center q-my-sm centeritems">
+
+          <div v-if="getnumstore() > 1">
+            <q-select
+              outlined v-model="order.idStorehouse"
+              :options="getStorehouses()"
+              label="Magazzino:" emit-value map-options>
+            </q-select>
+          </div>
+          <div v-else>
+            <span class="text-title text-center">{{ getSingleStorehouse() }}</span>
+          </div>
         </div>
       </div>
     </q-card-section>
@@ -78,9 +79,10 @@
     <q-separator/>
 
     <q-card-actions vertical align="center">
-      <q-btn icon="fas fa-cart-plus" color="primary" :disable="checkifCartDisable" rounded size="md" label="Aggiungi al Carrello" @click="addtoCart">
+      <q-btn icon="fas fa-cart-plus" color="primary" :disable="checkifCartDisable" rounded size="md"
+             label="Aggiungi al Carrello" @click="addtoCart">
       </q-btn>
-      <q-btn :icon="iconWhishlist(product)" flat color="primary" rounded label="Lista Desideri">
+      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
       </q-btn>
     </q-card-actions>
   </q-card>