Carrello Spesa

src/components/CSingleCart/CSingleCart.scss

@@ -0,0 +1,16 @@
+.text-title {
+  font-size: 0.9rem;
+}
+
+.centeritems{
+  place-content: center;
+}
+
+.imgNormal{
+  height: 80px;
+  width: 80px;
+}
+.imgSmall{
+  height: 50px;
+  width: 50px;
+}

src/components/CSingleCart/CSingleCart.ts

@@ -0,0 +1,53 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '../../store/Modules/tools'
+import MixinBase from '@src/mixins/mixin-base'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { GlobalStore } from '../../store'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { date } from 'quasar'
+import { IOrder, IProduct } from '@src/model'
+import { Products, UserStore } from '@store'
+
+@Component({
+  components: { CTitleBanner, CCardState, CCopyBtn }
+})
+
+export default class CSingleCart extends MixinBase {
+  public $t
+  @Prop({ required: true }) public order: IOrder
+  @Prop({ required: false, default: false }) public showall: boolean
+
+  get myimgclass() {
+    if (this.showall) {
+      return 'imgNormal'
+    } else {
+      return 'imgSmall'
+    }
+  }
+
+  public addsubqty(addqty, subqty) {
+    if (addqty) {
+      if (this.order.quantity >= 10)
+        return false
+    }
+
+    if (subqty) {
+      if (this.order.quantity === 0)
+        return false
+    }
+
+    Products.actions.addSubQtyToItem({
+      addqty,
+      subqty,
+      order: this.order
+    }).then((newqty) => {
+      this.order.quantity = newqty
+    })
+  }
+
+  public removeFromCard() {
+    Products.actions.removeFromCart({ order: this.order })
+  }
+}

src/components/CSingleCart/CSingleCart.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="q-pa-xs q-gutter-xs">
+
+    <div class="row items-center justify-evenly no-wrap">
+      <div class="col-2 text-h6 ellipsis">
+        <img v-if="" :src="`statics/` + order.product.img" :alt="order.product.name" :class="myimgclass">
+      </div>
+      <div class="col-4 q-ml-xs">
+        {{ order.product.name }}
+        <div v-if="showall">
+          <br><span class="text-grey">{{ order.product.description }}</span>
+        </div>
+      </div>
+      <div class="col-3">
+        <div class="row q-mb-xs no-wrap items-center centeritems">
+          <q-btn v-if="showall" round size="xs" text-color="grey" icon="fas fa-minus"
+                 @click="addsubqty(false, true)"></q-btn>
+          <!--<q-field outlined dense style="width: 25px; height: 20px; " class="q-mx-xs text-subtitle4">
+            <template v-slot:control>
+              <div class="self-center no-outline" tabindex="0" >{{ order.quantity }}</div>
+            </template>
+          </q-field>-->
+          <div class="q-mx-sm text-blue-14">{{ order.quantity }}</div>
+          <q-btn v-if="showall" round size="xs" text-color="grey" icon="fas fa-plus"
+                 @click="addsubqty(true, false)"></q-btn>
+        </div>
+      </div>
+      <div class="col-2 no-wrap text-subtitle3 q-mr-sm">
+        € {{ (order.price * order.quantity).toFixed(2) }}
+      </div>
+      <div class="col-1">
+        <q-btn icon="fas fa-times" color="negative" round size="xs" @click="removeFromCard">
+        </q-btn>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CSingleCart.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSingleCart.scss';
+</style>

src/components/CSingleCart/index.ts

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