contentoh-components-library 21.3.3 → 21.3.5

package/src/components/organisms/Chat/ContainerItems/ContainerItems.stories.js

@@ -1,142 +0,0 @@
-import { ContainerItems } from "./index";
-
-export default {
-  title: "Components/organisms/Chat/ContainerItems",
-  component: ContainerItems,
-};
-
-const Template = (args) => <ContainerItems {...args} />;
-
-// items de prueba
-const items = {
-  1: {
-    date: "2022-10-13 10:10:00",
-    type: "message",
-    value: "mensaje 1 user10",
-    userId: 10,
-  },
-  2: {
-    date: "2022-10-12 13:19:00",
-    type: "message",
-    value: "mensaje 1 user20",
-    userId: 20,
-  },
-  3: {
-    date: "2022-10-12 12:33:00",
-    type: "comment",
-    value: "comentario 1 user20",
-    userId: 20,
-  },
-  4: {
-    date: "2022-10-12 11:56:00",
-    type: "comment",
-    value: "comentario 1 user30",
-    userId: 30,
-  },
-  5: {
-    date: "2022-10-12 8:41:00",
-    type: "statusService",
-    value: "La sección imágenes ha sido validada",
-    userId: 20,
-  },
-  6: {
-    date: "2022-10-11 14:58:00",
-    type: "img",
-    value: "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg",
-    userId: 10,
-  },
-  7: {
-    date: "2022-10-10 16:12:00",
-    type: "img",
-    value: `84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg`,
-    userId: 30,
-  },
-  8: {
-    date: "2022-10-10 15:55:00",
-    type: "statusArticle",
-    value: "El estatus cambio a Aprobado Coordinador",
-    userId: 20,
-  },
-  9: {
-    date: "2022-10-10 9:15:00",
-    type: "comment",
-    value: "comentario 1 user10",
-    userId: 10,
-  },
-  10: {
-    date: "2022-10-9 6:24:00",
-    type: "file",
-    value:
-      "84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf",
-    userId: 10,
-  },
-  11: {
-    date: "2022-10-9 4:29:00",
-    type: "file",
-    value: "84300/1/chat/noExiste.docx",
-    userId: 30,
-  },
-  12: {
-    date: "2022-10-9 2:39:00",
-    type: "file",
-    value: "84300/1/chat/noExiste2.xlsx",
-    userId: 20,
-  },
-  13: {
-    date: "2022-10-8 23:46:00",
-    type: "file",
-    value: "84300/1/chat/noExiste3.csv",
-    userId: 20,
-  },
-  14: {
-    date: "2022-10-8 23:22:00",
-    type: "file",
-    value: "84300/1/chat/noExiste4.pptx",
-    userId: 30,
-  },
-  15: {
-    date: "2022-10-8 21:01:00",
-    type: "file",
-    value: "84300/1/chat/noExiste5.zip",
-    userId: 10,
-  },
-  16: {
-    date: "2022-10-8 20:11:00",
-    type: "file",
-    value: "84300/1/chat/noExiste6.txt",
-    userId: 10,
-  },
-};
-
-// users de prueba
-const users = {
-  10: { name: "Pedro Castillo", companyId: 100 },
-  20: { name: "Ana Carranza", companyId: 200 },
-  30: { name: "Javier Aguayo", companyId: 100 },
-};
-
-// companies de prueba multiple
-const companies = {
-  100: { name: "Fábrica", statusChat: "enabled" },
-  200: { name: "Proveedor", statusChat: "current" },
-};
-
-export const exampleChat = Template.bind({});
-exampleChat.args = {
-  chatData: {
-    items,
-    users,
-    companies,
-  },
-  currentUser: { id: 10, companyId: 100 },
-};
-
-export const emptyChat = Template.bind({});
-emptyChat.args = {
-  chatData: {
-    items: [],
-    users: [],
-    companies: [],
-  },
-  currentUser: { id: 10, companyId: 100 },
-};

