other components...

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,72 @@
+import { tools } from '../../store/Modules/tools'
+import { CCardState } from '../CCardState'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { IOperators, IOrder, IProduct } from '@src/model'
+import { defineComponent, PropType, toRef } from 'vue'
+import CTitleBanner from '@/components/CTitleBanner/CTitleBanner'
+import { useProducts } from '@store/Products'
+
+
+export default defineComponent({
+  name: 'CSingleCart',
+  props: {
+    order: {
+      type: Object as PropType<IOrder>,
+      required: true,
+    },
+    showall: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    nomodif: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  components: { CTitleBanner, CCardState, CCopyBtn },
+  setup(props) {
+    const products = useProducts()
+    const order = toRef(props, 'order')
+
+    function myimgclass() {
+      if (props.showall) {
+        return 'imgNormal'
+      } else {
+        return 'imgSmall'
+      }
+    }
+
+    function addsubqty(addqty: boolean, subqty: boolean) {
+      if (addqty) {
+        if (props.order.quantity! >= 10)
+          return false
+      }
+
+      if (subqty) {
+        if (props.order.quantity === 0)
+          return false
+      }
+
+      products.addSubQtyToItem({
+        addqty,
+        subqty,
+        order: props.order,
+      }).then((newqty) => {
+        order.value.quantity = newqty
+      })
+    }
+
+    function removeFromCard() {
+      products.removeFromCart({ order: order.value })
+    }
+
+    return {
+      myimgclass,
+      addsubqty,
+      removeFromCard,
+    }
+  },
+})

src/components/CSingleCart/CSingleCart.vue

@@ -0,0 +1,48 @@
+<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="true" :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 && !nomodif" 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 && !nomodif" 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">
+        €&nbsp;{{ (order.price * order.quantity).toFixed(2) }}
+      </div>
+      <div class="col-1">
+        <q-btn v-if="!nomodif" 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'