contentoh-components-library 21.6.28 → 21.6.29
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.
- package/dist/components/pages/ProviderProductEdition/index.js +44 -4
- package/dist/components/pages/ProviderProductEdition/styles.js +2 -2
- package/package.json +1 -1
- package/src/components/pages/ProviderProductEdition/index.js +46 -0
- package/src/components/pages/ProviderProductEdition/styles.js +13 -0
|
@@ -90,7 +90,7 @@ var _AiProductEdition = require("../../../contexts/AiProductEdition");
|
|
|
90
90
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
91
91
|
|
|
92
92
|
var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
93
|
-
var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$
|
|
93
|
+
var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$variants2, _state$product15, _state$product16, _state$product17, _state$active_retaile4, _location$state5, _location$state6, _state$active_retaile5, _state$active_retaile6, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile7, _state$product18, _state$product19, _state$product20, _state$product21, _family$variants3, _family$variants4, _family$variants5, _state$active_percent, _state$active_percent2, _state$active_retaile8, _state$active_retaile9, _state$active_retaile10, _state$product22, _state$descriptions_i, _state$product23, _state$product24, _state$datasheets_inp, _state$datasheets_inp2, _state$datasheets_inp3, _state$product25, _state$images_values12;
|
|
94
94
|
|
|
95
95
|
var tabsSections = _ref.tabsSections,
|
|
96
96
|
_ref$productSelected = _ref.productSelected,
|
|
@@ -975,6 +975,41 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
975
975
|
raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
|
|
976
976
|
*/
|
|
977
977
|
|
|
978
|
+
/*
|
|
979
|
+
Abre la edición múltiple con las variantes de la familia ya cargadas.
|
|
980
|
+
Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
|
|
981
|
+
listado al pulsar "editar varios"— y de cada producto solo usa id_article y
|
|
982
|
+
version. Se reproduce esa forma en vez de inventar otra vía de entrada.
|
|
983
|
+
Va SIN el producto padre a propósito, aunque estemos parados en su ficha: en
|
|
984
|
+
la edición múltiple no existe el diálogo de propagación, así que incluirlo
|
|
985
|
+
abriría un camino para cambiar el padre sin decidir si eso baja a los hijos
|
|
986
|
+
—justo la decisión que la ficha obliga a tomar—. Para editar el padre está su
|
|
987
|
+
propia pantalla.
|
|
988
|
+
*/
|
|
989
|
+
|
|
990
|
+
|
|
991
|
+
var openMultipleEdition = function openMultipleEdition() {
|
|
992
|
+
var _family$variants;
|
|
993
|
+
|
|
994
|
+
var variantes = ((_family$variants = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants !== void 0 ? _family$variants : []).map(function (variant) {
|
|
995
|
+
var _variant$version;
|
|
996
|
+
|
|
997
|
+
return {
|
|
998
|
+
id_article: variant.articleId,
|
|
999
|
+
version: (_variant$version = variant.version) !== null && _variant$version !== void 0 ? _variant$version : 1
|
|
1000
|
+
};
|
|
1001
|
+
});
|
|
1002
|
+
if (!variantes.length) return;
|
|
1003
|
+
|
|
1004
|
+
try {
|
|
1005
|
+
sessionStorage.setItem("multipleEditionList", JSON.stringify(variantes.sort(function (a, b) {
|
|
1006
|
+
return a.id_article - b.id_article;
|
|
1007
|
+
})));
|
|
1008
|
+
window.location.assign("/products/multipleEdition");
|
|
1009
|
+
} catch (error) {
|
|
1010
|
+
console.error("openMultipleEdition: ", error);
|
|
1011
|
+
}
|
|
1012
|
+
};
|
|
978
1013
|
|
|
979
1014
|
var openVariant = /*#__PURE__*/function () {
|
|
980
1015
|
var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(articleId) {
|
|
@@ -1700,7 +1735,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
1700
1735
|
jwt: token
|
|
1701
1736
|
}), pendingPropagation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PropagateChangesModal.PropagateChangesModal, {
|
|
1702
1737
|
changedAttributes: pendingPropagation.cambios,
|
|
1703
|
-
variants: ((_family$
|
|
1738
|
+
variants: ((_family$variants2 = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants2 !== void 0 ? _family$variants2 : []).filter(function (v) {
|
|
1704
1739
|
return !v.isCurrent;
|
|
1705
1740
|
}),
|
|
1706
1741
|
saving: state.saving,
|
|
@@ -1943,7 +1978,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
1943
1978
|
className: "upc",
|
|
1944
1979
|
children: family.parent.upc
|
|
1945
1980
|
})]
|
|
1946
|
-
}), family === null || family === void 0 ? void 0 : (_family$
|
|
1981
|
+
}), family === null || family === void 0 ? void 0 : (_family$variants3 = family.variants) === null || _family$variants3 === void 0 ? void 0 : _family$variants3.map(function (variant) {
|
|
1947
1982
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
1948
1983
|
type: "button",
|
|
1949
1984
|
className: "family-row".concat(variant.isCurrent ? " current" : ""),
|
|
@@ -1962,9 +1997,14 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
1962
1997
|
children: variant.upc
|
|
1963
1998
|
})]
|
|
1964
1999
|
}, variant.articleId);
|
|
1965
|
-
}), family && !family.error && !((_family$
|
|
2000
|
+
}), family && !family.error && !((_family$variants4 = family.variants) !== null && _family$variants4 !== void 0 && _family$variants4.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
1966
2001
|
className: "loading",
|
|
1967
2002
|
children: "Este producto no tiene variantes."
|
|
2003
|
+
}), (family === null || family === void 0 ? void 0 : (_family$variants5 = family.variants) === null || _family$variants5 === void 0 ? void 0 : _family$variants5.length) > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
2004
|
+
type: "button",
|
|
2005
|
+
className: "editar-juntas",
|
|
2006
|
+
onClick: openMultipleEdition,
|
|
2007
|
+
children: ["Editar las ", family.variants.length, " variantes juntas"]
|
|
1968
2008
|
})]
|
|
1969
2009
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
|
|
1970
2010
|
headerData: state.product,
|
|
@@ -18,9 +18,9 @@ var _templateObject;
|
|
|
18
18
|
// Rosa ContentOh, el mismo del modal de ligar productos.
|
|
19
19
|
var PINK = "#E13AA8";
|
|
20
20
|
|
|
21
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n height: 100%;\n flex: 1;\n overflow: auto;\n\n .data-container {\n display: flex;\n flex: 0%;\n height: calc(100% - ", "px);\n .image-data-panel {\n width: 340px;\n\n & + * {\n margin-left: 10px;\n }\n }\n\n .product-information {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .services-information-container {\n height: 100%;\n overflow: auto;\n }\n\n .image-services {\n aside {\n display: grid;\n grid-template-columns: repeat(auto-fill, 179px);\n column-gap: 15px;\n row-gap: 15px;\n padding: 20px;\n }\n }\n\n .commentary-box {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n padding-left: 0;\n\n .commentary {\n display: flex;\n align-items: flex-end;\n\n .input-container {\n width: 500px;\n\n .quill {\n height: 100px;\n }\n\n & + * {\n margin-left: 5px;\n }\n }\n\n .buttons-box {\n display: flex;\n width: 210px;\n flex-wrap: wrap;\n\n .general-transparent-button {\n & + * {\n margin-top: 5px;\n }\n }\n\n .general-transparent-button,\n .general-green-button,\n .general-button-disabled {\n width: fit-content;\n min-width: 201px;\n height: 40px;\n }\n }\n }\n }\n\n .feedback-box {\n display: flex;\n }\n\n .required-inputs-message {\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n padding: 10px;\n display: flex;\n align-items: center;\n\n p + * {\n margin-top: 10px;\n }\n\n button {\n min-width: fit-content;\n }\n }\n }\n }\n #modal-message-box {\n width: 400px;\n height: 100px;\n }\n .container {\n width: 100%;\n height: 90%;\n .dropzone {\n height: 100%;\n width: 100%;\n position: relative;\n transition: all 0.5s ease;\n\n &.drag-active {\n background-color: rgba(", ", 0.05);\n border: 2px dashed ", ";\n border-radius: 8px;\n\n aside {\n opacity: 0.3;\n pointer-events: none;\n }\n }\n\n .drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(", ", 0.1);\n border-radius: 8px;\n pointer-events: none;\n z-index: 10;\n\n p {\n font-family: ", ";\n font-size: 24px;\n font-weight: 600;\n color: ", ";\n text-align: center;\n padding: 20px;\n background-color: ", ";\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n }\n }\n .variants-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n\n .link-variants {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 6px 12px;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n cursor: pointer;\n }\n\n .variants-count {\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .variants-family {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n\n .loading {\n margin: 0;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n\n .family-row {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n .family-row:hover:not(:disabled) {\n background-color: ", ";\n }\n\n .family-row:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .family-row .role {\n min-width: 96px;\n font-size: 10px;\n color: ", ";\n }\n\n .family-row.current .role {\n color: ", ";\n }\n\n .family-row .name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .family-row .upc {\n font-size: 11px;\n color: ", ";\n }\n }\n"])), function (_ref) {
|
|
21
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n height: 100%;\n flex: 1;\n overflow: auto;\n\n .data-container {\n display: flex;\n flex: 0%;\n height: calc(100% - ", "px);\n .image-data-panel {\n width: 340px;\n\n & + * {\n margin-left: 10px;\n }\n }\n\n .product-information {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .services-information-container {\n height: 100%;\n overflow: auto;\n }\n\n .image-services {\n aside {\n display: grid;\n grid-template-columns: repeat(auto-fill, 179px);\n column-gap: 15px;\n row-gap: 15px;\n padding: 20px;\n }\n }\n\n .commentary-box {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n padding-left: 0;\n\n .commentary {\n display: flex;\n align-items: flex-end;\n\n .input-container {\n width: 500px;\n\n .quill {\n height: 100px;\n }\n\n & + * {\n margin-left: 5px;\n }\n }\n\n .buttons-box {\n display: flex;\n width: 210px;\n flex-wrap: wrap;\n\n .general-transparent-button {\n & + * {\n margin-top: 5px;\n }\n }\n\n .general-transparent-button,\n .general-green-button,\n .general-button-disabled {\n width: fit-content;\n min-width: 201px;\n height: 40px;\n }\n }\n }\n }\n\n .feedback-box {\n display: flex;\n }\n\n .required-inputs-message {\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n padding: 10px;\n display: flex;\n align-items: center;\n\n p + * {\n margin-top: 10px;\n }\n\n button {\n min-width: fit-content;\n }\n }\n }\n }\n #modal-message-box {\n width: 400px;\n height: 100px;\n }\n .container {\n width: 100%;\n height: 90%;\n .dropzone {\n height: 100%;\n width: 100%;\n position: relative;\n transition: all 0.5s ease;\n\n &.drag-active {\n background-color: rgba(", ", 0.05);\n border: 2px dashed ", ";\n border-radius: 8px;\n\n aside {\n opacity: 0.3;\n pointer-events: none;\n }\n }\n\n .drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(", ", 0.1);\n border-radius: 8px;\n pointer-events: none;\n z-index: 10;\n\n p {\n font-family: ", ";\n font-size: 24px;\n font-weight: 600;\n color: ", ";\n text-align: center;\n padding: 20px;\n background-color: ", ";\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n }\n }\n .variants-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n\n .link-variants {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 6px 12px;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n cursor: pointer;\n }\n\n .variants-count {\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .variants-family {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n\n .loading {\n margin: 0;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n\n .family-row {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n .family-row:hover:not(:disabled) {\n background-color: ", ";\n }\n\n .family-row:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .family-row .role {\n min-width: 96px;\n font-size: 10px;\n color: ", ";\n }\n\n .family-row.current .role {\n color: ", ";\n }\n\n .family-row .name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .family-row .upc {\n font-size: 11px;\n color: ", ";\n }\n\n .editar-juntas {\n align-self: flex-start;\n margin-top: 4px;\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 6px 12px;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n }\n"])), function (_ref) {
|
|
22
22
|
var headerTop = _ref.headerTop;
|
|
23
23
|
return headerTop;
|
|
24
|
-
}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
24
|
+
}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray, PINK, _variables.FontFamily.Raleway_600, PINK);
|
|
25
25
|
|
|
26
26
|
exports.Container = Container;
|
package/package.json
CHANGED
|
@@ -798,6 +798,40 @@ const ProviderProductEditionView = ({
|
|
|
798
798
|
Es un rodeo, y lo es porque el origen del dato está mal puesto. Arreglarlo de
|
|
799
799
|
raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
|
|
800
800
|
*/
|
|
801
|
+
/*
|
|
802
|
+
Abre la edición múltiple con las variantes de la familia ya cargadas.
|
|
803
|
+
|
|
804
|
+
Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
|
|
805
|
+
listado al pulsar "editar varios"— y de cada producto solo usa id_article y
|
|
806
|
+
version. Se reproduce esa forma en vez de inventar otra vía de entrada.
|
|
807
|
+
|
|
808
|
+
Va SIN el producto padre a propósito, aunque estemos parados en su ficha: en
|
|
809
|
+
la edición múltiple no existe el diálogo de propagación, así que incluirlo
|
|
810
|
+
abriría un camino para cambiar el padre sin decidir si eso baja a los hijos
|
|
811
|
+
—justo la decisión que la ficha obliga a tomar—. Para editar el padre está su
|
|
812
|
+
propia pantalla.
|
|
813
|
+
*/
|
|
814
|
+
const openMultipleEdition = () => {
|
|
815
|
+
const variantes = (family?.variants ?? []).map((variant) => ({
|
|
816
|
+
id_article: variant.articleId,
|
|
817
|
+
version: variant.version ?? 1,
|
|
818
|
+
}));
|
|
819
|
+
|
|
820
|
+
if (!variantes.length) return;
|
|
821
|
+
|
|
822
|
+
try {
|
|
823
|
+
sessionStorage.setItem(
|
|
824
|
+
"multipleEditionList",
|
|
825
|
+
JSON.stringify(
|
|
826
|
+
variantes.sort((a, b) => a.id_article - b.id_article)
|
|
827
|
+
)
|
|
828
|
+
);
|
|
829
|
+
window.location.assign("/products/multipleEdition");
|
|
830
|
+
} catch (error) {
|
|
831
|
+
console.error("openMultipleEdition: ", error);
|
|
832
|
+
}
|
|
833
|
+
};
|
|
834
|
+
|
|
801
835
|
const openVariant = async (articleId) => {
|
|
802
836
|
setLoadingVariant(articleId);
|
|
803
837
|
try {
|
|
@@ -1700,6 +1734,18 @@ const ProviderProductEditionView = ({
|
|
|
1700
1734
|
{family && !family.error && !family.variants?.length && (
|
|
1701
1735
|
<p className="loading">Este producto no tiene variantes.</p>
|
|
1702
1736
|
)}
|
|
1737
|
+
|
|
1738
|
+
{/* Editarlas juntas evita abrir seis fichas para llenar lo
|
|
1739
|
+
mismo seis veces, que es el caso real de una familia. */}
|
|
1740
|
+
{family?.variants?.length > 1 && (
|
|
1741
|
+
<button
|
|
1742
|
+
type="button"
|
|
1743
|
+
className="editar-juntas"
|
|
1744
|
+
onClick={openMultipleEdition}
|
|
1745
|
+
>
|
|
1746
|
+
Editar las {family.variants.length} variantes juntas
|
|
1747
|
+
</button>
|
|
1748
|
+
)}
|
|
1703
1749
|
</div>
|
|
1704
1750
|
)}
|
|
1705
1751
|
<FullProductNameHeader
|
|
@@ -253,5 +253,18 @@ export const Container = styled.div`
|
|
|
253
253
|
font-size: 11px;
|
|
254
254
|
color: ${GlobalColors.gray};
|
|
255
255
|
}
|
|
256
|
+
|
|
257
|
+
.editar-juntas {
|
|
258
|
+
align-self: flex-start;
|
|
259
|
+
margin-top: 4px;
|
|
260
|
+
border: 1px solid ${PINK};
|
|
261
|
+
border-radius: 6px;
|
|
262
|
+
background: none;
|
|
263
|
+
padding: 6px 12px;
|
|
264
|
+
cursor: pointer;
|
|
265
|
+
font-family: ${FontFamily.Raleway_600};
|
|
266
|
+
font-size: 11px;
|
|
267
|
+
color: ${PINK};
|
|
268
|
+
}
|
|
256
269
|
}
|
|
257
270
|
`;
|