- aggiornato catalogo lista con filtri per editori e grafico

src/components/CMyElem/CMyElem.ts

@@ -56,6 +56,8 @@ import { useI18n } from '@/boot/i18n'
 import { useRouter } from 'vue-router'
 import { LatLng } from 'leaflet'
 
+import { costanti } from '@costanti'
+
 
 export default defineComponent({
   name: 'CMyElem',
@@ -123,6 +125,8 @@ export default defineComponent({
     const enableAdd = ref(true)
     const visushare = ref(false)
 
+    const tabcatalogo = ref('griglia')
+
     const social = ref(<ISocial>{})
 
     const neworder = ref(<number | undefined>0)
@@ -294,6 +298,10 @@ export default defineComponent({
       myel.value.catalogo = updatedCatalogo
     }
 
+    function naviga(path: string) {
+      $router.push(path)
+    }
+
     onMounted(mounted)
 
     return {
@@ -336,6 +344,9 @@ export default defineComponent({
       currentCardsPerSlide,
       animarecard,
       updateCatalogoEmit,
+      tabcatalogo,
+      costanti,
+      naviga,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -10,7 +10,13 @@
       "
     >
       <div v-if="myel.type">
-        <q-btn v-if="editOn" rounded dense icon="fas fa-pencil-alt" @click="clickOnElem">
+        <q-btn
+          v-if="editOn"
+          rounded
+          dense
+          icon="fas fa-pencil-alt"
+          @click="clickOnElem"
+        >
         </q-btn>
         <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
           <transition
@@ -566,16 +572,50 @@
           ></CGridOriz>
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST">
-          <div v-if="editOn" class="elemEdit">Lista Cataloghi</div>
-          <CCatalogList
-            :prop_search="myel.parambool"
-            :finder="myel.parambool2"
-            :heightcarousel="myel.heightcarousel"
-            :heightimg="myel.heightimg"
-            :widthimg="myel.widthimg"
-            :heightcard="myel.height"
-            :widthcard="myel.width"
-          ></CCatalogList>
+          <div v-if="editOn" class="elemEdit">Cataloghi</div>
+          <q-tabs
+            v-if="tools.isEditor() || tools.isGrafico()"
+            v-model="tabcatalogo"
+            dense
+            class="bg-green text-white"
+          >
+            <q-tab name="griglia" icon="fas fa-eye" label="Griglia"> </q-tab>
+            <q-tab name="lista" icon="fas fa-list" label="Lista"> </q-tab>
+            <q-tab name="tutorial" icon="fas fa-info" label="Tutorial"> </q-tab>
+          </q-tabs>
+          <q-tab-panels v-model="tabcatalogo" animated keep-alive>
+            <q-tab-panel name="lista">
+              <CGridOriz
+                table="catalogs"
+                :tipovisu="costanti.VISUTABLE_TABLELIST"
+                :prop_search="true"
+                :finder="true"
+                :showMap="false"
+                :prop_modif="tools.isAdmin()"
+              ></CGridOriz>
+            </q-tab-panel>
+            <q-tab-panel name="griglia">
+              <CCatalogList
+                :prop_search="myel.parambool"
+                :finder="myel.parambool2"
+                :heightcarousel="myel.heightcarousel"
+                :heightimg="myel.heightimg"
+                :widthimg="myel.widthimg"
+                :heightcard="myel.heightcard"
+                :widthcard="myel.widthcard"
+              ></CCatalogList>
+            </q-tab-panel>
+            <q-tab-panel name="tutorial">
+              <div class="q-pa-md q-ma-sm text-center">
+                <q-btn
+                  rounded
+                  label="Apri Tutorial"
+                  color="primary"
+                  @click="naviga('/tutorial')"
+                ></q-btn>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
           <div v-if="editOn" class="elemEdit">CStatusReg</div>