componentes-sinco 1.1.21 → 1.1.22

package/dist/index.cjs

@@ -1798,7 +1798,10 @@ var StopEvent = ({ children }) => {
         e.preventDefault();
         e.stopPropagation();
       },
-      onClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
       display: "inline-flex",
       alignItems: "center"
     },
@@ -1911,17 +1914,19 @@ function SCAutocomplete({
     (item) => getItemValue(item).value === state.hiddenValue
   ) || null;
   const [open, setOpen] = import_react15.default.useState(false);
+  const componentClickActiveRef = import_react15.default.useRef(false);
   const hayOnComponentClickGlobal = (0, import_react15.useMemo)(() => {
     return data.some((opt) => {
       const item = getItemValue(opt);
       return Boolean(item.onComponentClick);
     });
-  }, [data]);
+  }, [data, getItemValue]);
   return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, data && /* @__PURE__ */ import_react15.default.createElement(
     import_material9.Autocomplete,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, hayOnComponentClickGlobal ? { disableCloseOnSelect: true } : {}), hayOnComponentClickGlobal ? { blurOnSelect: false } : {}), hayOnComponentClickGlobal ? { open } : {}), hayOnComponentClickGlobal ? { onOpen: () => setOpen(true) } : {}), hayOnComponentClickGlobal ? {
       onClose: (event2, reason) => {
-        if (["blur", "selectOption"].includes(reason)) return;
+        if (componentClickActiveRef.current) return;
+        if (reason === "selectOption") return;
         setOpen(false);
       }
     } : {}), {
@@ -2007,11 +2012,22 @@ function SCAutocomplete({
           item.component != null ? /* @__PURE__ */ import_react15.default.createElement(StopEvent, null, /* @__PURE__ */ import_react15.default.createElement(
             "span",
             {
-              onClick: (e) => {
+              onMouseDown: (event2) => {
+                componentClickActiveRef.current = true;
+                event2.preventDefault();
+                event2.stopPropagation();
+                event2.defaultMuiPrevented = true;
+              },
+              onClick: (event2) => {
                 var _a2;
-                e.preventDefault();
-                e.stopPropagation();
-                (_a2 = item.onComponentClick) == null ? void 0 : _a2.call(item, e, option);
+                event2.preventDefault();
+                event2.stopPropagation();
+                event2.defaultMuiPrevented = true;
+                (_a2 = item.onComponentClick) == null ? void 0 : _a2.call(item, event2, option);
+                setOpen(true);
+                setTimeout(() => {
+                  componentClickActiveRef.current = false;
+                }, 200);
               }
             },
             item.component
@@ -5009,6 +5025,11 @@ var import_KeyboardDoubleArrowDown2 = __toESM(require("@mui/icons-material/Keybo
 var import_KeyboardDoubleArrowUp2 = __toESM(require("@mui/icons-material/KeyboardDoubleArrowUp"), 1);
 var import_ArrowForward = __toESM(require("@mui/icons-material/ArrowForward"), 1);
 var import_LightModeOutlined = __toESM(require("@mui/icons-material/LightModeOutlined"), 1);
+var import_FilterList = __toESM(require("@mui/icons-material/FilterList"), 1);
+var import_CalendarMonthOutlined = __toESM(require("@mui/icons-material/CalendarMonthOutlined"), 1);
+var import_CheckCircleOutlineOutlined = __toESM(require("@mui/icons-material/CheckCircleOutlineOutlined"), 1);
+var import_EventBusyOutlined = __toESM(require("@mui/icons-material/EventBusyOutlined"), 1);
+var import_PendingOutlined = __toESM(require("@mui/icons-material/PendingOutlined"), 1);
 var SCActivityCalendar = ({
   //informativas
   //apariencia
@@ -5025,6 +5046,11 @@ var SCActivityCalendar = ({
   const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react50.useState)();
   const [stateVal, setstateVal] = import_react50.default.useState(/* @__PURE__ */ new Date());
   const [openCalendar, setOpenCalendar] = import_react50.default.useState(false);
+  const [anchorPopoverFiltro, setAnchorPopoverFiltro] = (0, import_react50.useState)(null);
+  const [datosEventos, setDatosEventos] = import_react50.default.useState(events);
+  console.log("eventos", events);
+  console.log("datosEventos", datosEventos);
+  const openPopoverFiltro = Boolean(anchorPopoverFiltro);
   const hoy = /* @__PURE__ */ new Date();
   const inicioSemana = (0, import_date_fns2.startOfWeek)(fecha, { weekStartsOn: 0 });
   const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns2.addDays)(inicioSemana, i));
@@ -5033,6 +5059,11 @@ var SCActivityCalendar = ({
       handleConvertFecha(fecha);
     }
   }, [fecha]);
+  import_react50.default.useEffect(() => {
+    if (events != null) {
+      setDatosEventos(events);
+    }
+  }, [events]);
   const handleConvertFecha = (fecha2) => {
     if (fecha2) {
       let day = (fecha2.getDate() < 10 ? "0" : "") + fecha2.getDate();
@@ -5052,6 +5083,22 @@ var SCActivityCalendar = ({
       // 0 = domingo, 1 = lunes
     })
   });
+  const handleClickPopoverFiltro = (event2) => {
+    setAnchorPopoverFiltro(event2.currentTarget);
+  };
+  const handleClosePopoverFiltro = () => {
+    setAnchorPopoverFiltro(null);
+  };
+  const filtrarActividad = (event2, filtro) => {
+    if (filtro === "Todo") {
+      setDatosEventos(events);
+    } else {
+      const resultado = events.filter(
+        (item) => item.state === filtro
+      );
+      setDatosEventos(resultado);
+    }
+  };
   return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_LocalizationProvider4.LocalizationProvider, { dateAdapter: import_AdapterDateFns2.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "100%", padding: "0px", background: "transparent" } }, /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, gap: 0.5, sx: { justifyContent: "space-between", padding: "12px 16px", background: "transparent" } }, diasSemana.map((dia) => /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns2.format)(dia, "EEEE", { locale: import_locale2.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
@@ -5075,7 +5122,7 @@ var SCActivityCalendar = ({
       slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
       sx: {
         "& .MuiDateCalendar-root": {
-          width: "97.5%",
+          width: "91.5%",
           maxWidth: "unset",
           margin: 0,
           padding: "0px 16px"
@@ -5091,7 +5138,36 @@ var SCActivityCalendar = ({
       },
       onChange: (newValue) => setFecha(newValue)
     }
-  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react50.default.createElement(import_KeyboardDoubleArrowUp2.default, { color: "action" }))))), /* @__PURE__ */ import_react50.default.createElement(import_material34.IconButton, { onClick: handleClickPopoverFiltro, sx: { position: "fixed", right: "calc(100% - 96%)", top: openCalendar == false ? "220px" : "380px" } }, /* @__PURE__ */ import_react50.default.createElement(import_FilterList.default, { color: "action" })), /* @__PURE__ */ import_react50.default.createElement(
+    import_material34.Popover,
+    {
+      open: openPopoverFiltro,
+      anchorEl: anchorPopoverFiltro,
+      onClose: handleClosePopoverFiltro,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      }
+    },
+    /* @__PURE__ */ import_react50.default.createElement(
+      import_material34.Menu,
+      {
+        id: "basic-menu",
+        anchorEl: anchorPopoverFiltro,
+        open: openPopoverFiltro,
+        onClose: handleClosePopoverFiltro,
+        slotProps: {
+          list: {
+            "aria-labelledby": "basic-button"
+          }
+        }
+      },
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Todo") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CalendarMonthOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver todo")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Finalizada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_CheckCircleOutlineOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver finalizadas")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "Aplazada") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_EventBusyOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver aplazadas")),
+      /* @__PURE__ */ import_react50.default.createElement(import_material34.MenuItem, { onClick: (event2) => filtrarActividad(event2, "En progreso") }, /* @__PURE__ */ import_react50.default.createElement(import_material34.ListItemIcon, null, /* @__PURE__ */ import_react50.default.createElement(import_PendingOutlined.default, { fontSize: "small" })), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "inherit" }, "Ver en progreso"))
+    )
+  ), /* @__PURE__ */ import_react50.default.createElement(import_material34.Box, { sx: { boxSizing: "border-box", padding: "0px 16px", width: "100%", height: openCalendar ? "calc(91% - 260px)" : "calc(91% - 100px)", background: "white", display: "flex", flexDirection: "column", overflowY: "auto", gap: "8px", scrollSnapType: "x mandatory", paddingBottom: "10px" } }, diasSemana.map((day, dayIndex) => /* @__PURE__ */ import_react50.default.createElement(
     import_material34.Box,
     {
       key: dayIndex
@@ -5108,9 +5184,12 @@ var SCActivityCalendar = ({
       flexDirection: "column"
     } }, (() => {
       const esDomingo = day.getDay() === 0;
-      const eventosDelDia = events.filter(
+      console.log("D\xEDa:", day);
+      console.log("Filtrando eventos para el d\xEDa:", datosEventos);
+      const eventosDelDia = datosEventos.filter(
         (event2) => new Date(event2.date).toDateString() === day.toDateString()
       );
+      console.log("Cantidad eventos para el d\xEDa:", eventosDelDia);
       if (eventosDelDia.length > 0) {
         return eventosDelDia.map((event2, idx) => /* @__PURE__ */ import_react50.default.createElement(
           SCListContent,
@@ -5121,7 +5200,7 @@ var SCActivityCalendar = ({
               subtitle: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, configRangeHour && new Date(event2.date.replace("00:00:00", event2.startTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getHours() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getHours() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getHours() && new Date(event2.date.replace("00:00:00", event2.startTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[0])).getMinutes() && new Date(event2.date.replace("00:00:00", event2.finalTime)).getMinutes() === new Date(event2.date.replace("00:00:00", configRangeHour.split("-")[1])).getMinutes() ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, "Todo el dia"), /* @__PURE__ */ import_react50.default.createElement(import_LightModeOutlined.default, { fontSize: "small" })) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.startTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })), /* @__PURE__ */ import_react50.default.createElement(import_ArrowForward.default, { fontSize: "small" }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, new Date(event2.date.replace("00:00:00", event2.finalTime)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true })))),
               iconLeftColor: event2.state === "Finalizada" ? "#C7E49D" : "action",
               iconLeft: event2.state === "Finalizada" ? "CheckCircle" : event2.state === "Aplazada" ? "EventBusyOutlined" : event2.state === "En progreso" ? "PendingOutlined" : "RadioButtonUnchecked",
-              description: /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "column", alignItems: "flex-start" }, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_Grid9.default, { display: "flex", flexDirection: "row", alignItems: "center", gap: 0.5, sx: { marginLeft: "7px" } }, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, { variant: "body2" }, event2.equipmentDescription)),
+              description: /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, event2.state === "Aplazada" || event2.state === "En progreso" || event2.state === "Auto asignada" ? /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(import_material34.Badge, { variant: "dot", badgeContent: "", sx: { display: "flex", alignItems: "center", "& .MuiBadge-badge": { top: "50%", transform: "translateY(-50%)" }, color: "action" } }), /* @__PURE__ */ import_react50.default.createElement(import_material34.Typography, null, event2.state == "Auto asignada" ? "Adicional" : event2.state)) : null),
               divider: eventosDelDia.length === idx + 1 ? false : true,
               colorDisabled: event2.state === "Finalizada" || event2.state === "Aplazada" || event2.state === "En progreso" ? true : false,
               fn: fn ? () => fn(event2) : void 0