contentoh-components-library 21.6.59 → 21.6.61

package/dist/components/organisms/ServicesNavigation/ServiceToolbar.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ServiceToolbar = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _material = require("@mui/material");
+
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
+
+var _SaveOutlined = _interopRequireDefault(require("@mui/icons-material/SaveOutlined"));
+
+var _ui = require("./ui");
+
+var _model = require("./model");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Barra del servicio abierto. Ocupa el lugar de la barra de pestañas: dice en
+  qué servicio estás, su estatus y su equipo, y lleva la acción de guardar.
+  No hay botón de «siguiente»: quien produce ya sabe qué le toca, y la lista
+  lateral lo marca con el punto rosa.
+*/
+var Team = function Team(_ref) {
+  var _ref$assignees = _ref.assignees,
+      assignees = _ref$assignees === void 0 ? {} : _ref$assignees,
+      userId = _ref.userId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1.5,
+    sx: {
+      flexWrap: "wrap",
+      rowGap: 0.5
+    },
+    children: Object.entries(_model.ROLE_LABELS).map(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          role = _ref3[0],
+          label = _ref3[1];
+
+      var user = assignees[role];
+      var isMe = Boolean(user) && user.id_user === userId;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.75,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PersonAvatar, {
+          user: user,
+          isMe: isMe,
+          size: 24,
+          title: user ? "".concat(label, ": ").concat((0, _model.fullName)(user)) : "".concat(label, ": sin asignar")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            lineHeight: 1.1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontFamily: _ui.FONT_STACK,
+              fontSize: 10,
+              color: _ui.COLORS.s4,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontFamily: _ui.FONT_STACK,
+              fontSize: 12,
+              fontWeight: isMe ? 700 : 400,
+              color: user ? _ui.COLORS.s5 : _ui.COLORS.s3
+            },
+            children: user ? isMe ? "Tú" : user.name : "Sin asignar"
+          })]
+        })]
+      }, role);
+    })
+  });
+};
+
+var ServiceToolbar = function ServiceToolbar(_ref4) {
+  var service = _ref4.service,
+      _ref4$isSummary = _ref4.isSummary,
+      isSummary = _ref4$isSummary === void 0 ? false : _ref4$isSummary,
+      summaryCounts = _ref4.summaryCounts,
+      onOpenRail = _ref4.onOpenRail,
+      userId = _ref4.userId;
+  var canSave = !isSummary && service && (0, _model.isMine)(service, userId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      columnGap: 2,
+      rowGap: 1.25,
+      pb: 1.5,
+      mb: 2,
+      borderBottom: "2px solid ".concat(_ui.COLORS.s2)
+    },
+    children: [onOpenRail && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+      onClick: onOpenRail,
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+        sx: {
+          fontSize: 18
+        }
+      }),
+      sx: _ui.outlineButtonSx,
+      children: "Servicios"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      spacing: 1.25,
+      sx: {
+        minWidth: 0,
+        flex: "1 1 260px"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          width: 36,
+          height: 36,
+          borderRadius: "10px",
+          bgcolor: _ui.COLORS.s2,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+          icon: isSummary ? "summary" : service === null || service === void 0 ? void 0 : service.icon,
+          sx: {
+            fontSize: 20,
+            color: _ui.COLORS.magenta_s2
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          minWidth: 0
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontFamily: _ui.FONT_STACK,
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            textTransform: "uppercase",
+            color: _ui.COLORS.s4
+          },
+          children: isSummary ? "Todos los servicios" : (0, _model.groupLabel)(service === null || service === void 0 ? void 0 : service.group)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          sx: {
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "h3",
+            sx: {
+              fontFamily: _ui.TITLE_STACK,
+              fontWeight: 500,
+              fontSize: 20,
+              lineHeight: "26px",
+              color: _ui.COLORS.s5,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: isSummary ? "Resumen" : service === null || service === void 0 ? void 0 : service.display_name
+          }), !isSummary && service && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, {
+            status: service.status,
+            oval: true
+          })]
+        })]
+      })]
+    }), isSummary ? summaryCounts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: {
+        fontFamily: _ui.FONT_STACK,
+        fontSize: 13,
+        color: _ui.COLORS.s4
+      },
+      children: [summaryCounts.total, " servicios \xB7 ", summaryCounts.pending, " te", " ", summaryCounts.pending === 1 ? "toca" : "tocan", " a ti"]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Team, {
+      assignees: service === null || service === void 0 ? void 0 : service.assignees,
+      userId: userId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      sx: {
+        ml: "auto"
+      },
+      children: canSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SaveOutlined.default, {
+          sx: {
+            fontSize: 18
+          }
+        }),
+        sx: _ui.primaryButtonSx,
+        children: "Guardar"
+      })
+    })]
+  });
+};
+
+exports.ServiceToolbar = ServiceToolbar;

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

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VeinteServiciosListaContraida = exports.VeinteServiciosEspecialistaImagenes = exports.VeinteServiciosCoordinadora = exports.VeinteServiciosCelular = exports.SoloTraduccion = exports.CuatroServiciosEspecialistaTextos = exports.CuatroServiciosCoordinadora = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _catalog = require("./catalog");
+
+var _model = require("./model");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Prototipo de la navegación por servicios en la edición de producto.
+  Datos de ejemplo: no le pega a ninguna API.
+
+  Cada historia es el mismo producto visto por una persona distinta. Lo que hay
+  que probar es la navegación: la lista lateral, «Míos / Todos», el Resumen y,
+  en las de imágenes, el selector de servicio dentro de la vista.
+*/
+var _default = {
+  title: "Prototipos/Navegación por servicios",
+  // Id sin acento, para que la liga de cada historia se pueda compartir.
+  id: "prototipos-navegacion-servicios",
+  component: _index.ServicesNavigation,
+  parameters: {
+    layout: "fullscreen"
+  }
+}; // Como en la app: la edición vive en una caja de altura fija.
+
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: "100vh",
+      display: "flex",
+      overflow: "hidden"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ServicesNavigation, (0, _objectSpread2.default)({}, args))
+  });
+};
+
+var ana = _catalog.DEMO_USERS.ana,
+    carlos = _catalog.DEMO_USERS.carlos,
+    diana = _catalog.DEMO_USERS.diana,
+    helena = _catalog.DEMO_USERS.helena;
+var FOUR_SERVICES = (0, _catalog.buildServices)([["datasheet", "AS", {
+  especialist: ana
+}], ["description", "RA/AS", {
+  especialist: ana
+}], ["images", "PA"], ["translation", "CA", {
+  especialist: diana
+}]]);
+/** El producto solo lleva Traducción: no hay lista, abre directo en ella. */
+
+var SoloTraduccion = Template.bind({});
+exports.SoloTraduccion = SoloTraduccion;
+SoloTraduccion.storyName = "Solo Traducción";
+SoloTraduccion.args = {
+  product: _catalog.DEMO_PRODUCT,
+  services: (0, _catalog.buildServices)([["translation", "CA", {
+    especialist: diana
+  }]]),
+  currentUser: diana,
+  currentUserRole: "Especialista de traducción"
+};
+/** Caso de hoy (3 o 4 servicios), visto por la coordinadora: ve todos. */
+
+var CuatroServiciosCoordinadora = Template.bind({});
+exports.CuatroServiciosCoordinadora = CuatroServiciosCoordinadora;
+CuatroServiciosCoordinadora.storyName = "4 servicios · coordinadora";
+CuatroServiciosCoordinadora.args = {
+  product: _catalog.DEMO_PRODUCT,
+  services: FOUR_SERVICES,
+  currentUser: helena,
+  currentUserRole: "Coordinadora"
+};
+/** Mismo producto, visto por la especialista de textos: «Míos» por omisión. */
+
+var CuatroServiciosEspecialistaTextos = Template.bind({});
+exports.CuatroServiciosEspecialistaTextos = CuatroServiciosEspecialistaTextos;
+CuatroServiciosEspecialistaTextos.storyName = "4 servicios · especialista de textos";
+CuatroServiciosEspecialistaTextos.args = {
+  product: _catalog.DEMO_PRODUCT,
+  services: FOUR_SERVICES,
+  currentUser: ana,
+  currentUserRole: "Especialista de textos"
+};
+/** 20 servicios; el especialista de imágenes solo ve sus 3 hasta que pide «Todos». */
+
+var VeinteServiciosEspecialistaImagenes = Template.bind({});
+exports.VeinteServiciosEspecialistaImagenes = VeinteServiciosEspecialistaImagenes;
+VeinteServiciosEspecialistaImagenes.storyName = "20 servicios · especialista de imágenes";
+VeinteServiciosEspecialistaImagenes.args = {
+  product: _catalog.DEMO_PRODUCT,
+  services: _catalog.TWENTY_SERVICES,
+  currentUser: carlos,
+  currentUserRole: "Especialista de imágenes"
+};
+/** 20 servicios vistos por la coordinadora: entra al Resumen. */
+
+var VeinteServiciosCoordinadora = Template.bind({});
+exports.VeinteServiciosCoordinadora = VeinteServiciosCoordinadora;
+VeinteServiciosCoordinadora.storyName = "20 servicios · coordinadora";
+VeinteServiciosCoordinadora.args = {
+  product: _catalog.DEMO_PRODUCT,
+  services: _catalog.TWENTY_SERVICES,
+  currentUser: helena,
+  currentUserRole: "Coordinadora",
+  initialService: _model.SUMMARY
+};
+/** La lista contraída a íconos, para dejarle todo el ancho al editor. */
+
+var VeinteServiciosListaContraida = Template.bind({});
+exports.VeinteServiciosListaContraida = VeinteServiciosListaContraida;
+VeinteServiciosListaContraida.storyName = "20 servicios · lista contraída";
+VeinteServiciosListaContraida.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, VeinteServiciosEspecialistaImagenes.args), {}, {
+  initialCollapsed: true
+});
+/** En celular la lista se abre como panel con el botón «Servicios». */
+
+var VeinteServiciosCelular = Template.bind({});
+exports.VeinteServiciosCelular = VeinteServiciosCelular;
+VeinteServiciosCelular.storyName = "20 servicios · celular";
+VeinteServiciosCelular.args = VeinteServiciosEspecialistaImagenes.args;
+VeinteServiciosCelular.parameters = {
+  viewport: {
+    defaultViewport: "mobile2"
+  }
+};