@zauru-sdk/components 2.0.46 → 2.0.47

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -14,10 +14,12 @@ import { LoadingInputSkeleton } from "../Skeletons/index.js";
 import { WithTooltip } from "../WithTooltip/index.js";
 import { TrashSvg } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
+import { ComponentError } from "../Alerts/index.js";
 
 export type FooterColumnConfig = {
   content: React.ReactNode;
   className?: string;
+  name?: string;
 };
 
 type Props = {
@@ -65,6 +67,7 @@ const GenericDynamicTableErrorComponent = ({ name }: { name: string }) => {
     name="invoice_details"
     withoutBg
     editable={!show}
+    searcheables={[{ value: "id_number", label: "No. Contraseña" }]}
     defaultValue={
       invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
     }
@@ -105,7 +108,6 @@ const GenericDynamicTableErrorComponent = ({ name }: { name: string }) => {
     maxRows={2}
   />
  */
-
 export const GenericDynamicTable = (props: Props) => {
   const {
     columns,
@@ -127,412 +129,430 @@ export const GenericDynamicTable = (props: Props) => {
     maxRows,
   } = props;
 
-  const [tableData, setTableData] = useState<RowDataType[]>(defaultValue);
-  const [deletedData, setDeletedData] = useState<RowDataType[]>([]);
-  const [search, setSearch] = useState("");
-  const [filteredTableData, setFilteredTableData] =
-    useState<RowDataType[]>(tableData);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
+  try {
+    const [tableData, setTableData] = useState<RowDataType[]>(defaultValue);
+    const [deletedData, setDeletedData] = useState<RowDataType[]>([]);
+    const [search, setSearch] = useState("");
+    const [filteredTableData, setFilteredTableData] =
+      useState<RowDataType[]>(tableData);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
 
-  useEffect(() => {
-    if (defaultValue.length) {
-      setTableData(defaultValue);
-    }
-  }, []);
+    useEffect(() => {
+      if (defaultValue.length) {
+        setTableData(defaultValue);
+      }
+    }, []);
 
-  useEffect(() => {
-    setFilteredTableData(tableData);
-  }, [tableData]);
+    useEffect(() => {
+      setFilteredTableData(tableData);
+    }, [tableData]);
 
-  useEffect(() => {
-    changeFilteredData();
-  }, [tableData, search]);
+    useEffect(() => {
+      changeFilteredData();
+    }, [tableData, search]);
 
-  const totalPages = () => {
-    return Math.ceil(filteredTableData.length / itemsPerPage);
-  };
+    const totalPages = () => {
+      return Math.ceil(filteredTableData.length / itemsPerPage);
+    };
 
-  const addRow = () => {
-    if (maxRows && tableData.length >= maxRows) {
-      return;
-    }
-    const defs: { [key: string]: any } = {};
-    columns.forEach((x) => {
-      defs[`${x.name}`] =
-        x.type == "label" || x.type == "textField"
-          ? ""
-          : x.type == "selectField"
-          ? 0
-          : x.type == "checkbox"
-          ? false
-          : 0;
-    });
-    setTableData((prevData) => [
-      ...prevData,
-      { id: generateClientUUID(), ...defs },
-    ]);
-  };
+    const addRow = () => {
+      if (maxRows && tableData.length >= maxRows) {
+        return;
+      }
+      const defs: { [key: string]: any } = {};
+      columns.forEach((x) => {
+        defs[`${x.name}`] =
+          x.type == "label" || x.type == "textField"
+            ? ""
+            : x.type == "selectField"
+            ? 0
+            : x.type == "checkbox"
+            ? false
+            : 0;
+      });
+      setTableData((prevData) => [
+        ...prevData,
+        { id: generateClientUUID(), ...defs },
+      ]);
+    };
 
-  const removeRow = (rowId: string) => {
-    const newDeletedData = [...deletedData];
-    const deletedItem = tableData?.find((x) => x.id === rowId);
-    if (deletedItem && !isNaN(deletedItem.id)) {
-      newDeletedData.push(deletedItem);
-    }
-    setDeletedData(newDeletedData);
-    setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
-  };
+    const removeRow = (rowId: string) => {
+      const newDeletedData = [...deletedData];
+      const deletedItem = tableData?.find((x) => x.id === rowId);
+      if (deletedItem && !isNaN(deletedItem.id)) {
+        newDeletedData.push(deletedItem);
+      }
+      setDeletedData(newDeletedData);
+      setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
+    };
 
-  const handleChange = (name: string, value: any, rowId: string) => {
-    setTableData((prevData) => {
-      const updatedData = prevData.map((row) => {
-        if (row.id === rowId) {
-          return { ...row, [name]: value };
-        }
-        return row;
+    const handleChange = (name: string, value: any, rowId: string) => {
+      setTableData((prevData) => {
+        const updatedData = prevData.map((row) => {
+          if (row.id === rowId) {
+            return { ...row, [name]: value };
+          }
+          return row;
+        });
+        onChange && onChange(updatedData);
+        return updatedData;
       });
-      onChange && onChange(updatedData);
-      return updatedData;
-    });
-  };
+    };
 
-  const renderHeader = () => {
-    if (orientation === "horizontal") {
-      return (
-        <tr style={{ ...thCSSProperties }}>
-          {columns.map((column, index) => {
-            const ancho =
-              column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
-            return (
-              <th
-                key={index}
-                className={`text-left align-middle p-2 ${thElementsClassName} ${
-                  column.headerClassName || ""
-                }`}
-                style={{ width: `${ancho}%` }}
-              >
-                {column.label}
-              </th>
-            );
-          })}
-          {editable && <th style={{ width: "4%" }}></th>}
-        </tr>
-      );
-    } else {
-      return null;
-    }
-  };
+    const renderHeader = () => {
+      if (orientation === "horizontal") {
+        return (
+          <tr style={{ ...thCSSProperties }}>
+            {columns.map((column, index) => {
+              const ancho =
+                column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+              return (
+                <th
+                  key={index}
+                  className={`text-left align-middle p-2 ${thElementsClassName} ${
+                    column.headerClassName || ""
+                  }`}
+                  style={{ width: `${ancho}%` }}
+                >
+                  {column.label}
+                </th>
+              );
+            })}
+            {editable && <th style={{ width: "4%" }}></th>}
+          </tr>
+        );
+      } else {
+        return null;
+      }
+    };
 
-  const renderRow = (rowData: RowDataType, index: number) => {
-    if (orientation === "horizontal") {
-      return (
-        <tr
-          key={rowData.id}
-          className={index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""}
-        >
-          {columns.map((column) => renderCell(rowData, column))}
-          {editable && renderDeleteButton(rowData)}
-        </tr>
-      );
-    } else {
-      return columns.map((column) => (
-        <tr
-          key={`${rowData.id}-${column.name}`}
-          className={index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""}
-        >
-          <th
-            className={`text-left align-middle p-2 ${thElementsClassName} ${
-              column.headerClassName || ""
-            }`}
+    const renderRow = (rowData: RowDataType, index: number) => {
+      if (orientation === "horizontal") {
+        return (
+          <tr
+            key={rowData.id}
+            className={
+              index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""
+            }
           >
-            {column.label}
-          </th>
-          {renderCell(rowData, column)}
-          {editable &&
-            column === columns[columns.length - 1] &&
-            renderDeleteButton(rowData)}
-        </tr>
-      ));
-    }
-  };
+            {columns.map((column) => renderCell(rowData, column))}
+            {editable && renderDeleteButton(rowData)}
+          </tr>
+        );
+      } else {
+        return columns.map((column) => (
+          <tr
+            key={`${rowData.id}-${column.name}`}
+            className={
+              index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : ""
+            }
+          >
+            <th
+              className={`text-left align-middle p-2 ${thElementsClassName} ${
+                column.headerClassName || ""
+              }`}
+            >
+              {column.label}
+            </th>
+            {renderCell(rowData, column)}
+            {editable &&
+              column === columns[columns.length - 1] &&
+              renderDeleteButton(rowData)}
+          </tr>
+        ));
+      }
+    };
 
-  const renderCell = (
-    rowData: RowDataType,
-    column: GenericDynamicTableColumn
-  ) => {
-    if (loading) {
-      return (
-        <td
-          key={`${rowData.id}-${column.name}`}
-          className={`align-middle p-1 ${column.cellClassName || ""}`}
-        >
-          <LoadingInputSkeleton />
-        </td>
-      );
-    }
-    const tempVal = rowData[column.name as any];
+    const renderCell = (
+      rowData: RowDataType,
+      column: GenericDynamicTableColumn
+    ) => {
+      if (loading) {
+        return (
+          <td
+            key={`${rowData.id}-${column.name}`}
+            className={`align-middle p-1 ${column.cellClassName || ""}`}
+          >
+            <LoadingInputSkeleton />
+          </td>
+        );
+      }
+      const tempVal = rowData[column.name as any];
+
+      const defaultVal =
+        column.type === "selectField"
+          ? column.options?.find((x) => x.value === tempVal)
+          : tempVal;
+
+      if (column.type === "label") {
+        return (
+          <td
+            key={`${rowData.id}-${column.name}`}
+            className={`align-middle p-1 ${column.cellClassName || ""}`}
+          >
+            <div>{defaultVal}</div>
+          </td>
+        );
+      }
+
+      const FieldComponent =
+        column.type === "textField"
+          ? TextField
+          : column.type === "checkbox"
+          ? CheckBox
+          : SelectField;
 
-    const defaultVal =
-      column.type === "selectField"
-        ? column.options?.find((x) => x.value === tempVal)
-        : tempVal;
+      const setTableValue = (columnName: string, newValue: any) => {
+        handleChange(columnName, newValue, rowData.id);
+      };
 
-    if (column.type === "label") {
       return (
         <td
           key={`${rowData.id}-${column.name}`}
           className={`align-middle p-1 ${column.cellClassName || ""}`}
         >
-          <div>{defaultVal}</div>
+          {column.loadingOptions ? (
+            <LoadingInputSkeleton />
+          ) : (
+            <FieldComponent
+              key={`${rowData.id}-${column.name}`}
+              name={`${rowData.id}-${column.name}`}
+              type={column.textFieldType}
+              integer={!!column.integer}
+              disabled={column.disabled}
+              isClearable
+              onChange={(value: any) => {
+                const sendValue = value?.value ?? value;
+                handleChange(column.name, sendValue, rowData.id);
+                column.onChange &&
+                  column.onChange(rowData, sendValue, setTableValue);
+              }}
+              defaultValue={defaultVal}
+              options={column.options ?? []}
+            />
+          )}
         </td>
       );
-    }
-
-    const FieldComponent =
-      column.type === "textField"
-        ? TextField
-        : column.type === "checkbox"
-        ? CheckBox
-        : SelectField;
-
-    const setTableValue = (columnName: string, newValue: any) => {
-      handleChange(columnName, newValue, rowData.id);
     };
 
-    return (
-      <td
-        key={`${rowData.id}-${column.name}`}
-        className={`align-middle p-1 ${column.cellClassName || ""}`}
-      >
-        {column.loadingOptions ? (
-          <LoadingInputSkeleton />
-        ) : (
-          <FieldComponent
-            key={`${rowData.id}-${column.name}`}
-            name={`${rowData.id}-${column.name}`}
-            type={column.textFieldType}
-            integer={!!column.integer}
-            disabled={column.disabled}
-            isClearable
-            onChange={(value: any) => {
-              const sendValue = value?.value ?? value;
-              handleChange(column.name, sendValue, rowData.id);
-              column.onChange &&
-                column.onChange(rowData, sendValue, setTableValue);
+    const renderDeleteButton = (rowData: RowDataType) => (
+      <td className="align-middle w-16">
+        <WithTooltip text="Eliminar">
+          <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();
+              createModal({
+                title: "¿Está seguro que quiere eliminar este registro?",
+                description:
+                  "Una vez eliminada la información no podrá ser recuperada.",
+              }).then((response) => {
+                if (response === "OK") {
+                  removeRow(rowData.id);
+                }
+              });
             }}
-            defaultValue={defaultVal}
-            options={column.options ?? []}
-          />
-        )}
+            type="button"
+          >
+            <TrashSvg />
+          </button>
+        </WithTooltip>
       </td>
     );
-  };
 
-  const renderDeleteButton = (rowData: RowDataType) => (
-    <td className="align-middle w-16">
-      <WithTooltip text="Eliminar">
-        <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();
-            createModal({
-              title: "¿Está seguro que quiere eliminar este registro?",
-              description:
-                "Una vez eliminada la información no podrá ser recuperada.",
-            }).then((response) => {
-              if (response === "OK") {
-                removeRow(rowData.id);
-              }
-            });
-          }}
-          type="button"
-        >
-          <TrashSvg />
-        </button>
-      </WithTooltip>
-    </td>
-  );
-
-  const renderRows = () => {
-    let mapeable = filteredTableData.slice(
-      (currentPage - 1) * itemsPerPage,
-      currentPage * itemsPerPage
-    );
+    const renderRows = () => {
+      let mapeable = filteredTableData.slice(
+        (currentPage - 1) * itemsPerPage,
+        currentPage * itemsPerPage
+      );
 
-    if (loading) {
-      mapeable = [
-        { id: 1 },
-        { id: 2 },
-        { id: 3 },
-        { id: 4 },
-        { id: 5 },
-        { id: 6 },
-        { id: 7 },
-        { id: 8 },
-        { id: 9 },
-        { id: 10 },
-      ] as RowDataType[];
-    }
+      if (loading) {
+        mapeable = [
+          { id: 1 },
+          { id: 2 },
+          { id: 3 },
+          { id: 4 },
+          { id: 5 },
+          { id: 6 },
+          { id: 7 },
+          { id: 8 },
+          { id: 9 },
+          { id: 10 },
+        ] as RowDataType[];
+      }
 
-    return mapeable.map((rowData, index) => renderRow(rowData, index));
-  };
+      return mapeable.map((rowData, index) => renderRow(rowData, index));
+    };
 
-  const handleChangeSearch = (newSearch: string) => {
-    setSearch(newSearch);
-  };
+    const handleChangeSearch = (newSearch: string) => {
+      setSearch(newSearch);
+    };
 
-  const changeFilteredData = () => {
-    if (search) {
-      const filteredData = tableData.filter((rowData) => {
-        for (const searchable of searcheables) {
-          const column = columns.find((col) => col.name === searchable.value);
-          if (column) {
-            const tempVal = rowData[column.name as any];
-            const defaultVal =
-              column.type === "selectField"
-                ? column.options?.find((x) => x.value === tempVal)?.label
-                : tempVal;
-            if (
-              defaultVal
-                ?.toString()
-                .toLowerCase()
-                .includes(search.toLowerCase())
-            ) {
-              return true;
+    const changeFilteredData = () => {
+      if (search) {
+        const filteredData = tableData.filter((rowData) => {
+          for (const searchable of searcheables) {
+            const column = columns.find((col) => col.name === searchable.value);
+            if (column) {
+              const tempVal = rowData[column.name as any];
+              const defaultVal =
+                column.type === "selectField"
+                  ? column.options?.find((x) => x.value === tempVal)?.label
+                  : tempVal;
+              if (
+                defaultVal
+                  ?.toString()
+                  .toLowerCase()
+                  .includes(search.toLowerCase())
+              ) {
+                return true;
+              }
             }
           }
-        }
-        return false;
-      });
-      setFilteredTableData(filteredData);
-    } else {
-      setFilteredTableData(tableData);
-    }
-  };
+          return false;
+        });
+        setFilteredTableData(filteredData);
+      } else {
+        setFilteredTableData(tableData);
+      }
+    };
 
-  return (
-    <>
-      {name && (
-        <>
-          <GenericDynamicTableErrorComponent name={name} />
-          <input
-            name={name}
-            type="hidden"
-            value={JSON.stringify(tableData)}
-            hidden
-          />
-          <input
-            name={`deleted_${name}`}
-            type="hidden"
-            value={JSON.stringify(deletedData)}
-            hidden
-          />
-        </>
-      )}
-      <div className={`${className}`}>
-        {searcheables.length > 0 && (
-          <div>
-            <TextField
-              className="mb-2"
-              name="search"
-              title={`Buscar por: ${searcheables
-                .map((x) => x.label)
-                .join(", ")}`}
-              onChange={handleChangeSearch}
-              disabled={loading}
+    return (
+      <>
+        {name && (
+          <>
+            <GenericDynamicTableErrorComponent name={name} />
+            <input
+              name={name}
+              type="hidden"
+              value={JSON.stringify(tableData)}
+              hidden
+            />
+            <input
+              name={`deleted_${name}`}
+              type="hidden"
+              value={JSON.stringify(deletedData)}
+              hidden
             />
-          </div>
+          </>
         )}
-        <table className="w-full">
-          {orientation === "horizontal" && <thead>{renderHeader()}</thead>}
-          <tbody>{renderRows()}</tbody>
-          {editable && (
-            <tfoot>
-              <tr>
-                <td
-                  colSpan={
-                    orientation === "horizontal" ? columns.length + 1 : 2
-                  }
-                  className="align-middle"
-                >
-                  {(!maxRows || tableData.length < maxRows) && (
-                    <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>
-              </tr>
-            </tfoot>
+        <div className={`${className}`}>
+          {searcheables.length > 0 && (
+            <div>
+              <TextField
+                className="mb-2"
+                name="search"
+                title={`Buscar por: ${searcheables
+                  .map((x) => x.label)
+                  .join(", ")}`}
+                onChange={handleChangeSearch}
+                disabled={loading}
+              />
+            </div>
           )}
-          {footerRow && (
-            <tfoot className="border-t-2 border-black">
-              <tr>
-                {footerRow.map((column, index) => (
+          <table className="w-full">
+            {orientation === "horizontal" && <thead>{renderHeader()}</thead>}
+            <tbody>{renderRows()}</tbody>
+            {editable && (
+              <tfoot>
+                <tr>
                   <td
-                    key={index}
-                    colSpan={orientation === "vertical" ? 2 : 1}
-                    className={`align-middle ${column.className || ""}`}
+                    colSpan={
+                      orientation === "horizontal" ? columns.length + 1 : 2
+                    }
+                    className="align-middle"
                   >
-                    {column.content}
+                    {(!maxRows || tableData.length < maxRows) && (
+                      <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>
-                ))}
-              </tr>
-            </tfoot>
-          )}
-        </table>
-        {paginated && totalPages() > 1 && (
-          <div className="flex justify-between items-center mt-4">
-            <div className="flex items-center">
-              <Button
-                type="button"
-                disabled={currentPage === 1}
-                onClickSave={() =>
-                  setCurrentPage((old) => Math.max(old - 1, 1))
-                }
-              >
-                Anterior
-              </Button>
-              <span className="mx-2">{`Página ${currentPage} de ${totalPages()}`}</span>
-              <Button
-                type="button"
-                disabled={currentPage === totalPages()}
-                onClickSave={() =>
-                  setCurrentPage((old) => Math.min(old + 1, totalPages()))
-                }
-              >
-                Siguiente
-              </Button>
-            </div>
-            <div>
-              <select
-                value={itemsPerPage}
-                onChange={(e) => {
-                  setItemsPerPage(Number(e.target.value));
-                  setCurrentPage(1); // resetear la página al cambiar los elementos por página
-                }}
-              >
-                {itemsPerPageOptions.map((option) => (
-                  <option key={option} value={option}>
-                    {option} elementos por página
-                  </option>
-                ))}
-              </select>
+                </tr>
+              </tfoot>
+            )}
+            {footerRow && (
+              <tfoot className="border-t-2 border-black">
+                <tr>
+                  {columns.map((column, index) => {
+                    const footerCell = footerRow.find(
+                      (fc) => fc.name === column.name
+                    );
+                    return (
+                      <td
+                        key={index}
+                        colSpan={orientation === "vertical" ? 2 : 1}
+                        className={`align-middle ${
+                          footerCell?.className || ""
+                        }`}
+                      >
+                        {footerCell ? footerCell.content : <></>}
+                      </td>
+                    );
+                  })}
+                  {editable && <td></td>}
+                </tr>
+              </tfoot>
+            )}
+          </table>
+          {paginated && totalPages() > 1 && (
+            <div className="flex justify-between items-center mt-4">
+              <div className="flex items-center">
+                <Button
+                  type="button"
+                  disabled={currentPage === 1}
+                  onClickSave={() =>
+                    setCurrentPage((old) => Math.max(old - 1, 1))
+                  }
+                >
+                  Anterior
+                </Button>
+                <span className="mx-2">{`Página ${currentPage} de ${totalPages()}`}</span>
+                <Button
+                  type="button"
+                  disabled={currentPage === totalPages()}
+                  onClickSave={() =>
+                    setCurrentPage((old) => Math.min(old + 1, totalPages()))
+                  }
+                >
+                  Siguiente
+                </Button>
+              </div>
+              <div>
+                <select
+                  value={itemsPerPage}
+                  onChange={(e) => {
+                    setItemsPerPage(Number(e.target.value));
+                    setCurrentPage(1); // resetear la página al cambiar los elementos por página
+                  }}
+                >
+                  {itemsPerPageOptions.map((option) => (
+                    <option key={option} value={option}>
+                      {option} elementos por página
+                    </option>
+                  ))}
+                </select>
+              </div>
             </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
+          )}
+        </div>
+      </>
+    );
+  } catch (error: any) {
+    return <ComponentError error={error} componentName="GenericDynamicTable" />;
+  }
 };