- risolto problema spazi vuoti in cima alla app

- risolto problema sulle card di telegram, immagini non alte uguali e non si vedono bene...

src/components/CCardCarouselComp/CCardCarouselComp.scss

@@ -0,0 +1,65 @@
+
+.elemEdit {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  z-index: 100;
+  font-size: 12px;
+}
+
+.card-group-scrollable {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
+.card-group-scrollable::-webkit-scrollbar {
+  height: 8px;
+}
+
+.card-group-scrollable::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.card-group-scrollable::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+
+.flex-card {
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease;
+  margin: 0 0.25rem !important;
+}
+
+.titolo_card {
+  cursor: pointer;
+}
+
+.titolo_card:hover {
+  transform: scale(1.05);
+}
+
+.img-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.q-card-section-small {
+  padding: px !important;  // o il valore che preferisci
+  flex: 1;
+}
+
+.clEdit {
+  border: 2px dashed #ff9800;
+  background: rgba(255, 152, 0, 0.1);
+  cursor: pointer;
+}

src/components/CCardCarouselComp/CCardCarouselComp.ts

@@ -0,0 +1,148 @@
+import { ref, computed, defineComponent, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+
+import { tools } from '@tools';
+import { IMyCard, IMyPage, IOperators } from '@src/model';
+
+import objectId from '@src/js/objectId';
+
+export default defineComponent({
+  name: 'ElementComponent',
+  props: {
+    myel: {
+      type: Object,
+      required: true,
+    },
+    editOn: {
+      type: Boolean,
+      default: false,
+    },
+    path: {
+      type: String,
+      default: '',
+    },
+    cardColumnClass: {
+      type: String,
+      default: 'col-12 col-sm-6 col-md-4',
+    },
+    cardWidth: {
+      type: String,
+      default: '300px',
+    },
+    cardHeight: {
+      type: String,
+      required: true,
+    },
+    cardImg: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const $q = useQuasar();
+    const carousel = ref(null);
+    const cardScroller = ref(<any>null);
+    const slide = ref(0);
+    const animarecard = ref(0);
+
+    // Computed per l'altezza del contenitore immagine (70% dell'altezza card)
+    const imageContainerHeight = computed(() => {
+      const heightValue = parseInt(props.cardHeight.replace('px', ''));
+      return `${heightValue * 0.7}px`;
+    });
+    const currentCardsPerSlide = computed(() => {
+      return props.myel.num2 ? props.myel.num2 : 2; // cardsPerSlide
+    });
+
+    // Costanti per i tipi di elemento
+    const ELEMTYPE = {
+      CARD: 'card',
+      MARGINI: 'margini',
+    };
+
+    const cardGroups = computed(() => {
+      const cards = props.myel.listcards || [];
+      const groups = [];
+
+      for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
+        groups.push(cards.slice(i, i + currentCardsPerSlide.value));
+      }
+
+      if (!groups.length) {
+        groups.push([
+          {
+            _id: objectId(),
+            imagefile: '',
+            alt: '',
+            description: '',
+            vers_img: 0,
+          },
+        ]);
+      }
+
+      return groups;
+    });
+
+    // Metodi
+    const canScrollLeft = ref(false);
+    const canScrollRight = ref(false);
+
+    // Funzione per aggiornare lo stato degli scroll
+function updateScrollButtons() {
+  const scroller = Array.isArray(cardScroller.value)
+    ? cardScroller.value[slide.value]
+    : cardScroller.value;
+
+  if (scroller) {
+    canScrollLeft.value = scroller.scrollLeft > 5; // 5px di tolleranza
+    canScrollRight.value = scroller.scrollLeft < (scroller.scrollWidth - scroller.clientWidth - 5);
+  }
+}
+    // Modifica scrollCards per aggiornare i bottoni dopo lo scroll
+    function scrollCards(delta: number) {
+      const scroller = Array.isArray(cardScroller.value)
+        ? cardScroller.value[slide.value]
+        : cardScroller.value;
+
+      if (scroller) {
+        scroller.scrollBy({
+          left: delta,
+          behavior: 'smooth',
+        });
+        // Aggiorna i bottoni dopo un piccolo delay per lo smooth scroll
+        setTimeout(updateScrollButtons, 300);
+      }
+    }
+    const clickOnElem = () => {
+      // Logica per il click sull'elemento
+      console.log('Element clicked', props.myel);
+    };
+
+    const getClass = () => {
+      // Restituisce classi aggiuntive basate sulla configurazione
+      return props.myel.extraClass || '';
+    };
+
+    onMounted(() => {
+      updateScrollButtons();
+    });
+
+    return {
+      carousel,
+      cardScroller,
+      slide,
+      animarecard,
+      ELEMTYPE,
+      cardGroups,
+      scrollCards,
+      clickOnElem,
+      getClass,
+      tools,
+      imageContainerHeight,
+      canScrollLeft,
+      canScrollRight,
+      updateScrollButtons,
+    };
+  },
+});

src/components/CCardCarouselComp/CCardCarouselComp.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <!-- Card Carousel -->
+    <div class="card-carousel-container">
+      <div
+        v-if="editOn"
+        class="elemEdit"
+      >
+        Card
+      </div>
+      <q-carousel
+        swipeable
+        animated
+        :autoplay="animarecard"
+        v-model="slide"
+        navigation
+        control-text-color="white"
+        ref="carousel"
+        transition-next="slide-left"
+        transition-prev="slide-right"
+        :height="tools.getNumberByPixel(cardHeight) + 20 + 'px'"
+        width="100%"
+        control-type="flat"
+        class="shadow-2 rounded-borders"
+        :style="`background-color: ${myel.color || '#ffffff'} !important`"
+        @mouseenter="animarecard = 0"
+        @mouseleave="animarecard = 1000"
+      >
+        <template v-slot:control>
+          <q-carousel-control
+            position="top-left"
+            :offset="[10, -10]"
+            class="q-gutter-xs"
+            style="opacity: 0.7"
+          >
+            <q-btn
+              v-if="canScrollLeft"
+              push
+              round
+              :color="$q.dark.isActive ? 'black' : 'white'"
+              :text-color="$q.dark.isActive ? 'white' : 'black'"
+              icon="keyboard_arrow_left"
+              @click="scrollCards(-300)"
+              @scroll="updateScrollButtons"
+            />
+          </q-carousel-control>
+          <q-carousel-control
+            position="top-right"
+            class="q-gutter-xs"
+            :offset="[10, -10]"
+            style="opacity: 0.7"
+          >
+            <q-btn
+              v-if="canScrollRight"
+              push
+              round
+              :color="$q.dark.isActive ? 'black' : 'white'"
+              :text-color="$q.dark.isActive ? 'white' : 'black'"
+              icon="keyboard_arrow_right"
+              @click="scrollCards(300)"
+              @scroll="updateScrollButtons"
+            />
+          </q-carousel-control>
+        </template>
+
+        <!-- Slides con gruppi di card -->
+        <q-carousel-slide
+          v-for="(group, groupIndex) in cardGroups"
+          :key="groupIndex"
+          :name="groupIndex"
+        >
+          <div
+            ref="cardScroller"
+             @scroll="updateScrollButtons"
+            :style="{
+              'max-height': tools.getNumberByPixel(cardHeight) + 20 + 'px',
+              'max-width': $q.screen.width + 'px',
+              'overflow-x': 'auto',
+              'overflow-y': 'hidden',
+              'padding-bottom': '10px',
+            }"
+          >
+            <div class="row no-wrap items-center">
+              <div
+                v-for="(rec, cardIndex) in group"
+                :key="cardIndex"
+                :class="cardColumnClass"
+                class="flex flex-center"
+              >
+                <q-card
+                  :class="
+                    'flex-card bordered ' +
+                    (myel.class3 || '') +
+                    (rec.link ? ' titolo_card' : '')
+                  "
+                  :style="`
+                    ${rec.style || ''};
+                    height: ${tools.getNumberByPixel(cardHeight) - 0 + 'px'};
+                    width: ${rec.width || cardWidth};
+                    flex: 0 0 auto;
+                    display: flex;
+                    flex-direction: column;
+                  `"
+                  @click="rec.link ? tools.openUrl(rec.link) : undefined"
+                >
+                  <div
+                    class="img-container"
+                    :style="`
+                      height: ${cardImg};
+                      min-height: ${cardImg};
+                      max-height: ${cardImg};
+                      overflow: hidden;
+                      flex-shrink: 0;
+                    `"
+                  >
+                    <q-img
+                      :class="
+                        (tools.getClassAnim(myel.anim2) || '') + ' ' + (myel.class4 || '')
+                      "
+                      :src="tools.getImgFileByElem(myel, rec, path)"
+                      fit="contain"
+                      :style="`height: ${cardImg};`"
+                    />
+                  </div>
+                  <q-card-section class="q-card-section-small">
+                    <div
+                      :class="rec.size || 'text-subtitle1'"
+                      :style="`color: ${rec.color || 'inherit'}`"
+                    >
+                      {{ tools.getText(rec.alt) }}
+                    </div>
+                    <div
+                      :class="'q-mt-xs q-mb-xs ' + (tools.getClassAnim(myel.anim) || '')"
+                      v-html="rec.content"
+                    />
+                    <div
+                      v-if="rec.description"
+                      class="text-caption"
+                      :style="`color: ${rec.colorsub || 'grey'}`"
+                    >
+                      {{ rec.description }}
+                    </div>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </div>
+          </div>
+        </q-carousel-slide>
+      </q-carousel>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CCardCarouselComp.ts"></script>
+
+<style lang="scss" scoped>
+@import './CCardCarouselComp.scss';
+</style>

src/components/CCardCarouselComp/index.ts

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

src/components/CCheckAppRunning/CCheckAppRunning.vue

@@ -10,7 +10,7 @@
 
   <div
     v-if="finishLoading"
-    class="row justify-center q-gutter-md"
+    class="row justify-center"
   >
     <!-- 🚫 Se sei in un WebView non compatibile (es. Telegram) -->
 

src/components/CDashboard/CDashboard.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="q-ma-xs">
+  <div class="q-ma-none">
     <div
       v-if="tools.visualizzaHomeApp()"
-      class="row q-my-xs shadow"
-      style="border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12)"
+      class="row q-mx-xs shadow-1"
+      style="border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.12)"
     >
       <!--<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_4" style="border-left: 1px solid #efefef;"
            v-bind:class="{'border-top': $q.platform.is.mobile}">

src/components/CMyEditElem/CMyEditElem.vue

@@ -243,6 +243,7 @@
           <div class="row">
             <CMySlider
               v-if="
+                myel.type === shared_consts.ELEMTYPE.CARD ||
                 myel.type === shared_consts.ELEMTYPE.CATALOGLIST ||
                 myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI
               "
@@ -470,6 +471,15 @@
             />
           </q-expansion-item>
           <div class="row">
+            <q-input
+              dense
+              label="Classe per Card:"
+              @update:model-value="modifElem"
+              v-model="myel.class2"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
             <q-input
               dense
               label="Classe Schede:"

src/components/CMyElem/CMyElem.scss

@@ -467,4 +467,7 @@ h1 {
 .elemEdit:hover {
   border: #11f609 solid 2px;
   cursor: pointer;
+}
+.myElemBase{
+  margin-bottom: 16px;
 }

src/components/CMyElem/CMyElem.ts

@@ -34,6 +34,7 @@ import { CMyVideoYoutube } from '@src/components/CMyVideoYoutube';
 import { CStatMacro } from '@src/components/CStatMacro';
 import { CSearchProduct } from '@src/components/CSearchProduct';
 import { CPageViewStats } from '@src/components/CPageViewStats';
+import { CCardCarouselComp } from 'app/src/components/CCardCarouselComp';
 import { CQRCode } from '@src/components/CQRCode';
 import { CAITools } from '@src/components/CAITools';
 import { CCatalogo } from '@src/components/CCatalogo';
@@ -105,6 +106,7 @@ export default defineComponent({
     CMainView,
     CNotifAtTop,
     CPresentazione,
+    CCardCarouselComp,
     CMyActivities,
     CMyProfileTutorial,
     CSendRISTo,
@@ -196,6 +198,8 @@ export default defineComponent({
 
     const tabcatalogo = ref('griglia');
 
+    const enablePwa = computed(() => globalStore.site.confpages?.enablePwa);
+
     const social = ref(<ISocial>{});
 
     const neworder = ref(<number | undefined>0);
@@ -244,7 +248,6 @@ export default defineComponent({
     const speedSafe = computed(() => (myel.value as any).speed ?? 0);
 
     const carouselRef = ref(<any>null);
-    const cardScroller = ref(<any>null);
     const isAtStart = ref(true);
     const isAtEnd = ref(false);
     const activeIndex = ref(0);
@@ -399,16 +402,6 @@ export default defineComponent({
       }
     }
 
-    function scrollCards(delta: number) {
-      const scroller = cardScroller.value?.[0] || cardScroller.value;
-      if (scroller) {
-        scroller.scrollBy({
-          left: delta,
-          behavior: 'smooth',
-        });
-      }
-    }
-
     const updateApp = async () => {
       // Invia il messaggio al Service Worker per saltare l'attesa
       const registration = await navigator.serviceWorker.getRegistration();
@@ -472,9 +465,8 @@ export default defineComponent({
       speedSafe,
       t,
       cardGroupMaxWidth,
-      cardScroller,
-      scrollCards,
       isNewVersionAvailable,
+      enablePwa,
     };
   },
 });

src/components/CMyElem/CMyElem.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- CMyElem -->
     <div
       v-if="myel"
       :class="
@@ -40,139 +41,17 @@
             </div>
           </transition>
         </div>
-        <div
-          v-if="myel.type === shared_consts.ELEMTYPE.CARD"
-          class="card-carousel-container"
-        >
-          <div
-            v-if="editOn"
-            class="elemEdit"
-          >
-            Card
-          </div>
-          <q-carousel
-            swipeable
-            animated
-            :autoplay="animarecard"
-            v-model="slide"
-            navigation
-            control-text-color="white"
-            ref="carousel"
-            transition-next="slide-left"
-            transition-prev="slide-right"
-            :height="myel.heightcarousel"
-            width="100%"
-            control-type="flat"
-            class="shadow-2 rounded-borders"
-            :style="`background-color: ${myel.color} !important`"
-            @mouseenter="animarecard = 0"
-            @mouseleave="animarecard = 1000"
-          >
-            <template v-slot:control>
-              <q-carousel-control
-                position="top-left"
-                :offset="[-10, -10]"
-                class="q-gutter-xs"
-                style="opacity: 0.7"
-              >
-                <q-btn
-                  push
-                  round
-                  :color="$q.dark.isActive ? `black` : `white`"
-                  :text-color="$q.dark.isActive ? `white` : `black`"
-                  icon="keyboard_arrow_left"
-                  @click="scrollCards(-300)"
-                ></q-btn>
-              </q-carousel-control>
-              <q-carousel-control
-                position="top-right"
-                class="q-gutter-xs"
-                :offset="[-10, -10]"
-                style="opacity: 0.7"
-              >
-                <q-btn
-                  push
-                  round
-                  :color="$q.dark.isActive ? `black` : `white`"
-                  :text-color="$q.dark.isActive ? `white` : `black`"
-                  icon="keyboard_arrow_right"
-                  @click="scrollCards(300)"
-                ></q-btn>
-              </q-carousel-control>
-            </template>
-            <!-- Iteriamo sui gruppi di card invece che sulle singole card -->
-            <q-carousel-slide
-              v-for="(group, groupIndex) in cardGroups"
-              :key="groupIndex"
-              :name="groupIndex"
-            >
-              <!-- Contenitore scrollabile orizzontalmente -->
-              <div
-                ref="cardScroller"
-                class="card-group-scrollable"
-                :style="{ 'max-height': myel.heightcarousel, 'max-width': ($q.screen.width - 45) + 'px' }"
-              >
-                <div class="row no-wrap items-center">
-                  <template
-                    v-for="(rec, cardIndex) in group"
-                    :key="cardIndex"
-                  >
-                    <div
-                      :class="cardColumnClass"
-                      class="flex flex-center"
-                    >
-                      <q-card
-                        :class="
-                          `flex-card bordered ` +
-                          myel.class3 +
-                          (rec.link ? ' titolo_card' : '')
-                        "
-                        :style="`
-              ${rec.style};
-              height: ${myel.heightimg || '300px'};
-              width: ${myel.widthimg || '300px'};
-              flex: 0 0 auto;
-            `"
-                        @click="rec.link ? tools.openUrl(rec.link) : undefined"
-                      >
-                        <div
-                          class="img-container"
-                          :style="`height: ${parseInt(myel?.heightimg?.replace('px', '')) * 0.7}px; overflow: hidden;`"
-                        >
-                          <q-img
-                            :class="tools.getClassAnim(myel.anim2) + ' ' + myel.class4"
-                            :src="tools.getImgFileByElem(myel, rec, path)"
-                            fit="contain"
-                          />
-                        </div>
-                        <q-card-section class="q-card-section-small">
-                          <div
-                            :class="rec.size"
-                            :style="`color: ${rec.color}`"
-                          >
-                            {{ tools.getText(rec.alt) }}
-                          </div>
-                          <div
-                            :class="`q-mt-xs q-mb-xs ` + tools.getClassAnim(myel.anim)"
-                            v-html="rec.content"
-                          ></div>
-                          <div
-                            v-if="rec.description"
-                            class="text-caption"
-                            :style="`color: ${rec.colorsub}`"
-                          >
-                            {{ rec.description }}
-                          </div>
-                        </q-card-section>
-                      </q-card>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </q-carousel-slide>
-          </q-carousel>
-        </div>
+        <CCardCarouselComp
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CARD"
+          :myel="myel"
+          :edit-on="editOn"
+          :path="path"
+          :card-column-class="cardColumnClass()"
+          :card-width="myel.widthcard"
+          :card-height="myel.heightcarousel"
+          :card-img="myel.heightimg"
 
+        />
         <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
           <div
             :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -182,7 +61,10 @@
             &nbsp;
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE"
+          class="myElemBase"
+        >
           <div>
             <div
               :class="
@@ -204,7 +86,10 @@
             </div>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE"
+          class="myElemBase"
+        >
           <div>
             <div
               :class="
@@ -226,7 +111,10 @@
             </div>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER"
+          class="myElemBase"
+        >
           <div
             :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem"
@@ -248,7 +136,10 @@
             </CImgPoster>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.HTML"
+          class="myElemBase"
+        >
           <div>
             <div
               :class="
@@ -263,7 +154,10 @@
             ></div>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.QRCODE"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -277,7 +171,10 @@
             :imglogo="tools.getImgFileByElem(myel, undefined, path)"
           ></CQRCode>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE"
+          class="myElemBase"
+        >
           <div class="text-center">
             <div
               :class="
@@ -300,7 +197,10 @@
           </div>
         </div>
 
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD"
+          class="myElemBase"
+        >
           <div class="text-center">
             <div
               :class="
@@ -331,7 +231,10 @@
             </div>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO"
+          class="myElemBase"
+        >
           <div
             :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem"
@@ -344,7 +247,10 @@
             </q-video>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO_YOUTUBE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO_YOUTUBE"
+          class="myElemBase"
+        >
           <CMyVideoYoutube
             :url="myelem.container"
             :title="myelem.container2 || ''"
@@ -364,7 +270,10 @@
             :ccLoad="myelem.ccLoad ?? false"
           />
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE_GALLERY">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE_GALLERY"
+          class="myElemBase"
+        >
           <CMyImageGallery> </CMyImageGallery>
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.HEADING">
@@ -396,9 +305,6 @@
               Pagina: {{ myel.container }}
             </div>
           </div>
-          <!--
-          <CMyPageElem v-if="myel.container" title="" :mypath="myel.container"> </CMyPageElem>
-          -->
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
           <div
@@ -574,7 +480,10 @@
           >
           </CEventsCalendar>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -592,16 +501,10 @@
           </div>
           <CMyProfileTutorial />
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
-          <div
-            v-if="editOn"
-            class="elemEdit"
-          >
-            CheckAppRunning
-          </div>
-          <CCheckAppRunning />
-        </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -638,7 +541,10 @@
             </q-btn>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -647,7 +553,10 @@
           </div>
           <CDashboard></CDashboard>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -656,7 +565,10 @@
           </div>
           <CDashGroup></CDashGroup>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -665,7 +577,10 @@
           </div>
           <CMovements :showbuttolastmov="true"></CMovements>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -674,7 +589,10 @@
           </div>
           <CSendRISTo></CSendRISTo>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -691,14 +609,20 @@
             :prop_modif="myel.parambool4"
           ></CGridOriz>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT"
+          class="myElemBase"
+        >
           <CSearchProduct
             v-model="myel.catalogo"
             table="products"
           >
           </CSearchProduct>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGLIST"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -779,10 +703,16 @@
             </q-tab-panel>
           </q-tab-panels>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.STAT_PAGES">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.STAT_PAGES"
+          class="myElemBase"
+        >
           <CPageViewStats></CPageViewStats>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -841,7 +771,10 @@
             </q-tab-panel>
           </q-tab-panels>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -850,7 +783,10 @@
           </div>
           <CStatusReg> </CStatusReg>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -859,7 +795,10 @@
           </div>
           <CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -868,10 +807,16 @@
           </div>
           <CVisuVideoPromoAndPDF :showalways="myel.container"></CVisuVideoPromoAndPDF>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION"
+          class="myElemBase"
+        >
           <div>Versione: {{ tools.getvers() }}</div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI"
+          class="myElemBase"
+        >
           <div class="row justify-evenly items-center q-pa-sm q-ma-sm">
             <q-btn
               icon="fas fa-share"
@@ -893,7 +838,10 @@
             </q-btn>
           </div>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CHAT_TERRITORIALE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CHAT_TERRITORIALE"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -944,7 +892,10 @@
           </div>
           <CPresentazione></CPresentazione>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -953,7 +904,10 @@
           </div>
           <CMyActivities></CMyActivities>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -962,21 +916,30 @@
           </div>
           <CECommerce></CECommerce>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO"
+          class="myElemBase"
+        >
           <CCatalogo
             v-model="myel.catalogo"
             :idPage="idPage"
             @updateCatalogo="updateCatalogoEmit(myel.catalogo)"
           />
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTA">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTA"
+          class="myElemBase"
+        >
           <CRaccolta
             v-model="myel.catalogo"
             :idPage="idPage"
             @updateCatalogo="updateCatalogoEmit(myel.catalogo)"
           />
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -987,7 +950,10 @@
 
         ></CMapMarker>-->
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -996,7 +962,10 @@
           </div>
           <CMapUsers></CMapUsers>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -1005,7 +974,10 @@
           </div>
           <CMapGetCoordinates></CMapGetCoordinates>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -1017,7 +989,10 @@
             v-model:model-value="coordaddr"
           ></CMapEditAddressByCoord>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -1026,7 +1001,10 @@
           </div>
           <CMapComuni></CMapComuni>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -1035,7 +1013,10 @@
           </div>
           <CAITools></CAITools>
         </div>
-        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHATBOT">
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.CHATBOT"
+          class="myElemBase"
+        >
           <div
             v-if="editOn"
             class="elemEdit"
@@ -1044,6 +1025,15 @@
           </div>
           <ChatBot></ChatBot>
         </div>
+        <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
+          <div
+            v-if="editOn"
+            class="elemEdit"
+          >
+            CheckAppRunning
+          </div>
+          <CCheckAppRunning v-if="enablePwa" />
+        </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.NOTIFATTOP">
           <div
             v-if="editOn"
@@ -1107,8 +1097,8 @@
             </div>
             <div v-else>
               <span class="mybanner"
-                >* Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire
-                questo messaggio, chiudere e riaprire la pagina.</span
+                >Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire il
+                messaggio, chiudere e riaprire la pagina.</span
               >
             </div>
           </q-banner>

src/components/CMyPageElem/CMyPageElem.vue

@@ -65,7 +65,7 @@
 
         <!-- Contenuto pagina -->
         <div
-          :class="[{ 'q-gutter-xs': !hideHeader, 'q-mx-auto': !hideHeader, 'q-pb-lg': !hideHeader}]"
+          :class="[{ 'q-ma-xs': !hideHeader, 'q-mx-auto': !hideHeader }]"
           :style="hideHeader ? [{ 'margin-left': 0, 'margin-right': 0 }] : containerStyle"
         >
           <div v-if="globalStore.showHeader">
@@ -116,6 +116,7 @@
               appear
               :duration="300"
               enter-active-class="animated fadeInUp"
+              class="q-ma-none"
             >
               <div>
                 <CTitleBanner
@@ -135,8 +136,8 @@
                   order: {{ myelem.order }}
                 </div>
 
-                <!-- Sezione -->
                 <div v-if="myelem.type === shared_consts.ELEMTYPE.SECTION">
+                  <!-- Sezione -->
                   <div
                     v-if="editOn"
                     class="text-center text-caption q-mb-sm"
@@ -360,8 +361,8 @@
                   </CMyElem>
                 </div>
 
-                <!-- Elementi fuori sezione (retrocompatibilità) -->
                 <div v-else>
+                  <!-- Elementi fuori sezione (retrocompatibilità) -->
                   <CMyElem
                     v-if="myelem.active || editOn"
                     :myelem="myelem"
@@ -377,8 +378,8 @@
             </transition>
           </div>
 
-          <!-- Stato vuoto -->
           <div v-if="myelems.length === 0 && editOn">
+            <!-- Stato vuoto -->
             <CMyElem
               :myelem="myelemVoid"
               :editOn="editOn"
@@ -390,11 +391,11 @@
             />
           </div>
 
-          <!-- Aggiungi elemento al fondo lista -->
           <div
             v-if="editOn"
             class="text-center q-mt-sm"
           >
+            <!-- Aggiungi elemento al fondo lista -->
             <q-btn
               dense
               rounded

src/components/CMyProfileTutorial/CMyProfileTutorial.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="contact">
-    <div class="row items-center">
+    <div class="row items-center q-mt-0 q-mb-0">
       <div
         v-if="progressStep !== 1"
         :class="indstep >= numindstep ? 'col-10' : 'col-12'"

src/components/CNotifAtTop/CNotifAtTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!hide && num_notifs > 0" class="q-ma-sm text-center">
+  <div v-if="!hide && num_notifs > 0" class="text-center">
     <q-btn
       :label="
         num_notifs > 1

src/components/CProductTable/CProductTable.scss

@@ -1,34 +1,70 @@
 .drag-handle {
-    cursor: grab; /* Mostra la manina */
-  }
-  
-  .drag-handle:active {
-    cursor: grabbing; /* Cambia la manina quando l'utente sta trascinando */
-  }
+  cursor: grab;
+  /* Mostra la manina */
+}
 
-  .etichetta{
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    font-weight: bold;
-    font-size: 1.15rem;
+.drag-handle:active {
+  cursor: grabbing;
+  /* Cambia la manina quando l'utente sta trascinando */
+}
+
+.etichetta {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-weight: bold;
+  font-size: 1.15rem;
+}
+
+.boxtitleval {
+  padding: 10px;
+  vertical-align: middle;
+}
+
+
+.custom-flat-button {
+  border: 1px solid #0078D4;
+  /* Colore del bordo */
+  background-color: transparent;
+  /* Rendi il background trasparente */
+  color: #0078D4;
+  /* Colore dell'icona e del testo */
+}
+
+.custom-flat-button:hover {
+  background-color: rgba(0, 120, 212, 0.1);
+  /* Aggiungi un colore di hover, se desideri */
+  border-color: #005A8C;
+  /* Colore del bordo al passaggio del mouse */
+}
+
+
+/* Stili per la vista responsiva */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.responsive-table {
+  min-width: 800px;
+  /* Imposta una larghezza minima per la tabella */
+  width: 100%;
+}
+
+.product-card {
+  border-left: 4px solid $primary;
+}
+
+/* Breakpoint personalizzati se necessario */
+@media (max-width: 599px) {
+  .table-container {
+    display: none;
   }
-  
-  .boxtitleval{
-    padding: 10px;
-    vertical-align: middle;
+}
+
+@media (min-width: 600px) {
+  .lt-md {
+    display: none;
   }
-  
-  
-  .custom-flat-button {
-    border: 1px solid #0078D4;  /* Colore del bordo */
-    background-color: transparent;  /* Rendi il background trasparente */
-    color: #0078D4;  /* Colore dell'icona e del testo */
-  }
-  
-  .custom-flat-button:hover {
-    background-color: rgba(0, 120, 212, 0.1);  /* Aggiungi un colore di hover, se desideri */
-    border-color: #005A8C;  /* Colore del bordo al passaggio del mouse */
-  }
-  
+}

src/components/CProductTable/CProductTable.vue

@@ -24,7 +24,7 @@
           Lista filtrata con il termine "{{ searchText }}"
         </div>
       </div>
-      <div class="q-mb-md text-right">
+      <div class="q-mb-md text-right full-width">
         <q-select
           v-model="selectedColumns"
           :options="allColumnsComputed"
@@ -147,225 +147,393 @@
       </div>
     </div>
 
-    <!-- Tabella Prodotti -->
-    <table>
-      <!-- Intestazioni (Thead) -->
-      <thead>
-        <tr>
-          <template v-for="col in allColumnsComputed">
-            <th
-              v-if="isColumnVisible(col.name)"
-              :key="col.name"
-              @click="isSortable(col.name) ? sortTable(col.name) : ''"
-              :style="{
-                'background-color': sortAttribute === col.name ? 'yellow' : '',
-              }"
-            >
-              <span>{{ col.label }}</span>
-              <span v-if="isSortable(col.name)">
-                <q-icon
-                  v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
-                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
-                  size="36px"
-                  class="q-ml-xs"
-                />
-                <q-icon
-                  v-else-if="optcatalogo.showListaArgomenti"
-                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
-                  size="24px"
-                  class="q-ml-xs"
-                />
-              </span>
-            </th>
-          </template>
-        </tr>
-      </thead>
-      <!-- Corpo della Tabella (Tbody) -->
+    <!-- Vista Mobile: Cards -->
+    <div class="lt-md q-pa-md">
       <draggable
         v-if="!loading"
         :model-value="internalProducts"
-        tag="tbody"
+        tag="div"
         handle=".drag-handle"
         item-key="_id"
         @end="onDragEnd"
         @update:modelValue="handleUpdate"
       >
-        <template #item="{ element }">
-          <tr
+        <template #item="{ element, index }">
+          <q-card
             :key="element._id"
-            :class="{
-              'bg-grey-3': internalProducts.indexOf(element) % 2 === 1,
-            }"
+            class="q-mb-md product-card"
+            flat
+            bordered
           >
-            <template
-              v-for="field in allColumnsComputed"
-              :key="field.name"
-            >
-              <!-- Icona Drag Handle -->
-              <td v-if="field.name === 'pos' && isColumnVisible('pos')">
-                <div class="row justify-center">
-                  <span class="q-ma-sm"
-                    >{{
-                      // put index in the first column
-                      internalProducts.indexOf(element) + 1
-                    }}
-                  </span>
+            <q-card-section class="row items-center q-pa-sm bg-grey-2">
+              <div class="col">
+                <div class="text-weight-bold">
+                  #{{ index + 1 }} - {{ getFieldValue(element, { name: 'title' }) || 'Prodotto' }}
                 </div>
-              </td>
-              <td
-                v-else-if="field.name === 'drag' && isColumnVisible('drag')"
-                class="drag-handle"
-              >
+              </div>
+              <div class="col-auto">
                 <q-icon
+                  v-if="isColumnVisible('drag')"
                   name="drag_handle"
-                  size="32px"
+                  size="24px"
                   color="primary"
+                  class="drag-handle cursor-pointer"
                 />
-              </td>
-              <td v-else-if="field.name === 'edit' && isColumnVisible('edit')">
-                <span
-                  v-if="!tools.isUtente()"
-                  class="justify-center"
+              </div>
+            </q-card-section>
+
+            <q-separator />
+
+            <q-card-section class="q-pa-md">
+              <div class="row q-col-gutter-md">
+                <!-- Immagine -->
+                <div
+                  v-if="isColumnVisible('image')"
+                  class="col-12 col-sm-4 text-center"
                 >
-                  <q-btn
-                    flat
-                    rounded
-                    outline
-                    size="sm"
-                    icon="edit"
-                    @click="modifyProduct(element)"
+                  <q-img
+                    :src="
+                      getImageByElement(element)
+                        ? tools.getFullFileNameByImageFile(
+                            table,
+                            getImageByElement(element),
+                            element._id
+                          )
+                        : element.productInfo?.image_link
+                    "
+                    style="max-width: 150px; max-height: 150px"
+                    class="rounded-borders cursor-pointer q-mx-auto"
+                    @click="showProduct(element)"
+                  />
+                </div>
+
+                <!-- Dati Prodotto -->
+                <div class="col-12 col-sm-8">
+                  <template v-for="field in allColumnsComputed" :key="field.name">
+                    <div
+                      v-if="
+                        isColumnVisible(field.name) &&
+                        !['pos', 'drag', 'image', 'edit', 'actions', 'addtocart', 'addtolist'].includes(field.name)
+                      "
+                      class="q-mb-sm"
+                    >
+                      <div class="text-caption text-grey-7">{{ field.label }}</div>
+                      <div
+                        :class="getFieldClass(element, field)"
+                        @click="getFieldClick(element, field)?.()"
+                        v-html="getFieldValue(element, field)"
+                      ></div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-separator />
+
+            <!-- Azioni Card -->
+            <q-card-actions class="q-pa-sm">
+              <q-btn
+                v-if="!tools.isUtente() && isColumnVisible('edit')"
+                flat
+                dense
+                icon="edit"
+                label="Modifica"
+                @click="modifyProduct(element)"
+                color="primary"
+              />
+              <q-space />
+              <q-btn
+                v-if="isColumnVisible('addtocart')"
+                dense
+                icon-right="fas fa-cart-plus"
+                color="positive"
+                :label="
+                  t('products.addcart', {
+                    qta: ProductStore.qtaNextAdd(element.myorder, element),
+                  })
+                "
+                @click="addtoCart(element, true)"
+              />
+              <q-btn
+                v-if="isColumnVisible('addtocart') && ProductStore.enableSubQty(element.myorder)"
+                dense
+                icon-right="fas fa-cart-arrow-down"
+                color="negative"
+                :label="
+                  t('products.subcart', {
+                    qta: ProductStore.qtaNextSub(element.myorder, element),
+                  })
+                "
+                @click="addtoCart(element, false)"
+              />
+              <q-btn
+                v-if="isColumnVisible('addtolist') && isElementVisible('addtolist', element)"
+                dense
+                icon="fas fa-plus"
+                color="primary"
+                @click="addtolist(element)"
+              />
+              <q-btn-dropdown
+                v-if="isColumnVisible('actions', true)"
+                dense
+                flat
+                icon="more_vert"
+                color="primary"
+              >
+                <q-list>
+                  <q-item
+                    v-if="isVisibleEditBtn"
+                    clickable
                     v-close-popup
-                    class="custom-flat-button"
+                    @click="modifyProduct(element)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon name="edit" size="20px" class="q-mr-xs" />
+                        Scheda
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="removeProduct(element)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon name="delete" size="20px" class="q-mr-xs" />
+                        Elimina
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </q-card-actions>
+          </q-card>
+        </template>
+      </draggable>
+    </div>
+
+    <!-- Vista Desktop/Tablet: Tabella con Scroll Orizzontale -->
+    <div class="gt-sm table-container">
+      <table class="responsive-table">
+        <!-- Intestazioni (Thead) -->
+        <thead>
+          <tr>
+            <template v-for="col in allColumnsComputed">
+              <th
+                v-if="isColumnVisible(col.name)"
+                :key="col.name"
+                @click="isSortable(col.name) ? sortTable(col.name) : ''"
+                :style="{
+                  'background-color': sortAttribute === col.name ? 'yellow' : '',
+                }"
+              >
+                <span>{{ col.label }}</span>
+                <span v-if="isSortable(col.name)">
+                  <q-icon
+                    v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
+                    :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
+                    size="36px"
+                    class="q-ml-xs"
+                  />
+                  <q-icon
+                    v-else-if="optcatalogo.showListaArgomenti"
+                    :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
+                    size="24px"
+                    class="q-ml-xs"
                   />
                 </span>
-              </td>
-              <td v-else-if="field.name === 'addtocart' && isColumnVisible('addtocart')">
-                <q-btn
-                  icon-right="fas fa-cart-plus"
-                  color="positive"
-                  rounded
-                  dense
-                  size="sm"
-                  :label="
-                    t('products.addcart', {
-                      qta: ProductStore.qtaNextAdd(element.myorder, element),
-                    })
-                  "
-                  @click="addtoCart(element, true)"
-                >
-                </q-btn>
-                <q-btn
-                  v-if="ProductStore.enableSubQty(element.myorder)"
-                  icon-right="fas fa-cart-arrow-down"
-                  color="negative"
-                  rounded
-                  dense
-                  size="sm"
-                  :label="
-                    t('products.subcart', {
-                      qta: ProductStore.qtaNextSub(element.myorder, element),
-                    })
-                  "
-                  @click="addtoCart(element, false)"
-                >
-                </q-btn>
-              </td>
-              <td
-                v-else-if="
-                  field.name === 'addtolist' &&
-                  isColumnVisible('addtolist') &&
-                  isElementVisible('addtolist', element)
-                "
-              >
-                <q-btn
-                  icon="fas fa-plus"
-                  color="primary"
-                  rounded
-                  dense
-                  size="sm"
-                  @click="addtolist(element)"
-                >
-                </q-btn>
-              </td>
-
-              <!-- Immagine Piccola -->
-              <td v-else-if="field.name === 'image' && isColumnVisible('image')">
-                <q-img
-                  :src="
-                    getImageByElement(element)
-                      ? tools.getFullFileNameByImageFile(
-                          table,
-                          getImageByElement(element),
-                          element._id
-                        )
-                      : element.productInfo?.image_link
-                  "
-                  style="width: 50px; height: 50px"
-                  class="rounded-borders cursor-pointer"
-                  @click="showProduct(element)"
-                />
-              </td>
-
-              <td
-                v-else-if="isColumnVisible(field.name)"
-                :class="getFieldClass(element, field)"
-                :style="getFieldStyle(element, field)"
-                @click="getFieldClick(element, field)?.()"
-              >
-                <span v-html="getFieldValue(element, field)"></span>
-              </td>
-              <!-- Azioni -->
-              <td
-                v-else-if="field.name === 'actions' && isColumnVisible('actions', true)"
-              >
-                <q-btn-dropdown
-                  label="Azioni"
-                  color="primary"
-                  flat
-                >
-                  <q-list>
-                    <q-item
-                      v-if="isVisibleEditBtn"
-                      clickable
-                      v-close-popup
-                      @click="modifyProduct(element)"
-                    >
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="edit"
-                            size="20px"
-                            class="q-mr-xs"
-                          />
-                          Scheda
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="removeProduct(element)"
-                    >
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="delete"
-                            size="20px"
-                            class="q-mr-xs"
-                          />
-                          Elimina
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-btn-dropdown>
-              </td>
+              </th>
             </template>
-          </tr></template
+          </tr>
+        </thead>
+        <!-- Corpo della Tabella (Tbody) -->
+        <draggable
+          v-if="!loading"
+          :model-value="internalProducts"
+          tag="tbody"
+          handle=".drag-handle"
+          item-key="_id"
+          @end="onDragEnd"
+          @update:modelValue="handleUpdate"
         >
-        >
-      </draggable>
-    </table>
+          <template #item="{ element }">
+            <tr
+              :key="element._id"
+              :class="{
+                'bg-grey-3': internalProducts.indexOf(element) % 2 === 1,
+              }"
+            >
+              <template
+                v-for="field in allColumnsComputed"
+                :key="field.name"
+              >
+                <!-- Icona Drag Handle -->
+                <td v-if="field.name === 'pos' && isColumnVisible('pos')">
+                  <div class="row justify-center">
+                    <span class="q-ma-sm"
+                      >{{
+                        internalProducts.indexOf(element) + 1
+                      }}
+                    </span>
+                  </div>
+                </td>
+                <td
+                  v-else-if="field.name === 'drag' && isColumnVisible('drag')"
+                  class="drag-handle"
+                >
+                  <q-icon
+                    name="drag_handle"
+                    size="32px"
+                    color="primary"
+                  />
+                </td>
+                <td v-else-if="field.name === 'edit' && isColumnVisible('edit')">
+                  <span
+                    v-if="!tools.isUtente()"
+                    class="justify-center"
+                  >
+                    <q-btn
+                      flat
+                      rounded
+                      outline
+                      size="sm"
+                      icon="edit"
+                      @click="modifyProduct(element)"
+                      v-close-popup
+                      class="custom-flat-button"
+                    />
+                  </span>
+                </td>
+                <td v-else-if="field.name === 'addtocart' && isColumnVisible('addtocart')">
+                  <q-btn
+                    icon-right="fas fa-cart-plus"
+                    color="positive"
+                    rounded
+                    dense
+                    size="sm"
+                    :label="
+                      t('products.addcart', {
+                        qta: ProductStore.qtaNextAdd(element.myorder, element),
+                      })
+                    "
+                    @click="addtoCart(element, true)"
+                  >
+                  </q-btn>
+                  <q-btn
+                    v-if="ProductStore.enableSubQty(element.myorder)"
+                    icon-right="fas fa-cart-arrow-down"
+                    color="negative"
+                    rounded
+                    dense
+                    size="sm"
+                    :label="
+                      t('products.subcart', {
+                        qta: ProductStore.qtaNextSub(element.myorder, element),
+                      })
+                    "
+                    @click="addtoCart(element, false)"
+                  >
+                  </q-btn>
+                </td>
+                <td
+                  v-else-if="
+                    field.name === 'addtolist' &&
+                    isColumnVisible('addtolist') &&
+                    isElementVisible('addtolist', element)
+                  "
+                >
+                  <q-btn
+                    icon="fas fa-plus"
+                    color="primary"
+                    rounded
+                    dense
+                    size="sm"
+                    @click="addtolist(element)"
+                  >
+                  </q-btn>
+                </td>
+
+                <!-- Immagine Piccola -->
+                <td v-else-if="field.name === 'image' && isColumnVisible('image')">
+                  <q-img
+                    :src="
+                      getImageByElement(element)
+                        ? tools.getFullFileNameByImageFile(
+                            table,
+                            getImageByElement(element),
+                            element._id
+                          )
+                        : element.productInfo?.image_link
+                    "
+                    style="width: 50px; height: 50px"
+                    class="rounded-borders cursor-pointer"
+                    @click="showProduct(element)"
+                  />
+                </td>
+
+                <td
+                  v-else-if="isColumnVisible(field.name)"
+                  :class="getFieldClass(element, field)"
+                  :style="getFieldStyle(element, field)"
+                  @click="getFieldClick(element, field)?.()"
+                >
+                  <span v-html="getFieldValue(element, field)"></span>
+                </td>
+                <!-- Azioni -->
+                <td
+                  v-else-if="field.name === 'actions' && isColumnVisible('actions', true)"
+                >
+                  <q-btn-dropdown
+                    label="Azioni"
+                    color="primary"
+                    flat
+                  >
+                    <q-list>
+                      <q-item
+                        v-if="isVisibleEditBtn"
+                        clickable
+                        v-close-popup
+                        @click="modifyProduct(element)"
+                      >
+                        <q-item-section>
+                          <q-item-label>
+                            <q-icon
+                              name="edit"
+                              size="20px"
+                              class="q-mr-xs"
+                            />
+                            Scheda
+                          </q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="removeProduct(element)"
+                      >
+                        <q-item-section>
+                          <q-item-label>
+                            <q-icon
+                              name="delete"
+                              size="20px"
+                              class="q-mr-xs"
+                            />
+                            Elimina
+                          </q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
+                </td>
+              </template>
+            </tr>
+          </template>
+        </draggable>
+      </table>
+    </div>
   </div>
   <CMyDialog
     v-model="showProd"