contentoh-components-library 21.6.26 → 21.6.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/organisms/LinkVariantsModal/index.js +59 -17
  2. package/dist/components/organisms/LinkVariantsModal/styles.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/organisms/LinkVariantsModal/index.js +47 -1
  5. package/src/components/organisms/LinkVariantsModal/styles.js +26 -0
package/dist/components/organisms/LinkVariantsModal/index.js CHANGED
@@ -11,7 +11,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
13
13
 
14
- var _objectSpread6 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
14
+ var _objectSpread7 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
15
15
 
16
16
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
17
17
 
@@ -508,9 +508,19 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
508
508
  }();
509
509
 
510
510
  var toggleChoice = function toggleChoice(dimension, id) {
511
+ // Marcar un elemento ES elegir cuáles, así que el radio se pone solo. Antes
512
+ // se podían marcar atributos con los dos radios en blanco: la pantalla decía
513
+ // una cosa y el estado era otra.
514
+ //
515
+ // Se hace así y no dejando "elegir cuáles" marcado de entrada porque eso
516
+ // daría las cuatro dimensiones por decididas desde el principio y habilitaría
517
+ // Ligar sin que nadie hubiera revisado nada.
518
+ setModes(function (current) {
519
+ return current[dimension] === null ? (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, "some")) : current;
520
+ });
511
521
  setChosen(function (current) {
512
522
  var lista = current[dimension];
513
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
523
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
514
524
  return item !== id;
515
525
  }) : [].concat((0, _toConsumableArray2.default)(lista), [id])));
516
526
  });
@@ -518,10 +528,10 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
518
528
 
519
529
  var chooseMode = function chooseMode(dimension, modo, ids) {
520
530
  setModes(function (current) {
521
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo));
531
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo));
522
532
  });
523
533
  setChosen(function (current) {
524
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo === "all" ? ids : []));
534
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo === "all" ? ids : []));
525
535
  });
526
536
  };
527
537
 
@@ -550,7 +560,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
550
560
  lista = (_readPayload$data = (_readPayload = (0, _api.readPayload)(res)) === null || _readPayload === void 0 ? void 0 : _readPayload.data) !== null && _readPayload$data !== void 0 ? _readPayload$data : [];
551
561
  setFilters(function (current) {
552
562
  if (!retailer) {
553
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
563
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
554
564
  retailers: lista.map(function (item) {
555
565
  return {
556
566
  value: item.id,
@@ -561,7 +571,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
561
571
  }
562
572
 
563
573
  if (!department) {
564
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
574
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
565
575
  departments: lista.map(function (item) {
566
576
  return {
567
577
  value: item.category,
@@ -576,7 +586,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
576
586
  // el alta de productos, incluido el separador legible.
577
587
 
578
588
 
579
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
589
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
580
590
  categories: lista.map(function (item) {
581
591
  var _item$subcategory;
582
592
 
@@ -619,6 +629,25 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
619
629
  loadFilters(null, null);
620
630
  }
621
631
  }, [step, filters.retailers.length, loadFilters]);
632
+ /*
633
+ Quita una cadena agregada a mano. Solo esas: las del padre se desmarcan con
634
+ su casilla, pero siguen existiendo y volverán a aparecer.
635
+ */
636
+
637
+ var removeExtraRetailer = function removeExtraRetailer(clave) {
638
+ setExtraRetailers(function (current) {
639
+ return current.filter(function (item) {
640
+ return item.clave !== clave;
641
+ });
642
+ });
643
+ setChosen(function (current) {
644
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
645
+ categoryRetailers: current.categoryRetailers.filter(function (item) {
646
+ return item !== clave;
647
+ })
648
+ });
649
+ });
650
+ };
622
651
 
623
652
  var addRetailer = function addRetailer() {
624
653
  var retailerId = Number(newRetailer);
@@ -649,7 +678,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
649
678
  }]);
650
679
  });
651
680
  setChosen(function (current) {
652
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
681
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
653
682
  categoryRetailers: [].concat((0, _toConsumableArray2.default)(current.categoryRetailers), [clave])
654
683
  });
655
684
  });
@@ -727,7 +756,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
727
756
  var _perChild$id, _guardado$extraRetail;
728
757
 
