contentoh-components-library 21.0.9 → 21.0.13

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

@@ -4,7 +4,6 @@ import { CheckBox } from "../../atoms/CheckBox";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useState, useEffect } from "react";
-import Select from "../../atoms/Select";
 
 export const GalleryElement = ({
   validation = "null-button",
@@ -12,14 +11,6 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
-  index,
-  imageInputs,
-  imageType,
-  imagePackagingType,
-  changeImage,
-  selectedImages,
-  setSelectedImages,
-  setCheckAll,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -34,20 +25,6 @@ export const GalleryElement = ({
     }
   };
 
-  const checkOnChange = (e) => {
-    const chkGlobal = document.getElementById("check-all-images");
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
-    let temp = selectedImages.slice();
-    e.target.checked
-      ? temp.push(image)
-      : (temp = temp.filter((img) => image.id !== img.id));
-    let counter = 0;
-    checkboxList?.forEach((chk) => chk.checked && counter++);
-    chkGlobal.checked = checkboxList.length === counter;
-    setCheckAll(checkboxList.length === counter);
-    setSelectedImages(temp);
-  };
-
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -57,66 +34,50 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
+        <CheckBox id={id} label={id} label={label} />
+        <Button
+          buttonType={`circular-button ${statusValidation}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
+        {showValidationPanel && (
+          <ValidationPanel
+            id={"validation-panel"}
+            setOptionClicked={setStatusValidation}
+            setShowValidationPanel={setShowValidationPanel}
+          />
+        )}
       </div>
       <div className="image-container">
         <ProductImage
           img={image?.src}
           altText={image?.altText}
-          imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
+          imageType={
+            gridLayout
+              ? "catalogue-image-big-size"
+              : "catalogue-image-small-size"
+          }
         />
         <div className="information-container">
+          {/* name */}
           <p>{image?.name}</p>
-          {!gridLayout && (
-            <>
-              <p>
-                {image.width}x{image.height}
-              </p>
-              <p>{image.ext}</p>
-              <Select
-                width="100%"
-                placeholder="Tipo de toma"
-                options={imageInputs}
-                valueSelected={image.image_id}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "image_id",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-              <Select
-                width="100%"
-                placeholder="Tipo de imagen"
-                options={imageType}
-                valueSelected={image.image_type}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "image_type",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-              <Select
-                width="100%"
-                placeholder="Tipo de empaque"
-                options={imagePackagingType}
-                valueSelected={image.packing_type}
-                onChange={(e) => {
-                  changeImage({
-                    action: "changeImageInfo",
-                    attribute: "packing_type",
-                    value: +e.target.value,
-                    index: index,
-                  });
-                }}
-              />
-            </>
-          )}
+          {/* <p>{image?.data[0]?.value}</p> */}
+          {/* size */}
+          {!gridLayout &&
+            image?.data.map(
+              (element, index) =>
+                index > 0 && <p key={index}>{element.value}</p>
+            )}
+          {/* <p>{image?.size}</p>
+
+        {!gridLayout && (
+          <>
+            <p>{image?.format}</p>
+            <p>{image?.resolution}</p>
+            <p className="highlighted-data">{image?.imageType}</p>
+            <p className="highlighted-image">{data?.identificator}</p>
+          </>
+        )}{" "}
+        */}
         </div>
       </div>
     </Container>

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

@@ -10,12 +10,12 @@ export const Container = styled.div`
 
     .buttons-container {
       position: absolute;
-      top: 5px;
-      left: 5px;
+      top: 0;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 0 5px;
     }
 
     .image-container {
@@ -40,10 +40,10 @@ export const Container = styled.div`
   &.row-gallery {
     display: flex;
     align-items: center;
-    padding-right: 10px;
 
     .buttons-container {
       position: relative;
+      width: 58px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -52,17 +52,18 @@ export const Container = styled.div`
     .image-container {
       display: flex;
       align-items: center;
-      flex: 1;
       .information-container {
         display: flex;
-        flex: 1;
 
         p {
           font-family: ${FontFamily.Lato};
           color: ${GlobalColors.s4};
           font-size: 14px;
           line-height: 17px;
-          text-align: center;
+
+          & + p {
+            margin-left: 18px;
+          }
 
           &.highlighted-data {
             font-family: ${FontFamily.AvenirNext};
@@ -74,40 +75,12 @@ export const Container = styled.div`
             line-height: 18px;
             padding: 0 10px;
           }
-
-          &:nth-child(1) {
-            //min-width: calc(20% - 76px);
-            //flex: 1 0 20%;
-            min-width: 22%;
-          }
-
-          &:nth-child(2),
-          &:nth-child(3) {
-            text-align: center;
-          }
-          &:nth-child(2) {
-            max-width: 90px;
-            min-width: 90px;
-          }
-          &:nth-child(3) {
-            max-width: 60px;
-            min-width: 60px;
-          }
-          /* &:nth-child(4) {
-            max-width: 90px;
-            min-width: 90px;
-          }
-          &:nth-child(5) {
-            max-width: 80px;
-            min-width: 80px;
-          } */
-        }
-
-        & > * {
-          flex: 1;
-          padding: 5px;
         }
       }
     }
+
+    & > * + * {
+      margin-left: 18px;
+    }
   }
 `;

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

@@ -1,25 +1,19 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
-  const checkAll = (e) => {
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
-    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
-    setCheckAll(e.target.checked);
-    if (!e.target.checked) setSelectedImages([]);
-  };
+export const GalleryHeader = () => {
   return (
     <Container>
       <div>
-        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
+        <CheckBox />
       </div>
+      <p className="value-header">Val.</p>
       <p className="image-header">Image</p>
-      <p className="image-name">Nombre</p>
-      <p className="image-size">Tamaño</p>
-      <p className="image-format">Formato</p>
-      <p className="">Tipo de toma</p>
-      <p className="">Tipo de imagen</p>
-      <p className="">Tipo de empaque</p>
+      <p>Nombre</p>
+      <p>Tamaño</p>
+      <p>Formato</p>
+      <p>Tipo de imagen</p>
+      <p>Identificador</p>
     </Container>
   );
 };

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

@@ -25,21 +25,5 @@ export const Container = styled.div`
     &.image-header {
       max-width: 60px;
     }
-
-    &.image-name {
-      min-width: 20%;
-    }
-
-    &.image-format {
-      max-width: 60px;
-    }
-
-    &.image-size {
-      max-width: 90px;
-    }
-
-    &.image-identifier {
-      max-width: 80px;
-    }
   }
 `;

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

@@ -1,5 +1,6 @@
 import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
+import { getImage } from "../../../global-files/data";
 
 export const ImageSelector = ({
   images = [],
@@ -11,10 +12,10 @@ export const ImageSelector = ({
       {images?.values?.map((image, index) => (
         <ProductImage
           key={index}
-          img={image.src}
+          img={getImage(image, 85, 60).src}
           altText={image.altText}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
-          onClick={() => setActiveImage(index)}
+          onClick={() => setActiveImage(getImage(image), 350, 295)}
         />
       ))}
     </Container>

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

@@ -8,6 +8,7 @@ export const ProductNameHeader = ({
   productName,
   statusType,
   percent,
+  backgroundColor,
   priority,
   date,
 }) => {
@@ -15,7 +16,7 @@ export const ProductNameHeader = ({
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <StatusTag statusType={statusType} />
-      <ProgressBar percent={percent} progressBarType={statusType} />
+      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

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

@@ -5,24 +5,20 @@ import { StatusTag } from "../../atoms/StatusTag/index";
 import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
-import { getProfilePicture } from "../../../global-files/data";
 
 export const StatusAsignationInfo = ({
   status = "-",
+  src,
   imagesSection,
   setImageLayout,
+  asignationsList,
   percent = 0,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
+  saveImages,
+  deleteImages,
   id = "default-id",
-  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(false);
-  const [assignationType, setAssignationType] = useState("facilitator");
+  const [layout, setLayout] = useState(true);
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -39,22 +35,18 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      <Button
-        buttonType={"circular-button save-button"}
-        onClick={onClickSave}
-      />
       {imagesSection && (
         <div className="images-buttons">
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button save-button"}
             onClick={() => {
-              askToDeleteImages && askToDeleteImages();
+              saveImages && saveImages();
             }}
           />
           <Button
-            buttonType={"circular-button download-button"}
+            buttonType={"circular-button delete-button"}
             onClick={() => {
-              downloadImages();
+              deleteImages && deleteImages();
             }}
           />
           <Button
@@ -67,20 +59,14 @@ export const StatusAsignationInfo = ({
         </div>
       )}
       <StatusTag statusType={status} ovalForm={true} />
-      <div className="assignations-container">
-        {assignationsImages?.assignations?.map((assignation, index) => (
-          <Avatar
-            key={index + "-" + assignation.id}
-            imageType={"small-image"}
-            image={getProfilePicture(assignation.id, 20, 20)}
-            altText="user profile image"
-            onClick={() => {
-              setShowAsignationPanel(true);
-              setAssignationType(assignation?.collaboratorType);
-            }}
-          />
-        ))}
-      </div>
+      <Avatar
+        imageType={"small-image"}
+        image={src}
+        altText="user profile image"
+        onClick={() => {
+          setShowAsignationPanel(true);
+        }}
+      />
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}
@@ -100,41 +86,31 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {assignationsImages?.collaborators !== undefined ? (
-              assignationsImages?.collaborators[assignationType]?.map(
-                (asignation, index) => (
-                  <AsignationOption
-                    key={index + "-" + asignation.name}
-                    profileImage={getProfilePicture(
-                      asignation?.id_user,
-                      40,
-                      40
-                    )}
-                    onClick={() => {
-                      setAssignation(assignationType, asignation?.id_user);
-                    }}
-                    name={asignation.name}
-                  />
-                )
-              )
+            {asignationsList !== undefined ? (
+              asignationsList.map((asigantion, index) => (
+                <AsignationOption
+                  profileImage={asignation.image}
+                  asignationType={asignation.asignationType}
+                  name={asignation.name}
+                  team={asigantion.team}
+                />
+              ))
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          {isRetailer === 1 && (
-            <div className="default-asignations-list">
-              <AsignationOption
-                asignationType={"provider"}
-                name={"Solicitar a"}
-                team={"Proveedor"}
-              />
-              <AsignationOption
-                asignationType={"team"}
-                name={"Solicitar a"}
-                team={"Content-oh!"}
-              />
-            </div>
-          )}
+          <div className="default-asignations-list">
+            <AsignationOption
+              asignationType={"provider"}
+              name={"Solicitar a"}
+              team={"Proveedor"}
+            />
+            <AsignationOption
+              asignationType={"team"}
+              name={"Solicitar a"}
+              team={"Content-oh!"}
+            />
+          </div>
         </div>
       )}
     </Container>

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

@@ -16,22 +16,16 @@ export const Container = styled.div`
     }
   }
 
-  .assignations-container {
-    display: flex;
-    cursor: pointer;
-  }
-
   .asignation-panel {
     background: ${GlobalColors.s2};
     border: 1px solid ${GlobalColors.s3};
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px 8px;
+    padding: 10px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
-    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -59,6 +53,7 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
+      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -71,12 +66,7 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
-        border-top: 1px solid ${GlobalColors.s3};
       }
     }
-
-    .default-asignations-list {
-      padding-top: 10px;
-    }
   }
 `;

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

@@ -3,28 +3,15 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({
-  imagesStatus,
-  activeImage,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-}) => {
+export const TableHeader = ({ headerInfo, activeImage }) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name || "-"}
+        text={activeImage?.imageName}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo
-        status={imagesStatus}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
+      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
     </Container>
   );
 };

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

@@ -7,11 +7,6 @@ export const Container = styled.div`
   padding-bottom: 5px;
   border-bottom: 1px solid ${GlobalColors.s2};
 
-  .input-name-header {
-    overflow: auto;
-    max-width: 40%;
-    white-space: nowrap;
-  }
   .status-asignation-info {
     display: flex;
     align-items: center;

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

@@ -8,18 +8,6 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  index,
-  isRequired,
-  dinamicHeight,
-  inputCols,
-  inputRows,
-  maxChar,
 }) => {
   return (
     <Container
@@ -32,19 +20,7 @@ export const TagAndInput = ({
         inputId={inputId}
         inputType={inputType}
         inputValue={value}
-        index={index}
-        isRequired={isRequired}
         inputPlaceholder={inputPlaceHolder}
-        updatedDescriptions={updatedDescriptions}
-        setUpdatedDescriptions={setUpdatedDescriptions}
-        updatedDatasheets={updatedDatasheets}
-        setUpdatedDatasheets={setUpdatedDatasheets}
-        articleId={articleId}
-        version={version}
-        dinamicHeight={dinamicHeight}
-        inputCols={inputCols}
-        inputRows={inputRows}
-        maxChar={maxChar}
       />
     </Container>
   );

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

@@ -3,43 +3,22 @@ import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
 
-export const FullProductNameHeader = ({
-  headerData,
-  percent,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const FullProductNameHeader = ({ headerData }) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.article?.name}
+        productName={headerData?.name}
         statusType={headerData?.status}
-        percent={percent?.toFixed(0)}
-        priority={headerData?.prio}
-        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
+        percent={headerData?.percent}
+        backgroundColor={headerData?.backgroundColor}
+        priority={headerData?.priority}
+        date={headerData?.date}
       />
       <div className="features-bar-container">
-        <FeaturesBar
-          features={[
-            { feature: "Categoría", value: headerData?.article?.category },
-            { feature: "Prov", value: headerData?.article?.company_name },
-            { feature: "UPC", value: headerData?.article?.upc },
-          ]}
-        />
+        <FeaturesBar features={headerData?.features} />
         <AvatarAndValidation
-          retailers={headerData?.retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-          approveRejectButtons={approveRejectButtons}
-          sendToFacilitator={sendToFacilitator}
-          auditorAssigned={auditorAssigned}
-          userAssigned={userAssigned}
         />
       </div>
     </Container>