catalogo, avanti, grafica

src/components/CCatalogoCard/CCatalogoCard.scss

@@ -12,6 +12,7 @@
 
 .prod_price {
   font-size: 1.1rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1rem;
@@ -20,6 +21,7 @@
 
 .prod_sale_price {
   font-size: 1.10rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1.05rem;
@@ -146,6 +148,11 @@
   }
 }
 
+.book-image-fixed{
+  max-width: 300px;
+  max-height: 600px;
+}
+
 .img-pic {
   width: 100%;
   height: 100%;
@@ -165,6 +172,11 @@
   background-color: #f8f8f8;
 }
 
+.book-card {
+  width: 300px;
+  background-color: #f8f8f8;
+}
+
 .book-card-section {
   display: flex;
 }
@@ -182,7 +194,7 @@
 }
 
 .book-info {
-  flex: 2;
+
   padding: 20px;
 }
 
@@ -193,19 +205,18 @@
   line-height: 20px;
   font-weight: bold;
   color: #333;
-  display: flex;
+  display: block;
   text-align: center;
 }
 
 .book-author {
-  color: #263238;
-  display: flex;
-  font-family: Poppins, sans-serif;
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: center;
-  font-style: italic;
+  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  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 */
+  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 */
 }
 
 .book-description {
@@ -215,6 +226,8 @@
 
 .block-variazione {
   border: 1px solid gray;
+  // effetto 3d
+  box-shadow: 0 0 5px gray;
   border-radius: 5px;
   padding: 2px;
   margin: 2px;
@@ -222,5 +235,48 @@
 }
 
 .block-variazione-selected {
-  border: 1px solid red !important;
+  border: 2px solid red !important;
+  font-weight: bold;
+}
+
+.book-isbn {
+  font-size: 0.85rem;
+  color: #A0A0A0;
+}
+
+/* Stilizzazione per descrizione breve del libro */
+.book-short-descr {
+  font-size: 1.1em; /* Leggermente più grande per enfatizzare l'importanza */
+  color: #666; /* Colore del testo in tono grigio scuro per un look sobrio */
+  padding: 8px; /* Padding per dare spazio intorno al testo */
+  border-left: 4px solid #007BFF; /* Linea verticale a sinistra come decorazione tradizionale delle citazioni */
+  margin: 10px 0; /* Margine sopra e sotto per distanziare dalla restante contenuto */
+  font-style: italic; /* Stile del font in corsivo per indicare che si tratta di un estratto o citazione */
+  background-color: #f4f4f4; /* Sfondo leggermente diverso per evidenziare la sezione */
+  display: block; /* Assicura che l'elemento sia trattato come blocco, occupando l'intera larghezza */
+  text-align: center; /* Giustifica il testo per una lettura più fluida */
+}
+
+/* Opzionale: Transizione per l'hover su descrizione */
+.book-short-descr:hover {
+  background-color: #e9e9e9; /* Cambio di sfondo al passaggio del mouse per un effetto interattivo */
+}
+
+.ingrandisci:hover {
+  // fai lo scale 
+  transform: scale(1.1);
+}
+
+.title-descr{
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+}
+
+.scheda-book {
+  text-align: center;
+  margin-left: 20px;
+  @media (max-width: 718px) {
+    margin-left: 5px;
+  } 
 }

src/components/CCatalogoCard/CCatalogoCard.ts

@@ -238,6 +238,10 @@ export default defineComponent({
       return isOrdineChiuso()
     }
 
+    function checkifCartEnable() {
+      return false
+    }
+
     function getQtyWarn() {
       if (myorder.quantity > 0) {
         return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantity })
@@ -288,6 +292,10 @@ export default defineComponent({
     function mounted() {
       load()
 
+      if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
+        indvariazSel.value = 0
+      }
+
       // Start the timer when the component is mounted
       startTimer();
     }
@@ -426,6 +434,9 @@ export default defineComponent({
     }
 
     function setvariazioneSelected(indvariaz: number) {
+      if (indvariazSel.value === indvariaz)
+        indvariazSel.value = -1
+      else
         indvariazSel.value = indvariaz
     }
 
@@ -481,6 +492,7 @@ export default defineComponent({
       apriSchedaPDF,
       setvariazioneSelected,
       indvariazSel,
+      checkifCartEnable,
     }
   }
 })

src/router/routesECommerce.ts

@@ -281,6 +281,16 @@ function getRoutesEcomm(site: ISites) {
       inmenu: false,
       infooter: false
     },
+    {
+      active: true,
+      order: 1000,
+      path: '/catalogo/:idprod/:cosa',
+      materialIcon: 'event',
+      name: 'otherpages.catalogo',
+      component: () => import('@/views/ecommerce/catalogoInfo/catalogoInfo.vue'),
+      inmenu: false,
+      infooter: false
+    },
     {
       active: true,
       order: 1000,

src/statics/lang/it.js

@@ -95,6 +95,7 @@ const msg_it = {
       productInfo: 'Info Prodotto',
       link_scheda: 'Link Scheda',
       addtocart_ext: 'Aggiungi',
+      formato: 'Formato',
     },
     storehouses: {
       name: 'Magazzino',
@@ -115,6 +116,7 @@ const msg_it = {
       myactivities: 'Attività',
       myactivities2: 'Mie Attività',
       product: 'Prodotto',
+      catalogo: 'Catalogo',
       orderscart: 'Ordini',
       sito_offline: 'Sito in Aggiornamento',
       modifprof: 'Modifica',
@@ -1738,6 +1740,7 @@ const msg_it = {
       tutti: 'Tutti',
       paga: 'Paga',
       consegna: 'Consegna',
+      disponibilita: 'Disponibilità',
     },
     gas: {
       name: 'Ordine Gas',
@@ -1787,7 +1790,8 @@ const msg_it = {
       mipiace: 'Mi piace',
       tipiace: 'Ti piace',
       condividi: 'Condividi',
-    }
+    },
+
   },
 };
 

src/store/Modules/tools.ts

@@ -3375,13 +3375,17 @@ export const tools = {
     return myval.charAt(0).toUpperCase() + myval.slice(1)
   },
 
-  firstchars(value: any, numchars = 200) {
+  firstchars(value: any, numchars = 200, capitalizeFirst = false) {
     if (!value) {
       return ''
     }
     try {
       let mycar = value.substring(0, numchars)
       if (value.length > numchars) mycar += '...'
+
+      if (capitalizeFirst) {
+        mycar = mycar.charAt(0).toUpperCase() + mycar.slice(1);
+      }
       return mycar
     } catch (e) {
       return value
@@ -8532,6 +8536,54 @@ export const tools = {
     window.location.reload();
   },
 
+  disponibStr(quantita: any) {
+    if (!quantita) {
+      // Disponibilità non pervenuta, non scrivere niente
+      return ''
+    }
+    quantita = parseInt(quantita)
+    let ris = ''
+    if (quantita < 0) {
+      ris = 'Disponibile per il Pre-Ordine'
+    } else if (quantita === 0) {
+      ris = 'Terminato!'
+    } else if ((quantita > 0) && (quantita <= 3)) {
+      if (quantita === 1)
+        ris = 'Ultimo pezzo !'
+      else
+        ris = 'Ultimi ' + quantita + ' pezzi'
+    } else if ((quantita > 3) && (quantita <= 10)) {
+      ris = 'Media'
+    } else {
+      ris = 'Alta'
+    }
+
+    return ris
+
+  },
+
+  colordisponib(quantita: any) {
+    if (!quantita) {
+      // Disponibilità non pervenuta, non scrivere niente
+      return 'gray'
+    }
+    quantita = parseInt(quantita)
+    let color = ''
+    if (quantita < 0) {
+      color = 'blue'
+    } else if (quantita === 0) {
+      color = 'gray'
+    } else if ((quantita > 0) && (quantita <= 3)) {
+      color = 'red'
+    } else if ((quantita > 3) && (quantita <= 10)) {
+      color = 'orange'
+    } else if (quantita > 10) {
+      color = 'green'
+    }
+
+    return color
+  }
+
 
   // FINE !
 

src/views/ecommerce/catalogoInfo/catalogoInfo.scss

@@ -0,0 +1,5 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}

src/views/ecommerce/catalogoInfo/catalogoInfo.ts

@@ -0,0 +1,59 @@
+import { defineComponent, onMounted, ref } from 'vue'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useProducts } from '@store/Products'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { shared_consts } from '@src/common/shared_vuejs'
+// import MixinBase from '@src/mixins/mixin-base'
+import { CCatalogoCard } from '@src/components/CCatalogoCard'
+
+
+export default defineComponent({
+  name: 'catalogoInfo',
+  components: { CCatalogoCard },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const productStore = useProducts()
+    const $router = useRouter()
+    const $route = useRoute()
+    const $q = useQuasar()
+    const { t } = useI18n();
+    const id = ref('')
+    const cosa = ref(0)
+
+    // const { setValDb, getValDb } = MixinBase()
+
+    function mounted() {
+      // Inizializza
+      console.log('created productInfo')
+      console.log($route)
+      if (!!$route.params.idprod) {
+        id.value = $route.params.idprod.toString()
+      }
+      if (!!$route.params.idprod) {
+        cosa.value = tools.strToVal($route.params.cosa.toString())
+      }
+  
+    }
+
+    onMounted(mounted)
+
+    return {
+      userStore,
+      costanti,
+      tools,
+      toolsext,
+      shared_consts,
+      id,
+      cosa,
+    }
+  }
+})

src/views/ecommerce/catalogoInfo/catalogoInfo.vue

@@ -0,0 +1,19 @@
+<template>
+  <q-page class="q-pa-md">
+    <div class="panel">
+      <div class="container">
+        <div class="row justify-center">
+          <CCatalogoCard :id="id" :cosa="cosa" :complete="true"/>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./catalogoInfo.ts">
+
+</script>
+
+<style lang="scss" scoped>
+@import './catalogoInfo';
+</style>

src/views/ecommerce/catalogoInfo/index.ts

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