@m4l/components 7.0.0 → 7.1.2

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/helpers.d.ts

@@ -1,19 +1,34 @@
 import { GeofenceGeometry, GeofenceGetModel, GeofenceTypeId } from '../model';
 import { FormAddEditValues } from './types';
 import * as L from 'leaflet';
-export declare const getFormStrokeOpacityFromData: (strokeOpacity?: number | undefined) => {
+/**
+ * TODO: Documentar
+ */
+export declare const getFormStrokeOpacityFromData: (strokeOpacity?: number) => {
     value: number;
     label: string;
 };
-export declare const getFormStrokeWeightFromData: (strokeWeight?: number | undefined) => {
+/**
+ * TODO: Documentar
+ */
+export declare const getFormStrokeWeightFromData: (strokeWeight?: number) => {
     value: number;
     label: string;
 };
-export declare const getFormstrokeDashArrayFromData: (strokeDashArray?: string | undefined) => {
+/**
+ * TODO: Documentar
+ */
+export declare const getFormstrokeDashArrayFromData: (strokeDashArray?: string) => {
     value: string;
     label: string;
 };
+/**
+ * TODO: Documentar
+ */
 export declare const formatDataEnpoint: (response: {
     data: GeofenceGetModel;
 }) => FormAddEditValues;
-export declare const getLayerFromGeometry: (geometry: GeofenceGeometry | null, geofenceTypeId: GeofenceTypeId | null, radius: number | null, options?: L.CircleMarkerOptions | L.PolylineOptions | undefined) => L.Circle<any> | L.Polygon<any> | null;
+/**
+ * TODO: Documentar
+ */
+export declare const getLayerFromGeometry: (geometry: GeofenceGeometry | null, geofenceTypeId: GeofenceTypeId | null, radius: number | null, options?: L.PolylineOptions | L.CircleOptions) => L.Circle<any> | L.Polygon<any> | null;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/helpers.js

@@ -0,0 +1,77 @@
+import { i as initialValues, S as STROKE_COLOR_DEFAULT, a as STROKE_OPACITY_DEFAULT, b as STROKE_WHEIGTH_DEFAULT, c as STROKE_DASH_ARRAY_DEFAULT, F as FILL_COLOR_DEFAULT, d as FILL_OPACITY_DEFAULT } from "./constants.js";
+import * as L from "leaflet";
+const formatDataEnpoint = (response) => {
+  try {
+    const { data } = response;
+    const obRet = {
+      ...initialValues,
+      inEdition: false,
+      name: data.name,
+      geometry: data.geometry,
+      geofenceType: { id: data.type.id, name: data.type.name, url: "" },
+      properties: {
+        strokeColor: data.properties.strokeColor || STROKE_COLOR_DEFAULT,
+        strokeOpacity: STROKE_OPACITY_DEFAULT,
+        //getFormStrokeOpacityFromData(data.properties.strokeOpacity),
+        strokeWeight: STROKE_WHEIGTH_DEFAULT,
+        //,getFormStrokeWeightFromData(data.properties.strokeWeight) ,
+        strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
+        // getFormstrokeDashArrayFromData(data.properties.strokeDashArray) ,
+        fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
+        fillOpacity: FILL_OPACITY_DEFAULT
+        //data.properties.fillOpacity || FILL_OPACITY_DEFAULT,
+      }
+    };
+    if (obRet.geofenceType?.id === "gt_circle") {
+      if (data.properties.radius) {
+        obRet.properties.radius = data.properties.radius;
+      }
+      if (data.geometry && data.geometry.type === "Point") {
+        obRet.lng = data.geometry.coordinates[0];
+        obRet.lat = data.geometry.coordinates[1];
+      }
+    }
+    return obRet;
+  } catch (_e) {
+    return { ...initialValues };
+  }
+};
+const getLayerFromGeometry = (geometry, geofenceTypeId, radius, options) => {
+  if (geometry) {
+    if (geofenceTypeId === "gt_circle" && geometry.type === "Point") {
+      return L.circle([geometry.coordinates[1], geometry.coordinates[0]], {
+        ...options,
+        radius: radius || 0
+      });
+    } else if (geofenceTypeId === "gt_polygon" && geometry.type === "Polygon") {
+      const coordinates = geometry.coordinates.map(
+        (ring) => ring.map((position) => [position[1], position[0]])
+      );
+      return L.polygon(coordinates, options);
+    } else if (geofenceTypeId === "gt_rectangle" && geometry.type === "Polygon") {
+      const latLngs = geometry.coordinates[0].map(
+        (coord) => [coord[1], coord[0]]
+      );
+      const lats = latLngs.map((coord) => {
+        if (Array.isArray(coord)) {
+          return coord[0];
+        }
+        return 0;
+      });
+      const lngs = latLngs.map((coord) => {
+        if (Array.isArray(coord)) {
+          return coord[1];
+        }
+        return 0;
+      });
+      const southWest = [Math.min(...lats), Math.min(...lngs)];
+      const northEast = [Math.max(...lats), Math.max(...lngs)];
+      return L.rectangle([southWest, northEast], options);
+    }
+  }
+  return null;
+};
+export {
+  formatDataEnpoint as f,
+  getLayerFromGeometry as g
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useDrawing.d.ts

@@ -3,6 +3,9 @@
  * los datos asociados a una geocerca
  * @returns
  */
+/**
+ * TODO: Documentar
+ */
 export declare function useDrawing(): {
     inEdition: boolean;
     handleDraw: () => void;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useDrawing.js

@@ -0,0 +1,216 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { useModuleDictionary } from "@m4l/core";
+import { useMap } from "react-leaflet";
+import { g as getLayerFromGeometry } from "../helpers.js";
+import { u as useFormReadyForUpdate } from "../../../../../../../../../hooks/useFormReadyForUpdate/index.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../../../dictionary.js";
+function useDrawing() {
+  const { getLabel } = useModuleDictionary();
+  const readyToUpdate = useFormReadyForUpdate();
+  const map = useMap();
+  const { control, setValue } = useFormContext();
+  const fieldsWatch = useWatch({
+    control,
+    name: [
+      "geofenceType",
+      "inEdition",
+      "properties.strokeColor",
+      "properties.strokeOpacity",
+      "properties.strokeWeight",
+      "properties.strokeDashArray",
+      "properties.fillColor",
+      "properties.fillOpacity",
+      "geometry",
+      "properties.radius"
+    ]
+  });
+  const geofenceTypeId = fieldsWatch[0]?.id;
+  const inEdition = fieldsWatch[1];
+  const strokeColor = fieldsWatch[2];
+  const strokeOpacity = fieldsWatch[3].value;
+  const strokeWeight = fieldsWatch[4].value;
+  const strokeDashArray = fieldsWatch[5].value;
+  const fillColor = fieldsWatch[6];
+  const fillOpacity = fieldsWatch[7].value;
+  const geometry = fieldsWatch[8];
+  const radius = fieldsWatch[9];
+  const [drawing, setDrawing] = useState(false);
+  const currentLayer = useRef(null);
+  const [geometrTypeIdCached, setgeofenceTypeIdCached] = useState(geofenceTypeId);
+  useEffect(() => {
+    if (geometry) {
+      currentLayer.current = getLayerFromGeometry(geometry, geofenceTypeId, radius, {
+        color: strokeColor,
+        opacity: strokeOpacity,
+        weight: strokeWeight,
+        dashArray: strokeDashArray,
+        fillColor,
+        fillOpacity
+      });
+      if (currentLayer.current) {
+        map.addLayer(currentLayer.current);
+        map.fitBounds(currentLayer.current.getBounds());
+      }
+    }
+    return () => {
+      if (currentLayer.current) {
+        currentLayer.current.remove();
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    if (currentLayer.current) {
+      currentLayer.current.setStyle({
+        color: strokeColor,
+        opacity: strokeOpacity,
+        weight: strokeWeight,
+        dashArray: strokeDashArray,
+        fillColor,
+        fillOpacity
+      });
+    }
+  }, [strokeColor, strokeOpacity, strokeWeight, strokeDashArray, fillColor, fillOpacity]);
+  useEffect(() => {
+    map.pm.setLang("en", {
+      tooltips: {
+        placeMarker: void 0,
+        firstVertex: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FIRST_VERTEX),
+        continueLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_CONTINUE_LINE),
+        finishLine: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_LINE),
+        finishPoly: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_POLY),
+        finishRect: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_RECT),
+        startCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_START_CIRCLE),
+        finishCircle: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH_CIRCLE),
+        placeCircleMarker: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
+      }
+    });
+  }, [map, getLabel]);
+  useEffect(() => {
+    if (map) {
+      let shape = "Circle";
+      if (geometrTypeIdCached === "gt_polygon") {
+        shape = "Polygon";
+      } else if (geometrTypeIdCached === "gt_rectangle") {
+        shape = "Rectangle";
+      }
+      if (drawing) {
+        if (!currentLayer.current) {
+          setValue("inEdition", true);
+          if (shape === "Circle") {
+            map.on("pm:drawstart", ({ workingLayer }) => {
+              workingLayer.on("pm:centerplaced", (e) => {
+                const layer = e.workingLayer;
+                layer.setStyle({
+                  color: strokeColor,
+                  opacity: strokeOpacity,
+                  weight: strokeWeight,
+                  dashArray: strokeDashArray,
+                  fillColor,
+                  fillOpacity
+                });
+                setValue("lat", Number(layer.getLatLng().lat.toFixed(8)));
+                setValue("lng", Number(layer.getLatLng().lng.toFixed(8)));
+                layer.on("pm:change", (_e) => {
+                  setValue("properties.radius", Number(layer.getRadius().toFixed(1)));
+                });
+              });
+            });
+            setValue("properties.subType", shape);
+          } else if (shape === "Polygon") {
+            map.on("pm:drawstart", ({ workingLayer }) => {
+              workingLayer.on("pm:vertexadded", (e) => {
+                const layer = e.workingLayer;
+                layer.setStyle({
+                  color: strokeColor,
+                  opacity: strokeOpacity,
+                  weight: strokeWeight,
+                  dashArray: strokeDashArray,
+                  fillColor,
+                  fillOpacity
+                });
+              });
+            });
+          }
+          map.pm.enableDraw(shape);
+          map.pm.setPathOptions({
+            color: strokeColor,
+            opacity: strokeOpacity,
+            weight: strokeWeight,
+            dashArray: strokeDashArray,
+            fillColor,
+            fillOpacity
+          });
+          map.on("pm:create", (e) => {
+            currentLayer.current = e.layer;
+            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
+              shouldTouch: false,
+              shouldValidate: true
+            });
+            setValue("inEdition", false);
+            setDrawing(false);
+          });
+        } else {
+          currentLayer.current.pm.enable();
+          setValue("inEdition", true);
+          currentLayer.current.on("pm:disable", (e) => {
+            currentLayer.current = e.layer;
+            setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
+              shouldTouch: false,
+              shouldValidate: true
+            });
+            setValue("inEdition", false);
+            setDrawing(false);
+          });
+          if (shape === "Circle") {
+            currentLayer.current.on("pm:change", (e) => {
+              currentLayer.current = e.layer;
+              setValue("lat", Number(currentLayer.current.getLatLng().lat.toFixed(8)));
+              setValue("lng", Number(currentLayer.current.getLatLng().lng.toFixed(8)));
+              setValue("properties.radius", currentLayer.current.getRadius());
+              setValue("properties.radius", Number(currentLayer.current.getRadius().toFixed(1)));
+            });
+          }
+        }
+      } else {
+        map.pm.disableDraw("Polygon");
+        map.off("pm:create");
+        map.off("pm:edit");
+        map.off("pm:drawstart");
+      }
+    }
+  }, [map, drawing]);
+  const handleDraw = useCallback(() => {
+    setDrawing(true);
+  }, []);
+  const handleFinish = useCallback(() => {
+    if (currentLayer.current) {
+      currentLayer.current.pm.disable();
+      currentLayer.current.setStyle({ color: "#ff0000", fillColor: "#ff0000" });
+    }
+  }, []);
+  useEffect(() => {
+    if (!readyToUpdate) {
+      return;
+    }
+    if (geofenceTypeId) {
+      if (geofenceTypeId !== geometrTypeIdCached) {
+        setgeofenceTypeIdCached(geofenceTypeId);
+        if (geometrTypeIdCached !== "gt_circle") {
+          setValue("properties.radius", null);
+          setValue("lat", null);
+          setValue("lng", null);
+        }
+        setValue("geometry", null);
+        if (currentLayer.current) {
+          currentLayer.current.remove();
+          currentLayer.current = null;
+        }
+      }
+    }
+  }, [geofenceTypeId]);
+  return { inEdition, handleDraw, handleFinish, geometrTypeIdCached };
+}
+export {
+  useDrawing as u
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useSubmit.d.ts

@@ -3,6 +3,9 @@ import { FormAddEditValues, GeofenceAddEditProps } from '../types';
 export interface UseSubmitProps extends Pick<GeofenceAddEditProps, 'fullRefresh'> {
     objectId?: number;
 }
+/**
+ * TODO: Documentar
+ */
 export declare function useSubmit(props: UseSubmitProps): {
     onSubmit: (data: FormAddEditValues | FieldValues) => Promise<void>;
 };

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useSubmit.js

@@ -0,0 +1,63 @@
+import { useHostTools, useNetwork } from "@m4l/core";
+import { E as ENDPOINT_GEOFENCE_NEW_EDIT } from "../../constants.js";
+import { shallow } from "zustand/shallow";
+import { u as usePopupsStore } from "../../../../../../../../popups/components/PopupsProvider/hooks/usePopupsStore/index.js";
+import { u as useMapGpsToolsStore } from "../../../../../hooks/useMapGpsToolsStore/index.js";
+const getSummitData = (values, geofenceId) => {
+  const newEditObj = {
+    name: values.name,
+    typeId: values.geofenceType.id,
+    geometry: values.geometry,
+    properties: {
+      subType: values.properties.subType,
+      strokeColor: values.properties.fillColor,
+      strokeOpacity: values.properties.strokeOpacity.value,
+      strokeWeight: values.properties.strokeWeight.value,
+      strokeDashArray: values.properties.strokeDashArray.value,
+      fillColor: values.properties.fillColor,
+      fillOpacity: values.properties.fillOpacity.value
+    },
+    timeMinInSeconds: values.timeMinInSeconds,
+    timeMinOutSeconds: values.timeMinOutSeconds,
+    alias: values.alias,
+    customerId: values.customerId,
+    ...geofenceId ? { geofenceId } : {}
+  };
+  if (values.geofenceType.id === "gt_circle") {
+    newEditObj.properties.radius = values.properties.radius;
+  }
+  return newEditObj;
+};
+function useSubmit(props) {
+  const { objectId, fullRefresh } = props;
+  const { toast } = useHostTools();
+  const { networkOperation } = useNetwork();
+  const { closePopup, showPopup } = usePopupsStore((state) => state.popupsActions);
+  const { addCheckedGeofence } = useMapGpsToolsStore((state) => state.geofenceActions, shallow);
+  const onSubmit = async (data) => {
+    await networkOperation({
+      method: objectId ? "PUT" : "POST",
+      endPoint: `${ENDPOINT_GEOFENCE_NEW_EDIT}${objectId ? `/${objectId}` : ""}`,
+      data: getSummitData(data, objectId),
+      toastError: true,
+      toastSuccess: false,
+      bodyToSnakeCase: true,
+      isRemote: false
+    }).then((response) => {
+      toast({ title: response.message }, { type: "success" });
+      closePopup("geofencesAddEdit");
+      showPopup("gpsTools");
+      if (objectId !== void 0) {
+        addCheckedGeofence(objectId);
+      }
+      if (fullRefresh) {
+        fullRefresh();
+      }
+    }).catch(() => {
+    });
+  };
+  return { onSubmit };
+}
+export {
+  useSubmit as u
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useSumbitErrorsFocus.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { u as useTab } from "../../../../../../../../../hooks/useTab/index.js";
+function useSumbitErrorsFocus() {
+  const {
+    setFocus,
+    formState: { isSubmitted, errors }
+  } = useFormContext();
+  const { handleChange } = useTab();
+  useEffect(() => {
+    if (isSubmitted) {
+      const firstError = Object.keys(errors).reduce((field, a) => {
+        const fieldKey = field;
+        return errors[fieldKey] ? fieldKey : a;
+      }, null);
+      if (firstError) {
+        const found = [
+          "name",
+          "geometry",
+          "geofenceType",
+          "timeMinInSeconds",
+          "timeMinOutSeconds"
+        ].some((field) => field.includes(firstError));
+        if (found) {
+          handleChange(null, "general");
+        }
+        if (firstError) {
+          setFocus(firstError);
+        }
+      }
+    }
+  }, [isSubmitted, errors]);
+}
+export {
+  useSumbitErrorsFocus as u
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useValidation.d.ts

@@ -1,22 +1,25 @@
 import * as Yup from 'yup';
+/**
+ * TODO: Documentar
+ */
 export declare function useValidation(): {
-    validationSchema: Yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-        timeMinInSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        timeMinOutSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-        geometry: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
-        geofenceType: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
-    }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-        timeMinInSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        timeMinOutSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-        geometry: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
-        geofenceType: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
-    }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
-        timeMinInSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        timeMinOutSeconds: import("yup/lib/number").RequiredNumberSchema<number | null | undefined, import("yup/lib/types").AnyObject>;
-        name: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-        geometry: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
-        geofenceType: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape> | null>;
+    validationSchema: Yup.ObjectSchema<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+        timeMinInSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        timeMinOutSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+        geometry: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+        geofenceType: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+    }>, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+        timeMinInSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        timeMinOutSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+        geometry: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+        geofenceType: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+    }>>, import('yup/lib/object').AssertsShape<import('yup/lib/object').Assign<import('yup/lib/object').ObjectShape, {
+        timeMinInSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        timeMinOutSeconds: import('yup/lib/number').RequiredNumberSchema<number | null | undefined, import('yup/lib/types').AnyObject>;
+        name: import('yup/lib/string').RequiredStringSchema<string | undefined, import('yup/lib/types').AnyObject>;
+        geometry: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
+        geofenceType: import('yup/lib/object').RequiredObjectSchema<import('yup/lib/object').ObjectShape, import('yup/lib/object').AnyObject, import('yup/lib/object').TypeOfShape<import('yup/lib/object').ObjectShape> | null>;
     }>>>;
 };

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/hooks/useValidation.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import * as Yup from "yup";
+import { G as GeneralDataValidation } from "../subcomponents/GeneralData/validations.js";
+import { C as ConfigDataValidation } from "../subcomponents/ConfigData/validations.js";
+function useValidation() {
+  const { getLabel } = useModuleDictionary();
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      ...GeneralDataValidation(getLabel),
+      ...ConfigDataValidation(getLabel)
+    }),
+    [getLabel]
+  );
+  return { validationSchema };
+}
+export {
+  useValidation as u
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/index.d.ts

@@ -1,2 +1,5 @@
-import type { GeofenceAddEditProps } from './types';
+import { GeofenceAddEditProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function GeofenceAddEdit(props: GeofenceAddEditProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/index.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { R as RHFormProviderStyled } from "./styles.js";
+import { T as TabProvider } from "../../../../../../../mui_extended/TabContext/index.js";
+import { M as MyActions } from "./subcomponents/MyActions/index.js";
+import { M as MyTabs } from "./subcomponents/MyTabs/index.js";
+import { f as formatDataEnpoint } from "./helpers.js";
+import { u as useValidation } from "./hooks/useValidation.js";
+import { u as useSubmit } from "./hooks/useSubmit.js";
+import { u as useFormAddEdit } from "../../../../../../../../hooks/useFormAddEdit/index.js";
+import { i as initialValues } from "./constants.js";
+import { a as ENDPOINT_GEOFENCE_GET } from "../constants.js";
+import { g as gpsToolsClasses } from "../../../../classes/index.js";
+import { u as useMapGpsToolsStore } from "../../../../hooks/useMapGpsToolsStore/index.js";
+import { S as Stack } from "../../../../../../../mui_extended/Stack/Stack.js";
+function GeofenceAddEdit(props) {
+  const { geofenceId } = props;
+  const [finalInitalValues, omitCallEnpoint] = useMapGpsToolsStore((state) => {
+    if (geofenceId === void 0) {
+      return [initialValues, false];
+    }
+    const geofence = state.geofenceState.hashGeofences[geofenceId];
+    if (geofence?.geometry) {
+      const emulateResponse = {
+        data: {
+          type: geofence.type,
+          name: geofence.name,
+          id: geofence.id,
+          active: false,
+          geometry: geofence.geometry,
+          properties: geofence.properties,
+          countCrossingFeatures: geofence.countCrossingFeatures,
+          countInternalFeatures: geofence.countInternalFeatures,
+          createdAt: geofence.createdAt,
+          updatedAt: geofence.updatedAt,
+          timeMinInSeconds: geofence.timeMinInSeconds,
+          timeMinOutSeconds: geofence.timeMinOutSeconds,
+          alias: geofence.alias,
+          customerId: geofence.customerId
+        }
+      };
+      return [formatDataEnpoint(emulateResponse), true];
+    } else {
+      return [initialValues, false];
+    }
+  });
+  const { formValues, statusLoad } = useFormAddEdit({
+    objectId: geofenceId,
+    formatDataEnpoint,
+    initialValues: finalInitalValues,
+    endPoint: ENDPOINT_GEOFENCE_GET,
+    isRemote: false,
+    omitCallEnpoint
+  });
+  const { validationSchema } = useValidation();
+  const { onSubmit } = useSubmit({ objectId: geofenceId });
+  return /* @__PURE__ */ jsx(
+    RHFormProviderStyled,
+    {
+      statusLoad,
+      onSubmit,
+      values: formValues,
+      validationSchema,
+      className: gpsToolsClasses.gpsToolsGeofencesAddEdit,
+      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "8px", children: [
+        /* @__PURE__ */ jsx(TabProvider, { initialValue: "general", children: /* @__PURE__ */ jsx(MyTabs, {}) }),
+        /* @__PURE__ */ jsx(MyActions, { ...props })
+      ] })
+    }
+  );
+}
+export {
+  GeofenceAddEdit as G
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/styles.d.ts

@@ -1 +1 @@
-export declare const RHFormProviderStyled: import("@emotion/styled").StyledComponent<import("../../../../../../../hook-form/RHFormContext/types").FormProviderProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const RHFormProviderStyled: import('@emotion/styled').StyledComponent<import('../../../../../../../hook-form/RHFormContext/types').FormProviderProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/styles.js

@@ -0,0 +1,8 @@
+import { styled } from "@mui/material/styles";
+import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
+const RHFormProviderStyled = styled(RHFormProvider)`
+  ${(props) => props.theme.components?.M4LMapGpsToolsGeofencesAddEdit?.styleOverrides}
+`;
+export {
+  RHFormProviderStyled as R
+};

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/index.d.ts

@@ -1 +1,4 @@
+/**
+ * TODO: Documentar
+ */
 export declare function ConfigData(): import("react/jsx-runtime").JSX.Element;