729
758
  setPerChild(function (current) {
730
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
759
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
731
760
  modes: modes,
732
761
  chosen: chosen,
733
762
  extraRetailers: extraRetailers
@@ -771,7 +800,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
771
800
  articleId: articleId,
772
801
  parentArticleId: selected[0],
773
802
  inherit: inherit
774
- } : (0, _objectSpread6.default)({
803
+ } : (0, _objectSpread7.default)({
775
804
  mode: mode,
776
805
  parentArticleId: articleId,
777
806
  childrenArticleIds: selected,
@@ -788,7 +817,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
788
817
  // El modo importa para quien escucha: en `children` este producto GANA
789
818
  // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
790
819
  // misma ficha, así que quien refresque el estado necesita distinguirlos.
791
- onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread6.default)((0, _objectSpread6.default)({}, data), {}, {
820
+ onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread7.default)((0, _objectSpread7.default)({}, data), {}, {
792
821
  mode: mode,
793
822
  parentArticleId: mode === "parent" ? selected[0] : articleId
794
823
  }));
@@ -1041,17 +1070,17 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
1041
1070
  })]
1042
1071
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
1043
1072
  children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
1044
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
1073
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
1045
1074
  clave: "".concat(item.retailerId, "-").concat(item.categoryId),
1046
1075
  delPadre: true
1047
1076
  });
1048
1077
  })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
1049
- return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
1078
+ return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
1050
1079
  delPadre: false
1051
1080
  });
1052
1081
  }))).map(function (item) {
1053
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
1054
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
1082
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
1083
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
1055
1084
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
1056
1085
  type: "checkbox",
1057
1086
  disabled: modes.categoryRetailers === "all",
@@ -1069,7 +1098,16 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
1069
1098
  children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
1070
1099
  })]
1071
1100
  })]
1072
- })
1101
+ }), !item.delPadre && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
1102
+ type: "button",
1103
+ className: "quitar",
1104
+ title: "Quitar esta cadena",
1105
+ "aria-label": "Quitar ".concat(item.retailerName),
1106
+ onClick: function onClick() {
1107
+ return removeExtraRetailer(item.clave);
1108
+ },
1109
+ children: "\xD7"
1110
+ })]
1073
1111
  }, item.clave);
1074
1112
  })
1075
1113
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
@@ -1323,7 +1361,11 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
1323
1361
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
1324
1362
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
1325
1363
  className: "summary",
