Catalogo, versione di libro/ebook, ecc... quantità

2024-05-05 13:55:49 +02:00
parent 399599d450
commit 17deeb7028
7 changed files with 200 additions and 95 deletions
--- a/src/components/CCatalogoCard/CCatalogoCard.scss
+++ b/src/components/CCatalogoCard/CCatalogoCard.scss
@@ -11,18 +11,18 @@
 }

 .prod_price {
-  font-size: 1.25rem;
+  font-size: 1.1rem;

  @media (max-width: 718px) {
-    font-size: 1.15rem;
+    font-size: 1rem;
  }
 }

 .prod_sale_price {
-  font-size: 1.25rem;
+  font-size: 1.10rem;  

  @media (max-width: 718px) {
-    font-size: 1.15rem;
+    font-size: 1.05rem;
  }
 }

@@ -161,7 +161,7 @@
 }

 .book-card {
-  max-width: 300px;
+  width: 300px;
  background-color: #f8f8f8;
 }

@@ -173,6 +173,10 @@
  flex: 1;
 }

+.book-block {
+  display: flex;  
+}
+
 .book-image q-img {
  max-width: 100%;
 }
@@ -183,26 +187,40 @@
 }

 .book-title {
+  margin: 8px;
  font-family: 'Poppins,sans-serif';
-  font-size: 1rem;
+  font-size: 1.15rem;
  line-height: 20px;
-  font-weight: 400;
+  font-weight: bold;
  color: #333;
-  display: block;
+  display: flex;
  text-align: center;
 }

 .book-author {
  color: #263238;
-  display: block;
+  display: flex;
  font-family: Poppins, sans-serif;
-  font-size: 0.85em;
+  font-size: 1em;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
+  font-style: italic;
 }

 .book-description {
  font-size: 0.85rem;
  color: #777;
+}
+
+.block-variazione{
+  border: 1px solid gray;
+  border-radius: 5px;
+  padding: 2px;
+  margin: 2px;
+  cursor: pointer;
+}
+
+.block-variazione-selected{
+  border: 1px solid red !important;
 }
--- a/src/components/CCatalogoCard/CCatalogoCard.ts
+++ b/src/components/CCatalogoCard/CCatalogoCard.ts
@@ -11,7 +11,7 @@ import { CMyValueDb } from '../CMyValueDb'

 import { func_tools, toolsext } from '@store/Modules/toolsext'

-import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct } from '@src/model'
+import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct, IVariazione } from '@src/model'
 import { tools } from '@store/Modules/tools'
 import { useProducts } from '@store/Products'

