- caaloghi, categorie

_ALL_SITES/gruppomacro.app/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "riso",
+  "name": "gruppomacro",
   "version": "0.6.1",
-  "description": "Siamo la Rete Italiana di Scambio Orizzontale, abbiamo creato questa piattaforma per metterla al servizio di chi vuole riscoprire il valore della condivisione e della cooperazione. Valori semplici e profondi che ci aiutano a ritrovare il Senso della Vita, perduto in questa società consumista, e riporti quei Sani Pricìpi Naturali ed Umani di Fratellanza che intere popolazioni antiche conoscevano bene.",
-  "productName": "Riso",
+  "description": "Gruppo Macro Editori",
+  "productName": "Gruppo Macro",
   "author": "Paolo Arena",
   "private": true,
   "keywords": [],

now.txt

@@ -1 +1 @@
-TERMINA DI LAVORARE SU gruppomacro.app: (Sovrascrivo !)
+TERMINA DI LAVORARE SU riso.app: (Sovrascrivo !)

src/common/shared_vuejs.ts

@@ -2124,7 +2124,7 @@ export const shared_consts = {
     {
       label: 'Usato',
       value: 2,
-      color: 'warning',
+      color: 'orange-9',
     },
     {
       label: 'Download',

src/components/CCatalogoCard/CCatalogoCard.scss

@@ -10,35 +10,6 @@
   place-content: center;
 }
 
-.prod_price {
-  font-size: 1.1rem;
-  font-style: bold;
-
-  @media (max-width: 718px) {
-    font-size: 1rem;
-  }
-}
-
-.prod_sale_price {
-  font-size: 1.10rem;
-  font-style: bold;
-
-  @media (max-width: 718px) {
-    font-size: 1.05rem;
-  }
-}
-
-.prod_off_price {
-  font-size: 1rem;
-
-  @media (max-width: 718px) {
-    font-size: 0.85rem;
-  }
-
-  color: gray;
-  text-decoration: line-through;
-  padding-left: 5px;
-}
 
 .prod_disp {
   font-size: 1.2rem;
@@ -136,18 +107,6 @@
   height: 70px;
 }
 
-.image-container {
-  width: 300px;
-  height: 300px;
-  position: relative;
-  overflow: hidden;
-
-  @media (max-width: 718px) {
-    width: 200px;
-    height: 200px;
-  }
-}
-
 .book-image-fixed{
   max-width: 300px;
   max-height: 600px;
@@ -168,12 +127,6 @@
 }
 
 .book-card {
-  width: 300px;
-  background-color: #f8f8f8;
-}
-
-.book-card {
-  width: 300px;
   background-color: #f8f8f8;
 }
 
@@ -198,19 +151,32 @@
   padding: 20px;
 }
 
+
 .book-title {
   margin: 8px;
   font-family: 'Poppins,sans-serif';
-  font-size: 1.15rem;
-  line-height: 20px;
   font-weight: bold;
   color: #333;
   display: block;
   text-align: center;
+  text-shadow: 1px 1px 1px #555;
+}
+
+.book-title[data-col=c1] {
+  font-size: 1.15rem;
+  line-height: 20px;
+}
+
+.book-title[data-col=c2] {
+  font-size: 1rem;
+  line-height: 19px;
 }
 
 .book-author {
-  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: grey; /* Colore scuro per garantire una buona leggibilità */
+}
+
+.author{
   color: darkblue; /* Colore scuro per garantire una buona leggibilità */
   text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
   background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
@@ -219,6 +185,30 @@
   font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
 }
 
+.author[data-col=c1]{
+  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+}
+.author[data-col=c2]{
+  font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+}
+
+.book-category {
+  font-size: 1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: grey; /* Colore scuro per garantire una buona leggibilità */
+}
+
+.category{
+  font-size: 1.0em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: green; /* Colore scuro per garantire una buona leggibilità */
+  text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
+  background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
+  border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
+  display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
+  font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
+  box-shadow: 0 0 5px gray;
+
+}
+
 .book-description {
   font-size: 0.85rem;
   color: #777;
@@ -226,12 +216,23 @@
 
 .block-variazione {
   border: 1px solid gray;
+  margin: auto;
   // effetto 3d
   box-shadow: 0 0 5px gray;
   border-radius: 5px;
-  padding: 2px;
-  margin: 2px;
+  padding: 4px;
   cursor: pointer;
+  .q-badge {
+    font-size: 1rem;
+    padding: 4px 6px;
+  }
+}
+
+.colfix_prodotti_1 {
+  width: 350px;
+}
+.colfix_prodotti_2 {
+  width: 175px;
 }
 
 .block-variazione-selected {
@@ -280,3 +281,22 @@
     margin-left: 5px;
   } 
 }
+
+
+.book-3d:hover img {
+  transform: translateZ(50px) rotateY(-20deg); /* Applica la trasformazione 3D quando si passa con il mouse sopra */
+}
+
+// Contenitore del libro, con effetto 3d, ed animazione 3D
+.book-3d {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  transition: transform 0.5s ease-in-out;
+  transform-origin: center center;
+
+
+  img {
+    transform-origin: center center;
+    transition: transform 0.5s ease-in-out;
+  }
+}

