@m4l/gclick 0.2.0 → 0.2.3-beta.0

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useDatagridSelected.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { deepShallow, IconButton } from "@m4l/components";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../icons.js";
+import { useEnvironment } from "@m4l/core";
+function useDatagridSelected(props) {
+  const { goAdd, labelAdd, enableAdd } = props;
+  const { environment_assets, host_static_assets } = useEnvironment();
+  const iconAdd = `${environment_assets}/${host_static_assets}/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_ADD}`;
+  const rows = useGpsMapToolsStore(
+    (state) => {
+      const rowsSelected = [];
+      state.geofenceState.checkedGeofences.forEach((chkRow) => {
+        const geofence = state.geofenceState.hashGeofences[chkRow];
+        if (!geofence) {
+          return [];
+        }
+        rowsSelected.push({
+          id: geofence.id,
+          name: geofence.name,
+          type: geofence.type,
+          timeMinInSeconds: geofence.timeMinInSeconds,
+          timeMinOutSeconds: geofence.timeMinOutSeconds,
+          alias: geofence.alias,
+          customerId: geofence.customerId,
+          createdAt: geofence.createdAt,
+          updatedAt: geofence.updatedAt
+        });
+      }, []);
+      return rowsSelected;
+    },
+    deepShallow
+  );
+  const rightActions = useMemo(() => {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "contained",
+        color: "primary",
+        icon: iconAdd,
+        disabled: !enableAdd,
+        tooltip: labelAdd,
+        onClick: () => {
+          goAdd();
+        }
+      }
+    );
+  }, [enableAdd, goAdd, labelAdd, iconAdd]);
+  return {
+    rows,
+    rightActions
+  };
+}
+export {
+  useDatagridSelected as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useFilterAndSort.d.ts

@@ -0,0 +1,19 @@
+type UseFilterAndSortProps = {
+    labelAdd: string;
+    goAdd: () => void;
+    enableAdd: boolean;
+    setBackendQueryParams: (params: Record<string, unknown>) => void;
+    refresh: () => void;
+};
+/**
+ * Hook para obtener DynamicFilter and Sort
+ */
+export declare function useFilterAndSort(props: UseFilterAndSortProps): {
+    leftActions: import("react/jsx-runtime").JSX.Element;
+    rightActions: import("react/jsx-runtime").JSX.Element;
+    visibleCustomHeader: boolean;
+    customHeaderComponent: import("react/jsx-runtime").JSX.Element;
+    externalFilterSettings: import('@m4l/components/src/components/DataGrid/types').FilterSettings | undefined;
+    externalSortSettings: import('@m4l/components/src/components/DataGrid/types').SortSettings | undefined;
+};
+export {};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useFilterAndSort.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useWindowToolsMF, getRawSortsForNetwork, getRawFiltersForNetwork, useDynamicFilterAndSort, IconButton } from "@m4l/components";
+import { u as useFilterFields } from "./useFilterFields.js";
+import { u as useSortFields } from "./useSortFields.js";
+import { useEnvironment } from "@m4l/core";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../icons.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../constants.js";
+function useFilterAndSort(props) {
+  const { goAdd, setBackendQueryParams, refresh, labelAdd } = props;
+  const filterFields = useFilterFields();
+  const sortFields = useSortFields();
+  const { setCookie, getCookie } = useWindowToolsMF();
+  const { environment_assets, host_static_assets } = useEnvironment();
+  const iconAddUrl = `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_ADD}`;
+  const onChangeFilterSort = useCallback((params) => {
+    setBackendQueryParams({
+      f: getRawFiltersForNetwork(params.eventFilters?.rawFilters, "snakeCase"),
+      s: getRawSortsForNetwork(params.eventSorts?.rawSorts, "snakeCase")
+    });
+    refresh();
+  }, [refresh, setBackendQueryParams]);
+  const { leftActions, visibleCustomHeader, customHeaderComponent, rightActions, externalFilterSettings, externalSortSettings } = useDynamicFilterAndSort({
+    prefixCookie: "geofences_all",
+    onChangeFilterSort,
+    fields: filterFields,
+    sorts: sortFields,
+    withAllField: true,
+    setCookie,
+    getCookie,
+    visibleRefresh: false,
+    rightActions: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "contained",
+        color: "primary",
+        icon: iconAddUrl,
+        disabled: false,
+        tooltip: labelAdd,
+        onClick: () => {
+          goAdd();
+        }
+      }
+    )
+  });
+  return {
+    leftActions,
+    rightActions,
+    visibleCustomHeader,
+    customHeaderComponent,
+    externalFilterSettings,
+    externalSortSettings
+  };
+}
+export {
+  useFilterAndSort as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useFilterFields.d.ts

@@ -0,0 +1,5 @@
+import { FilterField } from '@m4l/components';
+/**
+ * Campos de filtro para la geocerca
+ */
+export declare function useFilterFields(): FilterField[];

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useFilterFields.js

@@ -0,0 +1,32 @@
+import { useEnvironment } from "@m4l/core";
+import { useMemo } from "react";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../dictionary.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../constants.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../icons.js";
+function useFilterFields() {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const useMemoResult = useMemo(() => {
+    return [
+      {
+        name: "id",
+        dictionaryId: MAP_GPSTOOLS_DICCTIONARY.LABEL_ID,
+        type: "number",
+        multiple: true,
+        presence: "optional",
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_ID}`
+      },
+      {
+        name: "name",
+        dictionaryId: MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME,
+        type: "string",
+        multiple: true,
+        presence: "optional",
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_NAME}`
+      }
+    ];
+  }, [host_static_assets, environment_assets]);
+  return useMemoResult;
+}
+export {
+  useFilterFields as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useSortFields.d.ts

@@ -0,0 +1,5 @@
+import { SortField } from '@m4l/components';
+/**
+ * Genera los campos de ordenamiento para el componente DynamicSort
+ */
+export declare const useSortFields: () => SortField[];

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useFilterAndSort/useSortFields.js

@@ -0,0 +1,20 @@
+import { useEnvironment } from "@m4l/core";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../../icons.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../../constants.js";
+const useSortFields = () => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return [
+    {
+      name: "name",
+      type: "string",
+      dictionaryId: MAP_GPSTOOLS_DICCTIONARY.LABEL_NAME,
+      presence: "initialized",
+      defaultOperator: "asc",
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_NAME}`
+    }
+  ];
+};
+export {
+  useSortFields as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useLayers.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { shallow } from "zustand/shallow";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
+import { G as GeofencesLayers } from "../constants.js";
+import { G as GeofenceFeatureRender } from "../subcomponents/GeofenceFeatureRender/GeofenceFeatureRender.js";
+import { u as useMapStore } from "../../../../GpsMap/hooks/useMapStore/index.js";
+function useLayers() {
+  const { addLayer, removeLayer } = useMapStore((state) => state.mapActions, shallow);
+  const { init } = useGpsMapToolsStore((state) => state.gpsToolsActions, shallow);
+  useEffect(() => {
+    addLayer({
+      layerId: GeofencesLayers.LAYER_GEOFENCES,
+      name: "Geocercas",
+      renderFeature: GeofenceFeatureRender,
+      geoJsonObject: {
+        object: {
+          type: "FeatureCollection",
+          features: []
+        }
+      },
+      autoFocusAble: true,
+      autoFocus: true
+    });
+    init();
+    return () => {
+      removeLayer(GeofencesLayers.LAYER_GEOFENCES);
+    };
+  }, []);
+}
+export {
+  useLayers as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useLoadDrawGeometry.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook encargado de pintar o remover las geocercas chequeadas
+ * Adicionalmente, se encargar de cargar la geometría de las geocercas chequeadas cuando son diferentes de ciruclo o rectangulo.
+ */
+export declare function useLoadDrawGeometry(): {
+    checkedGeofences: ReadonlySet<number>;
+    setCheckedGeofences: (newGeofences: ReadonlySet<import('../../../contexts/GpsMapToolsContext/types').GeofenceId>) => void;
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useLoadDrawGeometry.js

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { shallow } from "zustand/shallow";
+import { useNetwork } from "@m4l/core";
+import { G as GeofencesLayers } from "../constants.js";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
+import { useWindowToolsMF } from "@m4l/components";
+import { getContrastTextColor } from "@m4l/graphics";
+import { u as useMapStore } from "../../../../GpsMap/hooks/useMapStore/index.js";
+function useLoadDrawGeometry() {
+  const hasLayerGeofences = useMapStore((state) => state.layersIds.includes(GeofencesLayers.LAYER_GEOFENCES), shallow);
+  const [checkedGeofences] = useGpsMapToolsStore(
+    (state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences],
+    shallow
+  );
+  const { setCheckedGeofences, setPartialValue, getGeofenceById } = useGpsMapToolsStore(
+    (state) => state.geofenceActions,
+    shallow
+  );
+  const { setFeatureData, removeFeature, getFeatureIds } = useMapStore(
+    (state) => state.mapActions,
+    shallow
+  );
+  const { networkOperation } = useNetwork();
+  const { startProgress, stopProgress } = useWindowToolsMF();
+  useEffect(() => {
+    if (!hasLayerGeofences) {
+      return;
+    }
+    const mapFeatureIds = getFeatureIds(GeofencesLayers.LAYER_GEOFENCES);
+    checkedGeofences.forEach((geofenceId) => {
+      const geofence = getGeofenceById(geofenceId);
+      if (!geofence) {
+        return;
+      }
+      if (!mapFeatureIds.includes(geofenceId) || !geofence.mustPaintGeometry) {
+        if (!geofence.geometry) {
+          networkOperation({
+            method: "GET",
+            endPoint: `geofences/${geofence.id}`,
+            responseToCamelCase: true,
+            options: {
+              startProgress,
+              stopProgress
+            }
+          }).then((response) => {
+            const geoLoaded = {
+              geometry: response.data.geometry,
+              name: response.data.name,
+              properties: response.data.properties,
+              mustPaintGeometry: true
+            };
+            if (geoLoaded.geometry) {
+              if (checkedGeofences.has(geofence.id)) {
+                const extendedProperties = {
+                  ...geoLoaded.properties,
+                  markerIconLabel: {
+                    label: geoLoaded.name,
+                    color: getContrastTextColor(geoLoaded.properties?.fillColor),
+                    fillColor: geoLoaded.properties?.fillColor,
+                    fillOpacity: geoLoaded.properties?.fillOpacity
+                  }
+                };
+                setFeatureData("geofences", geofenceId, geoLoaded.geometry, extendedProperties);
+                geoLoaded.mustPaintGeometry = false;
+              }
+            }
+            setPartialValue(geofence.id, geoLoaded);
+          });
+        } else {
+          const extendedProperties = {
+            ...geofence.properties,
+            markerIconLabel: {
+              label: geofence.name,
+              color: getContrastTextColor(geofence.properties?.fillColor),
+              fillColor: geofence.properties?.fillColor,
+              fillOpacity: geofence.properties?.fillOpacity
+            }
+          };
+          setFeatureData(
+            GeofencesLayers.LAYER_GEOFENCES,
+            geofenceId,
+            geofence.geometry,
+            extendedProperties
+          );
+          setPartialValue(geofence.id, { mustPaintGeometry: false });
+        }
+      }
+    });
+    mapFeatureIds.forEach((mapFeatureId) => {
+      if (!checkedGeofences.has(Number(mapFeatureId))) {
+        removeFeature(GeofencesLayers.LAYER_GEOFENCES, mapFeatureId);
+      }
+    });
+    return () => {
+    };
+  }, [checkedGeofences, getFeatureIds, getGeofenceById, hasLayerGeofences, networkOperation, removeFeature, setFeatureData, setPartialValue, startProgress, stopProgress]);
+  return {
+    checkedGeofences,
+    setCheckedGeofences
+  };
+}
+export {
+  useLoadDrawGeometry as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useMaster.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Master hook
+ */
+export declare function useMaster(): {
+    defaultTab: string;
+    tabs: import('@m4l/layouts').DynamicTab[];
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useMaster.js

@@ -0,0 +1,39 @@
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { u as useModuleDynamicActions } from "./useModuleDynamicActions.js";
+import { u as useTabFiltered } from "./useTabFiltered.js";
+import { u as useLayers } from "./useLayers.js";
+import { u as useLoadDrawGeometry } from "./useLoadDrawGeometry.js";
+import { u as useColumns } from "./useColumns.js";
+import { u as useRowActionsGetter } from "./useRowActionsGetter.js";
+import { u as useTabSelected } from "./useTabSelected.js";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
+function useMaster() {
+  const { columns } = useColumns();
+  const [refreshCount, setRefreshCount] = useState(0);
+  const { flushGeofences } = useGpsMapToolsStore((state) => state.geofenceActions);
+  const fullRefresh = useCallback(() => {
+    setRefreshCount((prev) => prev + 1);
+  }, [setRefreshCount]);
+  const rowKeyGetter = useMemo(() => (row) => row.id, []);
+  const { rowActionsGetter } = useRowActionsGetter({ fullRefresh });
+  const { goAdd, labelAdd, enableAdd } = useModuleDynamicActions({ fullRefresh });
+  useLayers();
+  useLoadDrawGeometry();
+  useEffect(() => {
+    return () => {
+      flushGeofences();
+    };
+  }, [flushGeofences]);
+  const tabFiltered = useTabFiltered({ goAdd, labelAdd, columns, rowActionsGetter, rowKeyGetter, refreshCount });
+  const tabSelected = useTabSelected({ goAdd, labelAdd, enableAdd, columns, rowActionsGetter, rowKeyGetter });
+  const tabs = useMemo(() => {
+    return [tabFiltered, tabSelected];
+  }, [tabFiltered, tabSelected]);
+  return {
+    defaultTab: tabFiltered.value,
+    tabs
+  };
+}
+export {
+  useMaster as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useModuleDynamicActions.d.ts

@@ -0,0 +1,12 @@
+interface UseModuleDynamicActionsProps {
+    fullRefresh: () => void;
+}
+/**
+ * Hook que se encarga de gestionar las acciones dinámicas del módulo que van en el header del WindowBase
+ */
+export declare function useModuleDynamicActions(props: UseModuleDynamicActionsProps): {
+    goAdd: () => void;
+    labelAdd: string;
+    enableAdd: boolean;
+};
+export {};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useModuleDynamicActions.js

@@ -0,0 +1,55 @@
+import { useEnvironment, useModuleDictionary, useModulePrivileges } from "@m4l/core";
+import { useModule } from "@m4l/layouts";
+import { useMemo, useCallback, useEffect } from "react";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../icons.js";
+import { usePopupsStore } from "@m4l/components";
+import { shallow } from "zustand/shallow";
+import { G as GeofencesLayers, a as GEOFENCES_TOOL_DEFAULT_POSITION } from "../constants.js";
+import { F as Form } from "../subcomponents/GeofenceAddEdit/Form.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../constants.js";
+function useModuleDynamicActions(props) {
+  const { fullRefresh } = props;
+  const { setDynamicActions } = useModule();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { addPopup } = usePopupsStore((state) => state.popupsActions, shallow);
+  const { hide } = usePopupsStore((state) => state.popupActions, shallow);
+  const { getLabel } = useModuleDictionary();
+  const { hasPrivilege } = useModulePrivileges();
+  const addIconUrl = useMemo(() => `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_ADD}`, [host_static_assets, environment_assets]);
+  const addLabel = useMemo(() => getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_ADD), [getLabel]);
+  const goAdd = useCallback(() => {
+    hide(GeofencesLayers.LAYER_GEOFENCES);
+    addPopup({
+      popupId: "geofencesAddEdit",
+      winType: "component",
+      title: addLabel,
+      component: Form,
+      componentProps: {
+        fullRefresh
+      },
+      defaultPosition: GEOFENCES_TOOL_DEFAULT_POSITION,
+      iconUrl: addIconUrl
+    });
+  }, [hide, addPopup, addLabel, fullRefresh, addIconUrl]);
+  useEffect(() => {
+    setDynamicActions([
+      {
+        iconUrl: addIconUrl,
+        onClick: goAdd,
+        visibility: "allways",
+        label: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_ADD),
+        tag: "add",
+        key: "add"
+      }
+    ]);
+  }, [hasPrivilege, getLabel, setDynamicActions, addIconUrl, goAdd]);
+  return {
+    goAdd,
+    labelAdd: addLabel,
+    enableAdd: true
+  };
+}
+export {
+  useModuleDynamicActions as u
+};

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools/subcomponents/GeofencesList → GeofencesTool}/hooks/useRowActionsGetter.d.ts

@@ -1,5 +1,5 @@
 import { MenuAction } from '@m4l/components';
-import { GeofenceListModel } from '../../model';
+import { GeofenceListColumns } from '../model';
 interface UseRowActionsProps {
     fullRefresh: (id?: number) => void;
 }
@@ -7,6 +7,6 @@ interface UseRowActionsProps {
  * TODO: Documentar
  */
 export declare function useRowActionsGetter(props: UseRowActionsProps): {
-    rowActionsGetter: (row: GeofenceListModel) => MenuAction[] | [];
+    rowActionsGetter: (row: GeofenceListColumns) => MenuAction[] | [];
 };
 export {};

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools/subcomponents/GeofencesList → GeofencesTool}/hooks/useRowActionsGetter.js

@@ -1,13 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { useNetwork, useModuleDictionary, useModulePrivileges, useEnvironment, useHostTools } from "@m4l/core";
 import { useState, useCallback } from "react";
-import { M as MAP_GPSTOOLS_ICONS } from "../../../../../icons.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../dictionary.js";
+import { M as MAP_GPSTOOLS_ICONS } from "../../../icons.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../dictionary.js";
 import { useModal, usePopupsStore, WindowConfirm } from "@m4l/components";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
 import { shallow } from "zustand/shallow";
-import { G as GeofenceAddEdit } from "../../GeofenceAddEdit/index.js";
-import { u as useGpsMapToolsStore } from "../../../../../hooks/useGpsMapToolsStore/index.js";
+import { F as Form } from "../subcomponents/GeofenceAddEdit/Form.js";
+import { G as GeofencesLayers, a as GEOFENCES_TOOL_DEFAULT_POSITION } from "../constants.js";
+import { G as GEOFENCES_TOOL_ADD_EDIT_POPUP_ID } from "../subcomponents/GeofenceAddEdit/constants.js";
+import { G as GPS_TOOLS_COMPONENT_PATH_ID } from "../../../constants.js";
 function useRowActionsGetter(props) {
   const { fullRefresh } = props;
   const { networkOperation } = useNetwork();
@@ -19,33 +21,37 @@ function useRowActionsGetter(props) {
   const { hide } = usePopupsStore((state) => state.popupActions, shallow);
   const { removeCheckedGeofence } = useGpsMapToolsStore((state) => state.geofenceActions, shallow);
   const { toast } = useHostTools();
-  const isDesktop = useResponsiveDesktop();
   const [urlIconEdit] = useState(
-    `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_EDIT}`
+    `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_EDIT}`
   );
   const [urlIconDelete] = useState(
-    `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_DELETE}`
+    `${host_static_assets}/${environment_assets}/frontend/components/${GPS_TOOLS_COMPONENT_PATH_ID}/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCES_DELETE}`
   );
   const goEdit = (objectId, name) => {
-    hide("gpsTools");
+    hide(GeofencesLayers.LAYER_GEOFENCES);
     addPopup({
       winType: "component",
-      popupId: "geofencesAddEdit",
+      popupId: GEOFENCES_TOOL_ADD_EDIT_POPUP_ID,
       title: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODULE_NAME_GEOFENCE_EDIT),
       editionInfo: `${getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_ID)}:${objectId} - ${name} `,
       componentProps: { fullRefresh, geofenceId: objectId },
-      component: GeofenceAddEdit,
+      component: Form,
       //   onMouseDown,
-      defaultPosition: {
-        vertical: { top: 50, bottom: 50 },
-        horizontal: { right: 50, width: 380 }
-        // left:490,top:50,width:360, height:420},
-        // bounds:{top:5, left:5, right:-5, bottom:-5}
-      },
+      defaultPosition: GEOFENCES_TOOL_DEFAULT_POSITION,
       iconUrl: urlIconEdit
     });
     removeCheckedGeofence(objectId);
   };
+  const onConfirmDelete = useCallback((row) => {
+    networkOperation({
+      method: "DELETE",
+      endPoint: `geofences/${row.id}`
+    }).then((response) => {
+      toast({ title: response.message }, { type: "success" });
+      fullRefresh();
+    });
+    closeModal();
+  }, [networkOperation, toast, fullRefresh, closeModal]);
   const onDelete = useCallback(
     (row) => {
       openModal({
@@ -53,7 +59,7 @@ function useRowActionsGetter(props) {
           WindowConfirm,
           {
             title: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODAL_DELETE_GEO_TITLE),
-            msg: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
+            msg: getLabel(MAP_GPSTOOLS_DICCTIONARY.MODAL_DELETE_GEO_MESSAGE, row.name),
             onClickIntro: () => onConfirmDelete(row)
           }
         ),
@@ -62,19 +68,8 @@ function useRowActionsGetter(props) {
         initialHeight: 350
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getLabel]
+    [getLabel, onConfirmDelete, openModal]
   );
-  const onConfirmDelete = useCallback((row) => {
-    networkOperation({
-      method: "DELETE",
-      endPoint: `geofences/${row.id}`
-    }).then((response) => {
-      toast({ title: response.message }, { type: "success" });
-      fullRefresh();
-    });
-    closeModal();
-  }, []);
   const rowActionsGetter = useCallback(
     (row) => {
       const conditionalItems = [];
@@ -84,10 +79,10 @@ function useRowActionsGetter(props) {
         label: MAP_GPSTOOLS_DICCTIONARY.ROW_ACTION_GEO_EDIT,
         onClick: () => {
           goEdit(row.id, row.name);
-        },
+        }
         // Solo se habilita si intenta editarse a él mismo, o si tiene permisos pero está en un nivel superior al usuario a editar
         // disabled: !(itsMe || (hasPrivilege(PRIVILEGE_EDIT) && (loggedUserType > row.user_type.id)))
-        disabled: !row.authUserOptions.edit
+        // disabled: !row.authUserOptions?.edit,
       });
       conditionalItems.push({
         type: "menuItem",
@@ -96,15 +91,15 @@ function useRowActionsGetter(props) {
         onClick: () => {
           onDelete(row);
         },
-        error: true,
+        color: "error"
         // Solo se habilita si intenta editarse a él mismo, o si tiene permisos pero está en un nivel superior al usuario a editar
         // disabled: !(itsMe || (hasPrivilege(PRIVILEGE_EDIT) && (loggedUserType > row.user_type.id)))
-        disabled: !row.authUserOptions.edit
+        // disabled: !row.authUserOptions?.edit,
       });
       return conditionalItems;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hasPrivilege, goEdit, onDelete, urlIconDelete, urlIconEdit, isDesktop]
+    [hasPrivilege, goEdit, onDelete, urlIconDelete, urlIconEdit]
   );
   return { rowActionsGetter };
 }

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/hooks/useTabFiltered.d.ts

@@ -0,0 +1,18 @@
+import { Column, RowActionsGetter, RowKeyGetter } from '@m4l/components';
+import { DynamicTab } from '@m4l/layouts';
+import { GeofenceListColumns } from '../model';
+import { GeofenceId } from '../../../contexts/GpsMapToolsContext/types';
+type UseTabProps = {
+    goAdd: () => void;
+    labelAdd: string;
+    enableAdd: boolean;
+    columns: Column<GeofenceListColumns>[];
+    refreshCount: number;
+    rowActionsGetter: RowActionsGetter<GeofenceListColumns>;
+    rowKeyGetter: RowKeyGetter<GeofenceListColumns, GeofenceId>;
+};
+/**
+ * Master hook
+ */
+export declare function useTabFiltered(props: UseTabProps): DynamicTab;
+export {};