@@ -61,6 +61,8 @@ export default defineComponent({
    const sumval = ref(0)
    const editOn = ref(false)

+    const indvariazSel = ref(-1)
+
    const site = ref(globalStore.site)

    const $router = useRouter()
@@ -423,6 +425,10 @@ export default defineComponent({
      $router.push(path)
    }

+    function setvariazioneSelected(indvariaz: number) {
+      indvariazSel.value = indvariaz
+    }
+
    onMounted(mounted)
    onBeforeUnmount(beforeDestroy)

@@ -473,6 +479,8 @@ export default defineComponent({
      isOrdineChiuso,
      ricarica,
      apriSchedaPDF,
+      setvariazioneSelected,
+      indvariazSel,
    }
  }
 })
--- a/src/components/CCatalogoCard/CCatalogoCard.vue
+++ b/src/components/CCatalogoCard/CCatalogoCard.vue
@@ -25,25 +25,123 @@
            <q-card-title class="book-title"
              >{{ myproduct.productInfo.name }}
            </q-card-title>
-            <q-card-subtitle v-if="myproduct.productInfo.authors" class="book-author">
-              <span v-for="author in myproduct.productInfo.authors" :key="author._id">
-              {{ author.name }} {{ author.surname }}
-              </span>
-              </q-card-subtitle>
-            <q-card-main class="book-description">{{
-              tools.firstchars(myproduct.productInfo.description, 300)
-            }}</q-card-main>
-            <div class="flex justify-between items-center">
-              <q-badge
-                v-if="myproduct.versione > 0"
-                :color="
-                  shared_consts.VERSIONI_PRODOTTO[myproduct.versione].color
-                "
-                >{{
-                  shared_consts.VERSIONI_PRODOTTO[myproduct.versione].label
-                }}</q-badge
+            <q-card-subtitle
+              v-if="myproduct.productInfo.authors"
+              class="book-author"
+            >
+              <span
+                v-for="author in myproduct.productInfo.authors"
+                :key="author._id"
              >
-              <div class="text-weight-bold">{{ myproduct.price }} €</div>
+                {{ author.name }} {{ author.surname }}
+              </span>
+            </q-card-subtitle>
+            <q-card-main class="book-description">{{
+              myproduct.productInfo.short_descr
+            }}</q-card-main>
+
+            <div
+              :class="
+                `row items-center q-mt-sm q-pa-nome block-variazione ` +
+                (indvariazSel == index ? 'block-variazione-selected' : '')
+              "
+              v-for="(variazione, index) of myproduct.arrvariazioni"
+              :key="index"
+              @click="setvariazioneSelected(index)"
+            >
+              <div class="flex justify-between items-center q-mx-sm">
+                <q-badge
+                  v-if="variazione.versione > 0"
+                  :color="
+                    shared_consts.VERSIONI_PRODOTTO[variazione.versione].color
+                  "
+                  >{{
+                    shared_consts.VERSIONI_PRODOTTO[variazione.versione].label
+                  }}</q-badge
+                >
+                <div v-if="variazione.formato && false">
+                  formato: {{ variazione.formato }}
+                </div>
+                <div v-if="variazione.tipologia && false">
+                  tipologia: {{ variazione.tipologia }}
+                </div>
+                <div v-if="variazione.edizione && false">
+                  edizione: {{ variazione.edizione }}
+                </div>
+                <div v-if="variazione.status && false">
+                  status: {{ variazione.status }}
+                </div>
+                <div v-if="variazione.preOrderDate">
+                  preOrderDate: {{ variazione.preOrderDate }}
+                </div>
+              </div>
+              <q-item-section>
+                <q-item-label>
+                  <span class="prod_sale_price" v-if="!!variazione.sale_price"
+                    >{{
+                      variazione.sale_price
+                        ? variazione.sale_price.toFixed(2)
+                        : 0
+                    }}
+                    €</span
+                  >
+                  <span
+                    :class="
+                      variazione.sale_price ? 'prod_off_price' : 'prod_price'
+                    "
+                    v-if="!!variazione.price"
+                    >{{ variazione.price ? variazione.price.toFixed(2) : 0 }} €
+                  </span>
+                  <span v-if="!!myproduct.after_price">{{
+                    myproduct.after_price
+                  }}</span>
+                </q-item-label>
+                <q-item-label
+                  v-if="
+                    myproduct.scontisticas && myproduct.scontisticas.length > 0
+                  "
+                >
+                  <div
+                    class="prod_sconti"
+                    v-for="(sconti, index) of myproduct.scontisticas"
+                    :key="index"
+                  >
+                    {{ sconti.description }}
+                  </div>
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side v-if="!!variazione.quantita">
+                <q-icon v-if="variazione.quantita > 10" color="green" name="fas fa-check" />
+                <q-icon v-else-if="variazione.quantita > 1 && variazione.quantita <= 10" color="orange" name="fas fa-check" />
+                <q-icon v-else-if="variazione.quantita > 0 && variazione.quantita <= 2" color="red" name="fas fa-check" />
+                <q-icon v-else-if="variazione.quantita === 0" color="gray" name="fas fa-times" />
+
+              </q-item-section>
+            </div>
+            <div v-if="indvariazSel >= 0" 
+              class="row justify-center q-mt-sm">
+              <q-btn
+                v-if="
+                  myproduct.arrvariazioni[indvariazSel].addtocart_link && true
+                "
+                :href="myproduct.arrvariazioni[indvariazSel].addtocart_link"
+                target="_blank"
+                color="primary"
+                icon="fas fa-cart-plus"
+                no-caps
+                :label="$t('products.addtocart_ext')"
+              ></q-btn>
+              <q-btn
+                v-if="myproduct.productInfo.checkout_link && true"
+                :href="myproduct.productInfo.checkout_link"
+                target="_blank"
+                color="white"
+                icon="fas fa-shopping-cart"
+                outline
+                text-color="black"
+                no-caps
+                :label="$t('ecomm.carrello')"
+              ></q-btn>
            </div>
          </div>
        </div>
@@ -79,7 +177,7 @@
              myproduct.productInfo.author
            }}</q-card-subtitle>
            <q-card-main class="book-description">
-              <p>{{ myproduct.productInfo.description }}</p>
+              <p>{{ myproduct.productInfo.short_descr }}</p>
              <p>ISBN: {{ myproduct.productInfo.code }}</p>
              <p>Pages: {{ myproduct.productInfo.numpages }}</p>
              <p>Published Date: {{ myproduct.productInfo.date_publishing }}</p>
@@ -149,37 +247,6 @@
                class="icone_prod"
              />
            </q-item-section>
-
-            <q-item-section>
-              <q-item-label>
-                <span class="prod_sale_price" v-if="!!myproduct.sale_price">{{
-                  myproduct.sale_price ? myproduct.sale_price.toFixed(2) : 0
-                }}</span>
-                <span
-                  :class="
-                    myproduct.sale_price ? 'prod_off_price' : 'prod_price'
-                  "
-                  v-if="!!myproduct.price"
-                  >{{ myproduct.price ? myproduct.price.toFixed(2) : 0 }}</span
-                >
-                <span v-if="!!myproduct.after_price">{{
-                  myproduct.after_price
-                }}</span>
-              </q-item-label>
-              <q-item-label
-                v-if="
-                  myproduct.scontisticas && myproduct.scontisticas.length > 0
-                "
-              >
-                <div
-                  class="prod_sconti"
-                  v-for="(sconti, index) of myproduct.scontisticas"
-                  :key="index"
-                >
-                  {{ sconti.description }}
-                </div>
-              </q-item-label>
-            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section avatar v-if="myproduct.productInfo.weight">