- Griglia Orizzontale a Carosello

- Aggiornato Tabella Eventi
- Lista Ultimi Movimenti
- Ultime strette di mano
- Ultimi Invitanti alla App

src/components/CGridTableRec/CGridTableRec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted } from 'vue'
+import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted, nextTick } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 
 import { tools } from '../../store/Modules/tools'
@@ -361,6 +361,8 @@ export default defineComponent({
     const showMap = ref(false)
     const showMapAtLeast1 = ref(false)
     const mapInitialized = ref(false)
+    const slideGridOriz = ref(0)
+    const autoplay = ref(true)
 
 
     const newRecordBool = ref(false)
@@ -371,6 +373,12 @@ export default defineComponent({
     const recModif = ref(<any>{})
     const showInnerDialog = ref(false)
 
+    const carouselTabRef = ref(<any>null)
+    const isAtStart = ref(true)
+    const isAtEnd = ref(false)
+    const activeIndex = ref(0)
+    const addEventScroll = ref(false)
+
     const mytable = ref('')
     const mytitle = ref('')
     const mytitlenew = ref('')
@@ -1209,6 +1217,8 @@ export default defineComponent({
         spinner_visible.value = false
         changetable.value = false
         startsearch.value = false
+
+        checkScrollPosition()
       })
     }
 
@@ -1306,6 +1316,8 @@ export default defineComponent({
           // console.log('   ...DONE ')
           done(pagination.value.rowsNumber === 0 ? true : false)
 
+          checkScrollPosition()
+
           alreadymounting.value = true
         })
       } else {
@@ -1660,13 +1672,55 @@ export default defineComponent({
 
         myvertical.value = props.vertical
 
-        showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
+        if (props.prop_search) {
+          showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
+        } else {
+          showfilter.value = props.prop_showfilter
+        }
 
       } catch (e) {
         console.error('ERRORE', e)
       }
     }
 
+    const checkScrollPosition = () => {
+      console.log('checkScrollPosition')
+      const container = carouselTabRef.value
+      if (!container ) return
+
+      if (!addEventScroll.value && carouselTabRef.value) {
+        carouselTabRef.value?.addEventListener('scroll', checkScrollPosition)
+        addEventScroll.value = true
+      }
+
+      if (carouselTabRef.value) {
+        console.log('carouselTabRef LISTEN')
+      } else {
+        console.log('carouselTabRef NO !')
+      }
+      console.log('  .... >>> AVANTI ', container.scrollLeft, container.clientWidth)
+    
+      isAtStart.value = container.scrollLeft <= 0
+      isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
+    
+      if (serverData.value.length > 0) { // Assicurarsi che ci siano elementi
+        console.log('entro dentro...')
+        const cardWidth = container.scrollWidth / serverData.value.length
+        activeIndex.value = Math.round(container.scrollLeft / cardWidth)
+      }
+    }
+
+    const scroll = (direction: any) => {
+      const container = carouselTabRef.value;
+      if (!container || !serverData.value.length) return;
+
+      const cardWidth = container.scrollWidth / serverData.value.length;
+      container.scrollBy({
+        left: direction * cardWidth,
+        behavior: 'smooth',
+      });
+    };
+    
     function mounted() {
       // console.log('mounted...')
       try {
@@ -1713,6 +1767,10 @@ export default defineComponent({
 
         changeTable(tablesel.value, true)
 
+        nextTick(() => {
+          checkScrollPosition()
+        })
+
         // Aggiungi gli listener agli eventi della tastiera
         document.addEventListener('keydown', onEscapeKey);
         // window.addEventListener('popstate', onBackButton);
@@ -2188,7 +2246,7 @@ export default defineComponent({
 
               newRecord.value = {}
               newRecordBool.value = false
-              
+
               tools.showPositiveNotif($q, t('db.recupdated'))
               // refresh()
             } else {
@@ -2476,6 +2534,10 @@ export default defineComponent({
     // Rimuovi i listener al distruggere del componente
     onBeforeUnmount(() => {
       document.removeEventListener('keydown', onEscapeKey);
+
+      carouselTabRef.value?.removeEventListener('scroll', checkScrollPosition)
+
+
       // window.removeEventListener('popstate', onBackButton);
     });
 
@@ -2700,6 +2762,13 @@ export default defineComponent({
       gotoCurrentLocation,
       showInMap,
       showMapAtLeast1,
+      carouselTabRef,
+      isAtStart,
+      isAtEnd,
+      activeIndex,
+      scroll,      
+      slideGridOriz,
+      autoplay,
     }
   }
 })