src/components/CCatalogoCard/CCatalogoCard.ts

@@ -8,6 +8,7 @@ import { CTitleBanner } from '../CTitleBanner'
 import { CCardState } from '../CCardState'
 import { CCopyBtn } from '../CCopyBtn'
 import { CMyValueDb } from '../CMyValueDb'
+import { CPrice } from '../CPrice'
 
 import { func_tools, toolsext } from '@store/Modules/toolsext'
 
@@ -48,8 +49,13 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    options: {
+      type: Object,
+      required: false,
+      default: () => { }
+    }
   },
-  components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp },
+  components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -91,7 +97,7 @@ export default defineComponent({
 
     const openlistorders = ref(false)
     const endload = ref(false)
-    const myproduct = ref(<IProduct>{})
+    const myproduct = ref(<IProduct | null>{})
 
     const isFullScreen = ref(false)
     const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE')
@@ -129,10 +135,12 @@ export default defineComponent({
         return false
       }
 
-      const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
-      updateproduct()
-      if (ris && ris.myord) {
+      if (myproduct.value) {
+        const ris = await products.addtoCartBase({ $q, t, id: myproduct.value._id, order: myorder, addqty: add })
+        updateproduct()
+        if (ris && ris.myord) {
 
+        }
       }
     }
 
@@ -148,6 +156,9 @@ export default defineComponent({
 
     function getSingleStorehouse() {
       try {
+        if (!myproduct.value)
+          return ''
+
         const mystore = myproduct.value.storehouses[0]
         if (mystore)
           return mystore.name + ' (' + mystore.city + ')'
@@ -183,28 +194,30 @@ export default defineComponent({
 
     }
 
-    function updateproduct() {
+    async function updateproduct() {
 
-      myproduct.value = products.getProductById(props.id)
+      myproduct.value = null;
+      myproduct.value = await products.getProductById(props.id)
 
       // products.updateQuantityAvailable(myproduct.value._id)
     }
 
     async function ricarica() {
       endload.value = false
-      const prod = await products.loadProductById(myproduct.value._id)
-      if (prod) {
-        myproduct.value = prod
+      if (myproduct.value) {
+        const prod = await products.loadProductById(myproduct.value._id)
+        if (prod) {
+          myproduct.value = prod
+        }
       }
-      load()
-      endload.value = true
+      await load()
 
     }
 
-    function updateproductmodif() {
+    async function updateproductmodif() {
 
       try {
-        myproduct.value = products.getProductById(props.id)
+        myproduct.value = await products.getProductById(props.id)
 
         updateLabel()
       } catch (e) {
@@ -256,9 +269,9 @@ export default defineComponent({
       return ''
     }
 
-    watch(() => props.id, (newval, oldval) => {
+    watch(() => props.id, async (newval, oldval) => {
       // console.log('change code')
-      load()
+      await load()
     })
 
     watch(() => storeSelected.value, (newval, oldval) => {
@@ -289,12 +302,8 @@ export default defineComponent({
       updateTimerLabel()
     }
 
-    function mounted() {
-      load()
-
-      if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
-        indvariazSel.value = 0
-      }
+    async function mounted() {    
+      await load()
 
       // Start the timer when the component is mounted
       startTimer();
@@ -306,15 +315,18 @@ export default defineComponent({
     }
 
     function updateTimerLabel() {
-      if (myproduct.value && myproduct.value.gasordine && myproduct.value.gasordine._id && myproduct.value.gasordine.dataora_chiusura_ordini)
+      if (myproduct.value && (myproduct.value.gasordine && myproduct.value.gasordine._id && myproduct.value.gasordine.dataora_chiusura_ordini))
         timerLabelScadenza.value = tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini)
       else
         timerLabelScadenza.value = ''
     }
 
     function isOrdineChiuso() {
-      return myproduct.value.gasordine && myproduct.value.gasordine.dataora_chiusura_ordini &&
-        tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini) === ''
+      if (myproduct.value) {
+        return myproduct.value.gasordine && myproduct.value.gasordine.dataora_chiusura_ordini &&
+          tools.getCountDown(myproduct.value.gasordine.dataora_chiusura_ordini) === ''
+      } else
+        return false
     }
 
     function startTimer() {
@@ -322,17 +334,18 @@ export default defineComponent({
       timerInterval.value = setInterval(() => updateTimerLabel(), 60000);
     }
 
-    function load() {
+    async function load() {
+      indvariazSel.value = -1
       initproduct()
-      updateproduct()
+      await updateproduct()
       labelDataArrivoMerce.value = ''
       labelDataRitiro.value = ''
 
       // console.log('Load', myproduct.value.name)
 
-      arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
-
       if (!!myproduct.value) {
+        arrordersCart.value = products.getOrdersCartInAttesaByIdProduct(myproduct.value._id)
+
         if (myproduct.value.storehouses && myproduct.value.storehouses.length === 1) {
           // Se solo 1 presente, metto fisso l'unico negozio !
           myorder.idStorehouse = myproduct.value.storehouses[0]._id
@@ -356,6 +369,13 @@ export default defineComponent({
 
       updateLabel()
 
+      // console.log('myproduct', myproduct.value, 'arrvariaz', myproduct.value.arrvariazioni, 'compl', props.complete)
+      if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
+        // console.log('ENTRATO')
+        indvariazSel.value = 0
+      }
+
+
       // console.log('°°° ENDLOAD °°°')
       endload.value = true
     }
@@ -366,25 +386,35 @@ export default defineComponent({
 
 
     function visuListDisponibili() {
-      openlistorders.value = true
-      sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
+      if (myproduct.value) {
+        openlistorders.value = true
+        sumval.value = products.getSumQtyOrderProductInOrdersCart(myproduct.value._id)
 
-      listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
-        return accumulator + item.order.quantity
-      }, 0))
+        listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
+          return accumulator + item.order.quantity
+        }, 0))
+      } else
+        return false
     }
 
     function visuListBookable() {
-      openlistorders.value = true
-      sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
+      if (myproduct.value) {
+        openlistorders.value = true
+        sumval.value = products.getSumQtyPreOrderInOrdersCart(myproduct.value._id)
 
-      listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
-        return accumulator + item.order.quantitypreordered
-      }, 0))
+        listord.value = arrordersCart.value.filter((orderscart: IOrderCart) => orderscart.items!.reduce((accumulator, item) => {
+          return accumulator + item.order.quantitypreordered
+        }, 0))
+      } else {
+        return ''
+      }
     }
 
     function isOrdGas(): boolean {
-      return (myproduct.value && !!myproduct.value.idGasordine && myproduct.value.gasordine! && myproduct.value.gasordine.active)
+      if (myproduct.value)
+        return (myproduct.value && !!myproduct.value.idGasordine && myproduct.value.gasordine! && myproduct.value.gasordine.active)
+      else
+        return false
     }
 
     function getpercqtaraggiunta(): number {
@@ -436,8 +466,10 @@ export default defineComponent({
     function setvariazioneSelected(indvariaz: number) {
       if (indvariazSel.value === indvariaz)
         indvariazSel.value = -1
-      else
+      else {
+        indvariazSel.value = -1
         indvariazSel.value = indvariaz
+      }
     }
 
     onMounted(mounted)

src/components/CCatalogoCard/CCatalogoCard.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="row items-start q-gutter-sm">
+  <div
+    :class="{
+      'row items-start q-gutter-sm': true,
+    }"
+  >
     <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
     <div
       v-if="!!myproduct && !!myproduct.productInfo"
       :class="{
-        'my-card-big': complete,
-        'book-card book-details': !complete,
+        'my-card-big book-details': complete,
+        'book-card': !complete,
+        colfix_prodotti_1: options.quante_col == 'c1',
+        colfix_prodotti_2: options.quante_col == 'c2',
       }"
     >
       <q-toggle
@@ -18,7 +24,10 @@
       >
       </q-toggle>
       <q-card-section>
-        <div class="flex" style="place-content: center">
+        <div
+          :class="{ 'flex q-pa-sm': true, 'shadow-2': options.in_3d }"
+          style="place-content: center"
+        >
           <q-img
             :src="
               myproduct.productInfo.img
@@ -29,6 +38,7 @@
             :class="{
               'book-image-fixed': complete,
               'cursor-pointer': !complete,
+              'shadow-4': true,
             }"
             @click="
               complete
@@ -36,48 +46,82 @@
                 : naviga(`/catalogo/` + myproduct._id + '/' + cosa)
             "
           >
+            <div
+              class="absolute transparent"
+              style="left: 90%; top: 0; transform: translateX(-50%)"
+            >
+              <q-btn
+                color="blue"
+                class="semi-transparent"
+                round
+                icon="search"
+                @click="toggleFullScreen"
+                size="md"
+              />
+            </div>
           </q-img>
-          <q-btn
-            color="blue"
-            round
-            icon="search"
-            class="absolute semi-transparent ingrandisci"
-            size="md"
-            @click="toggleFullScreen"
-            style="left: 55%; top: 5px; transform: translateX(-50%)"
-          />
 
           <div class="scheda-book">
-            <q-card-title class="book-title"
-              >{{ myproduct.productInfo.name }}
+            <q-card-title>
+              <span class="book-title" :data-col="options.quante_col">{{
+                myproduct.productInfo.name
+              }}</span>
             </q-card-title>
             <q-card-subtitle
               v-if="myproduct.productInfo.authors"
               class="book-author"
+              :data-col="options.quante_col"
             >
+              di
               <span
-                v-for="author in myproduct.productInfo.authors"
+                v-for="(author, index) in myproduct.productInfo.authors"
                 :key="author._id"
               >
-                {{ author.name }} {{ author.surname }}
+                <span class="author"
+                  >{{ author.name }} {{ author.surname }}</span
+                >
+                <span v-if="index > 0">, </span>
               </span>
             </q-card-subtitle>
+            <q-card-subtitle
+              v-if="myproduct.productInfo.catprods && options.show_cat"
+              class="book-category"
+            >
+              <div
+                v-for="catprod in myproduct.productInfo.catprods"
+                :key="catprod._id"
+              >
+                <q-chip
+                  dense
+                  color="primary"
+                  text-color="white"
+                  icon="category"
+                >
+                  {{ catprod.name }}
+                </q-chip>
+              </div>
+            </q-card-subtitle>
             <q-card-main
-              v-if="myproduct.productInfo.short_descr"
+              v-if="
+                options.show_short_descr && myproduct.productInfo.short_descr
+              "
               class="book-short-descr"
               >{{
                 tools.firstchars(myproduct.productInfo.short_descr, 200, true)
               }}</q-card-main
             >
 
-            <div v-if="myproduct.isbn" class="book-isbn">
-              ISBN: {{ myproduct.isbn }}
-            </div>
-            <div v-if="myproduct.productInfo.numpages" class="book-pages">
+            <div
+              v-if="myproduct.productInfo.numpages && complete"
+              class="book-pages"
+            >
               Pagine: {{ myproduct.productInfo.numpages }}
             </div>
+            <div v-if="myproduct.productInfo.publisher" class="book-pages">
+              Casa Editrice: {{ myproduct.productInfo.publisher }}
+            </div>
             <div
-              v-if="myproduct.productInfo.date_publishing"
+              v-if="myproduct.productInfo.date_publishing && complete"
               class="book-data-pub"
             >
               Data Pubblicazione:
@@ -86,222 +130,185 @@
 
             <q-separator class="q-my-sm"></q-separator>
 
-            <div
-              :class="
-                `row items-center 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="tools.colordisponib(variazione.quantita)"
-                  name="fas fa-check"
-                />
-                <q-icon
-                  v-else-if="
-                    variazione.quantita > 3 && variazione.quantita <= 10
-                  "
-                  :color="tools.colordisponib(variazione.quantita)"
-                  name="fas fa-exclamation"
-                />
-                <q-icon
-                  v-else-if="
-                    variazione.quantita > 0 && variazione.quantita <= 3
-                  "
-                  :color="tools.colordisponib(variazione.quantita)"
-                  name="fas fa-exclamation"
-                />
-                <q-icon
-                  v-else-if="variazione.quantita === 0"
-                  :color="tools.colordisponib(variazione.quantita)"
-                  name="fas fa-times"
-                />
-              </q-item-section>
-            </div>
-            <q-slide-transition>
-              <div v-if="indvariazSel >= 0">
-                <div
-                  v-if="
-                    indvariazSel >= 0 &&
-                    tools.disponibStr(
-                      myproduct.arrvariazioni[indvariazSel].quantita
-                    )
-                  "
-                  class="row justify-center q-mt-sm vertical-middle"
-                  style="align-items: center"
-                >
-                  <span class="q-mr-sm"
-                    >{{ $t('ecomm.disponibilita') }}:&nbsp;</span
-                  >
-                  <q-chip
-                    size="md"
-                    dense
-                    text-color="white"
-                    :color="
-                      tools.colordisponib(
-                        myproduct.arrvariazioni[indvariazSel].quantita
-                      )
-                    "
-                    >{{
-                      tools.disponibStr(
-                        myproduct.arrvariazioni[indvariazSel].quantita
-                      )
-                    }}</q-chip
-                  >
-                </div>
-                <div
-                  v-if="indvariazSel >= 0"
-                  class="row justify-center vertical-middle"
-                  style="align-items: center"
-                >
-                  <span class="q-mr-sm">{{ $t('products.price') }}:</span>
-                  <span
-                    class="prod_sale_price text-bold"
-                    v-if="!!myproduct.arrvariazioni[indvariazSel].sale_price"
-                    >{{
-                      myproduct.arrvariazioni[indvariazSel].sale_price
-                        ? myproduct.arrvariazioni[
-                            indvariazSel
-                          ].sale_price.toFixed(2)
-                        : 0
-                    }}
-                    €</span
-                  >
-                  <span
-                    :class="
-                      myproduct.arrvariazioni[indvariazSel].sale_price
-                        ? 'prod_off_price'
-                        : 'prod_price'
-                    "
-                    v-if="!!myproduct.arrvariazioni[indvariazSel].price"
-                    >{{
-                      myproduct.arrvariazioni[indvariazSel].price
-                        ? myproduct.arrvariazioni[indvariazSel].price.toFixed(2)
-                        : 0
-                    }}
-                    €
-                  </span>
-                  <span v-if="!!myproduct.after_price">{{
-                    myproduct.after_price
-                  }}</span>
-                </div>
-                <div
-                  v-if="
-                    indvariazSel >= 0 &&
-                    !!myproduct.arrvariazioni[indvariazSel].formato
-                  "
-                  class="row justify-center q-ma-sm vertical-middle"
-                  style="align-items: center"
-                >
-                  <span class="q-mr-sm">{{ $t('products.formato') }}:</span>
+            <div v-if="options.show_price">
+              <div
+                :class="{
+                  'row items-center q-pa-nome block-variazione': true,
+                  'block-variazione-selected': indvariazSel == index,
+                }"
+                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="myproduct.arrvariazioni[indvariazSel].versione > 0"
+                    class="q-badge--large"
                     :color="
-                      shared_consts.VERSIONI_PRODOTTO[
-                        myproduct.arrvariazioni[indvariazSel].versione
-                      ].color
+                      shared_consts.VERSIONI_PRODOTTO[variazione.versione].color
                     "
-                    >{{
-                      myproduct.arrvariazioni[indvariazSel].formato
-                    }}</q-badge
                   >
+                    <q-icon
+                      v-if="variazione.versione > 0"
+                      :name="tools.getIconByVersione(variazione.versione)"
+                      color="white"
+                    ></q-icon
+                    >&nbsp;
+                    {{
+                      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>
-
-                <div
-                  v-if="indvariazSel >= 0"
-                  class="row justify-center q-mt-sm"
-                >
-                  <q-btn
+                <q-item-section>
+                  <q-item-label>
+                    <CPrice
+                      :sale_price="variazione.sale_price"
+                      :price="variazione.price"
+                    ></CPrice>
+                    <span v-if="!!myproduct.after_price">{{
+                      myproduct.after_price
+                    }}</span>
+                  </q-item-label>
+                  <q-item-label
                     v-if="
-                      myproduct.arrvariazioni[indvariazSel].addtocart_link &&
-                      true
+                      myproduct.scontisticas &&
+                      myproduct.scontisticas.length > 0
                     "
-                    :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
+                      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="tools.colordisponib(variazione.quantita)"
+                    name="fas fa-check"
+                  />
+                  <q-icon
+                    v-else-if="
+                      variazione.quantita > 3 && variazione.quantita <= 10
+                    "
+                    :color="tools.colordisponib(variazione.quantita)"
+                    name="fas fa-exclamation"
+                  />
+                  <q-icon
+                    v-else-if="
+                      variazione.quantita > 0 && variazione.quantita <= 3
+                    "
+                    :color="tools.colordisponib(variazione.quantita)"
+                    name="fas fa-exclamation"
+                  />
+                  <q-icon
+                    v-else-if="variazione.quantita === 0"
+                    :color="tools.colordisponib(variazione.quantita)"
+                    name="fas fa-times"
+                  />
+                </q-item-section>
+              </div>
+              <div
+                v-for="(variazione, index) of myproduct.arrvariazioni"
+                :key="index"
+              >
+                <div v-show="indvariazSel == index">
+                  <div
+                    v-show="
+                      indvariazSel >= 0 &&
+                      tools.disponibStr(variazione.quantita)
+                    "
+                    class="row justify-center q-mt-sm vertical-middle"
+                    style="align-items: center"
+                  >
+                    <span class="q-mr-sm"
+                      >{{ $t('ecomm.disponibilita') }}:&nbsp;</span
+                    >
+                    <q-chip
+                      size="md"
+                      dense
+                      text-color="white"
+                      :color="tools.colordisponib(variazione.quantita)"
+                      >{{ tools.disponibStr(variazione.quantita) }}</q-chip
+                    >
+                  </div>
+                  <div
+                    v-show="indvariazSel >= 0"
+                    class="row justify-center vertical-middle"
+                    style="align-items: center"
+                  >
+                    <span class="q-mr-sm">{{ $t('products.price') }}:</span>
+                    <CPrice
+                      :sale_price="variazione.sale_price"
+                      :price="variazione.price"
+                      bold="true"
+                    ></CPrice>
+                    <span v-show="!!myproduct.after_price">{{
+                      myproduct.after_price
+                    }}</span>
+                  </div>
+                  <div
+                    v-show="indvariazSel >= 0 && !!variazione.formato"
+                    class="row justify-center q-ma-sm vertical-middle"
+                    style="align-items: center"
+                  >
+                    <span class="q-mr-sm">{{ $t('products.formato') }}:</span>
+                    <q-badge
+                      v-show="variazione.versione > 0"
+                      :color="
+                        shared_consts.VERSIONI_PRODOTTO[variazione.versione]
+                          .color
+                      "
+                      >{{ variazione.formato }}</q-badge
+                    >
+                  </div>
+
+                  <div class="row justify-center q-mt-sm">
+                    <q-btn
+                      v-if="
+                        indVariazSel >= 0 && variazione.addtocart_link && true
+                      "
+                      :href="variazione.addtocart_link"
+                      target="_blank"
+                      color="primary"
+                      icon="fas fa-cart-plus"
+                      class="q-mr-sm"
+                      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"
+                      class="q-ml-sm"
+                      color="white"
+                      icon="fas fa-shopping-cart"
+                      outline
+                      text-color="black"
+                      no-caps
+                      :label="$t('ecomm.carrello')"
+                    ></q-btn>
+                  </div>
                 </div>
               </div>
-            </q-slide-transition>
+            </div>
           </div>
         </div>
       </q-card-section>
@@ -490,12 +497,14 @@
               : myproduct.productInfo.image_link
           "
           :alt="myproduct.productInfo.name"
-          :fit="tools.isMobile() ? 'fill' : 'none'"
+          :fit="tools.isMobile() ? 'fill' : 'contain'"
+          class="fullscreen-image"
           @touchstart="onTouchStart"
           @touchmove="onTouchMove"
           @touchend="onTouchEnd"
           ref="fullscreenImage"
-        />
+        >
+        </q-img>
         <br />
       </div>
       <div class="text-center">

src/components/CPrice/CPrice.scss

@@ -0,0 +1,103 @@
+.prod_price {
+    font-size: 1.1rem;
+    font-style: bold;
+
+    @media (max-width: 718px) {
+        font-size: 1rem;
+    }
+}
+
+.prod_sale_price {
+    font-size: 1.10rem;
+    font-style: bold;
+
+    @media (max-width: 718px) {
+        font-size: 1.05rem;
+    }
+}
+
+.prod_off_price {
+    font-size: 1rem;
+
+    @media (max-width: 718px) {
+        font-size: 0.85rem;
+    }
+
+    color: gray;
+    text-decoration: line-through;
+    padding-left: 8px;
+}
+
+/* ******** */
+.a-price {
+    text-decoration: none;
+    position: relative;
+    line-height: normal
+}
+
+.a-price[data-a-strike=true]:after {
+    border-top: .1rem solid;
+    position: absolute;
+    content: "";
+    right: 0;
+    top: 50%;
+    left: 0
+}
+
+.a-price .a-price-fraction+.a-price-symbol {
+    left: .2em
+}
+
+.a-price .a-offscreen {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.a-price[data-a-size=mini][data-a-strike=true],.a-price[data-a-size="s"][data-a-strike=true],.a-price[data-a-size="b"][data-a-strike=true] {
+    display: inline-block;
+    text-decoration: inherit
+}
+
+.a-price[data-a-color=base] {
+    color: #0F1111
+}
+
+.a-price[data-a-color=price] {
+    color: #B12704
+}
+
+.a-price[data-a-color=secondary] {
+    color: #565959
+}
+
+.a-price[data-a-color=tertiary] {
+    color: #767676
+}
+
+.a-price[data-a-size$=plus] .a-price-fraction,.a-price[data-a-size$=plus] .a-price-symbol,.a-price[data-a-size$=l] .a-price-fraction,.a-price[data-a-size$=l] .a-price-symbol {
+    position: relative
+}
+
+.a-price[data-a-size$=plus] .a-price-decimal,.a-price[data-a-size$=l] .a-price-decimal {
+    position: absolute;
+    opacity: 0
+}
+
+.a-price[data-a-size=l] {
+    font-size: 1.3rem
+}
+
+.a-price[data-a-size=l] .a-price-symbol {    
+    font-size: 1.1rem
+}
+
+.a-price[data-a-size=l] .a-price-fraction {
+    top: -.5em;
+    font-size: 0.8rem
+}
+
+.a-text-price {
+    color: inherit
+}

src/components/CPrice/CPrice.ts

@@ -0,0 +1,37 @@
+import { defineComponent, onMounted, ref, toRef, watch } from 'vue'
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CPrice',
+  props: {
+    sale_price: {
+      type: Number,
+    },
+    price: {
+      type: Number,
+    },
+    bold: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props) {
+
+    const real_price = ref(0)
+
+    onMounted(() => {
+
+      if (props.sale_price)
+        real_price.value = props.sale_price
+      else
+        real_price.value = props.price ? props.price : 0
+
+    })
+
+    return {
+      tools,
+      real_price,
+    }
+  },
+})

src/components/CPrice/CPrice.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="a-price" data-a-size="l" data-a-color="base">
+
+    <span aria-hidden="true" v-if="!!real_price">
+      <span class="a-price-whole">{{ tools.getIntPart(real_price) }}</span>
+      <span class="a-price-decimal">,</span>
+      <span class="a-price-fraction">{{
+        tools.getDecPart2Digit(real_price)
+      }}</span>
+      <span class="a-price-symbol">€</span>
+    </span>
+    
+  </span>
+  
+  <span v-if="!!sale_price && !bold" :class="sale_price ? 'prod_off_price' : ''" 
+    >{{ price ? price.toFixed(2) : 0 }} €
+  </span>
+</template>
+
+<script lang="ts" src="./CPrice.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CPrice.scss';
+</style>

src/components/CPrice/index.ts

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

src/components/CProductCard/CProductCard.ts

@@ -181,9 +181,9 @@ export default defineComponent({
 
     }
 
-    function updateproduct() {
+    async function updateproduct() {
 
-      myproduct.value = products.getProductById(props.id)
+      myproduct.value = await products.getProductById(props.id)
 
       // products.updateQuantityAvailable(myproduct.value._id)
     }
@@ -194,15 +194,15 @@ export default defineComponent({
       if (prod) {
         myproduct.value = prod
       }
-      load()
+      await load()
       endload.value = true
 
     }
 
-    function updateproductmodif() {
+    async function updateproductmodif() {
 
       try {
-        myproduct.value = products.getProductById(props.id)
+        myproduct.value = await products.getProductById(props.id)
 
         updateLabel()
       } catch (e) {
@@ -250,9 +250,9 @@ export default defineComponent({
       return ''
     }
 
-    watch(() => props.id, (newval, oldval) => {
+    watch(() => props.id, async (newval, oldval) => {
       // console.log('change code')
-      load()
+      await load()
     })
 
     watch(() => storeSelected.value, (newval, oldval) => {
@@ -283,8 +283,8 @@ export default defineComponent({
       updateTimerLabel()
     }
 
-    function mounted() {
-      load()
+    async function mounted() {
+      await load()
 
       // Start the timer when the component is mounted
       startTimer();
@@ -312,9 +312,9 @@ export default defineComponent({
       timerInterval.value = setInterval(() => updateTimerLabel(), 60000);
     }
 
-    function load() {
+    async function load() {
       initproduct()
-      updateproduct()
+      await updateproduct()
       labelDataArrivoMerce.value = ''
       labelDataRitiro.value = ''
 

src/components/CProductCard/CProductCard.vue

@@ -997,7 +997,8 @@
         <q-img
           :src="myproduct.productInfo.img ? `` + myproduct.productInfo.img : myproduct.productInfo.image_link"
           :alt="myproduct.productInfo.name"
-          :fit="tools.isMobile() ? 'fill' : 'none'"
+          :fit="tools.isMobile() ? 'fill' : 'cover'"
+          class="fullscreen-image"
           @touchstart="onTouchStart"
           @touchmove="onTouchMove"
           @touchend="onTouchEnd"

src/model/Products.ts

@@ -31,9 +31,11 @@ export interface IProductInfo {
   link?: string
   link_scheda?: string
   checkout_link?: string
+  idAuthors?: string[]
   authors?: string[]
   collezione?: string
-  publisher?: string
+  idPublisher?: string
+  publisher?: IPublisher
   date_publishing?: Date
   numpages?: number
   productType?: number
@@ -191,6 +193,13 @@ export interface IQueryAI {
   color?: string,
 }
 
+export interface IPublisher {
+  _id?: any
+  idapp?: string
+  name?: string
+  link?: string
+}
+
 export interface ISubCatProd {
   _id?: any
   idCatProd: string

src/store/Modules/tools.ts

@@ -8582,8 +8582,41 @@ export const tools = {
     }
 
     return color
-  }
+  },
 
+  getIconByVersione (versione: number ) {
+    let str = ''
+    if (versione === shared_consts.VERSIONE.NUOVO)
+      str = 'fas fa-book'
+    else if (versione === shared_consts.VERSIONE.USATO)
+      // Versione Libro usato
+      str = 'fas fa-book-open'
+    else if (versione === shared_consts.VERSIONE.DOWNLOAD)
+      str = 'fas fa-file-download'
+    else if (versione === shared_consts.VERSIONE.DVD)
+      str = 'fas fa-film'
+    else if (versione === shared_consts.VERSIONE.PDF)
+      str = 'fas fa-file-pdf'
+    else if (versione === shared_consts.VERSIONE.EPUB)
+      // Libro elettronico EPUB
+      str = 'fas fa-book-open-reader'
+    else if (versione === shared_consts.VERSIONE.DVD)
+      str = 'fas fa-video'
+    else if (versione === shared_consts.VERSIONE.STREAMING)
+      str = 'fas fa-stream'
+
+    return str
+  },
+
+  // get the integer part, no round, of a decimal number
+  getIntPart(number: number) {
+    return Math.trunc(number)
+  },
+
+  // get the last 2 digit fraction part, of a decimal number
+  getDecPart2Digit(number: number) {
+    return Math.round(number * 100) % 100  
+  }
 
   // FINE !
 

src/store/Products.ts

@@ -172,12 +172,6 @@ export const useProducts = defineStore('Products', {
       }
 
     },
-
-    getProductById: (state: IProductsState) => (id: string): IProduct => {
-      const prod = state.products.find((prod: IProduct) => prod._id === id)
-      return prod ? prod : getRecordProductEmpty()
-    },
-
     getProductByCode: (state: IProductsState) => (code: string): IProduct => {
       if (!code) {
         return getRecordProductEmpty()
@@ -410,6 +404,19 @@ export const useProducts = defineStore('Products', {
       this.products = [...arrprod]
     },*/
 
+    async getProductById (id: string): Promise<IProduct> {
+      let prod = null
+      if (!this.products) {
+        // Se non lo carico all'avvio, allora fai la chiamata al server
+        prod = await this.loadProductById(id)
+      } else {
+        prod = this.products.find((prod: IProduct) => prod._id === id)
+      }
+      
+      return prod ? prod : getRecordProductEmpty()
+    },
+
+
     async loadProducts() {
 
       const userStore = useUserStore()
@@ -882,7 +889,7 @@ export const useProducts = defineStore('Products', {
       return ris
     },
     async addtoCartBase({ $q, t, id, order, addqty }: { $q: any, t: any, id: string, order: IOrder, addqty: boolean }) {
-      let product = this.getProductById(id)
+      let product = await this.getProductById(id)
 
       return await this.addToCart({ product, order, addqty })
         .then((ris) => {

src/views/ecommerce/catalogo/catalogo.scss

@@ -4,14 +4,14 @@ $heightBtn: 100%;
   height: 300px;
 }
 
-.container{
+.container {
   margin-top: 4px;
   margin-bottom: 4px;
 }
 
-.prod_trov{
+.prod_trov {
   font-style: italic;
-  color: blue;
+  color: grey;
 }
 
 .fixed-group {
@@ -19,7 +19,36 @@ $heightBtn: 100%;
   top: 0;
   left: 0;
   width: 100%;
-  background-color: #ffffff; /* Customize the background color as needed */
-  z-index: 1000; /* Adjust the z-index to ensure it's above other elements */
+  background-color: #ffffff;
+  /* Customize the background color as needed */
+  z-index: 1000;
+  /* Adjust the z-index to ensure it's above other elements */
   transition: all 1s ease;
 }
+
+
+// Underline like a href
+.category {
+  color: darkblue;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 19px;
+
+  cursor: pointer;
+}
+
+.category_sel {
+  color: white !important;
+  background: #5c8ef4 !important;
+  padding: 2px;
+}
+
+.category-title{
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  color: black;
+  text-align: center;
+
+}

src/views/ecommerce/catalogo/catalogo.ts

@@ -121,12 +121,12 @@ export default defineComponent({
 
             // Use a regular expression to match whole words
             let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
-            let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
+            let nameMatch = new RegExp(`\\b(?=.*\\b${lowerSearchText.split(/\s+/).map(word => `(${word})\\b`).join('.*\\b')}\\b)`, 'i');
 
-            // Check if any word in lowerName starts with lowerSearchText
-            let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
+            // Check if all words in lowerSearchText are present in lowerName
+            let allWordsPresent = lowerSearchText.split(/\s+/).every(word => new RegExp(`\\b${word}\\b`, 'i').test(lowerName));
 
-            return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria && productgassel;
+            return (codeMatch.test(product.productInfo.code!) || allWordsPresent) && hasCategoria && productgassel;
           }
         });
       }

src/views/ecommerce/catalogo/catalogo.vue

@@ -4,51 +4,7 @@
       <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
     </div>
     <div v-if="loadpage" class="panel">
-      <div v-if="true">
-        <!--<CSelectUserActive></CSelectUserActive>-->
-        <!-- <div class="text-center text-h7 text-blue">Filtra Prodotti per:</div>
-        <div class="text-center">
-          <q-btn-toggle
-            v-model="cosa"
-            push
-            :size="tools.isMobile() ? '0.75rem' : '1rem'"
-            rounded
-            glossy
-            toggle-color="primary"
-            :options="[
-              { value: shared_consts.PROD.GAS, slot: 'gas' },
-              { value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
-            ]"
-          >
-            <template v-slot:tutti>
-              <div class="row items-center no-wrap">
-                <div class="text-center">
-                  {{ t('ecomm.tutti') }}
-                </div>
-                <q-icon right name="fas fa-check-square" />
-              </div>
-            </template>
-
-            <template v-slot:gas>
-              <div class="row items-center no-wrap">
-                <div class="text-center">
-                  {{ t('gas.ordina_sul_gas') }}
-                </div>
-                <q-icon right name="fas fa-user-friends" />
-              </div>
-            </template>
-
-            <template v-slot:bottega>
-              <div class="row items-center no-wrap">
-                <div class="text-center">
-                  {{ t('gas.bottega') }}
-                </div>
-                <q-icon right name="fas fa-store" />
-              </div>
-            </template>
-          </q-btn-toggle>
-        </div>  -->
-      </div>
+      <div v-if="true"></div>
 
       <div class="container">
         <q-slide-transition>
@@ -163,9 +119,19 @@
           </div>
         </div>
         <div v-else>
-          <div class="row q-gutter-xs justify-center q-mx-auto">
+          <div class="category-title">Categorie</div>
+          <div class="row q-gutter-xs justify-center q-mx-auto bg-blue-1">
             <div v-for="(reccat, index) in getCatProds()" :key="index">
-              <q-btn
+              <span
+                :class="{
+                  category: true,
+                  category_sel: cat === reccat.value,
+                }"
+                @click="cat = reccat.value"
+                >{{ reccat.label }}
+              </span>
+              |
+              <!--<q-btn
                 :push="cat === reccat.value"
                 dense
                 :size="tools.isMobile() ? '0.70rem' : '1rem'"
@@ -176,7 +142,7 @@
                 :label="reccat.label"
                 @click="cat = reccat.value"
               >
-              </q-btn>
+              </q-btn>-->
             </div>
           </div>
           <div class="text-center q-py-sm prod_trov">
@@ -264,6 +230,13 @@
                   :id="product._id"
                   :complete="false"
                   :cosa="cosa"
+                  :options="{
+                    show_short_descr: false,
+                    show_price: false,
+                    show_cat: false,
+                    quante_col: 'c2',
+                    in_3d: false,
+                  }"
                 />
                 <CProductCard
                   v-else-if="product.active || show_hide"

src/views/ecommerce/catalogoInfo/catalogoInfo.vue

@@ -3,7 +3,18 @@
     <div class="panel">
       <div class="container">
         <div class="row justify-center">
-          <CCatalogoCard :id="id" :cosa="cosa" :complete="true"/>
+          <CCatalogoCard
+            :id="id"
+            :cosa="cosa"
+            :complete="true"
+            :options="{
+              show_short_descr: true,
+              show_price: true,
+              show_cat: true,
+              quante_col: 'c1',
+              in_3d: true,
+            }"
+          />
         </div>
       </div>
     </div>
@@ -11,7 +22,6 @@
 </template>
 
 <script lang="ts" src="./catalogoInfo.ts">
-
 </script>
 
 <style lang="scss" scoped>