contentoh-components-library 21.6.61 → 21.6.62

package/dist/components/organisms/ServicesWorkspace/AssigneePicker.js

@@ -1,459 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.canCurrentUserAssign = exports.READ_ONLY_ROLES = void 0;
-exports.default = AssigneePicker;
-exports.isFloatingLayerClick = exports.fullName = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _react = require("react");
-
-var _material = require("@mui/material");
-
-var _LockOutlined = _interopRequireDefault(require("@mui/icons-material/LockOutlined"));
-
-var _PersonAddAlt1Outlined = _interopRequireDefault(require("@mui/icons-material/PersonAddAlt1Outlined"));
-
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-
-var _data = require("../../../global-files/data");
-
-var _tooltipStyles = require("./tooltipStyles");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-/** Roles que ven la asignación pero no pueden cambiarla (igual que AsignationControl). */
-var READ_ONLY_ROLES = [2, 3, 7, 8];
-exports.READ_ONLY_ROLES = READ_ONLY_ROLES;
-
-var canCurrentUserAssign = function canCurrentUserAssign() {
-  try {
-    var user = JSON.parse(sessionStorage.getItem("user"));
-    return !READ_ONLY_ROLES.includes(user === null || user === void 0 ? void 0 : user.id_role);
-  } catch (error) {
-    return true;
-  }
-};
-/**
- * ¿El clic fue dentro de una capa flotante de MUI (selector, tooltip, diálogo)?
- * Esas capas se pintan fuera del panel lateral, así que los "clic afuera para
- * cerrar" deben ignorarlas.
- */
-
-
-exports.canCurrentUserAssign = canCurrentUserAssign;
-
-var isFloatingLayerClick = function isFloatingLayerClick(target) {
-  var _target$closest;
-
-  return Boolean(target === null || target === void 0 ? void 0 : (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, ".MuiPopover-root, .MuiModal-root, .MuiTooltip-popper"));
-};
-
-exports.isFloatingLayerClick = isFloatingLayerClick;
-
-var fullName = function fullName(user) {
-  return [user === null || user === void 0 ? void 0 : user.name, user === null || user === void 0 ? void 0 : user.last_name].filter(Boolean).join(" ");
-};
-
-exports.fullName = fullName;
-
-var initials = function initials(user) {
-  return [user === null || user === void 0 ? void 0 : user.name, user === null || user === void 0 ? void 0 : user.last_name].filter(Boolean).map(function (part) {
-    return part.trim()[0];
-  }).join("").toUpperCase().slice(0, 2);
-};
-/** Foto del usuario; si no carga, sus iniciales (MUI muestra `children` cuando falla la imagen). */
-
-
-function UserAvatar(_ref) {
-  var user = _ref.user,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 28 : _ref$size;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
-    src: user !== null && user !== void 0 && user.id_user ? (0, _data.getProfilePicture)(user.id_user, 40, 40) : undefined,
-    alt: fullName(user),
-    sx: {
-      width: size,
-      height: size,
-      fontSize: size * 0.4,
-      fontFamily: "Lato, sans-serif",
-      fontWeight: 700,
-      bgcolor: "#F0EEF2",
-      color: "#503D66"
-    },
-    children: initials(user)
-  });
-}
-
-var pillSx = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 0.75,
-  height: 34,
-  pl: 1.25,
-  pr: 0.5,
-  borderRadius: "17px",
-  backgroundColor: "#F0F0F0",
-  border: "1px solid transparent",
-  fontFamily: "Lato, sans-serif",
-  transition: "background-color 120ms, border-color 120ms"
-};
-var statusSx = {
-  fontFamily: "Lato, sans-serif",
-  fontSize: 12,
-  fontWeight: 600,
-  color: "#707070",
-  whiteSpace: "nowrap"
-};
-/**
- * Pastilla "estatus + responsable" y selector de personas.
- *
- * Copia de la de Creators (ServicesCell/AssigneePicker) para que la edición se
- * vea y se comporte igual que la tabla. Colores fijos porque la librería no
- * define las variables CSS de las aplicaciones.
- *
- * - Clic en la pastilla: abre un buscador con la lista de personas asignables.
- * - `lockedReason`: si viene, la pastilla muestra un candado, no abre nada
- *   y explica el motivo en el tooltip.
- * - `onAssign(user)`: se llama al elegir a alguien (el padre llama assignUser).
- */
-
-function AssigneePicker(_ref2) {
-  var statusLabel = _ref2.statusLabel,
-      statusTitle = _ref2.statusTitle,
-      _ref2$users = _ref2.users,
-      users = _ref2$users === void 0 ? [] : _ref2$users,
-      _ref2$currentId = _ref2.currentId,
-      currentId = _ref2$currentId === void 0 ? null : _ref2$currentId,
-      onAssign = _ref2.onAssign,
-      _ref2$lockedReason = _ref2.lockedReason,
-      lockedReason = _ref2$lockedReason === void 0 ? null : _ref2$lockedReason,
-      _ref2$roleLabel = _ref2.roleLabel,
-      roleLabel = _ref2$roleLabel === void 0 ? "Responsable" : _ref2$roleLabel,
-      _ref2$loading = _ref2.loading,
-      loading = _ref2$loading === void 0 ? false : _ref2$loading;
-  var pillRef = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(""),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      query = _useState4[0],
-      setQuery = _useState4[1]; // Asignación optimista: se ve de inmediato aunque la tabla tarde en refrescarse.
-
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      pickedId = _useState6[0],
-      setPickedId = _useState6[1];
-
-  var selectedId = pickedId !== null && pickedId !== void 0 ? pickedId : currentId;
-  var current = (0, _react.useMemo)(function () {
-    return users.find(function (user) {
-      return user.id_user === selectedId;
-    }) || null;
-  }, [users, selectedId]); // `statusLabel` puede ser texto fijo o una función del asignado actual (para
-  // mostrar el nombre de la persona apenas se elige, sin esperar al padre).
-
-  var label = typeof statusLabel === "function" ? statusLabel(current) : statusLabel;
-  var filtered = (0, _react.useMemo)(function () {
-    var text = query.trim().toLowerCase();
-    if (!text) return users;
-    return users.filter(function (user) {
-      return fullName(user).toLowerCase().includes(text);
-    });
-  }, [users, query]); // Al elegir con Enter, el foco vuelve a la pastilla y el mismo Enter la
-  // volvía a abrir. Se ignoran los clics que llegan justo después de cerrar.
-
-  var closedAtRef = (0, _react.useRef)(0);
-
-  var close = function close() {
-    closedAtRef.current = Date.now();
-    setOpen(false);
-    setQuery("");
-  };
-
-  var pick = function pick(user) {
-    if (user.id_user !== selectedId) {
-      setPickedId(user.id_user);
-      onAssign === null || onAssign === void 0 ? void 0 : onAssign(user);
-    }
-
-    close();
-  }; // Mientras llegan las asignaciones (se piden al desplegar la etapa).
-
-
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      component: "span",
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": "Cargando ".concat(roleLabel.toLowerCase()),
-      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pillSx), {}, {
-        cursor: "progress",
-        pr: 0.75
-      }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        component: "span",
-        title: statusTitle,
-        sx: statusSx,
-        children: label
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        component: "span",
-        sx: {
-          width: 26,
-          height: 26,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-          size: 16,
-          thickness: 5,
-          sx: {
-            color: "#8A6CAA"
-          }
-        })
-      })]
-    });
-  }
-
-  if (lockedReason) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tooltipStyles.whiteTooltipProps), {}, {
-      title: lockedReason,
-      arrow: true,
-      placement: "left",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        component: "span",
-        role: "img",
-        "aria-label": "No se puede asignar: ".concat(lockedReason),
-        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pillSx), {}, {
-          cursor: "not-allowed",
-          pr: 1,
-          opacity: 0.85
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "span",
-          title: statusTitle,
-          sx: statusSx,
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockOutlined.default, {
-          sx: {
-            fontSize: 18,
-            color: "#707070"
-          }
-        })]
-      })
-    }));
-  }
-
-  var tooltip = current ? "".concat(roleLabel, ": ").concat(fullName(current)) : "".concat(roleLabel, ": por asignar");
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tooltipStyles.whiteTooltipProps), {}, {
-      title: open ? "" : tooltip,
-      arrow: true,
-      placement: "left",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-        ref: pillRef,
-        onClick: function onClick(event) {
-          event.stopPropagation();
-          if (Date.now() - closedAtRef.current < 400) return;
-          setOpen(true);
-        },
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        "aria-label": "".concat(tooltip, ". Cambiar"),
-        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pillSx), {}, {
-          cursor: "pointer"
-        }, open && {
-          borderColor: "#E33AA9",
-          backgroundColor: "#F0EEF2"
-        }), {}, {
-          "&:hover": {
-            backgroundColor: "#F0EEF2"
-          },
-          "&.Mui-focusVisible": {
-            borderColor: "#E33AA9"
-          }
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "span",
-          title: statusTitle,
-          sx: statusSx,
-          children: label
-        }), current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(UserAvatar, {
-          user: current,
-          size: 26
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          component: "span",
-          sx: {
-            width: 26,
-            height: 26,
-            borderRadius: "50%",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            border: "1px dashed #8A6CAA",
-            color: "#8A6CAA",
-            backgroundColor: "#FFFFFF"
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PersonAddAlt1Outlined.default, {
-            sx: {
-              fontSize: 15
-            }
-          })
-        })]
-      })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Popover, {
-      open: open,
-      anchorEl: pillRef.current,
-      onClose: close,
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      },
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      PaperProps: {
-        sx: {
-          mt: 0.75,
-          width: 300,
-          maxWidth: "calc(100vw - 32px)",
-          borderRadius: "12px",
-          border: "1px solid #F0EEF2",
-          boxShadow: 6,
-          overflow: "hidden"
-        }
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          p: 1.5,
-          pb: 1,
-          display: "flex",
-          flexDirection: "column",
-          gap: 1
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-          sx: {
-            fontFamily: "Raleway, sans-serif",
-            fontSize: 13,
-            fontWeight: 600,
-            color: "#503D66"
-          },
-          children: ["Asignar ", roleLabel.toLowerCase()]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-          autoFocus: true,
-          size: "small",
-          fullWidth: true,
-          placeholder: "Buscar persona\u2026",
-          value: query,
-          onChange: function onChange(event) {
-            return setQuery(event.target.value);
-          },
-          onKeyDown: function onKeyDown(event) {
-            if (event.key === "Enter" && filtered[0]) {
-              event.preventDefault();
-              pick(filtered[0]);
-            }
-          },
-          InputProps: {
-            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
-                sx: {
-                  fontSize: 18,
-                  color: "#707070"
-                }
-              })
-            }),
-            sx: {
-              borderRadius: "8px",
-              fontFamily: "Lato, sans-serif",
-              fontSize: 13,
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#E33AA9"
-              }
-            }
-          }
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
-        dense: true,
-        disablePadding: true,
-        sx: {
-          maxHeight: 280,
-          overflowY: "auto",
-          px: 0.75,
-          pb: 0.75
-        },
-        children: [filtered.map(function (user) {
-          var isSelected = user.id_user === selectedId;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
-            selected: isSelected,
-            onClick: function onClick() {
-              return pick(user);
-            },
-            sx: {
-              gap: 1.25,
-              borderRadius: "8px",
-              py: 0.75,
-              "&:hover": {
-                backgroundColor: "#F0EEF2"
-              },
-              "&.Mui-selected, &.Mui-selected:hover": {
-                backgroundColor: "#F0EEF2"
-              }
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(UserAvatar, {
-              user: user,
-              size: 30
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                flex: 1,
-                minWidth: 0,
-                fontFamily: "Lato, sans-serif",
-                fontSize: 14,
-                fontWeight: isSelected ? 700 : 400,
-                color: isSelected ? "#503D66" : "#262626",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: fullName(user)
-            }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-              sx: {
-                fontSize: 18,
-                color: "#E33AA9"
-              }
-            })]
-          }, user.id_user);
-        }), filtered.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            py: 2,
-            textAlign: "center",
-            fontFamily: "Lato, sans-serif",
-            fontSize: 13,
-            color: "#707070"
-          },
-          children: users.length === 0 ? "No hay personas asignables" : "Sin coincidencias"
-        })]
-      })]
-    })]
-  });
-}

