contentoh-components-library 21.6.55 → 21.6.57

package/dist/components/pages/CreatorsProductEdition/sections/ImagesSection.js

@@ -0,0 +1,473 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagesSection = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _material = require("@mui/material");
+
+var _GalleryElement = require("../../../molecules/GalleryElement");
+
+var _GalleryTrayTabs = require("../../../molecules/GalleryTrayTabs");
+
+var _DigitalAssetsTray = require("../../../organisms/DigitalAssetsTray");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Pestaña Imágenes: bandejas (imágenes / activos digitales), cabecera de la
+  lista con "seleccionar todo", la galería con su zona para soltar archivos, y
+  el estado vacío.
+
+  Reemplaza a GalleryTrayTabs, GalleryHeader y el marcado de la galería de la
+  vista original. Se reutilizan tal cual las tarjetas (`GalleryElement`, con sus
+  selects de tipo y empaque) y la bandeja de activos (`DigitalAssetsTray`): son
+  componentes grandes con lógica propia y rehacerlos sería reinventarlos.
+
+  Dos cosas que las tarjetas exigen y que por eso se conservan:
+    - Una casilla global con id `check-all-images`. Cada tarjeta la busca por
+      id al marcarse; si no existe, marcar una imagen lanza un error.
+    - "Seleccionar todo" marca las casillas de las tarjetas directamente en el
+      DOM (`[id^='gallery-element-']`), igual que GalleryHeader.
+*/
+// Columnas de la lista, calcadas de GalleryHeader para que queden alineadas con
+// las filas de GalleryElement.
+var LIST_COLUMNS = [{
+  label: "Imagen",
+  pl: 0
+}, {
+  label: "Nombre",
+  pl: "1.75rem"
+}, {
+  label: "Tamaño",
+  pl: "2.75rem"
+}, {
+  label: "Formato",
+  pl: "4.5rem"
+}, {
+  label: "¿Tiene leyenda?",
+  ml: "-1rem"
+}, {
+  label: "Tipo de toma"
+}]; // La lista es una tabla de columnas fijas: por debajo de este ancho se desplaza
+// de lado dentro de su caja en vez de aplastar las columnas.
+
+var LIST_MIN_WIDTH = 760;
+
+var TrayTabs = function TrayTabs(_ref) {
+  var activeTray = _ref.activeTray,
+      setActiveTray = _ref.setActiveTray,
+      imagesCount = _ref.imagesCount,
+      assetsCount = _ref.assetsCount;
+  var trays = [{
+    id: _GalleryTrayTabs.TRAYS.IMAGES,
+    label: "Imágenes",
+    count: imagesCount
+  }, {
+    id: _GalleryTrayTabs.TRAYS.ASSETS,
+    label: "Activos digitales",
+    count: assetsCount
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+    value: activeTray,
+    onChange: function onChange(_, tray) {
+      return setActiveTray === null || setActiveTray === void 0 ? void 0 : setActiveTray(tray);
+    },
+    variant: "scrollable",
+    scrollButtons: false,
+    TabIndicatorProps: {
+      sx: {
+        bgcolor: _tokens.COLORS.color_purple,
+        height: 2
+      }
+    },
+    sx: {
+      minHeight: 36,
+      pt: 1
+    },
+    children: trays.map(function (tray) {
+      var active = tray.id === activeTray;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+        value: tray.id,
+        disableRipple: true,
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          gap: "6px",
+          children: [tray.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+            label: tray.count,
+            size: "small",
+            sx: {
+              height: 18,
+              minWidth: 20,
+              fontFamily: _tokens.FONTS.Lato,
+              fontSize: 11,
+              bgcolor: active ? _tokens.COLORS.color_purple : _tokens.COLORS.s2,
+              color: active ? _tokens.COLORS.white : _tokens.COLORS.s5,
+              "& .MuiChip-label": {
+                px: "6px"
+              }
+            }
+          })]
+        }),
+        sx: {
+          minHeight: 36,
+          px: "14px",
+          py: "6px",
+          textTransform: "none",
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontSize: 14,
+          letterSpacing: "-0.015em",
+          color: _tokens.COLORS.s4,
+          "&.Mui-selected": {
+            color: _tokens.COLORS.s5,
+            fontWeight: 600
+          }
+        }
+      }, tray.id);
+    })
+  });
+};
+/*
+  La casilla global se deriva de la selección real y no de
+  `state.all_image_checked`: el reducer nunca pone ese valor en true
+  (TOGGLE_CHECK_ALL_IMAGES solo llena `selected_images`). En la vista original no
+  se nota porque su casilla no está controlada por React y guarda su estado en
+  el DOM; controlada con ese valor, se quedaría siempre desmarcada.
+*/
+
+
+var ListHeader = function ListHeader(_ref2) {
+  var selectedCount = _ref2.selectedCount,
+      totalCount = _ref2.totalCount,
+      setCheckAll = _ref2.setCheckAll,
+      setSelectedImages = _ref2.setSelectedImages;
+  var allSelected = totalCount > 0 && selectedCount >= totalCount;
+  var someSelected = selectedCount > 0 && !allSelected;
+
+  var toggleAll = function toggleAll(e) {
+    var checked = e.target.checked;
+    document.querySelectorAll("[id^='gallery-element-']").forEach(function (chk) {
+      return chk.checked = checked;
+    });
+    setCheckAll(checked);
+    if (!checked) setSelectedImages([]);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      py: "10px"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        width: "5.25%",
+        minWidth: 36
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+        size: "small",
+        checked: allSelected,
+        indeterminate: someSelected,
+        onChange: toggleAll,
+        inputProps: {
+          id: "check-all-images",
+          "aria-label": "Seleccionar todas las imágenes"
+        },
+        sx: {
+          p: "4px",
+          color: _tokens.COLORS.s3,
+          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+            color: _tokens.COLORS.magenta_s2
+          }
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        width: "90%",
+        display: "grid",
+        gridTemplateColumns: "0.1fr 1fr 1fr 1fr 1fr 1fr"
+      },
+      children: LIST_COLUMNS.map(function (column) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            pl: column.pl,
+            ml: column.ml,
+            textAlign: "center",
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontWeight: 600,
+            fontSize: 14,
+            lineHeight: "21px",
+            letterSpacing: "-0.015em",
+            color: _tokens.COLORS.s5
+          },
+          children: column.label
+        }, column.label);
+      })
+    })]
+  });
+};
+
+var ImagesSection = function ImagesSection(_ref3) {
+  var _imagesValues$values, _imagesValues$inputs, _imagesValues$imageTy, _imagesValues$imagePa, _digitalAssets$assets, _digitalAssets$assets2, _selectedImages$lengt;
+
+  var imagesValues = _ref3.imagesValues,
+      selectedImages = _ref3.selectedImages,
+      imageLayout = _ref3.imageLayout,
+      enableDigitalAssets = _ref3.enableDigitalAssets,
+      currentTray = _ref3.currentTray,
+      setActiveTray = _ref3.setActiveTray,
+      digitalAssets = _ref3.digitalAssets,
+      unsavedAssets = _ref3.unsavedAssets,
+      selectedAssets = _ref3.selectedAssets,
+      setSelectedAssets = _ref3.setSelectedAssets,
+      setAllAssetsChecked = _ref3.setAllAssetsChecked,
+      canEdit = _ref3.canEdit,
+      setCheckAll = _ref3.setCheckAll,
+      setSelectedImages = _ref3.setSelectedImages,
+      onChangeCurrentImage = _ref3.onChangeCurrentImage,
+      onUpdateImage = _ref3.onUpdateImage,
+      onSelectImage = _ref3.onSelectImage,
+      getRootProps = _ref3.getRootProps,
+      getInputProps = _ref3.getInputProps,
+      isDragActive = _ref3.isDragActive,
+      openFilePicker = _ref3.openFilePicker;
+  var images = (_imagesValues$values = imagesValues === null || imagesValues === void 0 ? void 0 : imagesValues.values) !== null && _imagesValues$values !== void 0 ? _imagesValues$values : [];
+  var imageInputs = imagesValues === null || imagesValues === void 0 ? void 0 : (_imagesValues$inputs = imagesValues.inputs) === null || _imagesValues$inputs === void 0 ? void 0 : _imagesValues$inputs.map(function (e) {
+    return {
+      value: e === null || e === void 0 ? void 0 : e.id,
+      name: e === null || e === void 0 ? void 0 : e.name,
+      required: e === null || e === void 0 ? void 0 : e.required,
+      active: images.some(function (value) {
+        return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+      })
+    };
+  });
+  var imageType = imagesValues === null || imagesValues === void 0 ? void 0 : (_imagesValues$imageTy = imagesValues.imageType) === null || _imagesValues$imageTy === void 0 ? void 0 : _imagesValues$imageTy.map(function (e) {
+    return {
+      value: e === null || e === void 0 ? void 0 : e.id,
+      name: e === null || e === void 0 ? void 0 : e.name
+    };
+  });
+  var imagePackagingType = imagesValues === null || imagesValues === void 0 ? void 0 : (_imagesValues$imagePa = imagesValues.imagePackagingType) === null || _imagesValues$imagePa === void 0 ? void 0 : _imagesValues$imagePa.map(function (e) {
+    return {
+      value: e === null || e === void 0 ? void 0 : e.id,
+      name: e === null || e === void 0 ? void 0 : e.name
+    };
+  });
+  var cards = images.map(function (image, index) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {
+      id: "gallery-element-" + index,
+      index: index + "-" + image.name,
+      image: image,
+      number: index,
+      gridLayout: imageLayout,
+      imageType: imageType,
+      imagePackagingType: imagePackagingType,
+      imageInputs: imageInputs,
+      selectedImages: selectedImages,
+      setCheckAll: setCheckAll,
+      changeImage: onUpdateImage,
+      setSelectedImages: onSelectImage,
+      updateApprovedInputsImages: function updateApprovedInputsImages(item) {
+        return console.log("updateApprovedInputsImages", item);
+      },
+      onSelect: function onSelect() {
+        return onChangeCurrentImage(index);
+      }
+    }, index);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      minWidth: 0
+    },
+    children: [enableDigitalAssets && /*#__PURE__*/(0, _jsxRuntime.jsx)(TrayTabs, {
+      activeTray: currentTray,
+      setActiveTray: setActiveTray,
+      imagesCount: images.length,
+      assetsCount: (_digitalAssets$assets = digitalAssets === null || digitalAssets === void 0 ? void 0 : (_digitalAssets$assets2 = digitalAssets.assets) === null || _digitalAssets$assets2 === void 0 ? void 0 : _digitalAssets$assets2.length) !== null && _digitalAssets$assets !== void 0 ? _digitalAssets$assets : 0
+    }), currentTray === _GalleryTrayTabs.TRAYS.ASSETS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        position: "relative",
+        minWidth: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DigitalAssetsTray.DigitalAssetsTray, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, digitalAssets), {}, {
+        unsaved: unsavedAssets,
+        gridLayout: imageLayout,
+        readOnly: !canEdit,
+        selectedAssets: selectedAssets,
+        setSelectedAssets: setSelectedAssets,
+        setCheckAll: setAllAssetsChecked
+      }))
+    }), currentTray === _GalleryTrayTabs.TRAYS.IMAGES && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        overflowX: imageLayout ? "visible" : "auto",
+        WebkitOverflowScrolling: "touch"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          minWidth: imageLayout || images.length === 0 ? 0 : LIST_MIN_WIDTH
+        },
+        children: [!imageLayout && images.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListHeader, {
+          selectedCount: (_selectedImages$lengt = selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) !== null && _selectedImages$lengt !== void 0 ? _selectedImages$lengt : 0,
+          totalCount: images.length,
+          setCheckAll: setCheckAll,
+          setSelectedImages: setSelectedImages
+        }) :
+        /*#__PURE__*/
+
+        /* Sin cabecera (cuadrícula o sin imágenes) las tarjetas siguen
+           buscando `#check-all-images` al marcarse. En la vista original,
+           en cuadrícula no existe: marcar una imagen lanza un TypeError y
+           la selección no se guarda. Esta casilla oculta lo evita. */
+        (0, _jsxRuntime.jsx)("input", {
+          type: "checkbox",
+          id: "check-all-images",
+          hidden: true,
+          readOnly: true,
+          "aria-hidden": "true"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            position: "relative"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps()), {}, {
+            sx: (0, _objectSpread2.default)({
+              position: "relative",
+              minHeight: {
+                xs: 160,
+                md: 240
+              },
+              borderRadius: "8px",
+              border: "2px dashed transparent",
+              transition: "all 0.3s ease"
+            }, isDragActive && {
+              bgcolor: "rgba(".concat(_tokens.COLORS.rgb_color_pink, ", 0.05)"),
+              borderColor: _tokens.COLORS.color_pink
+            }),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                position: "absolute",
+                inset: 0,
+                zIndex: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                bgcolor: "rgba(".concat(_tokens.COLORS.rgb_color_pink, ", 0.1)"),
+                borderRadius: "8px",
+                pointerEvents: "none"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontFamily: _tokens.FONTS.AvenirNext,
+                  fontSize: {
+                    xs: 18,
+                    sm: 24
+                  },
+                  fontWeight: 600,
+                  color: _tokens.COLORS.color_pink,
+                  textAlign: "center",
+                  p: 2.5,
+                  bgcolor: _tokens.COLORS.white,
+                  borderRadius: "8px",
+                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+                },
+                children: "Suelta las im\xE1genes aqu\xED"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              component: "aside",
+              sx: imageLayout ? {
+                display: "grid",
+                gridTemplateColumns: {
+                  xs: "repeat(2, minmax(0, 1fr))",
+                  sm: "repeat(auto-fill, 179px)"
+                },
+                justifyContent: "center",
+                gap: {
+                  xs: 1,
+                  sm: "15px"
+                },
+                p: {
+                  xs: "12px 0",
+                  sm: "20px"
+                },
+                opacity: isDragActive ? 0.3 : 1,
+                pointerEvents: isDragActive ? "none" : "auto",
+                // En celular dos tarjetas por fila: las de 179px fijos
+                // se estiran a su columna.
+                "@media (max-width: 599.95px)": {
+                  // !important: el estilo propio de la tarjeta (dos
+                  // clases) le gana a este selector.
+                  "& > *": {
+                    width: "100% !important"
+                  },
+                  "& img, & video": {
+                    width: "100% !important",
+                    height: "auto !important",
+                    aspectRatio: "1 / 1"
+                  }
+                }
+              } : {
+                opacity: isDragActive ? 0.3 : 1
+              },
+              children: cards
+            }), images.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                position: {
+                  xs: "static",
+                  md: "absolute"
+                },
+                top: "50%",
+                left: "50%",
+                transform: {
+                  md: "translate(-50%, -50%)"
+                },
+                width: {
+                  xs: "100%",
+                  md: "80%"
+                },
+                maxWidth: 500,
+                mx: "auto",
+                p: {
+                  xs: "24px 8px",
+                  md: "40px"
+                },
+                textAlign: "center",
+                boxSizing: "border-box"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontSize: 18,
+                  color: "#666",
+                  mb: 2
+                },
+                children: "Este producto no tiene im\xE1genes"
+              }), canEdit && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: {
+                  fontSize: 14,
+                  color: "#999",
+                  mb: 2.5
+                },
+                children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+                  component: "button",
+                  type: "button",
+                  onClick: openFilePicker,
+                  children: "haz clic para abrir el explorador de archivos"
+                })]
+              })]
+            })]
+          }))
+        })]
+      })
+    })]
+  });
+};
+
+exports.ImagesSection = ImagesSection;