contentoh-components-library 21.3.98 → 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
           })
         }
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.98",
+  "version": "21.3.99",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -16,13 +16,12 @@ export const RetailerCatalog = ({
 
   useEffect(() => {
     setRetLimit(limit);
-    console.log("limit");
   }, [retailers]);
 
   return (
     <Container
-      id={id}
-      onClick={() => {
+      onClick={(e) => {
+        e.stopPropagation();
         setShowRetailers(true);
       }}
     >
@@ -43,7 +42,7 @@ export const RetailerCatalog = ({
         </div>
       )}
       {showRetailers && (
-        <RetailersList retailers={retailers} article={article} />
+        <RetailersList retailers={retailers} article={article} id={id} />
       )}
     </Container>
   );

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

@@ -3,7 +3,7 @@ import { RetailerOption } from "../RetailerOption";
 import { useState, useEffect } from "react";
 import axios from "axios";
 
-export const RetailersList = ({ retailers, article }) => {
+export const RetailersList = ({ retailers, article, id }) => {
   const [services, setServices] = useState({});
 
   useEffect(() => {
@@ -11,7 +11,7 @@ export const RetailersList = ({ retailers, article }) => {
   }, [article]);
 
   return (
-    <Container>
+    <Container id={id}>
       {retailers.map((retailer, i) => (
         <RetailerOption key={i} retailer={retailer} services={services} />
       ))}

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

@@ -8,6 +8,7 @@ export default {
 const Template = (args) => <UserCatalog {...args} />;
 export const UserCatalogDefault = Template.bind({});
 UserCatalogDefault.args = {
+  product: "product",
   datasheet: 54,
   description: 54,
   images: 55,

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

@@ -2,8 +2,8 @@ import { Container } from "./styles";
 import { Avatar } from "../Avatar";
 import { getProfilePicture } from "../../../global-files/data";
 import { UserOption } from "../UserOption";
-import { useState } from "react";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { useState } from "react";
 import { useEffect } from "react";
 
 export const UserCatalog = ({
@@ -15,11 +15,18 @@ export const UserCatalog = ({
   textSpecialists = [],
   imagesSpecialists = [],
   id = "list-modal",
+  onAssign,
+  product,
 }) => {
   const [showList, setShowList] = useCloseModal(id);
 
   return (
-    <Container onClick={() => setShowList(true)} id={id}>
+    <Container
+      id={id}
+      onClick={() => {
+        setShowList(true);
+      }}
+    >
       {datasheet && (
         <Avatar
           image={getProfilePicture(datasheet, 26, 26)}
@@ -51,24 +58,36 @@ export const UserCatalog = ({
       {showList && (
         <div className="users-assigned-list">
           <UserOption
+            onAssign={onAssign}
+            product={product}
             userId={datasheet}
             usersArray={textSpecialists}
             id={id + "-" + datasheet}
+            index={"datasheet"}
           />
           <UserOption
+            onAssign={onAssign}
+            product={product}
             userId={description}
             usersArray={textSpecialists}
             id={id + "-" + description}
+            index={"description"}
           />
           <UserOption
+            onAssign={onAssign}
+            product={product}
             userId={images}
             usersArray={imagesSpecialists}
             id={id + "-" + images}
+            index={"image"}
           />
           <UserOption
+            onAssign={onAssign}
+            product={product}
             userId={auditor}
             usersArray={auditors}
             id={id + "-" + auditor}
+            index={"auditor"}
           />
         </div>
       )}

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

@@ -7,9 +7,20 @@ import { servicesCodeIcon } from "../../organisms/OrderDetail/utils/Table/utils"
 import { UserSelector } from "../UserSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
 
-export const UserOption = ({ userId, index, usersArray, id }) => {
+export const UserOption = ({
+  userId,
+  index,
+  usersArray,
+  id,
+  onAssign,
+  product,
+}) => {
   const [userAssigned, setUserAssigned] = useState({});
   const [showSelector, setShowSelector] = useCloseModal(id);
+  const [assignationTarget, setAssignationTarget] = useState("");
+  const [concept, setConcept] = useState("");
+  const [target, setTarget] = useState("");
+
   const icons = servicesCodeIcon;
 
   useEffect(() => {
@@ -22,6 +33,29 @@ export const UserOption = ({ userId, index, usersArray, id }) => {
     }
   }, [userId, usersArray]);
 
+  useEffect(() => {
+    switch (index) {
+      case "datasheet":
+      case "description":
+        setAssignationTarget(`id_${index}_specialist`);
+        setConcept(index);
+        setTarget("specialist");
+        break;
+      case "image":
+        setAssignationTarget(`id_${index}s_specialist`);
+        setConcept(index + "s");
+        setTarget("specialist");
+        break;
+      case "auditor":
+        setAssignationTarget(`id_${index}`);
+        setConcept(index);
+        setTarget(index);
+        break;
+      default:
+        break;
+    }
+  }, [index]);
+
   return (
     <Container onClick={() => setShowSelector(true)}>
       <div className="image-and-name">
@@ -42,6 +76,11 @@ export const UserOption = ({ userId, index, usersArray, id }) => {
           index={index}
           usersArray={usersArray}
           position="absolute"
+          onAssign={onAssign}
+          product={product}
+          assignationTarget={assignationTarget}
+          target={target}
+          concept={concept}
         />
       )}
     </Container>

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

@@ -14,7 +14,6 @@ export const Container = styled.div`
   cursor: pointer;
   position: relative;
   background-color: white;
-  width: 217px;
 
   .image-and-name {
     display: flex;
@@ -22,6 +21,11 @@ export const Container = styled.div`
 
     div + p {
       margin-left: 10px;
+      white-space: nowrap;
+    }
+
+    & + * {
+      margin-left: 10px;
     }
   }
 
@@ -38,6 +42,9 @@ export const Container = styled.div`
         top: 50%;
         transform: translateY(-50%);
         white-space: nowrap;
+        border: 1px solid #f0f0f0;
+        padding: 5px;
+        background-color: white;
       }
 
       &:hover {

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

@@ -5,13 +5,18 @@ import { Avatar } from "../Avatar";
 import { getProfilePicture } from "../../../global-files/data";
 import { useState } from "react";
 import { useEffect } from "react";
+import { useCloseModal } from "../../../global-files/customHooks";
 
 export const UserSelector = ({
   searchLabel,
-  index,
   usersArray,
-  onClick,
   position,
+  id,
+  onAssign,
+  product,
+  assignationTarget,
+  target,
+  concept,
 }) => {
   const [text, setText] = useState([]);
   const [userFiltered, setUsersFiltered] = useState([]);
@@ -33,7 +38,7 @@ export const UserSelector = ({
   };
 
   return (
-    <Container position={position}>
+    <Container position={position} id={id}>
       <div className="search-cotainer">
         <Icon icon={faSearch} />
         <input
@@ -48,7 +53,20 @@ export const UserSelector = ({
       <div className="selector-container">
         {userFiltered.length ? (
           userFiltered.map((user) => (
-            <div key={user.id_user} className="user-item" onClick={onClick}>
+            <div
+              key={user.id_user}
+              className="user-item"
+              onClick={(e) =>
+                onAssign &&
+                onAssign(
+                  product,
+                  user.id_user,
+                  assignationTarget,
+                  target,
+                  concept
+                )
+              }
+            >
               <Avatar
                 image={getProfilePicture(user.id_user, 26, 26)}
                 altText={"profile image"}

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

@@ -16,11 +16,12 @@ export const GridItem = ({
   chkOnChange,
   onGridClick,
   chkChecked,
+  index,
 }) => {
   const { images = [], info = [], status = [], catalogs = {} } = gridElement;
 
   return (
-    <Container onClick={() => onGridClick && onGridClick(product)}>
+    <Container onClick={(e) => onGridClick && onGridClick(e, product, index)}>
       <div className="chk-container" onClick={(e) => e.stopPropagation()}>
         <CheckBox
           id={id}

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

@@ -10,7 +10,7 @@ export const Container = styled.div`
     position: absolute;
     top: 5px;
     left: 5px;
-    z-index: 10;
+    z-index: 5;
     height: 16px;
   }
 

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

@@ -4,6 +4,8 @@ import { FontFamily } from "../../../global-files/variables";
 export const Container = styled.div`
   background-color: #f0f0f0;
   display: flex;
+  width: 100%;
+  min-width: fit-content;
 
   .chk-global-container {
     display: flex;

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

@@ -14,7 +14,7 @@ export const RowItem = ({
         <div
           className="row-container"
           key={article?.id_article + "-" + article?.id_order}
-          onClick={(e) => onGridClick && onGridClick(product)}
+          onClick={(e) => onGridClick && onGridClick(e, product, i)}
         >
           <div
             className="chk-container"

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

@@ -5409,6 +5409,16 @@ const setSelected = (arr) => {
   selected = arr;
 };
 
+const onAssign = (
+  productData,
+  assigneeID,
+  assignationTarget,
+  concept,
+  target
+) => {
+  console.log(productData, assigneeID, assignationTarget, concept, target);
+};
+
 GridProductsDefault.args = {
   gridView: false,
   selected,
@@ -5418,7 +5428,8 @@ GridProductsDefault.args = {
     textSpecialists,
     imagesSpecialists,
     auditors,
-    images
+    images,
+    onAssign
   ),
   images,
   auditors,
@@ -5460,8 +5471,8 @@ GridProductsDefault.args = {
     );
     return productSelected?.length > 0;
   },
-  onGridClick: (e) => {
-    console.log(e);
+  onGridClick: (e, product, i) => {
+    if (!e.target.closest("[id^=users]")) console.log(product, i);
   },
   chkCheckedAll: () => {
     return selected.length === products.length;

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

@@ -1,11 +1,7 @@
 import { Container } from "./styles";
 import { GridItem } from "../../molecules/GridItem";
 import { HeaderItem } from "../../molecules/HeaderItem";
-import { getProductsToTable } from "./utils";
-import { useEffect } from "react";
-import { useState } from "react";
 import { RowItem } from "../../molecules/RowItem";
-import { CheckBox } from "../../atoms/CheckBox";
 
 export const GridProducts = ({
   products = [],
@@ -25,6 +21,7 @@ export const GridProducts = ({
           <GridItem
             key={i}
             id={id}
+            index={i}
             product={product}
             gridElement={gridElement}
             chkOnChange={chkOnChange}

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

@@ -6,7 +6,8 @@ export const getProductsToTable = (
   textSpecialists,
   imagesSpecialists,
   auditors,
-  images
+  images,
+  onAssign
 ) => {
   const productsTableArray = [];
 
@@ -45,6 +46,7 @@ export const getProductsToTable = (
               imagesSpecialists={imagesSpecialists}
               auditors={auditors}
               id={"users-" + id}
+              product={product}
             />
           ),
           flex: 1,
@@ -87,6 +89,8 @@ export const getProductsToTable = (
               imagesSpecialists={imagesSpecialists}
               auditors={auditors}
               id={"users-" + id}
+              onAssign={onAssign}
+              product={product}
             />
           ),
         },

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -1,41 +1,31 @@
 export const servicesCodeIcon = {
   datasheet: (
     <div key="datasheet" className="tooltip">
-      <span className="material-icons small">
-        &#xf8ee;
-      </span>
+      <span className="material-icons small">&#xf8ee;</span>
       <span className="tooltiptext">Ficha Técnica</span>
     </div>
   ),
   description: (
     <div key="description" className="tooltip">
-      <span className="material-icons small">
-          &#xe873;
-        </span>
+      <span className="material-icons small">&#xe873;</span>
       <span className="tooltiptext">Descripción</span>
     </div>
   ),
   image: (
     <div key="image" className="tooltip">
-      <span className="material-icons small">
-        &#xe3f4;
-      </span>
+      <span className="material-icons small">&#xe3f4;</span>
       <span className="tooltiptext">Imagen</span>
     </div>
   ),
   translate: (
     <div key="translate" className="tooltip">
-      <span className="material-icons small">
-        &#xe8e2;
-      </span>
+      <span className="material-icons small">&#xe8e2;</span>
       <span className="tooltiptext">Traducción</span>
     </div>
   ),
   build: (
-    <div key="build"  className="tooltip">
-      <span className="material-icons small">
-        &#xe1bd;
-      </span>
+    <div key="build" className="tooltip">
+      <span className="material-icons small">&#xe1bd;</span>
       <span className="tooltiptext">Construcción</span>
     </div>
   ),