Carrello Spesa

src/components/CProductCard/CProductCard.scss

@@ -1,3 +1,12 @@
 .card .product-image {
   height: 300px;
 }
+
+.text-title {
+  font-size: 0.9rem;
+}
+
+.centeritems{
+  place-content: center;
+}
+

src/components/CProductCard/CProductCard.ts

@@ -7,7 +7,8 @@ import { GlobalStore } from '../../store'
 import { CCopyBtn } from '../CCopyBtn'
 
 import { date } from 'quasar'
-import { IProduct } from '@src/model'
+import { IOrder, IProduct } from '@src/model'
+import { Products, UserStore } from '@store'
 
 @Component({
   name: 'CProductCard',
@@ -15,7 +16,98 @@ import { IProduct } from '@src/model'
 })
 
 export default class CProductCard extends MixinBase {
-  @Prop({ required: true }) public product: IProduct
   public $t
+  @Prop({ required: true }) public product: IProduct
+  @Prop({
+    required: false,
+    type: Object,
+    default() {
+      return {
+        idapp: process.env.APP_ID,
+        quantity: 1,
+        idStorehouse: ''
+      }
+    }
+  }) public order: IOrder
 
+  public iconWhishlist(order: IProduct) {
+    if (true) {
+      return 'far fa-heart'
+    } else {
+      return 'fas fa-heart'
+    }
+  }
+
+  public decqty() {
+    if (this.order.quantity > 0)
+      this.order.quantity--
+  }
+
+  public addqty() {
+    if (this.order.quantity < 10)
+      this.order.quantity++
+  }
+
+  public addtoCart() {
+
+    // Controlla se esiste già nel carrello il prodotto
+    if (Products.getters.existProductInCart(this.product._id)) {
+      tools.showNegativeNotif(this.$q, 'Questo prodotto è stato già aggiunto al Carrello')
+    } else {
+      Products.actions.addToCart({ product: this.product, order: this.order }).then((ris) => {
+        let strprod = 'prodotto'
+        if (this.order.quantity > 1)
+          strprod = 'prodotti'
+        if (ris)
+          tools.showPositiveNotif(this.$q, 'Hai Aggiunto ' + this.order.quantity + ' ' + strprod + ' al Carrello')
+        else
+          tools.showNegativeNotif(this.$q, 'Errore durante l\'inserimento del prodotto sul carrello, riprovare.')
+      })
+    }
+  }
+
+  public getnumstore() {
+    if (!!this.product.storehouses)
+      return this.product.storehouses.length
+    else
+      return 0
+  }
+
+  public getSingleStorehouse() {
+    const mystore = this.product.storehouses[0]
+    return mystore.name + ' (' + mystore.city + ')'
+  }
+
+  public getStorehouses() {
+
+    const myarr = []
+    let ind = 1
+    this.product.storehouses.forEach((store) => {
+      myarr.push(
+        {
+          id: ind,
+          label: store.name + ' (' + store.city + ')',
+          value: store._id
+        })
+
+      ind++
+    })
+
+    // console.log('arraystore', myarr)
+    return myarr
+  }
+
+  get checkifCartDisable() {
+    return !this.order.idStorehouse
+  }
+
+  public infoproduct() {
+
+  }
+
+  public created() {
+    if (this.product.storehouses.length === 1) {
+      this.order.idStorehouse = this.product.storehouses[0]._id
+    }
+  }
 }

src/components/CProductCard/CProductCard.vue

@@ -1,53 +1,89 @@
 <template>
-  <div>
-    <div class="q-pa-md row items-start q-gutter-md">
+  <q-card class="my-card">
+    <img :src="`statics/` + product.img" :alt="product.name">
 
-      <q-card class="my-card">
-        <q-img :src="`statics/` + product.img">
-        </q-img>
+    <q-card-section>
+      <q-btn
+        fab
+        color="primary"
+        icon="fas fa-info"
+        class="absolute"
+        style="top: 0; right: 12px; transform: translateY(-50%);"
+        @click="infoproduct"
+      />
 
-        <q-card-section>
-          <q-btn
-            fab
-            color="primary"
-            icon="fas fa-cart-plus"
-            class="absolute"
-            style="top: 0; right: 12px; transform: translateY(-50%);"
-          />
-
-          <div class="row no-wrap items-center">
-            <div class="col text-h6 ellipsis">
-              {{ product.name }}
-            </div>
-            <div class="col-auto text-grey text-caption q-pt-md row no-wrap items-center">
-              <q-icon name="place"/>
-              250 ft
-            </div>
+      <div class="row items-center">
+        <div class="text-h7">
+          {{ product.name }}
+        </div>
+      </div>
+      <div class="row items-center">
+        <div class="text-title text-grey-9">
+          <span class="text-grey-7">{{ product.description }}</span>
+        </div>
+      </div>
+      <div>
+        <div>
+          <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
+            }})</span>
           </div>
 
-          <q-rating v-model="stars" :max="5" size="32px"/>
-        </q-card-section>
+        </div>
+        <div 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>
+        </div>
+      </div>
 
-        <q-card-section class="q-pt-none">
-          <div class="text-subtitle1">
-            € {{ product.price }}
-          </div>
-          <div class="text-caption text-grey">
-            {{ product.description }}
-          </div>
-        </q-card-section>
+      <!--<q-rating v-model="product.stars" :max="5" size="32px" readonly/>-->
+    </q-card-section>
 
-        <q-separator/>
+    <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>
+      </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">
+          <template v-slot:control>
+            <div class="self-center no-outline" tabindex="0">{{ order.quantity }}</div>
+          </template>
+        </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">
 
-        <q-card-actions>
-          <q-btn flat round icon="event"/>
-          <q-btn flat color="primary">
-            Aggiungi al Carrello
-          </q-btn>
-        </q-card-actions>
-      </q-card>
-    </div>
-  </div>
+        <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>
+    </q-card-section>
+
+    <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>
+      <q-btn :icon="iconWhishlist(product)" flat color="primary" rounded label="Lista Desideri">
+      </q-btn>
+    </q-card-actions>
+  </q-card>
 </template>
 
 <script lang="ts" src="./CProductCard.ts">