contentoh-components-library 21.3.97 → 21.3.99

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>
   ),

package/src/index.js

@@ -39,6 +39,7 @@ export * from "./components/atoms/UserSelector/index";
 export * from "./components/atoms/ImageCarousel/index";
 export * from "./components/atoms/RetailersList/index";
 export * from "./components/atoms/RetailerOption/index";
+export * from "./components/atoms/RetailerCatalog/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";