contentoh-components-library 21.5.35 → 21.5.37

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

@@ -1,50 +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={gridView ? null : 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>
-  );
-};
+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={gridView ? null : 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

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

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

@@ -1,111 +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;
-};
+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/ImageDataTable/ImageDataTable.stories.js

@@ -1,24 +1,24 @@
-import { ImageDataTable } from "./index";
-
-export default {
-  title: "Components/organisms/ImageDataTable",
-  component: ImageDataTable,
-};
-
-const Template = (args) => <ImageDataTable {...args} />;
-
-export const ImageDataTableDefault = Template.bind({});
-ImageDataTableDefault.args = {
-  headerInfo: {
-    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
-    name: "Hero.jpg",
-    status: "AA",
-  },
-  imageData: [
-    { feature: "Tipo de imagen", value: "Tipo de imagen" },
-    { feature: "Identificador", value: "F26" },
-    { feature: "Formato", value: "jpg" },
-    { feature: "Resolución", value: "300dpi" },
-    { feature: "Tamaño de imagen", value: "1000x10000" },
-  ],
-};
+import { ImageDataTable } from "./index";
+
+export default {
+  title: "Components/organisms/ImageDataTable",
+  component: ImageDataTable,
+};
+
+const Template = (args) => <ImageDataTable {...args} />;
+
+export const ImageDataTableDefault = Template.bind({});
+ImageDataTableDefault.args = {
+  headerInfo: {
+    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+    name: "Hero.jpg",
+    status: "AA",
+  },
+  imageData: [
+    { feature: "Tipo de imagen", value: "Tipo de imagen" },
+    { feature: "Identificador", value: "F26" },
+    { feature: "Formato", value: "jpg" },
+    { feature: "Resolución", value: "300dpi" },
+    { feature: "Tamaño de imagen", value: "1000x10000" },
+  ],
+};

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

@@ -1,124 +1,124 @@
-import { Container } from "./styles";
-import { TableHeader } from "../../molecules/TableHeader";
-import { Container as Row } from "../../molecules/TableRow/styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import LabelToInput from "../../atoms/LabelToInput";
-
-export const ImageDataTable = ({
-  activeImage,
-  darkMode,
-  lists,
-  retailerSelected,
-  setImages,
-  assignationsImages,
-  imagesStatus,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-  showSaveButton,
-  version,
-  setShowVersionSelector,
-  shotThd,
-}) => {
-  return (
-    <Container darkMode={darkMode}>
-      <TableHeader
-        imagesStatus={imagesStatus}
-        activeImage={activeImage}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        showSaveButton={showSaveButton}
-        onClickSave={onClickSave}
-        version={version}
-        setShowVersionSelector={setShowVersionSelector}
-      />
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
-            "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imagePackagingType?.find(
-              (f) => f.id === +activeImage?.packing_type
-            )?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name || "-"
-          }
-        />
-      </Row>
-      {shotThd && (
-        <Row>
-          <ScreenHeader
-            headerType={"table-row-text"}
-            text="Tipo de imagen THD"
-          />
-          <ScreenHeader
-            headerType={"table-row-text gray-table-row"}
-            text={
-              lists?.imageShotType?.find(
-                (f) => f.id === +activeImage?.image_shot_type
-              )?.type_shot || "-"
-            }
-          />
-        </Row>
-      )}
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={activeImage?.ext || "-"}
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={
-            activeImage?.width && activeImage.height
-              ? `${activeImage?.width}x${activeImage?.height}px`
-              : "-"
-          }
-        />
-      </Row>
-      {retailerSelected &&
-        lists?.attrForImgs &&
-        lists?.attrForImgs?.general?.map((attr, index) => (
-          <Row key={"row-" + index + "-" + attr?.name}>
-            <ScreenHeader
-              headerType={"table-row-text"}
-              text={attr?.name || "-"}
-            />
-            <LabelToInput
-              width="100px"
-              defaultValue={attr?.value}
-              onChange={(e) => {
-                setImages({
-                  action: "changeAttrValue",
-                  value: e.target.value || "-",
-                  id: attr.id,
-                });
-              }}
-            />
-          </Row>
-        ))}
-    </Container>
-  );
-};
+import { Container } from "./styles";
+import { TableHeader } from "../../molecules/TableHeader";
+import { Container as Row } from "../../molecules/TableRow/styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import LabelToInput from "../../atoms/LabelToInput";
+
+export const ImageDataTable = ({
+  activeImage,
+  darkMode,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
+  version,
+  setShowVersionSelector,
+  shotThd,
+}) => {
+  return (
+    <Container darkMode={darkMode}>
+      <TableHeader
+        imagesStatus={imagesStatus}
+        activeImage={activeImage}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        showSaveButton={showSaveButton}
+        onClickSave={onClickSave}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
+      />
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imagePackagingType?.find(
+              (f) => f.id === +activeImage?.packing_type
+            )?.name || "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
+              ?.name || "-"
+          }
+        />
+      </Row>
+      {shotThd && (
+        <Row>
+          <ScreenHeader
+            headerType={"table-row-text"}
+            text="Tipo de imagen THD"
+          />
+          <ScreenHeader
+            headerType={"table-row-text gray-table-row"}
+            text={
+              lists?.imageShotType?.find(
+                (f) => f.id === +activeImage?.image_shot_type
+              )?.type_shot || "-"
+            }
+          />
+        </Row>
+      )}
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Formato" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={activeImage?.ext || "-"}
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={
+            activeImage?.width && activeImage.height
+              ? `${activeImage?.width}x${activeImage?.height}px`
+              : "-"
+          }
+        />
+      </Row>
+      {retailerSelected &&
+        lists?.attrForImgs &&
+        lists?.attrForImgs?.general?.map((attr, index) => (
+          <Row key={"row-" + index + "-" + attr?.name}>
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
+            <LabelToInput
+              width="100px"
+              defaultValue={attr?.value}
+              onChange={(e) => {
+                setImages({
+                  action: "changeAttrValue",
+                  value: e.target.value || "-",
+                  id: attr.id,
+                });
+              }}
+            />
+          </Row>
+        ))}
+    </Container>
+  );
+};