- generato lista libri, con possibilità di cambiare l'ordinamento dei libri o di cancellare libri.

2025-04-01 18:36:45 +02:00
parent 61c1dc3d0d
commit 79d1c5fe1d
15 changed files with 507 additions and 302 deletions
--- a/src/components/CMyDialog/CMyDialog.scss
+++ b/src/components/CMyDialog/CMyDialog.scss
@@ -0,0 +1,10 @@
+.maximized-dialog-card {
+    max-width: 90%;
+    /* Larghezza massima del dialog */
+    max-height: 90%;
+    /* Altezza massima del dialog */
+    margin: auto;
+    /* Centra il dialog nello schermo */
+    border-radius: 16px;
+    /* Angoli arrotondati opzionali */
+}
--- a/src/components/CMyDialog/CMyDialog.ts
+++ b/src/components/CMyDialog/CMyDialog.ts
@@ -20,6 +20,11 @@ export default defineComponent({
      required: false,
      default: '',
    },
+    class: {
+      type: String,
+      required: false,
+      default: '',
+    },
  },
  setup(props, { emit }) {
    const userStore = useUserStore()
--- a/src/components/CMyDialog/CMyDialog.vue
+++ b/src/components/CMyDialog/CMyDialog.vue
@@ -1,25 +1,34 @@
 <template>
-  <q-dialog v-model="internalModel" maximized
-    transition-show="slide-up"
-    transition-hide="slide-down"
->
-    <q-card class="dialog_card">
-      <q-toolbar class="bg-primary text-white">
-        <q-toolbar-title>
-          {{ title }}
-        </q-toolbar-title>
-        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-      </q-toolbar>
+  <div :class="class">
+    <q-dialog
+      v-model="internalModel"
+      maximized
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="dialog_card maximized-dialog-card">
+        <q-toolbar class="bg-primary text-white">
+          <q-toolbar-title>
+            {{ title }}
+          </q-toolbar-title>
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="close"
+            v-close-popup
+          ></q-btn>
+        </q-toolbar>

-      <q-card-section class="inset-shadow">
-        <slot></slot>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+        <q-card-section class="inset-shadow">
+          <slot></slot>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
 </template>

-<script lang="ts" src="./CMyDialog.ts">
-</script>
+<script lang="ts" src="./CMyDialog.ts"></script>

 <style lang="scss" scoped>
@import './CMyDialog';
--- a/src/components/CMyEditElem/CMyEditElem.ts
+++ b/src/components/CMyEditElem/CMyEditElem.ts
@@ -368,174 +368,7 @@ export default defineComponent({
    }
    function addNewScheda() {

-      let maxorder = 0
-      myel.value.catalogo!.arrSchede?.forEach(scheda => {
-        if (scheda?.order > maxorder) {
-          maxorder = scheda.order
-        }
-      })
-
-
-      let testodef: IText = {}
-      testodef = tools.resetIText(testodef)
-
-      const defaultDimensioniPag = tools.resetRecIDimensioni(null)
-      defaultDimensioniPag.size = {
-        width: '800px',
-        height: '600px',
-      }
-      defaultDimensioniPag.margini = {
-        top: '12px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-      defaultDimensioniPag.padding = {
-        top: '0px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-
-      const defaultDimensioniRiga = tools.resetRecIDimensioni(null)
-
-      defaultDimensioniRiga.size = {
-        width: '800px',
-        height: '300px',
-      }
-      defaultDimensioniRiga.margini = {
-        top: '40px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-      defaultDimensioniRiga.padding = {
-        top: '0px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-
-      const defaultSchedaProdotto = tools.resetRecIDimensioni(null)
-
-      defaultSchedaProdotto.size = {
-        width: '360px',
-        height: '230px',
-      }
-
-      defaultSchedaProdotto.margini = {
-        top: '0px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-
-      defaultSchedaProdotto.padding = {
-        top: '0px',
-        bottom: '0px',
-        left: '0px',
-        right: '0px',
-      }
-
-      const dimensioni: IElementiScheda = {
-        pagina: { dimensioni: defaultDimensioniPag, testo_down: testodef, testo_up: testodef, testo_title: testodef },
-        riga: defaultDimensioniRiga,
-        scheda_prodotto: defaultSchedaProdotto,
-        immagine_prodotto: {
-          size: {
-            width: '150px',
-            height: '235px',
-          },
-          margini: {
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-          },
-          padding: {
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-          },
-        },
-      }
-
-      const newscheda: IMyScheda = {
-        _id: objectId(),
-        idapp: tools.appid()!,
-        isTemplate: false,
-        isPagIntro: false,
-        show_separatore: true,
-        name: 'Scheda Nuova',
-        dimensioni,
-        numschede_perRiga: 2,
-        numschede_perCol: 2,
-        testo_right_attaccato: {
-          contenuto: '',
-          maxlength: 0,
-          font: {
-            posiz_text: costanti.POSIZ_TESTO.A_DESTRA,
-          },
-        },
-        testo_right: {
-          contenuto: '',
-          maxlength: 0,
-          font: {
-            posiz_text: costanti.POSIZ_TESTO.A_DESTRA,
-          },
-        },
-        testo_bottom: {
-          contenuto: '',
-          maxlength: 0,
-          font: {
-            posiz_text: costanti.POSIZ_TESTO.IN_BASSO,
-          }
-        },
-        barcode: {
-          show: false,
-          format: '',
-          size: {
-            width: '2',
-            height: '100',
-          },
-          font: {
-            name: 'monospace',
-            size: '16px',
-          }
-        },
-        productTypes: [],
-        excludeproductTypes: [],
-        editore: [],
-        argomenti: [],
-        author: '',
-        sort_field: '',
-        sort_dir: 0,
-        arrProdottiSpeciali: [],
-        etichette: {
-          novita: {
-            show: false,
-            months: 6,
-          },
-          bestseller: {
-            show: false,
-            primiNInClassifica: 20
-          }
-        }
-      }
-
-      if (!myel.value.catalogo!.arrSchede)
-        myel.value.catalogo!.arrSchede = []
-
-      myel.value.catalogo!.arrSchede.push(
-        {
-          _id: objectId(),
-          scheda: newscheda,
-          order: maxorder + 10,
-          numPagineMax: 0,
-        }
-      )
-      // console.log('arrschede', myel.value.catalogo!.arrSchede)
+      Products.addNewScheda(myel.value.catalogo)

      modifElem()

--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -1463,6 +1463,7 @@
              @click="addNewScheda"
            >
            </q-btn>
+
            <div
              v-for="(recscheda, ind) in myel.catalogo.arrSchede"
              :key="recscheda._id"
@@ -1470,6 +1471,41 @@
              dense
              :label="`${ind}. ` + recscheda.scheda.name ? recscheda.scheda.name : `Scheda ` + (ind + 1)"
            >
+              <div class="row">
+                <q-select
+                  :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+                  v-if="enableEdit"
+                  rounded
+                  outlined
+                  v-model="recscheda.scheda.linkIdTemplate"
+                  :options="globalStore.getSchedeOpt('SEARCH_')"
+                  @update:model-value="modifElem"
+                  label="Scheda collegata:"
+                  style="width: 250px"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+
+                <q-toggle
+                  v-model="recscheda.scheda.isTemplate"
+                  color="positive"
+                  icon="fas fa-file-pdf"
+                  label="E' un template"
+                  @update:model-value="modifElem"
+                >
+                </q-toggle>
+                <q-input
+                  label="Nome Template"
+                  @update:model-value="modifElem"
+                  v-model="recscheda.scheda.name"
+                  filled
+                  debounce="1000"
+                  v-on:keyup.enter="saveElem"
+                >
+                </q-input>
+              </div>
+
              <q-expansion-item
                dense
                dense-toggle
--- a/src/components/CMySlider/CMySlider.ts
+++ b/src/components/CMySlider/CMySlider.ts
@@ -21,6 +21,11 @@ export default defineComponent({
      type: String,
      required: true,
    },
+    showvalue: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
    min: {
      type: Number,
      required: true,
--- a/src/components/CMySlider/CMySlider.vue
+++ b/src/components/CMySlider/CMySlider.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-badge color="primary"> {{ label }} <span v-if="modelValue">{{ modelValue }}</span> </q-badge>
+  <q-badge class="q-mx-sm" color="primary"> {{ label }} <span v-if="modelValue && showvalue"> ({{ modelValue }})</span> </q-badge>
  <div class="q-pa-xs row no-wrap">
    <q-btn
      icon="fas fa-minus"
--- a/src/components/CProductTable/CProductTable.ts
+++ b/src/components/CProductTable/CProductTable.ts
@@ -5,13 +5,21 @@ import { tools } from '@tools'

 import { useGlobalStore } from '@src/store/globalStore'

+import { CSearchProduct } from '@src/components/CSearchProduct'
+import { CMyDialog } from '@src/components/CMyDialog'
+
 import { costanti } from '@costanti'
 import { IAuthor, ICatProd } from "app/src/model";

+import type {
+  IProduct
+} from '@src/model';
+
+
 export default defineComponent({
  name: "CProductTable",
  components: {
-    draggable,
+    draggable, CSearchProduct, CMyDialog,
  },
  props: {
    lista_prodotti: {
@@ -26,6 +34,9 @@ export default defineComponent({

    const globalStore = useGlobalStore()

+    const showProd = ref(false)
+    const selProd = ref(<IProduct>{})
+
    async function mounted() {

    }
@@ -40,20 +51,28 @@ export default defineComponent({

    // Colonne della tabella
    const allColumns = [
-      { name: "drag", label: "", field: "", align: "left", style: "width: 50px" },
-      { name: "image", label: "Immagine", field: "image", align: "center" },
-      { name: "title", label: "Titolo", field: "title", align: "left" },
-      { name: "author", label: "Autore", field: "author", align: "left" },
-      { name: "topic", label: "Argomento", field: "topic", align: "left" },
+      { name: "drag", label: "Ordinamento", field: "", align: "left", style: "width: 50px" },
+      { name: "image", label: "Copertina", field: "image", align: "center" },
+      { name: "name", label: "Titolo", field: "name", align: "left" },
+      { name: "authors", label: "Autore", field: "authors", align: "left" },
+      { name: "catprods", label: "Argomento", field: "catprods", align: "left" },
+      { name: "quantity", label: "Disponibilità", field: "quantity", align: "left" },
      { name: "isbn", label: "ISBN", field: "isbn", align: "left" },
      { name: "actions", label: "Azioni", field: "", align: "center" },
    ];

-    const selectedColumns = ref(
-      tools.getCookie("selColCat")
-        ? JSON.parse(tools.getCookie("selColCat"))
-        : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"] // Valori di default
-    )
+    let cookieValue: string | null = null;
+    try {
+      cookieValue = tools.getCookie("selColCat");
+      // Se il cookie esiste e contiene una stringa JSON valida
+      cookieValue = cookieValue ? cookieValue : [];
+    } catch (error) {
+      console.error("Errore durante la lettura del cookie 'selColCat'", error);
+      cookieValue = []; // In caso di errore, inizializza come array vuoto
+    }
+
+    const selectedColumns = ref(cookieValue.length > 0 ? cookieValue : ["drag", "image", "name", "authors", "catprods", "isbn", "actions"]);
+

    // 3. Funzione per verificare se una colonna è visibile (isColumnVisible)
    const isColumnVisible = (column) => {
@@ -96,7 +115,7 @@ export default defineComponent({

    function formatCatProds(catprods: ICatProd[] | undefined | null): string {
      if (!catprods || !Array.isArray(catprods)) {
-          return "";
+        return "";
      }

      // Estrai il nome e il cognome di ogni autore e uniscili con ', '
@@ -110,10 +129,16 @@ export default defineComponent({
    onMounted(() => {
      const savedColumns = tools.getCookie("selColCat");
      if (savedColumns) {
-        selectedColumns.value = JSON.parse(savedColumns);
+        selectedColumns.value = savedColumns;
      }
    });

+    function showProduct(element: any) {
+      selProd.value = element
+
+      showProd.value = true
+    }
+
    return {
      allColumns,
      selectedColumns,
@@ -126,6 +151,9 @@ export default defineComponent({
      globalStore,
      costanti,
      onDragEnd,
+      showProduct,
+      showProd,
+      selProd,
    }
  },
 })
--- a/src/components/CProductTable/CProductTable.vue
+++ b/src/components/CProductTable/CProductTable.vue
@@ -9,6 +9,8 @@
        multiple
        emit-value
        map-options
+        option-value="name"
+        option-label="label"
        filled
        style="max-width: 400px"
      />
@@ -19,13 +21,14 @@
      <!-- Intestazioni (Thead) -->
      <thead>
        <tr>
-          <th v-if="isColumnVisible('drag')">Drag</th>
-          <th v-if="isColumnVisible('image')">Immagine</th>
-          <th v-if="isColumnVisible('name')">Nome</th>
-          <th v-if="isColumnVisible('authors')">Autore</th>
-          <th v-if="isColumnVisible('catprods')">Argomento</th>
-          <th v-if="isColumnVisible('isbn')">ISBN</th>
-          <th v-if="isColumnVisible('actions')">Azioni</th>
+          <template v-for="col in allColumns">
+            <th
+              v-if="isColumnVisible(col.name)"
+              :key="col.name"
+            >
+              {{ col.label }}
+            </th>
+          </template>
        </tr>
      </thead>
      <!-- Corpo della Tabella (Tbody) -->
@@ -39,8 +42,15 @@
        <template #item="{ element }">
          <tr :key="element._id">
            <!-- Icona Drag Handle -->
-            <td v-if="isColumnVisible('drag')" class="drag-handle">
-              <q-icon name="drag_handle" size="32px" color="primary" />
+            <td
+              v-if="isColumnVisible('drag')"
+              class="drag-handle"
+            >
+              <q-icon
+                name="drag_handle"
+                size="32px"
+                color="primary"
+              />
            </td>

            <!-- Immagine Piccola -->
@@ -52,7 +62,8 @@
                    : element.productInfo?.image_link
                "
                style="width: 50px; height: 50px"
-                class="rounded-borders"
+                class="rounded-borders cursor-pointer"
+                @click="showProduct(element)"
              />
            </td>

@@ -65,14 +76,25 @@
            <!-- Argomento -->
            <td v-if="isColumnVisible('catprods')">{{ formatCatProds(element.productInfo?.catprods) }}</td>

+            <!-- Quantità -->
+            <td v-if="isColumnVisible('quantity')">{{ element.arrvariazioni[0].quantita }}</td>
+
            <!-- ISBN -->
            <td v-if="isColumnVisible('isbn')">{{ element.isbn }}</td>

            <!-- Azioni -->
            <td v-if="isColumnVisible('actions')">
-              <q-btn-dropdown label="Azioni" color="primary" flat>
+              <q-btn-dropdown
+                label="Azioni"
+                color="primary"
+                flat
+              >
                <q-list>
-                  <q-item clickable v-close-popup @click="removeProduct(element)">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="removeProduct(element)"
+                  >
                    <q-item-section>
                      <q-item-label>Elimina</q-item-label>
                    </q-item-section>
@@ -85,9 +107,15 @@
      </draggable>
    </table>
  </div>
+  <CMyDialog
+    v-model="showProd"
+    title="Prodotto"
+    class="q-ma-md"
+  >
+    <CSearchProduct v-if="selProd" :idprodtoshow="selProd._id" nameLinkTemplate="SEARCH_Prima"> </CSearchProduct>
+  </CMyDialog>
 </template>

-
 <script lang="ts" src="./CProductTable.ts"></script>
 <style lang="scss" scoped>
@import './CProductTable.scss';
--- a/src/components/CSearchProduct/CSearchProduct.ts
+++ b/src/components/CSearchProduct/CSearchProduct.ts
@@ -32,7 +32,18 @@ export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<IOptCatalogo>,
-      required: true,
+      required: false,
+      default: null,
+    },
+    idprodtoshow: {
+      type: String,
+      required: false,
+      default : '',
+    },
+    nameLinkTemplate: {
+      type: String,
+      required: false,
+      default : '',
    },
  },
  setup(props, { emit }) {
@@ -101,10 +112,12 @@ export default defineComponent({

      console.log('myproduct.value', myproduct.value)

-      if (myproduct.value) {
-        tools.setCookie(tools.COOK_LAST_PROD_SEARCH, myproduct.value._id.toString())
-      } else {
-        tools.setCookie(tools.COOK_LAST_PROD_SEARCH, '')
+      if (!props.idprodtoshow) {
+        if (myproduct.value) {
+          tools.setCookie(tools.COOK_LAST_PROD_SEARCH, myproduct.value._id.toString())
+        } else {
+          tools.setCookie(tools.COOK_LAST_PROD_SEARCH, '')
+        }
      }

    }
@@ -123,18 +136,57 @@ export default defineComponent({
      return lista && lista.value && lista.value._id ? lista.value._id : ''
    }

+    function populateDataWithlinkIdTemplate() {
+      console.log('populateDataWithlinkIdTemplate')
+
+      if (optcatalogo.value) {
+
+        for (const recscheda of optcatalogo.value.arrSchede!) {
+          if (recscheda.scheda?.linkIdTemplate) {
+            // ricopia da Template:
+            const myscheda = globalStore.sovrascriviSchedaFromTemplate(recscheda.scheda?.linkIdTemplate, recscheda)
+            if (myscheda) {
+              recscheda.scheda = { ...myscheda }
+            }
+
+          }
+        }
+      }
+
+      // console.log('   FINE - populateDataWithlinkIdTemplate')
+    }
+
+
    async function mounted() {
      // console.log('mounted Catalogo')

-      optcatalogo.value = props.modelValue
-      loadpage.value = false
+      if (props.modelValue) {
+        optcatalogo.value = props.modelValue
+      } else {
+        optcatalogo.value = globalStore.createCatalogoVuoto()
+        productStore.addNewScheda(optcatalogo.value)

-      const id = tools.getCookie(tools.COOK_LAST_PROD_SEARCH, '')
+        if (props.nameLinkTemplate) {
+          const linkIdTemplate = globalStore.getLinkIdTemplateByName(props.nameLinkTemplate)
+          optcatalogo.value.arrSchede[0].scheda.linkIdTemplate = linkIdTemplate
+        } else {
+          optcatalogo.value.arrSchede[0].scheda.name = 'SEARCH_NEW'
+        }
+      }
+
+      const id = props.idprodtoshow || tools.getCookie(tools.COOK_LAST_PROD_SEARCH, '')
+
+      if (props.nameLinkTemplate) {
+        populateDataWithlinkIdTemplate()
+      }
+
+      loadpage.value = false

      if (id) {
        await loadProduct(id)
      }

+
      mycolumns.value = fieldsTable.getArrColsByTable('products')

      searchList.value = [