@m4l/gclick 0.2.0 → 0.2.3-beta.1

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

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useDatagridFiltered } from "./useDatagridFiltered.js";
+import { DataGrid } from "@m4l/components";
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../dictionary.js";
+function useTabFiltered(props) {
+  const { goAdd, labelAdd, columns, rowActionsGetter, rowKeyGetter, refreshCount } = props;
+  const { getLabel } = useModuleDictionary();
+  const {
+    rows,
+    pagerState,
+    onPageChange,
+    onRowsPerPageChange,
+    leftActions,
+    rightActions,
+    visibleCustomHeader,
+    customHeaderComponent,
+    checkedGeofencesFiltered,
+    setCheckedGeofencesFiltered,
+    externalFilterSettings,
+    externalSortSettings
+  } = useDatagridFiltered({ goAdd, labelAdd, refreshCount });
+  const tab = useMemo(() => {
+    return /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        id: `master_list_all`,
+        columns,
+        rows,
+        rowActionsGetter,
+        rowKeyGetter,
+        checkedRows: checkedGeofencesFiltered,
+        onCheckedRowsChange: setCheckedGeofencesFiltered,
+        visibleCustomHeader,
+        customHeader: customHeaderComponent,
+        externalFilterSettings,
+        externalSortSettings,
+        withActions: true,
+        actionsProps: {
+          leftActions,
+          rightActions,
+          withPager: true,
+          withLocalFilters: true,
+          pagerOptions: {
+            records: rows.length,
+            totalRecords: pagerState.totalRecords,
+            rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+            page: pagerState.page,
+            rowsPerPage: pagerState.rowsPerPage,
+            onPageChange,
+            onRowsPerPageChange
+          }
+        }
+      },
+      `master_list_all`
+    );
+  }, [checkedGeofencesFiltered, columns, customHeaderComponent, externalFilterSettings, externalSortSettings, leftActions, onPageChange, onRowsPerPageChange, pagerState.page, pagerState.rowsPerPage, pagerState.totalRecords, rightActions, rowActionsGetter, rowKeyGetter, rows, setCheckedGeofencesFiltered, visibleCustomHeader]);
+  return {
+    unmountable: false,
+    value: "filtered",
+    tabContent: tab,
+    tabProps: {
+      label: `${getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_FILTERED)} (${rows.length})`
+    }
+  };
+}
+export {
+  useTabFiltered as u
+};

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

@@ -0,0 +1,17 @@
+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>[];
+    rowActionsGetter: RowActionsGetter<GeofenceListColumns>;
+    rowKeyGetter: RowKeyGetter<GeofenceListColumns, GeofenceId>;
+};
+/**
+ * Master hook
+ */
+export declare function useTabSelected(props: UseTabProps): DynamicTab;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { DataGrid } from "@m4l/components";
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { u as useDatagridSelected } from "./useDatagridSelected.js";
+import { M as MAP_GPSTOOLS_DICCTIONARY } from "../../../dictionary.js";
+import { u as useGpsMapToolsStore } from "../../../hooks/useGpsMapToolsStore/index.js";
+function useTabSelected(props) {
+  const { goAdd, labelAdd, enableAdd, columns, rowActionsGetter, rowKeyGetter } = props;
+  const { getLabel } = useModuleDictionary();
+  const checkedGeofences = useGpsMapToolsStore((state) => state.geofenceState.checkedGeofences);
+  const setCheckedGeofences = useGpsMapToolsStore((state) => state.geofenceActions.setCheckedGeofences);
+  const {
+    rows,
+    rightActions
+  } = useDatagridSelected({ goAdd, labelAdd, enableAdd });
+  const tab = useMemo(() => {
+    return /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        id: `master_list_all`,
+        columns,
+        rows,
+        rowActionsGetter,
+        rowKeyGetter,
+        checkedRows: checkedGeofences,
+        onCheckedRowsChange: setCheckedGeofences,
+        withActions: true,
+        actionsProps: {
+          rightActions,
+          withLocalFilters: true
+        }
+      },
+      `master_list_all`
+    );
+  }, [checkedGeofences, columns, rightActions, rowActionsGetter, rowKeyGetter, rows, setCheckedGeofences]);
+  return {
+    unmountable: true,
+    value: "selected",
+    tabContent: tab,
+    tabProps: {
+      label: `${getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_TAB_SELECTED)} (${rows.length})`
+    }
+  };
+}
+export {
+  useTabSelected as u
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/index.d.ts

@@ -0,0 +1 @@
+export { GEOFENCES_TOOL } from './constants';

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools/subcomponents → GeofencesTool}/model.d.ts