package/dist/components/organisms/ServicesWorkspace/ServicesWorkspace.stories.js

@@ -1,119 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TresServicios = exports.SoloConsulta = exports.DiecisieteServicios = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _index = _interopRequireDefault(require("./index"));
-
-var _demo = require("./demo");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _default = {
-  title: "Components/organisms/ServicesWorkspace",
-  component: _index.default,
-  argTypes: {
-    onAssign: {
-      action: "onAssign"
-    },
-    onOpenEditor: {
-      action: "onOpenEditor"
-    }
-  }
-};
-exports.default = _default;
-var retailers = [{
-  id_retailer: 4,
-  retailer: "Walmart"
-}, {
-  id_retailer: 9,
-  retailer: "Soriana"
-}, {
-  id_retailer: 12,
-  retailer: "Alsuper"
-}]; // Producto con la forma que deja `normalizeProduct` en la edición.
-
-var baseProduct = {
-  id_article: 11080102,
-  id_order: 10478,
-  name: "Prueba variantes 2 - hijo de 1",
-  datasheet_status: "AS",
-  description_status: "RA/AS",
-  images_status: "PA",
-  id_datasheet_especialist: 9101,
-  id_datasheet_facilitator: 9103,
-  id_description_especialist: 9102,
-  id_images_especialist: 0,
-  id_auditor: 9104,
-  statusByRetailer: [{
-    service: "datasheet",
-    retailer_id: 4,
-    status: "AS"
-  }, {
-    service: "datasheet",
-    retailer_id: 9,
-    status: "CA"
-  }, {
-    service: "description",
-    retailer_id: 4,
-    status: "RA/AS"
-  }, {
-    service: "description",
-    retailer_id: 12,
-    status: "AC"
-  }, {
-    service: "images",
-    retailer_id: 4,
-    status: "PA"
-  }]
-};
-var users = {
-  especialist: _demo.DEMO_USERS,
-  facilitator: _demo.DEMO_USERS,
-  auditor: _demo.DEMO_USERS
-};
-
-var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      maxWidth: 1100,
-      padding: 24,
-      background: "#FAFAFA"
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args))
-  });
-};
-/** Producto de hoy: solo Ficha técnica, Descripción e Imágenes. */
-
-
-var TresServicios = Template.bind({});
-exports.TresServicios = TresServicios;
-TresServicios.args = {
-  product: baseProduct,
-  retailers: retailers,
-  users: users,
-  canAssign: true
-};
-/** Con 17 servicios (3 de siempre + 14 de ejemplo). */
-
-var DiecisieteServicios = Template.bind({});
-exports.DiecisieteServicios = DiecisieteServicios;
-DiecisieteServicios.args = {
-  product: (0, _demo.withDemoServices)(baseProduct, 14),
-  retailers: retailers,
-  users: users,
-  canAssign: true
-};
-/** Rol que solo consulta (sin asignar). */
-
-var SoloConsulta = Template.bind({});
-exports.SoloConsulta = SoloConsulta;
-SoloConsulta.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, DiecisieteServicios.args), {}, {
-  canAssign: false
-});