next-helios-fe 1.8.120 → 1.8.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.120",
+  "version": "1.8.122",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -71,6 +71,18 @@ interface TableProps {
   };
   loading?: boolean;
   actionColumn?: (e?: any) => React.ReactNode;
+  getDynamicTableValue?: (e: {
+    search: string;
+    page: number;
+    dataOffset: number;
+    maxRow: number;
+    filter: any[];
+    categoryFilter: any[];
+    sortBy: any;
+  }) => void;
+  setDynamicTableValue?: {
+    totalData: number;
+  };
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -85,12 +97,14 @@ export const Table: TableComponentProps = ({
   checkbox,
   loading,
   actionColumn,
+  getDynamicTableValue,
+  setDynamicTableValue,
 }) => {
   const paginationRef = useRef<HTMLDivElement>(null);
   const [excludedColumn, setExcludedColumn] = useState<string[]>([]);
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
-  const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
+  const [categoryFilter, setCategoryFilter] = useState<any>({});
   const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
   const [page, setPage] = useState<number>(1);
   const [selected, setSelected] = useState<
@@ -103,6 +117,8 @@ export const Table: TableComponentProps = ({
     column: "",
     order: "",
   });
+  const [isReadyForDynamicValue, setIsReadyForDynamicValue] =
+    useState<boolean>(false);
 
   const height =
     options?.height === "fit"
@@ -134,28 +150,43 @@ export const Table: TableComponentProps = ({
       })
     );
 
