contentoh-components-library 21.3.97 → 21.3.99

package/dist/components/atoms/RetailerCatalog/index.js

@@ -42,11 +42,10 @@ var RetailerCatalog = function RetailerCatalog(_ref) {
 
   (0, _react.useEffect)(function () {
     setRetLimit(limit);
-    console.log("limit");
   }, [retailers]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    id: id,
-    onClick: function onClick() {
+    onClick: function onClick(e) {
+      e.stopPropagation();
       setShowRetailers(true);
     },
     children: [retailers.map(function (retailer, i) {
@@ -62,7 +61,8 @@ var RetailerCatalog = function RetailerCatalog(_ref) {
       })
     }), showRetailers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailersList.RetailersList, {
       retailers: retailers,
-      article: article
+      article: article,
+      id: id
     })]
   });
 };

package/dist/components/atoms/RetailersList/index.js

@@ -21,7 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var RetailersList = function RetailersList(_ref) {
   var retailers = _ref.retailers,
-      article = _ref.article;
+      article = _ref.article,
+      id = _ref.id;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -32,6 +33,7 @@ var RetailersList = function RetailersList(_ref) {
     if (article) setServices(article.statusByRetailer);
   }, [article]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    id: id,
     children: retailers.map(function (retailer, i) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailerOption.RetailerOption, {
         retailer: retailer,

package/dist/components/atoms/UserCatalog/UserCatalog.stories.js

@@ -26,6 +26,7 @@ var Template = function Template(args) {
 var UserCatalogDefault = Template.bind({});
 exports.UserCatalogDefault = UserCatalogDefault;
 UserCatalogDefault.args = {
+  product: "product",
   datasheet: 54,
   description: 54,
   images: 55,

package/dist/components/atoms/UserCatalog/index.js

@@ -17,10 +17,10 @@ var _data = require("../../../global-files/data");
 
 var _UserOption = require("../UserOption");
 
-var _react = require("react");
-
 var _customHooks = require("../../../global-files/customHooks");
 
+var _react = require("react");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var UserCatalog = function UserCatalog(_ref) {
@@ -35,7 +35,9 @@ var UserCatalog = function UserCatalog(_ref) {
       _ref$imagesSpecialist = _ref.imagesSpecialists,
       imagesSpecialists = _ref$imagesSpecialist === void 0 ? [] : _ref$imagesSpecialist,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "list-modal" : _ref$id;
+      id = _ref$id === void 0 ? "list-modal" : _ref$id,
+      onAssign = _ref.onAssign,
+      product = _ref.product;
 
   var _useCloseModal = (0, _customHooks.useCloseModal)(id),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
@@ -43,10 +45,10 @@ var UserCatalog = function UserCatalog(_ref) {
       setShowList = _useCloseModal2[1];
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: id,
     onClick: function onClick() {
-      return setShowList(true);
+      setShowList(true);
     },
-    id: id,
     children: [datasheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
       image: (0, _data.getProfilePicture)(datasheet, 26, 26),
       altText: "datasheet specialist",
@@ -66,21 +68,33 @@ var UserCatalog = function UserCatalog(_ref) {
     }), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "users-assigned-list",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_UserOption.UserOption, {
+        onAssign: onAssign,
+        product: product,
         userId: datasheet,
         usersArray: textSpecialists,
-        id: id + "-" + datasheet
+        id: id + "-" + datasheet,
+        index: "datasheet"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserOption.UserOption, {
+        onAssign: onAssign,
+        product: product,
         userId: description,
         usersArray: textSpecialists,
-        id: id + "-" + description
+        id: id + "-" + description,
+        index: "description"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserOption.UserOption, {
+        onAssign: onAssign,
+        product: product,
         userId: images,
         usersArray: imagesSpecialists,
-        id: id + "-" + images
+        id: id + "-" + images,
+        index: "image"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_UserOption.UserOption, {
+        onAssign: onAssign,
+        product: product,
         userId: auditor,
         usersArray: auditors,
-        id: id + "-" + auditor
+        id: id + "-" + auditor,
+        index: "auditor"
       })]
     })]
   });

package/dist/components/atoms/UserOption/index.js

@@ -29,7 +29,9 @@ var UserOption = function UserOption(_ref) {
   var userId = _ref.userId,
       index = _ref.index,
       usersArray = _ref.usersArray,
-      id = _ref.id;
+      id = _ref.id,
+      onAssign = _ref.onAssign,
+      product = _ref.product;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -41,6 +43,21 @@ var UserOption = function UserOption(_ref) {
       showSelector = _useCloseModal2[0],
       setShowSelector = _useCloseModal2[1];
 
+  var _useState3 = (0, _react.useState)(""),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      assignationTarget = _useState4[0],
+      setAssignationTarget = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      concept = _useState6[0],
+      setConcept = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      target = _useState8[0],
+      setTarget = _useState8[1];
+
   var icons = _utils.servicesCodeIcon;
   (0, _react.useEffect)(function () {
     if (usersArray) {
@@ -51,6 +68,31 @@ var UserOption = function UserOption(_ref) {
       });
     }
   }, [userId, usersArray]);
+  (0, _react.useEffect)(function () {
+    switch (index) {
+      case "datasheet":
+      case "description":
+        setAssignationTarget("id_".concat(index, "_specialist"));
+        setConcept(index);
+        setTarget("specialist");
+        break;
+
+      case "image":
+        setAssignationTarget("id_".concat(index, "s_specialist"));
+        setConcept(index + "s");
+        setTarget("specialist");
+        break;
+
+      case "auditor":
+        setAssignationTarget("id_".concat(index));
+        setConcept(index);
+        setTarget(index);
+        break;
+
+      default:
+        break;
+    }
+  }, [index]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick() {
       return setShowSelector(true);
@@ -72,7 +114,12 @@ var UserOption = function UserOption(_ref) {
       searchLabel: "Buscar Usuario",
       index: index,
       usersArray: usersArray,
-      position: "absolute"
+      position: "absolute",
+      onAssign: onAssign,
+      product: product,
+      assignationTarget: assignationTarget,
+      target: target,
+      concept: concept
     })]
   });
 };

package/dist/components/atoms/UserOption/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #f0f0f0;\n  border-radius: 5px;\n  color: #262626;\n  font-size: 12px;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  padding: 5px 10px;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  background-color: white;\n  width: 217px;\n\n  .image-and-name {\n    display: flex;\n    align-items: center;\n\n    div + p {\n      margin-left: 10px;\n    }\n  }\n\n  .icon-container {\n    position: relative;\n    span {\n      color: #808080;\n      cursor: pointer;\n\n      & + span {\n        display: none;\n        position: absolute;\n        right: 120%;\n        top: 50%;\n        transform: translateY(-50%);\n        white-space: nowrap;\n      }\n\n      &:hover {\n        & + span {\n          display: block;\n        }\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 5px;\n  }\n"])), _variables.FontFamily.Lato);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid #f0f0f0;\n  border-radius: 5px;\n  color: #262626;\n  font-size: 12px;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  padding: 5px 10px;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  background-color: white;\n\n  .image-and-name {\n    display: flex;\n    align-items: center;\n\n    div + p {\n      margin-left: 10px;\n      white-space: nowrap;\n    }\n\n    & + * {\n      margin-left: 10px;\n    }\n  }\n\n  .icon-container {\n    position: relative;\n    span {\n      color: #808080;\n      cursor: pointer;\n\n      & + span {\n        display: none;\n        position: absolute;\n        right: 120%;\n        top: 50%;\n        transform: translateY(-50%);\n        white-space: nowrap;\n        border: 1px solid #f0f0f0;\n        padding: 5px;\n        background-color: white;\n      }\n\n      &:hover {\n        & + span {\n          display: block;\n        }\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 5px;\n  }\n"])), _variables.FontFamily.Lato);
 
 exports.Container = Container;

package/dist/components/atoms/UserSelector/index.js

@@ -21,14 +21,20 @@ var _data = require("../../../global-files/data");
 
 var _react = require("react");
 
+var _customHooks = require("../../../global-files/customHooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var UserSelector = function UserSelector(_ref) {
   var searchLabel = _ref.searchLabel,
-      index = _ref.index,
       usersArray = _ref.usersArray,
-      onClick = _ref.onClick,
-      position = _ref.position;
+      position = _ref.position,
+      id = _ref.id,
+      onAssign = _ref.onAssign,
+      product = _ref.product,
+      assignationTarget = _ref.assignationTarget,
+      target = _ref.target,
+      concept = _ref.concept;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -53,6 +59,7 @@ var UserSelector = function UserSelector(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     position: position,
+    id: id,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "search-cotainer",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
@@ -70,7 +77,9 @@ var UserSelector = function UserSelector(_ref) {
       children: userFiltered.length ? userFiltered.map(function (user) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "user-item",
-          onClick: onClick,
+          onClick: function onClick(e) {
+            return onAssign && onAssign(product, user.id_user, assignationTarget, target, concept);
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
             image: (0, _data.getProfilePicture)(user.id_user, 26, 26),
             altText: "profile image",

package/dist/components/molecules/GridItem/index.js

@@ -33,7 +33,8 @@ var GridItem = function GridItem(_ref) {
       isMerchans = _ref.isMerchans,
       chkOnChange = _ref.chkOnChange,
       onGridClick = _ref.onGridClick,
-      chkChecked = _ref.chkChecked;
+      chkChecked = _ref.chkChecked,
+      index = _ref.index;
   var _gridElement$images = gridElement.images,
       images = _gridElement$images === void 0 ? [] : _gridElement$images,
       _gridElement$info = gridElement.info,
@@ -43,8 +44,8 @@ var GridItem = function GridItem(_ref) {
       _gridElement$catalogs = gridElement.catalogs,
       catalogs = _gridElement$catalogs === void 0 ? {} : _gridElement$catalogs;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    onClick: function onClick() {
-      return onGridClick && onGridClick(product);
+    onClick: function onClick(e) {
+      return onGridClick && onGridClick(e, product, index);
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "chk-container",

package/dist/components/molecules/GridItem/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 175px;\n  border: 1px solid #f0f0f0;\n  position: relative;\n\n  .chk-container {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 10;\n    height: 16px;\n  }\n\n  .data-body {\n    padding: 10px;\n    border-bottom: 1px solid #f0f0f0;\n\n    h3,\n    p {\n      color: #262626;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 16px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      & + p {\n        margin-top: 5px;\n      }\n    }\n    p {\n      font-size: 10px;\n      line-height: 12px;\n      color: #808080;\n    }\n  }\n\n  .status-slider {\n    display: flex;\n    padding: 5px 10px;\n    overflow: auto;\n    border-bottom: 1px solid #f0f0f0;\n    flex-wrap: nowrap;\n\n    .status-element {\n      display: flex;\n    }\n\n    * + * {\n      margin-left: 10px;\n    }\n  }\n\n  .cart-and-raiting,\n  .retailers-and-user {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    .star-button {\n      button {\n        padding: 3px;\n        color: transparent;\n        -webkit-text-stroke: 1px #808080;\n      }\n    }\n  }\n\n  .retailers-and-user {\n    padding: 0;\n    > * {\n      flex: 1 0 50%;\n      display: flex;\n      padding: 5px;\n      height: 36px;\n    }\n    .retailers-container {\n      border-right: 1px solid #f0f0f0;\n    }\n  }\n"])), _variables.FontFamily.Lato);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 175px;\n  border: 1px solid #f0f0f0;\n  position: relative;\n\n  .chk-container {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 5;\n    height: 16px;\n  }\n\n  .data-body {\n    padding: 10px;\n    border-bottom: 1px solid #f0f0f0;\n\n    h3,\n    p {\n      color: #262626;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 16px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n\n      & + p {\n        margin-top: 5px;\n      }\n    }\n    p {\n      font-size: 10px;\n      line-height: 12px;\n      color: #808080;\n    }\n  }\n\n  .status-slider {\n    display: flex;\n    padding: 5px 10px;\n    overflow: auto;\n    border-bottom: 1px solid #f0f0f0;\n    flex-wrap: nowrap;\n\n    .status-element {\n      display: flex;\n    }\n\n    * + * {\n      margin-left: 10px;\n    }\n  }\n\n  .cart-and-raiting,\n  .retailers-and-user {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    .star-button {\n      button {\n        padding: 3px;\n        color: transparent;\n        -webkit-text-stroke: 1px #808080;\n      }\n    }\n  }\n\n  .retailers-and-user {\n    padding: 0;\n    > * {\n      flex: 1 0 50%;\n      display: flex;\n      padding: 5px;\n      height: 36px;\n    }\n    .retailers-container {\n      border-right: 1px solid #f0f0f0;\n    }\n  }\n"])), _variables.FontFamily.Lato);
 
 exports.Container = Container;

package/dist/components/molecules/HeaderItem/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0f0f0;\n  display: flex;\n\n  .chk-global-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 30px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0f0f0;\n  display: flex;\n  width: 100%;\n  min-width: fit-content;\n\n  .chk-global-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 30px;\n  }\n"])));
 
 exports.Container = Container;
 

package/dist/components/molecules/RowItem/index.js

@@ -28,7 +28,7 @@ var RowItem = function RowItem(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "row-container",
         onClick: function onClick(e) {
-          return onGridClick && onGridClick(product);
+          return onGridClick && onGridClick(e, product, i);
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "chk-container",

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

@@ -5008,11 +5008,15 @@ var setSelected = function setSelected(arr) {
   selected = arr;
 };
 
+var onAssign = function onAssign(productData, assigneeID, assignationTarget, concept, target) {
+  console.log(productData, assigneeID, assignationTarget, concept, target);
+};
+
 GridProductsDefault.args = {
   gridView: false,
   selected: selected,
   setSelected: setSelected,
-  products: (0, _utils.getProductsToTable)(products, textSpecialists, imagesSpecialists, auditors, images),
+  products: (0, _utils.getProductsToTable)(products, textSpecialists, imagesSpecialists, auditors, images, onAssign),
   images: images,
   auditors: auditors,
   textSpecialists: textSpecialists,
@@ -5077,8 +5081,8 @@ GridProductsDefault.args = {
     });
     return (productSelected === null || productSelected === void 0 ? void 0 : productSelected.length) > 0;
   },
-  onGridClick: function onGridClick(e) {
-    console.log(e);
+  onGridClick: function onGridClick(e, product, i) {
+    if (!e.target.closest("[id^=users]")) console.log(product, i);
   },
   chkCheckedAll: function chkCheckedAll() {
     return selected.length === products.length;

package/dist/components/organisms/GridProducts/index.js

@@ -11,14 +11,8 @@ var _GridItem = require("../../molecules/GridItem");
 
 var _HeaderItem = require("../../molecules/HeaderItem");
 
-var _utils = require("./utils");
-
-var _react = require("react");
-
 var _RowItem = require("../../molecules/RowItem");
 
-var _CheckBox = require("../../atoms/CheckBox");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GridProducts = function GridProducts(_ref) {
@@ -42,6 +36,7 @@ var GridProducts = function GridProducts(_ref) {
           id = _ref2.id;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridItem.GridItem, {
         id: id,
+        index: i,
         product: product,
         gridElement: gridElement,
         chkOnChange: chkOnChange,

package/dist/components/organisms/GridProducts/utils.js

@@ -17,6 +17,7 @@ var getProductsToTable = function getProductsToTable() {
   var imagesSpecialists = arguments.length > 2 ? arguments[2] : undefined;
   var auditors = arguments.length > 3 ? arguments[3] : undefined;
   var images = arguments.length > 4 ? arguments[4] : undefined;
+  var onAssign = arguments.length > 5 ? arguments[5] : undefined;
   var productsTableArray = [];
   products.forEach(function (product) {
     var article = product.article,
@@ -72,7 +73,8 @@ var getProductsToTable = function getProductsToTable() {
           textSpecialists: textSpecialists,
           imagesSpecialists: imagesSpecialists,
           auditors: auditors,
-          id: "users-" + id
+          id: "users-" + id,
+          product: product
         }),
         flex: 1,
         minWidth: 100
@@ -123,7 +125,9 @@ var getProductsToTable = function getProductsToTable() {
             textSpecialists: textSpecialists,
             imagesSpecialists: imagesSpecialists,
             auditors: auditors,
-            id: "users-" + id
+            id: "users-" + id,
+            onAssign: onAssign,
+            product: product
           })
         }
       },