package/src/components/organisms/Chat/ContainerItems/index.js

@@ -1,549 +0,0 @@
-import { Container } from "./styles";
-import { useEffect, useState } from "react";
-import { getProfilePicture } from "../../../../global-files/data";
-import { ImageTooltip } from "../../../molecules/ImageTooltip";
-import {
-  decodeJSON,
-  getFullDate,
-  getImageURL,
-  getResizeImgHeight,
-  getTime,
-} from "../../../../global-files/utils";
-import {
-  faUser as IconUser,
-  faImage as IconImage,
-  faRedoAlt as IconReload,
-} from "@fortawesome/free-solid-svg-icons";
-import { CustomIcon } from "../../../atoms/CustomIcon";
-import { ButtonV2 } from "../../../atoms/ButtonV2";
-import { ButtonDownloadFile } from "../../../molecules/ButtonDownloadFile";
-import { Modal } from "../../Modal";
-import { Tooltip } from "../../../atoms/Tooltip";
-import { Slide, Zoom } from "@mui/material";
-import { useRef } from "react";
-import { ImagePreview } from "../../../atoms/ImagePreview";
-
-export const ContainerItems = (props) => {
-  const {
-    items /* [
-      { id , date , type , value , userId } ,
-      ...
-    ] */,
-    users /* {
-      id: { name , companyId } ,
-      ...
-    } */,
-    currentUser, // { id , companyId , ... }
-    activeCompanyId, // number
-    chatType, // string
-    showBtnLoadMore, // boolean
-    onClickBtnLoadMore, // () => {}
-  } = props;
-  const [scrollHeight, setScrollHeight] = useState(0);
-  const [btnLoadMoreLoading, setBtnLoadMoreLoading] = useState(false);
-  const [customItems, setCustomItems] = useState([]);
-  const [modalAlert, setModalAlert] = useState({
-    show: false,
-    title: "",
-    message: "",
-  });
-  const containerList = useRef(null);
-
-  /*
-  useEffect(() => {
-    //console.log("new observer");
-    const observer = new MutationObserver((mutationList) => {
-      updateScroll();
-    });
-    const itemsList = document.getElementById("ulItems");
-    const observerOptions = {
-      attributes: false,
-      childList: true,
-      subtree: false,
-      characterData: false,
-      attributeOldValue: false,
-      characterDataOldValue: false,
-    };
-    observer.observe(itemsList, observerOptions);
-
-    return () => {
-      observer.disconnect();
-      //console.log("remove observer");
-    };
-  }, [scrollHeight]);
-  */
-
-  useEffect(() => {
-    if (!items) return;
-    if (chatType === "merchant_product") renderItems();
-    else if (chatType === "order_product") renderItems();
-    else if (chatType === "ticket") renderItemsTicket();
-    else setCustomItems([]);
-  }, [items]);
-
-  const updateScroll = () => {
-    const containerScroll = document.getElementById("containerItems");
-    if (containerScroll) {
-      const newScrollHeight = containerScroll.scrollHeight + 15;
-      const positionScroll = newScrollHeight - scrollHeight;
-
-      /*
-      console.log("========");
-      console.log("old:", scrollHeight);
-      console.log("new:", newScrollHeight);
-      console.log("pos:", positionScroll);
-      console.log("========");
-      */
-
-      if (newScrollHeight !== scrollHeight) {
-        containerScroll.scrollTop = positionScroll;
-        setScrollHeight(newScrollHeight);
-      }
-    }
-  };
-
-  const renderGrayLabel = (text, key) => {
-    return (
-      <Zoom
-        in={true}
-        timeout={600}
-        container={containerList.current}
-        key={key ?? ""}
-      >
-        <li className={`label-gray`}>
-          <div className="separator"></div>
-          <label>{text}</label>
-          <div className="separator"></div>
-        </li>
-      </Zoom>
-    );
-  };
-
-  const renderStatusService = (text, key) => {
-    return (
-      <Zoom
-        in={true}
-        timeout={600}
-        container={containerList.current}
-        key={key ?? ""}
-      >
-        <div className="label-statusService">{text}</div>
-      </Zoom>
-    );
-  };
-
-  const renderStatusArticle = (text, key) => {
-    return (
-      <Zoom
-        in={true}
-        timeout={600}
-        container={containerList.current}
-        key={key ?? ""}
-      >
-        <div className="label-statusArticle">{text}</div>
-      </Zoom>
-    );
-  };
-
-  const renderStatusTicket = (item) => {
-    return <label className="item-statusTicket">{item.value}</label>;
-  };
-
-  const renderStatusTicketNeutral = (item) => {
-    return (
-      <Tooltip
-        componentTooltip={<label>{users[item.userId].name}</label>}
-        className="itemStatus ticket"
-        position={"topCenter"}
-        addArrow={false}
-        transitionType={"zoom"}
-        followCursor={false}
-      >
-        {item.value}
-      </Tooltip>
-    );
-  };
-
-  const renderMessage = (item) => {
-    return <label className="item-message"> {item.value} </label>;
-  };
-
-  const renderComment = (item) => {
-    return <label className="item-comment"> {item.value} </label>;
-  };
-
-  const renderImg = (item) => {
-    const value = decodeJSON(item.value);
-    const originalImgURL = `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value.key}`;
-    // dimensiones de la imagen a mostrar en el chat
-    const imgHeight = getResizeImgHeight(
-      value.width ?? 400,
-      value.height ?? 400,
-      400
-    );
-    //console.log("newHeight imgURL:", imgHeight);
-    const imgURL = getImageURL(
-      process.env.REACT_APP_IMAGES_BUCKET,
-      value.key,
-      400,
-      imgHeight
-    );
-    // dimensiones de la imagen a mostrar en modal full
-    const modalImgHeight = getResizeImgHeight(
-      value.width ?? screen.width,
-      value.height ?? screen.height,
-      screen.width
-    );
-    //console.log("height full:", modalImgHeight);
-    const modalImgURL = getImageURL(
-      process.env.REACT_APP_IMAGES_BUCKET,
-      value.key,
-      screen.width,
-      modalImgHeight
-    );
-
-    return (
-      <div className="item-img">
-        <ImagePreview
-          className="container-ImagePreview"
-          width={"100%"}
-          sizeLoading={35}
-          colorLoading={undefined}
-          imgURL={imgURL}
-          modalImgURL={modalImgURL}
-          downloadImgURL={originalImgURL}
-          imageName={value.name}
-          showButtonDownload={true}
-          componentDefault={
-            <Tooltip
-              componentTooltip={<label>{value.name}</label>}
-              className="label-nameImg"
-              position={"topCenter"}
-              addArrow={false}
-              transitionType={"zoom"}
-              followCursor={false}
-            >
-              <CustomIcon
-                className="iconDefaultImg"
-                type={"white"}
-                size={60}
-                borderType={"rectangle"}
-                icon={IconImage}
-              />
-            </Tooltip>
-          }
-          componentDefaultModal={
-            <Tooltip
-              componentTooltip={<label>{value.name}</label>}
-              className="label-nameImgModal"
-              position={"topCenter"}
-              addArrow={false}
-              transitionType={"zoom"}
-              followCursor={false}
-            >
-              <CustomIcon
-                className="iconDefaultImgModal"
-                type={"white"}
-                size={100}
-                borderType={"rectangle"}
-                icon={IconImage}
-              />
-            </Tooltip>
-          }
-        />
-      </div>
-    );
-    /*
-    <Tooltip
-          componentTooltip={<label>{value.name}</label>}
-          className="label-nameFileShort"
-          position={"topCenter"}
-          addArrow={false}
-          transitionType={"zoom"}
-          followCursor={false}
-        >
-          {value.name}
-        </Tooltip>
-         */
-  };
-
-  const renderFile = (item, ownMessage) => {
-    const value = decodeJSON(item.value);
-    const url = `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value.key}`;
-
-    return (
-      <div className="item-file">
-        <ButtonDownloadFile
-          className="btnDownloadFileItem"
-          size={22}
-          type={ownMessage ? "black" : "white"}
-          transparent
-          url={url}
-          onDownload={(error) => {
-            error &&
-              setModalAlert((prev) => ({
-                show: true,
-                title: error.message,
-                message: error.details,
-              }));
-          }}
-        />
-        <Tooltip
-          componentTooltip={<label>{value.name}</label>}
-          className="label-nameFileShort"
-          position={"topCenter"}
-          addArrow={false}
-          transitionType={"zoom"}
-          followCursor={false}
-        >
-          {value.name}
-        </Tooltip>
-      </div>
-    );
-  };
-
-  const getUserCreatedItem = (ownMessage, item, lastUserId) => {
-    return (
-      <Slide
-        id={"itemScroll"}
-        direction={ownMessage ? "left" : "right"}
-        in={true}
-        timeout={500}
-        container={containerList.current}
-        key={"item-" + item.id}
-      >
-        <li
-          className={
-            (ownMessage ? "own-message " : "") +
-            (lastUserId == item.userId ? "sameUser" : "")
-          }
-        >
-          {/* img del user */}
-          {lastUserId !== item.userId && (
-            <ImageTooltip
-              className={"container-imgUser"}
-              sizeLoading={25}
-              colorLoading={undefined}
-              src={getProfilePicture(item.userId, 34, 34)}
-              componentDefault={
-                <CustomIcon
-                  className="icon-imgUser"
-                  type={"whiteS2"}
-                  size={17}
-                  borderType={"circle"}
-                  icon={IconUser}
-                />
-              }
-              classNameTooltip={"tooltip-imgUser"}
-              componentTooltip={
-                <label className="label-nameUser">
-                  {users[item.userId].name}
-                </label>
-              }
-            />
-          )}
-
-          {item.type === "message"
-            ? renderMessage(item)
-            : item.type === "comment"
-            ? renderComment(item)
-            : item.type === "img"
-            ? renderImg(item)
-            : item.type === "file"
-            ? renderFile(item, ownMessage)
-            : item.type === "statusTicket"
-            ? renderStatusTicket(item)
-            : null}
-
-          <label className="label-time">{getTime(item.date)}</label>
-        </li>
-      </Slide>
-    );
-  };
-
-  const getItemNeutral = (item) => {
-    return (
-      <Zoom
-        in={true}
-        timeout={600}
-        container={containerList.current}
-        key={"item-" + item.id}
-      >
-        <li className={"itemNeutral"}>
-          {item.type === "statusTicket"
-            ? renderStatusTicketNeutral(item)
-            : null}
-        </li>
-      </Zoom>
-    );
-  };
-
-  const renderItems = () => {
-    let jsxItems = [];
-    let date = undefined;
-    let countDate = 1;
-    for (const item of items) {
-      // manejo de las etiquetas fechas
-      if (!date) {
-        date = getFullDate(new Date(item.date));
-      } else {
-        let newDate = getFullDate(new Date(item.date));
-        if (newDate !== date) {
-          jsxItems.push(renderGrayLabel(date, `itemDate-${countDate++}`));
-          date = newDate;
-        }
-      }
-
-      // elementos que van alineados al centro
-      switch (item.type) {
-        case "statusArticle":
-          jsxItems.push(renderStatusArticle(item.value, `item-${item.id}`));
-          continue;
-        case "statusService":
-          jsxItems.push(renderStatusService(item.value, `item-${item.id}`));
-          continue;
-      }
-
-      // acomodo del item (left o right)
-      let ownMessage = false;
-      // CHAT MERCHANT ARTICLE
-      if (chatType === "merchant_product") {
-        if (currentUser.companyId == users[item.userId].companyId) {
-          ownMessage = true;
-        }
-      }
-      // CHAT ORDER ARTICLE
-      else if (chatType === "order_product") {
-        if (currentUser.companyId == users[item.userId].companyId) {
-          if (activeCompanyId && activeCompanyId == currentUser.companyId) {
-            if (item.userId == currentUser.id) {
-              ownMessage = true;
-            }
-          } else {
-            ownMessage = true;
-          }
-        }
-      }
-
-      // renderizar tipo de item
-      jsxItems.push(getUserCreatedItem(ownMessage, item));
-    }
-    if (date)
-      jsxItems.push(
-        renderGrayLabel(date, `itemDate-${countDate}`, "label-date")
-      );
-    setCustomItems(jsxItems);
-  };
-
-  const renderItemsTicket = () => {
-    let jsxItems = [];
-    let date = undefined;
-    let countDate = 1;
-    let lastUserId = undefined;
-    //console.log("isUserTech:", currentUser.isUserTech);
-
-    // recorrido de los items (del mas viejo al mas reciente)
-    for (let index = items.length - 1; index >= 0; index--) {
-      const item = items[index];
-      // manejo de las etiquetas fechas
-      if (!date) {
-        date = getFullDate(new Date(item.date));
-        jsxItems.push(renderGrayLabel(date, `itemDate-${countDate++}`));
-        lastUserId = undefined;
-      } else {
-        let newDate = getFullDate(new Date(item.date));
-        if (newDate !== date) {
-          jsxItems.push(renderGrayLabel(newDate, `itemDate-${countDate++}`));
-          date = newDate;
-          lastUserId = undefined;
-        }
-      }
-
-      // elementos que van alineados al centro
-      /*
-      switch (item.type) {
-        case "statusTicket":
-          jsxItems.push(getItemNeutral(item));
-          lastUserId = undefined;
-          continue;
-      }
-      */
-
-      // acomodo del item (left o right)
-      let ownMessage = false;
-      // user tech
-      if (currentUser.isUserTech) {
-        if (users[item.userId].isUserTech) ownMessage = true;
-      }
-      // user normal
-      else {
-        if (!users[item.userId].isUserTech) {
-          if (currentUser.companyId == users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } else if (currentUser.id == item.userId) {
-          ownMessage = true;
-        }
-      }
-
-      // renderizar tipo de item
-      //console.log(lastUserId + "<>" + item.userId);
-      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId));
-      lastUserId = item.userId;
-    }
-
-    setCustomItems(jsxItems);
-  };
-
-  return (
-    <>
-      <Container id={"containerItems"}>
-        <div className="btn-loadMore">
-          {showBtnLoadMore && (
-            <ButtonV2
-              className="container-btnLoadMore"
-              type={"purple"}
-              label={"cargar más"}
-              size={10}
-              borderType="oval"
-              icon={IconReload}
-              iconPosition="start"
-              isLoading={btnLoadMoreLoading}
-              onClick={async (event) => {
-                setBtnLoadMoreLoading(true);
-                if (onClickBtnLoadMore) {
-                  const responseError = await onClickBtnLoadMore();
-                  if (responseError) {
-                    setModalAlert({
-                      show: true,
-                      title: responseError.title,
-                      message: responseError.message,
-                    });
-                  }
-                }
-                setBtnLoadMoreLoading(false);
-              }}
-            />
-          )}
-        </div>
-
-        <ul id="ulItems" ref={containerList}>
-          {customItems}
-        </ul>
-      </Container>
-
-      <Modal
-        show={modalAlert.show}
-        title={modalAlert.title}
-        message={modalAlert.message}
-        icon={"info"}
-        onClickBtnDefault={(event) =>
-          setModalAlert((prev) => ({
-            ...prev,
-            show: false,
-          }))
-        }
-      />
-    </>
-  );
-};