Integrazione ECommerce (conversione)

src/views/ecommerce/checkOut/checkOut.scss

@@ -0,0 +1,5 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}

src/views/ecommerce/checkOut/checkOut.ts

@@ -0,0 +1,178 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { SingleProject } from '../../../components/projects/SingleProject/index'
+import { CTodo } from '../../../components/todos/CTodo'
+
+import { CProgress } from '../../../components/CProgress'
+import { CDate } from '../../../components/CDate'
+import { Action } from 'vuex'
+import Products from '@src/store/Modules/Products'
+import { CSingleCart } from '../../../components/CSingleCart'
+import { CTitleBanner } from '@components'
+import { tools } from '@src/store/Modules/tools'
+import { ICart } from '@src/model'
+import MixinBase from '@src/mixins/mixin-base'
+import { shared_consts } from '@src/common/shared_vuejs'
+
+const namespace: string = 'Products'
+
+@Component({
+  name: 'checkOut',
+  components: { SingleProject, CProgress, CTodo, CDate, CSingleCart, CTitleBanner },
+  filters: {
+    capitalize(value) {
+      if (!value) {
+        return ''
+      }
+      value = value.toString()
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    }
+  }
+})
+
+export default class CheckOut extends MixinBase {
+  public $q: any
+  public mycart: ICart = {}
+  public myrec: any[]
+  public note: string = ''
+  public statusnow: number = shared_consts.OrderStatus.NONE
+
+  public conferma_carrello: boolean = false
+  public conferma_ordine: boolean = false
+
+  /*public $refs: {
+    singleproject: SingleProject[],
+    ctodo: CTodo
+  }*/
+
+  get getItemsCart() {
+    const cart = Products.getters.getCart()
+    return cart.items || null
+  }
+
+  get getNumItems() {
+    const cart = Products.getters.getCart()
+    if (!!cart.items)
+      return cart.items.length || 0
+    else
+      return 0
+  }
+
+  get getCart() {
+    return Products.getters.getCart()
+  }
+
+  get getNote() {
+    const cart = Products.getters.getCart()
+    return cart.note
+  }
+
+  public change_field(fieldname) {
+    if (this.myrec[fieldname] !== this[fieldname]) {
+      this.myrec[fieldname] = this[fieldname]
+
+      const mydata = {
+        [fieldname]: this.myrec[fieldname]
+      }
+
+      const aggiorna = fieldname !== 'status'
+      tools.saveFieldToServer(this, 'carts', this.mycart._id, mydata, aggiorna)
+    }
+  }
+
+  get myTotalPrice() {
+    if (Products.state.cart && Products.state.cart.totalPrice) {
+      return Products.state.cart.totalPrice.toFixed(2)
+    } else {
+      return 0
+    }
+  }
+
+  get myTotalQty() {
+    if (Products.state.cart) {
+      return Products.state.cart.totalQty
+    } else {
+      return 0
+    }
+  }
+
+  public async mounted() {
+    // Products.actions.loadCart()
+    this.load()
+  }
+
+  public async load() {
+    this.mycart = this.getCart
+    this.myrec = Object.keys(this.mycart)
+    this.note = this.mycart.note
+
+    if (this.mycart)
+      this.statusnow = await Products.actions.UpdateStatusCart({ cart_id: this.mycart._id, status })
+
+    console.log('myrec', this.myrec)
+  }
+
+  public CanBeShipped() {
+    return Products.state.cart.items.filter((rec) => rec.order.product.canBeShipped).length
+  }
+
+  public CanBeBuyOnline() {
+    return Products.state.cart.items.filter((rec) => rec.order.product.canBeBuyOnline).length
+  }
+
+  get getnumsteps() {
+    let numsteps = 1
+
+    if (this.CanBeShipped())
+      numsteps++
+    if (this.CanBeBuyOnline())
+      numsteps++
+
+    return numsteps
+  }
+
+  public docheckout() {
+
+    // Può essere spedito?
+
+    if (this.CanBeShipped()) {
+      // mostra form di spedizione
+    }
+
+    if (this.CanBeBuyOnline()) {
+      // mostra form di acquisto Online
+    }
+  }
+
+  get nextstep() {
+    return 0
+  }
+
+  public completeOrder() {
+    this.$q.dialog({
+      message: 'Confermare l\'ordine di acquisto di ' + this.myTotalQty + ' prodotti ?',
+      ok: {
+        label: this.$t('dialog.yes'),
+        push: true
+      },
+      cancel: {
+        label: this.$t('dialog.cancel')
+      },
+      title: 'Ordine'
+    }).onOk(async () => {
+      const status = shared_consts.OrderStatus.CHECKOUT_SENT
+      this.statusnow = await Products.actions.UpdateStatusCart({ cart_id: this.mycart._id, status })
+
+      if (this.statusnow === status) {
+        tools.showPositiveNotif(this.$q, 'Ordine Confermato')
+        setTimeout(() => {
+          this.$router.push('/orderinfo')
+        }, 2000)
+      }
+      // this.change_field('status')
+      // this.change_field('status')
+    })
+  }
+
+}

src/views/ecommerce/checkOut/checkOut.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-page>
+    <CTitleBanner title="Carrello"></CTitleBanner>
+    <div class="panel">
+      <div>
+        <div class="container">
+          <div class="q-pa-sm col items-start q-gutter-xs" v-for="(itemorder, index) in getItemsCart" :key="index">
+
+            <CSingleCart :order="itemorder.order" :showall="true"/>
+          </div>
+        </div>
+        <q-separator></q-separator>
+        <div class="col-6 q-mr-sm" style="text-align: right">
+          <span class="text-grey q-mr-xs">Totale:</span> <span
+          class="text-subtitle1 q-mr-sm ">€ {{ myTotalPrice }}</span>
+        </div>
+
+        <q-input v-if="getNumItems > 0" v-model="note" style="max-width: 400px;" label="Scrivi qui per eventuali note o chiarimenti:"
+                 filled dense
+                 debounce="1000"
+                 autogrow
+                 @input="change_field('note')">
+        </q-input>
+
+        <br>
+      </div>
+
+      <q-stepper-navigation>
+        <q-btn v-if="statusnow < shared_consts.OrderStatus.CHECKOUT_SENT" rounded icon="fas fa-shopping-cart" color="green" label="Completa l'Ordine" class="q-mb-sm"
+               :disabled="myTotalQty < 1"
+               @click="completeOrder"></q-btn>
+      </q-stepper-navigation>
+
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./checkOut.ts">
+
+</script>
+
+<style lang="scss" scoped>
+@import './checkOut';
+</style>

src/views/ecommerce/checkOut/index.ts

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