@@ -1,9 +1,10 @@
-import { GeofenceId } from '../../../contexts/GpsMapToolsContext/types';
-import { Feature, GeoJsonProperties, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from '../../../../GpsMap/contexts/MapContext/types';
+import { GeofenceId } from '../../contexts/GpsMapToolsContext/types';
+import { Feature, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from '../../../GpsMap/contexts/MapContext/types';
 /**
  * Tipos de geometría compatibles con las geocercas
  */
 export type GeofenceGeometry = Point | Polygon | MultiPolygon;
+export type GeofenceBounds = MultiPoint;
 /**
  * Tipos de geometría Compatibles con las geocercas
  */
@@ -17,11 +18,34 @@ export type InternalGeometry = Point | Polygon | MultiPolygon | MultiPoint | Lin
  * Tipos de features de transtio soportados
  */
 export type InternalFeature = Feature<InternalGeometry>;
-export type GeofenceTypeId = 'gt_polygon' | 'gt_circle' | 'gt_rectangle';
+export type GeofenceTypeId = 'gt_polygon' | 'gt_circle' | 'gt_rectangle' | 'gt_multipolygon';
 export type GeofenceType = {
     id: GeofenceTypeId;
     name: string;
 };
+export interface StyleProperties {
+    fillColor: string;
+    fillOpacity: number;
+    color: string;
+    opacity: number;
+    weight: number;
+    dashArray: string;
+}
+export interface StyleDashArray {
+    id: string;
+    dictionaryId: string;
+    iconId: string;
+    style: string;
+}
+export interface GeofenceStyleProperties {
+    radius?: number | null;
+    strokeColor: string;
+    strokeOpacity: number;
+    strokeWeight: number;
+    strokeDashArray: string;
+    fillColor: string;
+    fillOpacity: number;
+}
 /**
  * Modelo de datos proveniente del endpoint get de geocercas
  */
@@ -49,7 +73,7 @@ export interface GeofenceGetModel {
     /**
      * "properties" propiedades de la geometria
      */
-    properties: GeoJsonProperties;
+    properties: GeofenceStyleProperties;
     /**
      * timeMinInSeconds indica el tiempo mínimo para ingresar a una geocerca
      */
@@ -58,14 +82,6 @@ export interface GeofenceGetModel {
      * timeMinOutSeconds indica el tiempo mínimo para salir de una geocerca
      */
     timeMinOutSeconds: number;
-    /**
-     * "countCrossingFeatures" indica si la cantidad de features de cruce
-     */
-    countCrossingFeatures: number;
-    /**
-     * "countInternalFeatures" indica la cantidad de features internos que tiene la geocerca
-     */
-    countInternalFeatures: number;
     /**
      * "alias" alias de la geocerca, si no tiene es null y si tiene, es un string unico en todas las geocercas
      */
@@ -75,6 +91,10 @@ export interface GeofenceGetModel {
      * si es de un cliente es un string unico en todas las geocercas
      */
     customerId?: string | null;
+    /**
+     * "bounds" bounds de la geocerca
+     */
+    bounds: GeofenceBounds;
     createdAt: string;
     updatedAt: string | null;
 }
@@ -93,6 +113,10 @@ export interface GeofenceListModel extends Omit<GeofenceGetModel, 'geometry'> {
     geometry: GeofenceGeometry | null;
     authUserOptions: AuthUserOptionsType;
 }
+/**
+ * Columnas de la lista de geocercas
+ */
+export type GeofenceListColumns = Pick<GeofenceListModel, 'id' | 'name' | 'type' | 'timeMinInSeconds' | 'timeMinOutSeconds' | 'alias' | 'customerId' | 'createdAt' | 'updatedAt'>;
 /**
  * Modelo de datos para enviar al endpoint de creacion de geocercas
  */
@@ -111,4 +135,8 @@ export interface GeofenceEditModel extends GeofenceNewModel {
      */
     geofenceId: GeofenceId;
 }
+export interface GeofenceAddEditResponseModel {
+    data: GeofenceGetModel;
+    message: string;
+}
 export {};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/Form.d.ts

@@ -0,0 +1,5 @@
+import { GeofenceAddEditProps } from './types';
+/**
+ * Formulario de adición o edición de una geocerca
+ */
+export declare function Form(props: GeofenceAddEditProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/Form.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RHFormProvider, Stepper, StepperContent, Step, Stack, StepperFooter, StepperFooterLeftActions, StepperFooterRightActions, StepperPrevButton, StepperNextButton, StepperSubmitButton } from "@m4l/components";
+import { u as useValidation } from "./hooks/useValidation.js";
+import { u as useSubmit } from "./hooks/useSubmit.js";
+import "@geoman-io/leaflet-geoman-free";
+import { C as ConfigData } from "./subcomponents/ConfigData/index.js";
+import { G as GeneralData } from "./subcomponents/GeneralData/GeneralData.js";
+import { S as StyleData } from "./subcomponents/StyleData/index.js";
+import { u as useForm } from "./hooks/useForm.js";
+import { M as MyActionFormCancel } from "./subcomponents/MyActionFormCancel/MyActionFormCancel.js";
+function Form(props) {
+  const { geofenceId } = props;
+  const { validationSchema } = useValidation();
+  const { onSubmit } = useSubmit(props);
+  const { steps, formValues, statusLoad } = useForm(props);
+  return /* @__PURE__ */ jsx(
+    RHFormProvider,
+    {
+      statusLoad,
+      onSubmit,
+      values: formValues,
+      validationSchema,
+      children: /* @__PURE__ */ jsxs(Stepper, { indicatorType: "dot", storeId: "form-geofence-add-edit", steps, orientation: "vertical", visibleTitle: false, children: [
+        /* @__PURE__ */ jsxs(StepperContent, { children: [
+          /* @__PURE__ */ jsx(Step, { stepKey: "basic-information", children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "8px", children: [
+            /* @__PURE__ */ jsx(GeneralData, {}),
+            /* @__PURE__ */ jsx(ConfigData, {})
+          ] }) }, "basic-information"),
+          /* @__PURE__ */ jsx(Step, { stepKey: "style-information", children: /* @__PURE__ */ jsx(StyleData, {}) }, "style-information")
+        ] }),
+        /* @__PURE__ */ jsxs(StepperFooter, { children: [
+          /* @__PURE__ */ jsx(StepperFooterLeftActions, { children: /* @__PURE__ */ jsx(MyActionFormCancel, { geofenceId }) }),
+          /* @__PURE__ */ jsxs(StepperFooterRightActions, { children: [
+            /* @__PURE__ */ jsx(StepperPrevButton, { forceIsMobile: true }),
+            /* @__PURE__ */ jsx(StepperNextButton, { forceIsMobile: true }),
+            /* @__PURE__ */ jsx(StepperSubmitButton, { forceIsMobile: true })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Form as F
+};

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/constants.d.ts

@@ -0,0 +1,3 @@
+import { FormAddEditValues } from './types';
+export declare const GEOFENCES_TOOL_ADD_EDIT_POPUP_ID = "geofencesAddEdit";
+export declare const initialValues: FormAddEditValues;

package/components/maps/components/GpsMapTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/constants.js

@@ -0,0 +1,31 @@
+import { S as STROKE_DASH_ARRAY_DEFAULT, a as STROKE_WHEIGTH_DEFAULT, b as STROKE_OPACITY_DEFAULT, c as STROKE_COLOR_DEFAULT, F as FILL_OPACITY_DEFAULT, d as FILL_COLOR_DEFAULT } from "./subcomponents/StyleData/constants.js";
+const GEOFENCES_TOOL_ADD_EDIT_POPUP_ID = "geofencesAddEdit";
+const initialValues = {
+  /** General Data */
+  name: "",
+  geofenceTypeId: null,
+  /** Config Data */
+  alias: null,
+  customerId: null,
+  timeMinInSeconds: 5,
+  timeMinOutSeconds: 5,
+  /** de Apoyo */
+  inEdition: false,
+  geometry: null,
+  lat: null,
+  lng: null,
+  properties: {
+    radius: null,
+    /** Style Data */
+    fillColor: FILL_COLOR_DEFAULT,
+    fillOpacity: FILL_OPACITY_DEFAULT,
+    strokeColor: STROKE_COLOR_DEFAULT,
+    strokeOpacity: STROKE_OPACITY_DEFAULT,
+    strokeWeight: STROKE_WHEIGTH_DEFAULT,
+    strokeDashArray: STROKE_DASH_ARRAY_DEFAULT
+  }
+};
+export {
+  GEOFENCES_TOOL_ADD_EDIT_POPUP_ID as G,
+  initialValues as i
+};

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/helpers.d.ts

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

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/helpers.js

@@ -1,28 +1,43 @@
-import { F as FILL_OPACITY_DEFAULT, a as FILL_COLOR_DEFAULT, S as STROKE_DASH_ARRAY_DEFAULT, b as STROKE_WHEIGTH_DEFAULT, c as STROKE_OPACITY_DEFAULT, d as STROKE_COLOR_DEFAULT, i as initialValues } from "./constants.js";
+import { i as initialValues } from "./constants.js";
+import { d as FILL_COLOR_DEFAULT, c as STROKE_COLOR_DEFAULT, b as STROKE_OPACITY_DEFAULT, e as STYLE_OPACITIES, S as STROKE_DASH_ARRAY_DEFAULT, a as STROKE_WHEIGTH_DEFAULT, f as STYLE_WHEIGHTS } from "./subcomponents/StyleData/constants.js";
 import * as L from "leaflet";
-const formatDataEnpoint = (response) => {
+import { S as STYLE_PATTERNS } from "../../constants.js";
+const getFormOpacityFromData = (strokeOpacity) => {
+  if (strokeOpacity === void 0) {
+    return STROKE_OPACITY_DEFAULT;
+  }
+  return STYLE_OPACITIES.find((style) => style.id === strokeOpacity)?.id || STROKE_OPACITY_DEFAULT;
+};
+const getFormStrokeWeightFromData = (strokeWeight) => {
+  if (strokeWeight === void 0) {
+    return STROKE_WHEIGTH_DEFAULT;
+  }
+  return STYLE_WHEIGHTS.find((style) => style.id === strokeWeight)?.id || STROKE_WHEIGTH_DEFAULT;
+};
+const getFormstrokeDashArrayFromData = (strokeDashArray) => {
+  if (strokeDashArray === void 0) {
+    return STROKE_DASH_ARRAY_DEFAULT;
+  }
+  return STYLE_PATTERNS.find((style) => style.id === strokeDashArray)?.id || STROKE_DASH_ARRAY_DEFAULT;
+};
+const formatDataEndpoint = (response) => {
   try {
     const { data } = response;
     const obRet = {
       ...initialValues,
+      ...data,
       inEdition: false,
-      name: data.name,
-      geometry: data.geometry,
-      geofenceType: { id: data.type.id, name: data.type.name, url: "" },
+      geofenceTypeId: data.type.id,
       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) ,
+        strokeOpacity: getFormOpacityFromData(data.properties.strokeOpacity),
+        strokeWeight: getFormStrokeWeightFromData(data.properties.strokeWeight),
+        strokeDashArray: getFormstrokeDashArrayFromData(data.properties.strokeDashArray),
         fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
-        fillOpacity: FILL_OPACITY_DEFAULT
-        //data.properties.fillOpacity || FILL_OPACITY_DEFAULT,
+        fillOpacity: getFormOpacityFromData(data.properties.fillOpacity)
       }
     };
-    if (obRet.geofenceType?.id === "gt_circle") {
+    if (obRet.geofenceTypeId === "gt_circle") {
       if (data.properties.radius) {
         obRet.properties.radius = data.properties.radius;
       }
@@ -48,6 +63,8 @@ const getLayerFromGeometry = (geometry, geofenceTypeId, radius, options) => {
         (ring) => ring.map((position) => [position[1], position[0]])
       );
       return L.polygon(coordinates, options);
+    } else if (geofenceTypeId === "gt_multipolygon" && geometry.type === "MultiPolygon") {
+      return L.geoJSON(geometry, options);
     } else if (geofenceTypeId === "gt_rectangle" && geometry.type === "Polygon") {
       const latLngs = geometry.coordinates[0].map(
         (coord) => [coord[1], coord[0]]
@@ -72,6 +89,6 @@ const getLayerFromGeometry = (geometry, geofenceTypeId, radius, options) => {
   return null;
 };
 export {
-  formatDataEnpoint as f,
+  formatDataEndpoint as f,
   getLayerFromGeometry as g
 };

package/components/maps/components/GpsMapTools/subcomponents/{TabsGpsTools → GeofencesTool}/subcomponents/GeofenceAddEdit/hooks/useDrawing.d.ts

@@ -10,5 +10,5 @@ export declare function useDrawing(): {
     inEdition: boolean;
     handleDraw: () => void;
     handleFinish: () => void;
-    geometrTypeIdCached: "gt_polygon" | "gt_circle" | "gt_rectangle" | null;
+    geometrTypeIdCached: "gt_polygon" | "gt_circle" | "gt_rectangle" | "gt_multipolygon" | null;
 };