- Creazione "AbitareGliIblei"

- Mappa Interattiva con i markers

src/components/CGridTableRec/CGridTableRec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref, watch, toRef, onMounted, toRefs, computed, inject } from 'vue'
+import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 
 import { tools } from '../../store/Modules/tools'
@@ -25,6 +25,7 @@ import { CMyUser } from '../CMyUser'
 import { CMyGroups } from '../CMyGroups'
 import { CMyFieldDb } from '../CMyFieldDb'
 import { CMyRecCard } from '../CMyRecCard'
+import { CMapByTable } from '../CMapByTable'
 import { CMyRecGrpCard } from '../CMyRecGrpCard'
 import { CMyRecCircuitCard } from '../CMyRecCircuitCard'
 import { CMySelect } from '../CMySelect'
@@ -40,7 +41,12 @@ import { CMyCardPopup } from '@/components/CMyCardPopup'
 import { CMyCardService } from '@/components/CMyCardService'
 import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
 import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
-import { useRouter } from 'vue-router'
+import { onBeforeRouteLeave, onBeforeRouteUpdate, beforeRouteEnter, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+
+import { Dialog } from 'quasar'; // Assicurati di importare correttamente Dialog da Quasar.
+
 
 export default defineComponent({
   name: 'CGridTableRec',
@@ -295,14 +301,22 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    prop_showMap: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   components: {
     CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
     CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
-    CMyRecCircuitCard, CMyCardService, CNotifSettings
+    CMyRecCircuitCard, CMyCardService, CNotifSettings, CMapByTable,
   },
   setup(props, { emit }) {
     const $q = useQuasar()
+    const router = useRouter()
+    const route = useRoute()
+
     const { t } = useI18n()
     const userStore = useUserStore()
     const globalStore = useGlobalStore()
@@ -314,6 +328,8 @@ export default defineComponent({
     const actmonth = ref('')
     const drawmonth = ref(true)
 
+    const showMap = ref(false)
+
 
     const newRecordBool = ref(false)
     const newRecordBoolOld = ref(false)
@@ -347,12 +363,11 @@ export default defineComponent({
 
     const visupagedialog = ref(false)
     const myrecdialog = ref(null)
+    const myIdRecDialog = ref(null)
 
     const startsearch = ref(false)
     const clickbuttsearch = ref(false)
 
-    const $router = useRouter()
-
     const myinfscroll = ref(null)
 
     const serverData: any = ref([] as any[])
@@ -397,7 +412,53 @@ export default defineComponent({
     const ordinam = ref('')
     const ordinam_desc = ref(false)
 
+    /*onBeforeRouteUpdate((to: any, from: any, next: any) => {
+      console.log('onBeforeRouteUpdate', 'to', to, 'from', from, 'next', next)
+      next()
+    })*/
 
+    onBeforeRouteLeave((to: any, from: any, next: any) => {
+      console.log('onBeforeRouteLeave', 'to', to, 'from', from, 'next', next)
+      if (checkForChanges()) {
+        const answer = window.confirm(t('dialog.uscire'))
+        if (answer) {
+          next()
+        } else {
+          next(false)
+        }
+      } else {
+        next()
+      }
+    })
+
+    // Funzione per simulare il controllo delle modifiche
+    const checkForChanges = (): boolean => {
+      // Funzione di utilità per confrontare due valori
+      const isEqual = (val1: any, val2: any): boolean => {
+        if (typeof val1 !== typeof val2) return false
+        if (typeof val1 === 'object' && val1 !== null && val2 !== null) {
+          const keys1 = Object.keys(val1)
+          const keys2 = Object.keys(val2)
+          if (keys1.length !== keys2.length) return false
+          return keys1.every(key => isEqual(val1[key], val2[key]))
+        }
+        return val1 === val2
+      }
+
+      // Confronta recModif con recSaved
+      return !isEqual(recModif.value, recSaved.value)
+      // return true
+    }
+
+    function saveChanges() {
+      if (editRecordBool.value) {
+        saverecModif()
+      }
+      if (newRecordBool.value) {
+        saveNewRecord()
+      }
+
+    }
     const getNumRecFromQuery = computed(() => () => {
       return serverData.value.length
     })
@@ -493,8 +554,8 @@ export default defineComponent({
       }
     })
 
-    $router.beforeResolve((to: any) => {
-      // console.log('beforeResolve', visupagedialog.value, 'to', to)
+    router.beforeResolve((to: any) => {
+      console.log('beforeResolve', visupagedialog.value, 'to', to)
 
       if (visupagedialog.value && !to.meta.newpage) {
         // visupagedialog.value = false
@@ -1544,8 +1605,11 @@ export default defineComponent({
     }
 
     function mounted() {
+      console.log('mounted...')
       searchList.value = props.prop_searchList
 
+      showMap.value = props.prop_showMap
+
 
       // console.log('GridTable mounted', tablesel.value)
 
@@ -1583,6 +1647,9 @@ export default defineComponent({
 
       changeTable(tablesel.value, true)
 
+      // Aggiungi gli listener agli eventi della tastiera
+      document.addEventListener('keydown', onEscapeKey);
+      // window.addEventListener('popstate', onBackButton);
 
     }
 
@@ -2077,7 +2144,7 @@ export default defineComponent({
     }
 
     async function saverecModif() {
-      // console.log('saverecModif')
+      // console.log('saverecModif', recModif.value)
       const mydata = {
         table: mytable.value,
         data: {}
@@ -2110,9 +2177,6 @@ export default defineComponent({
         })
     }
 
-    function hidewindow() {
-      annulla(0)
-    }
 
     function getlabelAddRow() {
       return props.labelBtnAddRow
@@ -2159,7 +2223,7 @@ export default defineComponent({
     }
 
 
-    function cmdExt(cmd: any, id: any, val2: any) {
+    function cmdExt(cmd: any, id: any, myrec: any) {
       console.log('cmd', cmd)
 
       if (cmd === costanti.CMD_CLONE) {
@@ -2172,10 +2236,11 @@ export default defineComponent({
 
       if (cmd === costanti.CMD_SHOW_PAGE) {
         visupagedialog.value = true
-        myrecdialog.value = id
+        myrecdialog.value = myrec
+        myIdRecDialog.value = id
         return true
       } else if (cmd === costanti.CMD_OPEN_PAGE) {
-        $router.push(tools.getPathByTableAndRec(mytable.value, id))
+        router.push(tools.getPathByTableAndRec(mytable.value, myrec))
         return true
       }
 
@@ -2193,7 +2258,7 @@ export default defineComponent({
 
         const col = props.prop_mycolumns.find((rec: any) => rec.action === action)
         if (col) {
-          console.log('col action', col)
+          // console.log('col action', col)
           const myarr = serverData.value.find((rec: any) => rec._id === id)
           if (myarr)
             clickFunz(myarr, col)
@@ -2326,11 +2391,36 @@ export default defineComponent({
     }
 
     /*function showNotification() {
-      $router.push('/notifs')
+      router.push('/notifs')
     } */
 
+    // Questa funzione viene chiamata quando il dialogo cerca di chiudersi
+    const onEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault(); // Previene la chiusura da ESC
+      }
+    };
+
+    // Rimuovi i listener al distruggere del componente
+    onBeforeUnmount(() => {
+      document.removeEventListener('keydown', onEscapeKey);
+      // window.removeEventListener('popstate', onBackButton);
+    });
+
+    onMounted(() => {
+      mounted()
+    })
+
+    function hidewindow() {
+      annulla(0)
+    }
+
+    function clickMarker(id: any) {
+      console.log('clickMarker', id)
+      cmdExt(costanti.CMD_SHOW_PAGE, id, null)
+    }
+
     created()
-    mounted()
 
     return {
       selItem,
@@ -2410,6 +2500,7 @@ export default defineComponent({
       cmdExt,
       visupagedialog,
       myrecdialog,
+      myIdRecDialog,
       showDate,
       getActualDate,
       actualDate,
@@ -2440,6 +2531,8 @@ export default defineComponent({
       withdate,
       setShowMonth,
       ifShowMonth,
+      showMap,
+      clickMarker,
     }
   }
 })