@zauru-sdk/components 1.0.12 → 1.0.14

package/src/Chat/ChatLayout.tsx

@@ -0,0 +1,133 @@
+import React, { useRef, useState } from "react";
+import { TextField } from "../Form";
+import { Form } from "@remix-run/react";
+import { FormDocumentType } from "@zauru-sdk/types";
+import { LoadingInputSkeleton } from "src";
+import {
+  AttachmentIconSVG,
+  SendMessageIcon,
+  SpinnerSvg,
+} from "@zauru-sdk/icons";
+
+interface ChatLayoutProps {
+  children?: React.ReactNode;
+  sendingMessage?: boolean;
+  formConfig?: {
+    document_type: FormDocumentType;
+    form_id: number;
+    document_id: number;
+    id_number?: string;
+    reference?: string;
+    attachmentFieldId: number;
+    messageFieldId: number;
+  };
+}
+
+const ChatLayout: React.FC<ChatLayoutProps> = ({
+  children,
+  sendingMessage = false,
+  formConfig = undefined,
+}) => {
+  const refAttachment = useRef<HTMLInputElement>(null);
+  const [formValues, setFormValues] = useState<{ image: any }>({ image: null });
+
+  const handleAttachmentClick = () => {
+    if (refAttachment.current) {
+      refAttachment.current.click();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]">
+        {children}
+      </div>
+      <Form id="formRef" encType="multipart/form-data" method="post">
+        {formConfig ? (
+          <>
+            <TextField
+              hidden
+              name="reference"
+              defaultValue={formConfig.reference ?? ""}
+            />
+            <TextField
+              hidden
+              name="form_id"
+              defaultValue={formConfig.form_id}
+            />
+            <TextField
+              hidden
+              name="document_id"
+              defaultValue={formConfig.document_id}
+            />
+            <TextField
+              hidden
+              name="document_type"
+              defaultValue={formConfig.document_type}
+            />
+            <TextField
+              hidden
+              name="id_number"
+              defaultValue={formConfig?.id_number ?? ""}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+        <div className="mt-4 flex">
+          {sendingMessage ? (
+            <LoadingInputSkeleton />
+          ) : (
+            <input
+              name={`message${
+                formConfig?.messageFieldId
+                  ? `_${formConfig?.messageFieldId}`
+                  : ""
+              }`}
+              type="text"
+              placeholder="Escribe un mensaje..."
+              className="form-input px-4 py-2 border border-gray-300 rounded-l-lg grow"
+            />
+          )}
+          <button
+            onClick={handleAttachmentClick}
+            className={`${
+              formValues?.image ? "bg-blue-500" : ""
+            } hover:bg-blue-700 text-white font-bold py-2 px-4`}
+            type="button"
+          >
+            <AttachmentIconSVG />
+          </button>
+          <button
+            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg"
+            type="submit"
+            name="action"
+            value="sendMessage"
+          >
+            {sendingMessage ? <SpinnerSvg /> : <SendMessageIcon />}
+          </button>
+        </div>
+        <input
+          ref={refAttachment}
+          hidden
+          name={`attachment${
+            formConfig?.attachmentFieldId
+              ? `_${formConfig?.attachmentFieldId}`
+              : ""
+          }`}
+          type="file"
+          accept=".jpg, .png, .jpeg, .png"
+          onChange={(e) => {
+            if (e.target.value && e.target.value !== "") {
+              setFormValues({ ...formValues, image: e.target.value });
+            } else {
+              setFormValues({ ...formValues, image: null });
+            }
+          }}
+        />
+      </Form>
+    </div>
+  );
+};
+
+export default ChatLayout;

package/src/Chat/ChatMessageHistory.tsx

@@ -0,0 +1,142 @@
+import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
+import { useState, useEffect, useRef } from "react";
+
+type Props = {
+  author: string;
+  content: string;
+  date?: string;
+  onLike?: (like: boolean) => void;
+  onUpdateComment?: (text: string, itsNew?: boolean) => void;
+  id: string;
+  commentOwner?: boolean;
+  imageLink?: string;
+};
+
+export const ChatMessageHistory = (props: Props) => {
+  const {
+    author,
+    content,
+    onLike,
+    onUpdateComment,
+    id,
+    commentOwner = false,
+    date,
+    imageLink,
+  } = props;
+
+  const initials = author ? author[0].toUpperCase() : "A";
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updatedContent, setUpdatedContent] = useState(content);
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [shouldPulse, setShouldPulse] = useState(false);
+
+  useEffect(() => {
+    if (isUpdating && textAreaRef.current) {
+      textAreaRef.current.style.height = "auto";
+      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+      textAreaRef.current.focus();
+    }
+  }, [isUpdating]);
+
+  // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+  useEffect(() => {
+    // Activar la animación
+    setShouldPulse(true);
+
+    // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+    const timer = setTimeout(() => {
+      setShouldPulse(false);
+    }, 15000); // Tiempo total de la animación
+
+    // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+    return () => clearTimeout(timer);
+  }, [isUpdating]);
+
+  const handleUpdate = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target.value.length <= 254) {
+      setUpdatedContent(e.target.value);
+    }
+  };
+
+  const handleUpdateClick = () => {
+    if (isUpdating) {
+      if (textAreaRef.current) {
+        textAreaRef.current.blur();
+      }
+      //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+    }
+    setIsUpdating(!isUpdating);
+  };
+
+  return (
+    <div className="p-1 rounded-xl flex items-center space-x-4 relative">
+      {commentOwner && (
+        <div className="absolute top-2 right-2">
+          <button
+            onClick={handleUpdateClick}
+            className={`${shouldPulse ? "animate-custom-pulse" : ""}`}
+          >
+            {isUpdating ? <CheckIconSVG /> : <PencilSvg />}
+          </button>
+        </div>
+      )}
+      <div
+        className={`w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+      >
+        {initials}
+      </div>
+      <div className="flex flex-col justify-between h-full w-[92%]">
+        <div>
+          <div className="flex flex-row space-x-2">
+            <div className="text-xl font-medium text-black">{author}</div>
+            <div className="text-xl font-medium text-gray-500">
+              {date && <> - {date}</>}
+            </div>
+          </div>
+          {isUpdating ? (
+            <textarea
+              ref={textAreaRef}
+              className="bg-gray-100 rounded p-2 w-full resize-none"
+              value={updatedContent}
+              onChange={handleUpdate}
+              maxLength={254}
+              placeholder="Deja tus buenos deseos..."
+            />
+          ) : (
+            <p className="text-gray-500">{updatedContent}</p>
+          )}
+        </div>
+        <div className="flex justify-end items-center">
+          <button onClick={() => {}}>
+            <></>
+          </button>
+        </div>
+      </div>
+      {imageLink && (
+        <div
+          className={`w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+        >
+          <div
+            onClick={() => {
+              return window.open(imageLink, "_blank");
+            }}
+          >
+            <img
+              src={imageLink}
+              alt={"IMG_CHAT"}
+              className={`h-48 w-48 inline mr-1 pb-1`}
+              style={{
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none",
+                backgroundColor: "transparent",
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Chat/index.ts

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

package/src/ConnectionState/ConnectionState.tsx

@@ -0,0 +1,29 @@
+import { useIsOnline } from "@zauru-sdk/hooks";
+
+const ConnectionState = () => {
+  const isOnline = useIsOnline();
+
+  // Definir estilos
+  const styles = {
+    container: {
+      padding: "10px",
+      borderRadius: "5px",
+      backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
+      color: isOnline ? "#155724" : "#721c24",
+      fontWeight: "bold",
+    },
+    text: {
+      fontSize: "16px",
+      margin: 0,
+    },
+  };
+
+  // Renderizar el estado de conexión
+  return (
+    <div style={styles.container}>
+      <p style={styles.text}>{isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐"}</p>
+    </div>
+  );
+};
+
+export default ConnectionState;

package/src/ConnectionState/index.tsx

@@ -0,0 +1 @@
+export * from "./ConnectionState";

package/src/DynamicTable/BasicPrintDynamicTable.tsx

@@ -0,0 +1,73 @@
+import { isNumeric } from "@zauru-sdk/common";
+import { GenericDynamicTableColumn } from "@zauru-sdk/types";
+
+//TABLA PARA LA IMPRESION:
+export const BasicTableHTML = (props: {
+  data: { [key: string]: string }[];
+  headers: GenericDynamicTableColumn[];
+  footer: { [key: string]: string };
+}) => {
+  const { data, footer, headers } = props;
+  return (
+    <table style={{ borderCollapse: "collapse", width: "100%" }}>
+      <thead>
+        <tr>
+          {headers?.map((titulo, index) => (
+            <th
+              key={index}
+              style={{
+                border: "1px solid black",
+                padding: "10px",
+                textAlign: "center",
+                whiteSpace: "normal",
+              }}
+            >
+              {titulo.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data?.map((fila, index) => (
+          <tr key={index}>
+            {headers?.map((titulo, index) => (
+              <td
+                key={index}
+                style={{
+                  border: "1px solid black",
+                  padding: "1px",
+                  textAlign: "center",
+                  whiteSpace: "normal",
+                  fontSize: isNumeric((fila as any)[titulo.name])
+                    ? "2em"
+                    : "1em",
+                }}
+              >
+                {(fila as any)[titulo.name]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+      <tfoot>
+        <tr>
+          {headers?.map((titulo, index) => (
+            <td
+              key={index}
+              style={{
+                padding: "10px",
+                textAlign: "center",
+                whiteSpace: "normal",
+                fontSize: isNumeric((footer as any)[titulo.name])
+                  ? "2em"
+                  : "1em",
+              }}
+            >
+              {(footer as any)[titulo.name]}
+            </td>
+          ))}
+        </tr>
+      </tfoot>
+    </table>
+  );
+};

package/src/DynamicTable/DynamicPrintTable.tsx

@@ -0,0 +1,290 @@
+import React, { useEffect, useCallback, useState, type ReactNode } from "react";
+import { TextFieldWithoutValidation } from "src";
+import { SelectFieldWithoutValidation } from "src";
+import type { SingleValue } from "react-select";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { SelectFieldOption } from "@zauru-sdk/types";
+
+export type TableStateItem = {
+  item_id: string | undefined;
+  quantity: number | undefined;
+};
+
+export type FormatedItem = {
+  label: string;
+  value: number;
+  template: string;
+};
+
+type Props = {
+  name: string;
+  formName?: string;
+  className?: string;
+  items: FormatedItem[];
+  onChange?: (tableState?: TableStateItem[]) => void;
+  forwardedRef?: React.RefObject<{
+    insertItems: (items: FormatedItem[]) => void;
+    getTableState: (
+      updatedData?: ReactNode[][]
+    ) => TableStateItem[] | undefined;
+  }>;
+};
+
+const errorAnimation = {
+  hidden: { opacity: 0, y: -10 },
+  visible: { opacity: 1, y: 0 },
+};
+
+const DynamicPrintTable = ({ forwardedRef, ...props }: Props) => {
+  const { items, onChange, className } = props;
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+
+  const createItemSelect = (
+    rowIndex: number,
+    defaultValue?: SelectFieldOption
+  ) => (
+    <SelectFieldWithoutValidation
+      key={rowIndex}
+      name="item_select"
+      isClearable
+      onChange={(value: SingleValue<SelectFieldOption>) => {
+        const selectedItem = items?.find((x) => x.value === value?.value);
+        updateRow(rowIndex, selectedItem);
+      }}
+      options={items}
+      defaultValue={defaultValue}
+    />
+  );
+
+  const createItemQuantity = (rowIndex: number, defaultValue?: number) => (
+    <TextFieldWithoutValidation
+      key={rowIndex}
+      name="item_quantity"
+      type="number"
+      integer
+      defaultValue={defaultValue ?? 1}
+      min={1}
+      onChange={(value: string) => {
+        updateRow(rowIndex, undefined, Number(value));
+      }}
+    />
+  );
+
+  const createTemplateName = (rowIndex: number, defaultValue?: string) => (
+    <div key={rowIndex}>
+      {defaultValue != "" ? defaultValue : "No hay etiqueta"}
+    </div>
+  );
+
+  const createRow = (
+    rowIndex: number,
+    item?: FormatedItem,
+    quantity?: number
+  ) => {
+    const itemCreated = createItemSelect(rowIndex, item ?? undefined);
+    const quantityCreated = createItemQuantity(rowIndex, quantity ?? 1);
+    const templateCreated = createTemplateName(
+      rowIndex,
+      item ? item.template : "Seleccione un item para visualizar su etiqueta."
+    );
+    return [itemCreated, quantityCreated, templateCreated];
+  };
+
+  const [tableData, setTableData] = useState<ReactNode[][] | undefined>([]);
+  const [isInitialItemAdded, setIsInitialItemAdded] = useState<boolean>(false);
+
+  const insertItems = useCallback(
+    (newItems: FormatedItem[]) => {
+      setTableData((prevData) => [
+        ...(prevData ?? []),
+        ...newItems.map((item, index) => {
+          const rowIndex = (prevData?.length ?? 0) + index;
+          const [itemCreated, quantityCreated, templateCreated] = createRow(
+            rowIndex,
+            item
+          );
+          updateRow(rowIndex, item, 1);
+          return [itemCreated, quantityCreated, templateCreated];
+        }),
+      ]);
+    },
+    [items]
+  );
+
+  const getTableState = (temp?: ReactNode[][]) => {
+    const updatedData = temp ?? tableData;
+    const tableState = updatedData?.map((rowData) => {
+      const firstElement = rowData[0];
+      const item_id = React.isValidElement(firstElement)
+        ? firstElement.props.defaultValue?.value
+        : undefined;
+
+      const secondElement = rowData[1];
+      const quantity = React.isValidElement(secondElement)
+        ? secondElement.props.defaultValue
+        : undefined;
+
+      return {
+        item_id,
+        quantity,
+      } as TableStateItem;
+    });
+    return tableState;
+  };
+
+  const updateRow = (
+    rowIndex: number,
+    item?: FormatedItem,
+    quantity?: number
+  ) => {
+    setTableData((prevData) => {
+      const updatedData = prevData?.map((_, index) => {
+        if (index === rowIndex) {
+          const firstElement = prevData[index][0];
+          const selectedItem =
+            item ??
+            (React.isValidElement(firstElement)
+              ? items?.find(
+                  (x) => x.value === firstElement.props.defaultValue?.value
+                )
+              : undefined);
+
+          const secondElement = prevData[index][1];
+          const newQuantity = quantity
+            ? quantity
+            : React.isValidElement(secondElement)
+            ? secondElement.props.defaultValue
+            : undefined;
+
+          return createRow(rowIndex, selectedItem, newQuantity);
+        } else {
+          return prevData[index];
+        }
+      });
+
+      if (onChange) {
+        const tableState = getTableState(updatedData);
+
+        onChange(tableState);
+      }
+
+      return updatedData;
+    });
+  };
+
+  const addRow = () => {
+    setTableData((prevData) => [
+      ...(prevData ?? []),
+      createRow(prevData?.length ?? 0),
+    ]);
+  };
+
+  const removeRow = (rowIndex: number) => {
+    setTableData((prevData) =>
+      prevData?.filter((_, index) => index !== rowIndex)
+    );
+  };
+
+  React.useImperativeHandle(forwardedRef, () => ({
+    insertItems,
+    getTableState,
+  }));
+
+  const pastelGrayBackground = {
+    backgroundColor: "#B69E99",
+  } as React.CSSProperties;
+
+  const renderHeader = () => (
+    <tr style={{ ...pastelGrayBackground }}>
+      <th className="text-left align-middle p-2">Item</th>
+      <th className="text-left align-middle p-2">Cantidad</th>
+      <th className="text-left align-middle p-2">Etiqueta</th>
+      <th className="w-16"></th>
+    </tr>
+  );
+
+  const renderRow = (rowData: ReactNode[], rowIndex: number) => (
+    <tr key={rowIndex}>
+      {rowData.map((cellData, cellIndex) => (
+        <td key={cellIndex} className="align-middle p-2">
+          {cellData}
+        </td>
+      ))}
+      {rowIndex !== 0 && (
+        <td className="align-middle w-16">
+          <button
+            className="bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2"
+            onClick={(
+              event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+            ) => {
+              event.preventDefault();
+              event.stopPropagation();
+              removeRow(rowIndex);
+            }}
+            type="button"
+          >
+            x
+          </button>
+        </td>
+      )}
+    </tr>
+  );
+
+  const renderRows = () => {
+    return tableData?.map((rowData, rowIndex) => renderRow(rowData, rowIndex));
+  };
+
+  const error = formValidations[props.formName ?? "-1"][props.name];
+  const borderColor = error ? "border-red-500" : "border-transparent";
+
+  useEffect(() => {
+    if (!isInitialItemAdded && items?.length > 0) {
+      insertItems([items[0]]);
+      setIsInitialItemAdded(true);
+    }
+  }, [isInitialItemAdded, items, insertItems]);
+
+  return (
+    <div
+      className={`${className} ${borderColor} border-2`}
+      style={{ overflowX: "auto" }}
+    >
+      {!!error && <div className="text-red-500 text-sm mb-2">{error}</div>}
+      <table className="w-full">
+        <thead>{renderHeader()}</thead>
+        <tbody>{renderRows()}</tbody>
+        <tfoot>
+          <tr>
+            <td className="align-middle">
+              <button
+                className="bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded"
+                onClick={(
+                  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                ) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  addRow();
+                }}
+                type="button"
+              >
+                +
+              </button>
+            </td>
+            <td colSpan={2}>
+              Total de etiquetas a imprimir:{" "}
+              {tableData?.reduce((sum, x) => {
+                const val = React.isValidElement(x[1])
+                  ? x[1]?.props?.defaultValue
+                  : undefined;
+                if (!sum) return val;
+                return sum + val;
+              }, 0)}
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+};
+
+export default React.forwardRef(DynamicPrintTable);