ver: 1.1.21:

- Lista dei Cataloghi
- Gestione Cataloghi in base alla configurazione

src/components/CMyRecCatalog/CMyRecCatalog.scss

@@ -69,13 +69,15 @@
     /* Arrotonda gli angoli dello sfondo */
 }
 
-.text-h6 {
-    font-family: 'Arial', sans-serif;
-    /* Scegli un font accattivante e comune */
-    font-size: 1.15rem;
-    /* Dimensione del font modificabile */
-    color: #FFF;
-    /* Colore del testo */
-    margin-top: auto;
-    /* Assicura che il titolo sia posizionato alla base della scheda */
+
+.clickable-image {
+    cursor: pointer;
+    /* Cambia il cursore a puntatore quando si passa sopra */
+    transition: transform 0.2s;
+    /* Aggiunge una transizione dolce */
+}
+
+.clickable-image:hover {
+    transform: scale(1.05);
+    /* Aumenta leggermente l'immagine al passaggio del mouse */
 }

src/components/CMyRecCatalog/CMyRecCatalog.ts

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, PropType, ref, watch, computed } from 'vue'
 import { useUserStore } from '@store/UserStore'
-import { IImgGallery, IOptGrid, IUserFields, IUserProfile } from 'model'
+import { ICatalog, IImgGallery, IOptGrid, IUserFields, IUserProfile } from 'model'
 import { costanti } from '@costanti'
 import { shared_consts } from '@/common/shared_vuejs'
 import { fieldsTable } from '@store/Modules/fieldsTable'
@@ -8,14 +8,18 @@ import { tools } from '@store/Modules/tools'
 import { toolsext } from '@store/Modules/toolsext'
 import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
+import { CLabel } from '@/components/CLabel'
 import { CMyCardPopup } from '@/components/CMyCardPopup'
 import { useRouter } from 'vue-router'
 import { useCalendarStore } from '@src/store/CalendarStore'
 import { useGlobalStore } from '@src/store/globalStore'
 
