myprojplanet_vite/src/components/CSingleCart/CSingleCart.vue

<template>
  <div
    v-if="order && order.product && order.product.productInfo"
    class="q-pa-xs q-gutter-xs"
  >
    <div v-if="order.product">
      <q-item>
        <q-item-section
          top
          thumbnail
          class="q-ml-none"
        >
          <img
            v-if="
              order.product &&
              order.product.productInfo &&
              order.product.productInfo.imagefile
            "
            :src="
              tools.getFullFileNameByImageFile(
                'productInfos',
                order.product.productInfo.imagefile
              )
            "
            :alt="order.product.productInfo.name"
            :class="myimgclass()"
          />
        </q-item-section>

        <q-item-section>
          <q-item-label>
            <div
              v-if="order.idGasordine"
              class="gasordine"
            >
              {{ products.getSingleGasordine(order, true) }}<br />
            </div>
            {{ order.product.productInfo.name }}
            <span
              class="autori"
              v-if="order.product.productInfo.idAuthors"
            >
              - {{ products.getAutoriByIdAuthors(order.product.productInfo.idAuthors) }}
            </span>
          </q-item-label>
          <q-item-label>
            {{ order.product.productInfo.code }}
          </q-item-label>

          <q-item-label caption>
            <div
              class="text-black text-h8"
              v-if="order.product.productInfo.unit"
            >
              {{ tools.getWeightTotalByOrder(order) }}
              {{
                tools.getUnitsMeasure(
                  order.product.productInfo.unit,
                  true,
                  order.product.productInfo.weight
                )
              }}
            </div>
            <div class="row q-mb-xs no-wrap items-center centeritems">
              <q-input
                v-if="editmode"
                v-model="weight"
                autofocus
                debounce="500"
                borderless
                rounded
                dense
                :label="t('products.weight')"
              ></q-input>
              <q-input
                v-if="editmode"
                v-model="price"
                autofocus
                debounce="500"
                borderless
                rounded
                dense
                :label="t('products.price')"
              ></q-input>
            </div>
            <div class="row q-mb-xs no-wrap items-center centeritems">
              <q-btn
                v-if="showall && !nomodif && products.CanDeleteIfSub(order)"
                icon="fas fa-trash-alt"
                round
                size="sm"
                class="elimina-btn"
                @click="removeFromCard"
              >
              </q-btn>
              <!--
                                :label="
                  t('products.subcart', {
                    qta: products.qtaNextSub(order, order.product),
                  })
                "
                -->
              <q-btn
                v-else-if="!nomodif"
                :disable="!products.enableSubQty(order)"
                size="sm"
                class="quantity-btn"
                data-gradiente="negative"
                :icon="qtyInCart() === 1 ? 'fas fa-trash': 'fas fa-minus'"
                :color="products.enableSubQty(order) ? undefined : 'grey'"
                @click="qtyInCart() === 1 ? removeFromCard(): addsubqty(false, true)"
                rounded
              ></q-btn>
              <div v-if="editmode">
                <q-input
                  v-if="enableQty"
                  v-model="orderQuantity"
                  autofocus
                  debounce="500"
                  borderless
                  rounded
                  class="quantity-display"
                  dense
                  :label="t('products.quantity')"
                ></q-input>
                <q-input
                  v-if="enableQtyPreordered"
                  v-model="orderQuantityPreordered"
                  autofocus
                  debounce="500"
                  borderless
                  class="quantity-display"
                  rounded
                  densep
                  :label="t('ecomm.preord')"
                ></q-input>
              </div>
              <div v-if="editmode">
                <q-input
                  v-model="orderTotalPriceProduct"
                  autofocus
                  debounce="500"
                  borderless
                  rounded
                  dense
                  @change="changeTotalPrice"
                  :label="t('orderscart.TotalPriceProduct')"
                ></q-input>

                <q-btn
                  outline
                  rounded
                  dense
                  color="green"
                  icon="fas fa-redo"
                  :label="t('orderscart.update_order')"
                  @click="
                    updateOrder({
                      quantitypreordered: order.quantitypreordered,
                      quantity: order.quantity,
                      price: order.price,
                    })
                  "
                >
                </q-btn>
              </div>
              <div
                v-else
                :class="`q-mx-sm text-blue-14 qta`"
              >
                {{ order.quantity + order.quantitypreordered }}
              </div>

              <!--                :label="
                  t('products.addcart', {
                    qta: products.qtaNextAdd(order, order.product),
                  })
                "
              -->
              <q-btn
                v-if="!nomodif"
                icon-right="fas fa-plus"
                class="quantity-btn"
                :disable="!products.enableAddQty(order, order.product)"
                rounded
                size="sm"
                @click="addsubqty(true, false)"
              >
              </q-btn>
            </div>
          </q-item-label>
          <q-item-label>
            <div class="col-2 no-wrap text-subtitle3_short q-mr-sm">
              <span class="prezzo_singolo">
                {{ order.quantity + order.quantitypreordered }} x €
                {{ order.price ? order.price : 0 }}
              </span>
              <span :class="isApplicatoSconto() ? 'ordine_scontato_nuovo' : ''">
                = €
                {{ order.TotalPriceProduct ? order.TotalPriceProduct.toFixed(2) : 0 }}
              </span>
              <span
                v-if="
                  tools.isManager() &&
                  order.TotalPriceProduct.toFixed(2) !==
                    order.TotalPriceProductCalc.toFixed(2)
                "
                :class="isApplicatoSconto() ? 'ordine_scontato_nuovo' : ''"
              >
                (Calc: €
                {{
                  order.TotalPriceProductCalc
                    ? order.TotalPriceProductCalc.toFixed(2)
                    : 0
                }})
              </span>

              <span v-if="isApplicatoSconto()">
                &nbsp;<span class="ordine_scontato"
                  >(<span class="barrato"
                    >€
                    {{
                      (
                        order.price * order.quantity +
                        order.price * order.quantitypreordered
                      ).toFixed(2)
                    }}</span
                  >)</span
                >&nbsp;
              </span>
              <span
                v-if="isApplicatoSconto() && !editmode"
                class="ordine_scritta_sconto"
                >{{ $t('ecomm.sconto_applicato', { risparmio: getRisparmio() }) }}</span
              >
            </div>
          </q-item-label>
        </q-item-section>
        <!--<q-item-section side>
          <q-item-label>
            <div class="col-2">
              <q-btn
                v-if="!nomodif"
                icon="fas fa-trash"
                color="negative"
                round
                size="xs"
                @click="removeFromCard"
              >
              </q-btn>
            </div>
          </q-item-label>
        </q-item-section>-->

        <!--<q-item-section side top>
          <q-item-label caption>meta</q-item-label>
        </q-item-section>
        -->
      </q-item>
    </div>
  </div>
</template>

<script lang="ts" src="./CSingleCart.ts"></script>

<style lang="scss" scoped>
@import './CSingleCart.scss';
</style>