contentoh-components-library 21.2.84 → 21.2.85

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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,551 @@
+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 default function 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={
+                <div className="container">
+                  <label className="label-nameUser">
+                    {users[item.userId].name}
+                  </label>
+                </div>
+              }
+            />
+          )}
+
+          {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,
+          }))
+        }
+      />
+    </>
+  );
+}