other components... (2)

src/components/CProductCard/CProductCard.scss

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

src/components/CProductCard/CProductCard.ts

@@ -0,0 +1,187 @@
+import { defineComponent, ref, toRef, computed, PropType, watch } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useQuasar } from 'quasar'
+
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { IOrder, IProduct } from '@src/model'
+import { tools } from '@store/Modules/tools'
+import { useProducts } from '@store/Products'
+
+
+export default defineComponent({
+  name: 'CProductCard',
+  props: {
+    product: {
+      type: Object as PropType<IProduct | null>,
+      required: false,
+      default: null,
+    },
+    code: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    complete: {
+      type: Boolean,
+      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 }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const products = useProducts()
+
+    const myorder = toRef(props, 'order')
+
+    const myproduct = ref(<IProduct> {})
+
+    function iconWhishlist(order: IProduct) {
+      if (true) {
+        return 'far fa-heart'
+      } else {
+        return 'fas fa-heart'
+      }
+    }
+
+    function decqty() {
+      if (myorder.value.quantity) {
+        if (myorder.value.quantity > 0)
+          myorder.value.quantity--
+      }
+    }
+
+    function addqty() {
+      if (myorder.value.quantity) {
+        if (myorder.value.quantity < 10)
+          myorder.value.quantity++
+      }
+    }
+
+    function addtoCart() {
+
+      if (!userStore.isLogged) {
+        tools.showNeutralNotif($q, 'Devi prima accedere alla tua Area Personale')
+        globalStore.rightDrawerOpen = true
+        return false
+      }
+
+      // Controlla se esiste già nel carrello il prodotto
+      if (products.existProductInCart(myproduct.value._id)) {
+        tools.showNegativeNotif($q, 'Questo prodotto è stato già aggiunto al Carrello')
+      } else {
+        products.addToCart({ product: myproduct.value, order: props.order }).then((ris) => {
+          let strprod = 'prodotto'
+          if (myorder.value.quantity! > 1)
+            strprod = 'prodotti'
+          if (ris)
+            tools.showPositiveNotif($q, 'Hai Aggiunto ' + myorder.value.quantity + ' ' + strprod + ' al Carrello')
+          else
+            tools.showNegativeNotif($q, 'Errore durante l\'inserimento del prodotto sul carrello, riprovare.')
+        })
+      }
+    }
+
+    function getnumstore() {
+      if (myproduct.value.storehouses)
+        return myproduct.value.storehouses.length
+      else
+        return 0
+    }
+
+    function getSingleStorehouse() {
+      const mystore = myproduct.value.storehouses[0]
+      return mystore.name + ' (' + mystore.city + ')'
+    }
+
+    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++
+      })
+
+      // console.log('arraystore', myarr)
+      return myarr
+    }
+
+    function checkifCartDisable() {
+      return !myorder.value.idStorehouse
+    }
+
+    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
+      }
+
+      console.log('myproduct', myproduct, 'product', props.product)
+
+      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'
+    }
+
+    load()
+
+    return {
+      decqty,
+      addqty,
+      addtoCart,
+      iconWhishlist,
+      getmycardcl,
+      getclimg,
+      getnumstore,
+      getSingleStorehouse,
+      getStorehouses,
+      checkifCartDisable,
+      myproduct,
+      myorder,
+    }
+  }
+})

src/components/CProductCard/CProductCard.vue

@@ -0,0 +1,100 @@
+<template>
+  <q-card :class="getmycardcl" v-if="!!myproduct">
+    <q-img :src="`statics/` + 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"
+      />
+
+      <div class="row items-center centeritems">
+        <div class="text-h7 boldhigh">
+          {{ myproduct.name }}
+        </div>
+      </div>
+      <div v-if="complete" class="row items-center">
+        <div class="text-title text-grey-9">
+          <span class="text-grey-7" v-html="myproduct.description"></span>
+        </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"> {{ myproduct.producer.city }} ({{
+              myproduct.producer.region
+            }})</span>
+          </div>
+
+        </div>
+        <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"> {{ myproduct.producer.name }}</span>
+        </div>
+      </div>
+
+      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
+
+      <div class="row q-mb-sm no-wrap items-center centeritems">
+        <div class="text-price no-wrap">
+          <span v-if="!!myproduct.price">€ {{ myproduct.price.toFixed(2) }}</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">
+          <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 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 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>
+
+    <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(myproduct)" flat color="primary" rounded label="Lista Desideri">
+      </q-btn>
+      -->
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts" src="./CProductCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CProductCard.scss';
+</style>

src/components/CProductCard/index.ts

@@ -0,0 +1 @@
+export {default as CProductCard} from './CProductCard.vue'