-    header
-      ?.filter((item) => item.type === "category")
-      ?.map((item) => {
-        data
-          .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
-          .sort((a, b) =>
-            (a === undefined
-              ? "undefined"
-              : a === null
-              ? "null"
-              : a.toString()
-            ).localeCompare(
-              b === undefined ? "undefined" : b === null ? "null" : b.toString()
+    if (data.length !== 0) {
+      const tempCategoryFilter: any = {};
+
+      header
+        ?.filter((item) => item.type === "category")
+        ?.map((item) => {
+          const tempDataByCategory: string[] = [];
+
+          data
+            .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
+            .sort((a, b) =>
+              (a === undefined
+                ? "undefined"
+                : a === null
+                ? "null"
+                : a.toString()
+              ).localeCompare(
+                b === undefined
+                  ? "undefined"
+                  : b === null
+                  ? "null"
+                  : b.toString()
+              )
             )
-          )
-          .filter((value, index, self) => self.indexOf(value) === index)
-          .map((value) => {
-            if (!categoryFilter.includes(value)) {
-              setCategoryFilter((prev) => [...prev, value]);
-            }
-          });
-      });
+            .filter((value, index, self) => self.indexOf(value) === index)
+            .map((value) => {
+              if (!tempDataByCategory.includes(value)) {
+                tempDataByCategory.push(value);
+              }
+            });
+
+          tempCategoryFilter[item.key] = tempDataByCategory;
+        });
+
+      setCategoryFilter(tempCategoryFilter);
+      setIsReadyForDynamicValue(true);
+    }
   }, [data]);
 
   useEffect(() => {
@@ -188,68 +219,85 @@ export const Table: TableComponentProps = ({
   };
 
   const filteredData = useMemo(() => {
-    const tempData = data
-      ?.filter((item) => {
-        if (search === "") {
-          return item;
-        } else if (
-          header
-            ?.filter((item) => !excludedColumn.includes(item.key))
-            ?.some((headerItem) => {
-              return item[headerItem.key as keyof typeof item]
-                ?.toString()
-                ?.toLowerCase()
-                ?.includes(search.toLowerCase());
+    if (getDynamicTableValue) {
+      return data;
+    } else {
+      const tempData = data
+        ?.filter((item) => {
+          if (search === "") {
+            return item;
+          } else if (
+            header
+              ?.filter((item) => !excludedColumn.includes(item.key))
+              ?.some((headerItem) => {
+                return item[headerItem.key as keyof typeof item]
+                  ?.toString()
+                  ?.toLowerCase()
+                  ?.includes(search.toLowerCase());
+              })
+          ) {
+            return item;
+          }
+        })
+        ?.filter((item) => {
+          return filter.every((filterItem) => {
+            return (item[filterItem.key as keyof typeof item] || "")
+              ?.toString()
+              ?.toLowerCase()
+              ?.includes(filterItem.value.toLowerCase());
+          });
+        })
+        ?.filter((item) => {
+          const convertedCategoryFilter: any[] = [];
+
+          Object.keys(categoryFilter)?.map((keyItem: string) =>
+            categoryFilter[keyItem].map((categoryItem: any) => {
+              convertedCategoryFilter.push(categoryItem);
             })
-        ) {
-          return item;
-        }
-      })
-      ?.filter((item) => {
-        return filter.every((filterItem) => {
-          return (item[filterItem.key as keyof typeof item] || "")
-            ?.toString()
-            ?.toLowerCase()
-            ?.includes(filterItem.value.toLowerCase());
+          );
+
+          return header
+            ?.filter((item) => !excludedColumn?.includes(item.key))
+            ?.filter((headerItem) => headerItem.type === "category")
+            ?.every((headerItem) => {
+              return convertedCategoryFilter?.includes(
+                item[headerItem.key as keyof typeof item]
+              );
+            });
         });
-      })
-      ?.filter((item) => {
-        return header
-          ?.filter((item) => !excludedColumn?.includes(item.key))
-          ?.filter((headerItem) => headerItem.type === "category")
-          ?.every((headerItem) => {
-            return categoryFilter?.includes(
-              item[headerItem.key as keyof typeof item]
-            );
-          });
-      });
 
-    if (sortBy?.column === "") {
-      return tempData;
-    } else {
-      return tempData?.sort((a, b): any => {
-        if (sortBy?.column === "") {
-          return a?.[options?.customDataIdName ?? "id"] >
-            b?.[options?.customDataIdName ?? "id"]
-            ? 1
-            : -1;
-        } else if (sortBy?.order === "asc") {
-          return a[sortBy?.column as keyof typeof a] >
-            b[sortBy?.column as keyof typeof b]
-            ? 1
-            : -1;
-        } else if (sortBy?.order === "desc") {
-          return a[sortBy?.column as keyof typeof a] <
-            b[sortBy?.column as keyof typeof b]
-            ? 1
-            : -1;
-        }
-      });
+      if (sortBy?.column === "") {
+        return tempData;
+      } else {
+        return tempData?.sort((a, b): any => {
+          if (sortBy?.column === "") {
+            return a?.[options?.customDataIdName ?? "id"] >
+              b?.[options?.customDataIdName ?? "id"]
+              ? 1
+              : -1;
+          } else if (sortBy?.order === "asc") {
+            return a[sortBy?.column as keyof typeof a] >
+              b[sortBy?.column as keyof typeof b]
+              ? 1
+              : -1;
+          } else if (sortBy?.order === "desc") {
+            return a[sortBy?.column as keyof typeof a] <
+              b[sortBy?.column as keyof typeof b]
+              ? 1
+              : -1;
+          }
+        });
+      }
     }
   }, [header, data, filter, categoryFilter, search, sortBy]);
 
   useEffect(() => {
-    if (page > Math.ceil(filteredData?.length / maxRow)) {
+    if (
+      page >
+      Math.ceil(
+        (setDynamicTableValue?.totalData ?? filteredData?.length) / maxRow
+      )
+    ) {
       setPage(1);
       paginationRef.current?.scrollTo({
         left: 0,
@@ -258,6 +306,30 @@ export const Table: TableComponentProps = ({
     }
   }, [filteredData]);
 
+  useEffect(() => {
+    if (getDynamicTableValue) {
+      if (isReadyForDynamicValue) {
+        getDynamicTableValue({
+          search,
+          page,
+          dataOffset: (page - 1) * maxRow,
+          maxRow,
+          filter,
+          categoryFilter,
+          sortBy,
+        });
+      }
+    }
+  }, [
+    isReadyForDynamicValue,
+    search,
+    page,
+    maxRow,
+    filter,
+    categoryFilter,
+    sortBy,
+  ]);
+
   const headerArr = header
     ?.filter((item) => !excludedColumn?.includes(item.key))
     ?.map((item) => {
@@ -303,6 +375,7 @@ export const Table: TableComponentProps = ({
               {item?.type === "category" && (
                 <div className="font-normal">
                   <Dropdown
+                    placement="bottom-end"
                     dismissOnClick={false}
                     trigger={
                       <button
@@ -340,15 +413,23 @@ export const Table: TableComponentProps = ({
                           <Dropdown.Item
                             key={value}
                             onClick={() => {
-                              if (categoryFilter.includes(value)) {
-                                setCategoryFilter(
-                                  categoryFilter.filter(
-                                    (prev) => prev !== value
-                                  )
+                              const tempCategoryFilter = { ...categoryFilter };
+
+                              if (categoryFilter[item.key]?.includes(value)) {
+                                tempCategoryFilter[item.key] = categoryFilter[
+                                  item.key
+                                ].filter(
+                                  (categoryItem: string) =>
+                                    categoryItem !== value
                                 );
                               } else {
-                                setCategoryFilter([...categoryFilter, value]);
+                                tempCategoryFilter[item.key] = [
+                                  ...categoryFilter[item.key],
+                                  value,
+                                ];
                               }
+
+                              setCategoryFilter(tempCategoryFilter);
                             }}
                           >
                             <div className="pointer-events-none capitalize">
@@ -362,7 +443,8 @@ export const Table: TableComponentProps = ({
                                     : value?.toString()
                                 }
                                 checked={
-                                  categoryFilter.includes(value) ?? false
+                                  categoryFilter[item.key]?.includes(value) ??
+                                  false
                                 }
                                 readOnly
                               />
@@ -375,7 +457,11 @@ export const Table: TableComponentProps = ({
               )}
             </div>
             {options?.toolbar?.columnSearch?.show !== false && (
-              <div className="relative flex items-center">
+              <div
+                className={`relative flex items-center ${
+                  item?.type === "category" && "invisible"
+                }`}
+              >
                 <Icon
                   icon="ic:round-search"
                   className="absolute text-sm text-disabled"
@@ -501,7 +587,7 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="max-w-60 bg-secondary-bg px-4 py-1.5"
+                  className="min-w-32 max-w-60 bg-secondary-bg px-4 py-1.5"
                 >
                   <Tooltip
                     content={item[headerItem.key as keyof typeof item] || "-"}
@@ -590,6 +676,7 @@ export const Table: TableComponentProps = ({
             )}
             {options?.toolbar?.filter?.show !== false && (
               <Dropdown
+                placement="bottom-end"
                 dismissOnClick={false}
                 trigger={
                   <Tooltip
@@ -699,7 +786,8 @@ export const Table: TableComponentProps = ({
                     <Form.Checkbox
                       options={{ disableHover: true }}
                       checked={
-                        filteredData?.length !== 0 &&
+                        (setDynamicTableValue?.totalData ??
+                          filteredData?.length) !== 0 &&
                         filteredData?.filter((item) => {
                           return selected?.find((selectedItem) => {
                             return (
@@ -708,7 +796,9 @@ export const Table: TableComponentProps = ({
                               ] === item[options?.customDataIdName ?? "id"]
                             );
                           });
-                        })?.length === filteredData?.length
+                        })?.length ===
+                          (setDynamicTableValue?.totalData ??
+                            filteredData?.length)
                           ? true
                           : false
                       }
@@ -722,7 +812,9 @@ export const Table: TableComponentProps = ({
                                 ] === item[options?.customDataIdName ?? "id"]
                               );
                             });
-                          })?.length === filteredData?.length
+                          })?.length ===
+                          (setDynamicTableValue?.totalData ??
+                            filteredData?.length)
                         ) {
                           if (checkbox?.onChange) {
                             checkbox?.onChange(
@@ -830,10 +922,15 @@ export const Table: TableComponentProps = ({
             </tr>
           </thead>
           <tbody className="divide-y">
-            {!loading && filteredData && filteredData.length !== 0 && dataArr}
+            {!loading &&
+              filteredData &&
+              (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 &&
+              dataArr}
           </tbody>
         </table>
-        {(loading || !filteredData || filteredData.length === 0) && (
+        {(loading ||
+          !filteredData ||
+          (setDynamicTableValue?.totalData ?? filteredData?.length) === 0) && (
           <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
             {loading ? (
               <Icon
@@ -887,15 +984,19 @@ export const Table: TableComponentProps = ({
               }}
             />
           </div>
-          {filteredData && filteredData.length !== 0 && (
-            <span className="hidden text-sm text-disabled lg:block">{`Showing ${
-              (page - 1) * maxRow + 1
-            } to ${
-              page * maxRow > filteredData?.length
-                ? filteredData?.length
-                : page * maxRow
-            } of ${filteredData?.length} entries`}</span>
-          )}
+          {filteredData &&
+            (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 && (
+              <span className="hidden text-sm text-disabled lg:block">{`Showing ${
+                (page - 1) * maxRow + 1
+              } to ${
+                page * maxRow >
+                (setDynamicTableValue?.totalData ?? filteredData?.length)
+                  ? setDynamicTableValue?.totalData ?? filteredData?.length
+                  : page * maxRow
+              } of ${
+                setDynamicTableValue?.totalData ?? filteredData?.length
+              } entries`}</span>
+            )}
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
@@ -922,7 +1023,10 @@ export const Table: TableComponentProps = ({
               className="flex max-w-20 gap-2 overflow-auto xl:max-w-[124px] [&::-webkit-scrollbar]:hidden"
             >
               {Array.from({
-                length: Math.ceil(filteredData?.length / maxRow),
+                length: Math.ceil(
+                  (setDynamicTableValue?.totalData ?? filteredData?.length) /
+                    maxRow
+                ),
               }).map((_, index) => {
                 return (
                   <button
@@ -943,7 +1047,10 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
-              disabled={filteredData?.length <= page * maxRow}
+              disabled={
+                (setDynamicTableValue?.totalData ?? filteredData?.length) <=
+                page * maxRow
+              }
               onClick={() => {
                 setPage((prev) => prev + 1);
               }}
@@ -953,9 +1060,17 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
-              disabled={filteredData?.length <= page * maxRow}
+              disabled={
+                (setDynamicTableValue?.totalData ?? filteredData?.length) <=
+                page * maxRow
+              }
               onClick={() => {
-                setPage(Math.ceil(filteredData?.length / maxRow));
+                setPage(
+                  Math.ceil(
+                    (setDynamicTableValue?.totalData ?? filteredData?.length) /
+                      maxRow
+                  )
+                );
               }}
             >
               <Icon icon="gravity-ui:chevrons-right" />