contentoh-components-library 21.6.59 → 21.6.61

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

@@ -0,0 +1,459 @@
+"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

@@ -0,0 +1,119 @@
+"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
+});