1326
- children: step === "search" ? selectionLabel : todoDecidido ? "Todo revisado. Puedes ligar." : !applyToAll && mode === "children" ? "Faltan ".concat(selected.filter(function (id) {
1364
+ children: step === "search" ? selectionLabel : todoDecidido ? "Todo revisado. Puedes ligar." :
1365
+ /* Contar productos solo tiene sentido cuando hay varios y cada
1366
+ uno lleva su propia selección. Con uno, lo útil es decir qué
1367
+ falta, no repetir que falta "1 producto". */
1368
+ !applyToAll && mode === "children" && selected.length > 1 ? "Faltan ".concat(selected.filter(function (id) {
1327
1369
  return !decididoPara(id);
1328
1370
  }).length, " producto(s) por revisar.") : "Falta decidir: ".concat(faltantes.join(", "), ".")
1329
1371
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
package/dist/components/organisms/LinkVariantsModal/styles.js CHANGED
@@ -51,7 +51,7 @@ var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObj
51
51
 
52
52
  exports.SearchRow = SearchRow;
53
53
 
54
- var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 13px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .count {\n margin-left: auto;\n font-size: 12px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, PINK);
54
+ var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 13px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n li {\n display: flex;\n align-items: center;\n }\n\n li > label {\n flex: 1;\n min-width: 0;\n }\n\n .quitar {\n flex-shrink: 0;\n margin-right: 10px;\n border: none;\n background: none;\n padding: 2px 6px;\n cursor: pointer;\n font-size: 16px;\n line-height: 1;\n color: ", ";\n }\n\n .quitar:hover {\n color: ", ";\n }\n\n .count {\n margin-left: auto;\n font-size: 12px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray, PINK, PINK);
55
55
 
56
56
  exports.List = List;
57
57
  var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size: 11px;\n font-style: italic;\n color: ", ";\n }\n\n .value {\n margin-left: auto;\n max-width: 45%;\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.6.26",
3
+ "version": "21.6.27",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/organisms/LinkVariantsModal/index.js CHANGED
@@ -304,6 +304,19 @@ export const LinkVariantsModal = ({
304
304
  };
305
305
 
306
306
  const toggleChoice = (dimension, id) => {
307
+ // Marcar un elemento ES elegir cuáles, así que el radio se pone solo. Antes
308
+ // se podían marcar atributos con los dos radios en blanco: la pantalla decía
309
+ // una cosa y el estado era otra.
310
+ //
311
+ // Se hace así y no dejando "elegir cuáles" marcado de entrada porque eso
312
+ // daría las cuatro dimensiones por decididas desde el principio y habilitaría
313
+ // Ligar sin que nadie hubiera revisado nada.
314
+ setModes((current) =>
315
+ current[dimension] === null
316
+ ? { ...current, [dimension]: "some" }
317
+ : current
318
+ );
319
+
307
320
  setChosen((current) => {
308
321
  const lista = current[dimension];
309
322
  return {
@@ -390,6 +403,22 @@ export const LinkVariantsModal = ({
390
403
  }
391
404
  }, [step, filters.retailers.length, loadFilters]);
392
405
 
406
+ /*
407
+ Quita una cadena agregada a mano. Solo esas: las del padre se desmarcan con
408
+ su casilla, pero siguen existiendo y volverán a aparecer.
409
+ */
410
+ const removeExtraRetailer = (clave) => {
411
+ setExtraRetailers((current) =>
412
+ current.filter((item) => item.clave !== clave)
413
+ );
414
+ setChosen((current) => ({
415
+ ...current,
416
+ categoryRetailers: current.categoryRetailers.filter(
417
+ (item) => item !== clave
418
+ ),
419
+ }));
420
+ };
421
+
393
422
  const addRetailer = () => {
394
423
  const retailerId = Number(newRetailer);
395
424
  const categoryId = Number(newCategory);
@@ -881,6 +910,20 @@ export const LinkVariantsModal = ({
881
910
  </span>
882
911
  </span>
883
912
  </label>
913
+
914
+ {/* Solo las agregadas a mano se pueden quitar. Las del
915
+ padre se desmarcan con su casilla, pero siguen ahí. */}
916
+ {!item.delPadre && (
917
+ <button
918
+ type="button"
919
+ className="quitar"
920
+ title="Quitar esta cadena"
921
+ aria-label={`Quitar ${item.retailerName}`}
922
+ onClick={() => removeExtraRetailer(item.clave)}
923
+ >
924
+ ×
925
+ </button>
926
+ )}
884
927
  </li>
885
928
  ))}
886
929
  </List>
@@ -1204,7 +1247,10 @@ export const LinkVariantsModal = ({
1204
1247
  ? selectionLabel
1205
1248
  : todoDecidido
1206
1249
  ? "Todo revisado. Puedes ligar."
1207
- : !applyToAll && mode === "children"
1250
+ : /* Contar productos solo tiene sentido cuando hay varios y cada
1251
+ uno lleva su propia selección. Con uno, lo útil es decir qué
1252
+ falta, no repetir que falta "1 producto". */
1253
+ !applyToAll && mode === "children" && selected.length > 1
1208
1254
  ? `Faltan ${
1209
1255
  selected.filter((id) => !decididoPara(id)).length
1210
1256
  } producto(s) por revisar.`
package/src/components/organisms/LinkVariantsModal/styles.js CHANGED
@@ -192,6 +192,32 @@ export const List = styled.ul`
192
192
  flex-shrink: 0;
193
193
  }
194
194
 
195
+ li {
196
+ display: flex;
197
+ align-items: center;
198
+ }
199
+
200
+ li > label {
201
+ flex: 1;
202
+ min-width: 0;
203
+ }
204
+
205
+ .quitar {
206
+ flex-shrink: 0;
207
+ margin-right: 10px;
208
+ border: none;
209
+ background: none;
210
+ padding: 2px 6px;
211
+ cursor: pointer;
212
+ font-size: 16px;
213
+ line-height: 1;
214
+ color: ${GlobalColors.gray};
215
+ }
216
+
217
+ .quitar:hover {
218
+ color: ${PINK};
219
+ }
220
+
195
221
  .count {
196
222
  margin-left: auto;
197
223
  font-size: 12px;