contentoh-components-library 21.4.4 → 21.4.6

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

@@ -0,0 +1,50 @@
+import { Container } from "./styles";
+import { GridItem } from "../../molecules/GridItem";
+import { HeaderItem } from "../../molecules/HeaderItem";
+import { RowItem } from "../../molecules/RowItem";
+
+export const GridProducts = ({
+  products = [],
+  columnsArray = [],
+  gridView = true,
+  chkOnChange,
+  selected = [],
+  chkChecked,
+  checkAll,
+  chkCheckedAll,
+  onGridClick,
+}) => {
+  return (
+    <Container>
+      {!gridView ? (
+        products?.map(({ gridElement, product, id }, i) => (
+          <GridItem
+            key={i}
+            id={id}
+            index={i}
+            product={product}
+            gridElement={gridElement}
+            chkOnChange={chkOnChange}
+            onGridClick={onGridClick}
+            selected={selected}
+            chkChecked={chkChecked}
+          />
+        ))
+      ) : (
+        <div className="table-view">
+          <HeaderItem
+            columnsArray={columnsArray}
+            checkAll={checkAll}
+            chkCheckedAll={chkCheckedAll}
+          />
+          <RowItem
+            productsArray={products}
+            chkOnChange={chkOnChange}
+            onGridClick={onGridClick}
+            chkChecked={chkChecked}
+          />
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  height: 100%;
+  overflow: auto;
+  padding: 20px;
+
+  .table-view {
+    height: 100%;
+    width: 100%;
+  }
+`;

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

@@ -0,0 +1,111 @@
+import { RetailerCatalog } from "../../atoms/RetailerCatalog";
+import { UserCatalog } from "../../atoms/UserCatalog";
+
+export const getProductsToTable = (
+  products = [],
+  textSpecialists,
+  imagesSpecialists,
+  auditors,
+  images,
+  onAssign
+) => {
+  const productsTableArray = [];
+
+  products.forEach((product) => {
+    const { article, orderId, upc, status, version } = product;
+    const id = article?.id_article + "-" + orderId;
+    const imgArray = images[article?.id_article + "-" + version];
+    const element = {
+      id,
+      cols: [
+        { name: article?.country || "-", flex: 1, minWidth: 100 },
+        { name: orderId || "-", flex: 1, minWidth: 100 },
+        { name: upc || "-", flex: 1, minWidth: 100 },
+        { name: article?.name || "-", flex: 1, minWidth: 200 },
+        { name: "S/M" || "-", flex: 1, minWidth: 100 },
+        { name: status || "-", flex: 1, minWidth: 100 },
+        {
+          name: (
+            <RetailerCatalog
+              id={"retailers-" + id}
+              article={product}
+              retailers={product.retailers}
+            />
+          ),
+          flex: 1,
+          minWidth: 100,
+        },
+        { name: product.prio, flex: 1, minWidth: 100 },
+        {
+          name: (
+            <UserCatalog
+              datasheet={article.id_datasheet_especialist}
+              description={article.id_description_especialist}
+              images={article.id_images_especialist}
+              auditor={article.id_auditor}
+              textSpecialists={textSpecialists}
+              imagesSpecialists={imagesSpecialists}
+              auditors={auditors}
+              id={"users-" + id}
+              product={product}
+              onAssign={onAssign}
+            />
+          ),
+          flex: 1,
+          minWidth: 100,
+        },
+        { name: "Cont.", flex: 1, minWidth: 100 },
+      ],
+      gridElement: {
+        images: imgArray,
+        info: [
+          { title: "name", value: article?.name || "-" },
+          { title: "order", value: orderId || "-" },
+          { title: "category", value: article?.category || "-" },
+          { title: "company", value: article?.company_name || "-" },
+          { title: "price", value: article?.price || "-" },
+        ],
+        status: [
+          { title: "datasheet", value: product?.datasheet_status, percent: 80 },
+          {
+            title: "description",
+            value: product?.description_status,
+            percent: 80,
+          },
+          { title: "images", value: product?.images_status, percent: 80 },
+        ],
+        catalogs: {
+          leftSide: (
+            <RetailerCatalog
+              id={"retailers-" + id}
+              limit={2}
+              article={product}
+              retailers={product.retailers}
+            />
+          ),
+          rightSide: (
+            <UserCatalog
+              datasheet={article.id_datasheet_especialist}
+              description={article.id_description_especialist}
+              images={article.id_images_especialist}
+              auditor={article.id_auditor}
+              textSpecialists={textSpecialists}
+              imagesSpecialists={imagesSpecialists}
+              auditors={auditors}
+              id={"users-" + id}
+              product={product}
+              onAssign={onAssign}
+            />
+          ),
+        },
+      },
+      showBottom: true,
+      product,
+      article,
+    };
+
+    productsTableArray.push(element);
+  });
+
+  return productsTableArray;
+};

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/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -52,32 +52,50 @@ RetailerProductEditionDefault.args = {
         images: "RA/AC",
       },
     },
+    orderId: 15209,
+    status: "ACA",
+    datasheet_status: "ACA",
+    prio: "none",
+    version: 3,
+    description_status: "ACA",
+    images_status: "ACA",
+    statusByRetailer: {
+      70: {
+        datasheet: "ACA",
+        description: "ACA",
+        images: "ACA",
+      },
+    },
     article: {
-      category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
-      company_name: "Demo",
+      id_article: 39390,
+      id_category: "4311",
+      name: "test demo 1",
+      upc: "2312312313",
+      timestamp: "2023-05-12T20:07:42.000Z",
+      id_user: 133,
+      status: "NULL",
+      active: 1,
+      company_id: 912,
+      company_name: "GRUPO BRAHMA",
       country: "México",
-      id_category: "2366",
-      id_datasheet_especialist: null,
-      id_datasheet_facilitator: null,
-      id_description_especialist: null,
-      id_description_facilitator: null,
-      id_images_especialist: null,
-      id_images_facilitator: null,
-      id_order: 15160,
-      id_article: 39290,
-      id_auditor: 37,
-      name: "MOLDURA MARCO MODER 11X4X244 CM",
-      timestamp: "2023-04-19T21:36:02.000Z",
-      upc: "100030",
+      id_order: 15209,
+      id_datasheet_especialist: 232,
+      id_datasheet_facilitator: 52,
+      id_description_especialist: 232,
+      id_description_facilitator: 52,
+      id_images_especialist: 196,
+      id_images_facilitator: 53,
+      id_auditor: 195,
+      id_recepcionist: null,
+      category: "Ropa Interior Dama|Ropa Interior|Ropa Interior",
+      missingAttributes: 0,
+      missingDescriptions: 0,
+      missingImages: 0,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
-      },
-      {
-        id: 68,
-        name: "The Home Depot Merchants",
+        id: 70,
+        name: "Bodega Aurrera",
       },
     ],
   },

package/src/components/pages/RetailerProductEdition/index.js

@@ -226,6 +226,10 @@ export const RetailerProductEdition = ({
   const [compare, setCompare] = useState(false);
   const [valRejAll, setValRejAll] = useState(false);
 
+  const [desc, setDesc] = useState([]);
+  const [fich, setFich] = useState([]);
+  const [imag, setImag] = useState([]);
+
   useEffect(async () => {
     const { id_article } = product?.article || {};
     if (id_article)
@@ -567,6 +571,7 @@ export const RetailerProductEdition = ({
       active: images?.values?.some((value) => value?.image_id === e?.id),
     }));
     setSocketType(imageInputs);
+    console.log(images);
   }, [images]);
 
   const updateImages = useCallback(async () => {
@@ -1187,6 +1192,7 @@ export const RetailerProductEdition = ({
   };
 
   useEffect(() => {
+    console.log(servicesData, "servicesData");
     let status = getRetailerStatus(servicesData, activeTab);
     setRetailerStatus(status);
   }, [activeTab, servicesData, activeRetailer]);
@@ -1351,6 +1357,12 @@ export const RetailerProductEdition = ({
             isRetailer={isRetailer}
             showSaveButton={auditorAssigned() || userAssigned()}
             version={version}
+            desc={desc}
+            setDesc={setDesc}
+            fich={fich}
+            setFich={setFich}
+            imag={imag}
+            setImag={setImag}
             updatedDescriptions={updatedDescriptions}
             setUpdatedDescriptions={setUpdatedDescriptions}
             updatedDatasheets={updatedDatasheets}

package/src/index.js

@@ -33,6 +33,13 @@ export * from "./components/atoms/ImagePreview/index";
 export * from "./components/atoms/InputText/index";
 export * from "./components/atoms/NotFound/index";
 export * from "./components/atoms/Tooltip/index";
+export * from "./components/atoms/UserOption/index";
+export * from "./components/atoms/UserCatalog/index";
+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";
@@ -65,6 +72,10 @@ export * from "./components/molecules/SelectV2/index";
 export * from "./components/molecules/Dropdown/index";
 export * from "./components/molecules/StripeCardForm/index";
 export * from "./components/molecules/StripeCardSelector/index";
+export * from "./components/molecules/GridItem/index";
+export * from "./components/molecules/HeaderItem/index";
+export * from "./components/molecules/RowItem/index";
+export * from "./components/molecules/RetailerSelector/index";
 
 //organisms
 export * from "./components/organisms/ChangePassword/index";
@@ -82,6 +93,7 @@ export * from "./components/organisms/OrderDetail/index";
 export * from "./components/organisms/RangeCalendar";
 export * from "./components/organisms/TableResizable";
 export * from "./components/organisms/SideModal/index";
+export * from "./components/organisms/GridProducts/index";
 
 //pages
 export * from "./components/pages/ChangePasswordLogin";