+import { ICollana, IPublisher } from "@src/model/Products"
+import { useProducts } from '@src/store/Products'
+
 export default defineComponent({
   name: 'CMyRecCatalog',
-  components: { CMyCardPopup },
+  components: { CMyCardPopup, CLabel },
   emits: ['setCmd', 'cmdext'],
   props: {
     table: {
@@ -53,12 +57,36 @@ export default defineComponent({
     const { t } = useI18n()
     const $router = useRouter()
 
-    const myrec = ref(<any>null)
+    const myrec = ref(<ICatalog>{})
+
+    const statecolor = ref('negative')
+    const apriInfo = ref(false)
+    const collanestr = ref('')
+    const editorestr = ref('')
+
+    const products = useProducts()
 
     const visupage = ref(false)
     const disabilita = computed(() => {
       return props.table === shared_consts.TABLES_MYBACHECAS
-        })
+    })
+    const esiste_descrintro = computed(() => {
+      return myrec.value.descr_introduttiva && myrec.value.descr_introduttiva.length > 100
+    })
+    const pagina_collegata = computed(() => {
+
+      let linkpage = ''
+
+      let idpag = myrec.value.idPageAssigned
+      if (idpag) {
+        let mypage = globalStore.getPageById(idpag)
+        if (mypage)
+          linkpage = mypage.path!
+      }
+
+      return linkpage
+      
+    })
 
     watch(() => props.prop_myrec, (newval, oldval) => {
 
@@ -70,6 +98,30 @@ export default defineComponent({
       if (props.prop_myrec) {
         myrec.value = props.prop_myrec
       }
+
+      collanestr.value = ''
+      if (myrec.value.idCollane) {
+        for (const idcollana of myrec.value.idCollane!) {
+          const reccoll: ICollana = products.collane!.find((coll: ICollana) => coll.idCollana === idcollana)
+          collanestr.value += reccoll.title + ' '
+        }
+      }
+      editorestr.value = ''
+      if (myrec.value.editore) {
+        for (const receditore of myrec.value.editore!) {
+          const rectrovato: IPublisher = products.publishers!.find((editore: IPublisher) => editore._id === receditore)
+          editorestr.value += rectrovato!.name + ' '
+        }
+      }
+      
+      statecolor.value = 'negative'
+
+      if (myrec.value.descr_introduttiva && myrec.value.img_bordata?.imagefile && myrec.value.img_intro?.imagefile) {
+        statecolor.value = 'orange-8'
+        if (myrec.value.pdf_generato) {
+          statecolor.value = 'positive'
+        }
+      }
     }
 
     function showBadge() {
@@ -88,6 +140,8 @@ export default defineComponent({
       $router.push(path)
     }
 
+    
+
     function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
       emit('setCmd', $q, cmd, myusername, value, groupname)
     }
@@ -138,6 +192,12 @@ export default defineComponent({
       disabilita,
       globalStore,
       computedWidth,
+      statecolor,
+      apriInfo,
+      collanestr,
+      editorestr,
+      pagina_collegata,
+      esiste_descrintro,
     }
   },
 })

src/components/CMyRecCatalog/CMyRecCatalog.vue

@@ -1,76 +1,236 @@
 <template>
-  <div
-    v-if="myrec"
-    class="q-py-xs centermydiv cardrec back_img column justify-between"
-    :style="{
-      width: opt.widthcard,
-      height: opt.heightcard,
-      backgroundImage:
-        `url(` +
-        tools.getFullFileName(
-          [myrec.foto_collana],
-          table,
-          myrec.username,
-          myrec._id
-        ) +
-        `)`,
-    }"
-  >
-    <div class="flex-grow" />
-    <!-- Questo elemento occupa spazio per separare l'immagine dal titolo -->
-    <div class="title-container">
-      <div class="text-h6 text-center">
-        {{ myrec.title }}
-      </div>
-    </div>
+  <div class="q-pa-sm row items-start q-gutter-sm">
+    <q-card
+      v-if="myrec"
+      flat
+      bordered
+      :style="`width: ` + opt.widthcard + `; height: 540px;`"
+    >
+      <!--<q-skeleton
+        v-if="!myrec.foto_collana"
+        type="QAvatar"
+        :width="opt.widthcard"
+        :height="opt.heightcard"
+      />-->
+      <q-img
+        :width="opt.widthcard"
+        @click="apriInfo = true"
+        :height="opt.heightcard"
+        class="clickable-image"
+        :src="
+          tools.getFullFileName(
+            [myrec.foto_collana],
+            table,
+            myrec.username,
+            myrec._id
+          )
+        "
+      >
+        <template v-slot:error>
+          <div class="absolute-full flex flex-center text-white">
+            immagine non impostata
+          </div>
+        </template>
+        <div class="text-h6 absolute-bottom text-left">
+          {{ myrec.title }}
+        </div>
+      </q-img>
 
-    <q-item>
-      <q-item-section side v-if="tools.canModifyThisRec(myrec, table) || editOn">
-        <q-item-label>
-          <q-btn rounded dense icon="fas fa-pencil-alt" color="blue">
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
-                >
-                  <q-item-section side>
-                    <q-icon name="fas fa-pencil-alt" />
-                  </q-item-section>
-                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
-                </q-item>
-              </q-list>
-              <q-list style="min-width: 150px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
-                >
-                  <q-item-section side>
-                    <q-icon name="fas fa-copy" />
-                  </q-item-section>
-                  <q-item-section>{{ $t('event.duplicate') }}</q-item-section>
-                </q-item>
-              </q-list>
-              <q-list style="min-width: 150px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
-                >
-                  <q-item-section side>
-                    <q-icon name="fas fa-trash-alt" />
-                  </q-item-section>
-                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-item-label>
-      </q-item-section>
-    </q-item>
+      <q-card-section>
+        <div
+          v-if="!myrec.foto_collana"
+          class="q-mt-sm q-mb-xs"
+          style="font-size: 1.15rem"
+        >
+          {{ myrec.title }}
+        </div>
+        <div class="text-caption text-h7 text-grey">
+          <q-icon name="fas fa-user" /> Referente:
+          <span
+            v-if="myrec.referenti && myrec.referenti.length > 0"
+            :class="
+              `text-bold ` + myrec.referenti && myrec.referenti.length > 0
+                ? 'text-blue'
+                : 'text-red'
+            "
+          >
+            {{ myrec.referenti ? myrec.referenti.join(', ') : '' }}
+          </span>
+          <span v-else>
+            <span class="text-red">[Nessuno]</span>
+          </span>
+        </div>
+        <div v-if="collanestr" class="text-caption text-h7 text-grey">
+          <q-icon name="fas fa-book" /> Collana:
+          <span class="text-blue">{{ collanestr }}</span>
+        </div>
+        <div v-if="editorestr" class="text-caption text-h7 text-grey">
+          <q-icon name="fas fa-book-open" /> Editore:
+          <span class="text-blue">{{ editorestr }}</span>
+        </div>
+        <div v-if="!esiste_descrintro" class="text-caption text-h7 text-grey">
+          <q-icon name="fas fa-pencil-alt" /> Testo descrittivo:
+          <span :style="`color: ` + (esiste_descrintro ? 'green' : 'red')">{{
+            esiste_descrintro ? 'Presente' : 'Mancante'
+          }}</span>
+        </div>
+        <div
+          v-if="!myrec.img_bordata?.imagefile"
+          class="text-caption text-h7 text-grey"
+        >
+          <q-icon name="fas fa-image" /> Sfondo:
+          <span
+            :style="
+              `color: ` + (myrec.img_bordata?.imagefile ? 'green' : 'red')
+            "
+            >{{ esiste_descrintro ? 'Presente' : 'Mancante' }}</span
+          >
+        </div>
+        <div
+          v-if="!myrec.img_intro?.imagefile"
+          class="text-caption text-h7 text-grey"
+        >
+          <q-icon name="fas fa-image" /> Copertina:
+          <span
+            :style="`color: ` + (myrec.img_intro?.imagefile ? 'green' : 'red')"
+            >{{ esiste_descrintro ? 'Presente' : 'Mancante' }}</span
+          >
+        </div>
+        <div v-if="myrec.pdf_generato" class="text-caption text-h7 text-blue">
+          <q-icon name="fas fa-book" /> -
+          <a :href="myrec.pdf_generato" target="_blank">PDF Generato</a> 
+          (Data: {{tools.getstrDate(myrec.data_generato)}})
+        </div>
+        <div v-if="myrec.pdf_online" class="text-caption text-h7 text-blue">
+          <q-icon name="fas fa-book" /> -
+          <a :href="myrec.pdf_online" target="_blank">PDF ONLINE</a> 
+          (Data: {{tools.getstrDate(myrec.data_online)}})
+        </div>
+        <!--<div class="text-overline text-orange-9">{{collanestr}}</div>-->
+      </q-card-section>
+
+      <q-card-actions>
+        <div class="row justify-center">
+          <q-fab
+            color="primary"
+            icon="fas fa-caret-down"
+            label="Menu"
+            direction="up"
+            flat
+            dense
+          >
+            <q-fab-action
+              v-if="tools.canModifyThisRec(myrec, table) || editOn"
+              @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
+              color="negative"
+              :label="$t('reg.elimina')"
+              icon="fas fa-trash-alt"
+            />
+            <q-fab-action
+              v-if="tools.canModifyThisRec(myrec, table) || editOn"
+              @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
+              color="accent"
+              :label="$t('event.duplicate')"
+              icon="fas fa-copy"
+            />
+            <q-fab-action
+              color="positive"
+              label="Gestisci"
+              icon="fas fa-book-open"
+              @click="naviga(pagina_collegata)"
+            />
+            <q-fab-action
+              v-if="tools.canModifyThisRec(myrec, table) || editOn"
+              @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
+              color="primary"
+              :label="$t('reg.edit')"
+              icon="fas fa-pencil-alt"
+            />
+          </q-fab>
+          <q-btn
+            flat
+            color="primary"
+            label="Info"
+            icon="fas fa-info"
+            @click="apriInfo = true"
+          />
+          <q-btn
+            flat
+            :color="statecolor"
+            label="PDF"
+            icon="fas fa-book"
+            :disable="!myrec.pdf_generato"
+            @click="naviga(myrec.pdf_generato)"
+          />
+        </div>
+      </q-card-actions>
+    </q-card>
   </div>
+
+  <q-dialog v-model="apriInfo">
+    <q-card>
+      <q-toolbar class="bg-primary text-white">
+        <q-toolbar-title>
+          {{ myrec.title }}
+        </q-toolbar-title>
+        <q-btn
+          flat
+          round
+          color="white"
+          label="CHIUDI"
+          icon="close"
+          v-close-popup
+        ></q-btn>
+      </q-toolbar>
+      <q-card-section>
+        <div class="row justify-center q-ma-sm q-pa-sm">
+          <div style="width: 300px" class="q-ma-sm">
+            <CLabel
+              :value="
+                myrec.referenti && myrec.referenti.length > 0
+                  ? myrec.referenti.join(', ')
+                  : '[Non Assegnato]'
+              "
+              label="Referente/i:"
+              :color="
+                myrec.referenti && myrec.referenti.length > 0
+                  ? 'text-blue'
+                  : 'text-red'
+              "
+            />
+          </div>
+          <div style="width: 300px" class="q-ma-sm">
+            <CLabel v-if="collanestr" :value="collanestr" label="Collana/e:" />
+          </div>
+          <div style="width: 300px" class="q-ma-sm">
+            <CLabel
+              class_text="text-bold"
+              :value="esiste_descrintro ? 'PRESENTE ' : 'MANCANTE !'"
+              label="Testo descrittivo"
+              :color="esiste_descrintro ? 'green' : 'red'"
+            />
+          </div>
+          <div style="width: 300px" class="q-ma-sm">
+            <CLabel
+              :value="myrec.pdf_generato || 'ancora non è stato generato'"
+              label="PDF generato"
+              :color="myrec.pdf_generato ? 'green' : 'red'"
+              :copy="true"
+            />
+            <CLabel
+              :value="myrec.pdf_online || 'ancora non è andato ONLINE'"
+              label="PDF On-Line Ufficiale"
+              :color="myrec.pdf_online ? 'green' : 'red'"
+              :copy="true"
+            />
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+    <q-card-actions align="center">
+      <q-btn color="primary" label="Chiudi" @click="apriInfo = false" />
+    </q-card-actions>
+  </q-dialog>
 </template>
 <script lang="ts" src="./CMyRecCatalog.ts">
 </script>