From 5c8c012c7c9e80002782d0fdef84f5082ee89f67 Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Tue, 8 Apr 2025 13:43:43 +0700
Subject: [PATCH] feat: enhance Field and TableList components with additional
 filter properties for improved data handling

---
 components/form/Field.tsx          |  1 +
 components/tablelist/TableList.tsx | 50 ++++++++++++++++++++++++------
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/components/form/Field.tsx b/components/form/Field.tsx
index 4e28c37..4a3faef 100644
--- a/components/form/Field.tsx
+++ b/components/form/Field.tsx
@@ -72,6 +72,7 @@ export interface FieldProps {
   description?: string | (() => any);
   styleField?: string | null;
   isDebounce?: boolean;
+  data?: any;
 }
 export const Field: React.FC<FieldProps> = ({
   fm,
diff --git a/components/tablelist/TableList.tsx b/components/tablelist/TableList.tsx
index 2091565..bd2bde2 100644
--- a/components/tablelist/TableList.tsx
+++ b/components/tablelist/TableList.tsx
@@ -37,8 +37,10 @@ export interface Column<T = any> {
   resize?: boolean;
   width?: number;
   type?: "text" | "date" | "time" | "money" | "file";
-  nameFilter?: string;
+  nameFilter?: string | string[];
+  placeholderFilter?: string | string[];
   onLoadFilter?: (params?: any) => Promise<any> | any;
+  labelFilter?: string;
   onLabel?: string | ((item: any) => any);
   onValue?: string | ((item: any) => any);
   pagination?: boolean;
@@ -96,7 +98,14 @@ export interface TableListProps<T extends object> {
   filter?: boolean;
 }
 
-export interface FieldFilterProps extends Omit<FieldProps, "fm"> {
+export interface FilterProps<T extends object> {
+  nameFilter?: string | string[];
+  placeholderFilter?: string | string[];
+}
+export interface FieldFilterProps
+  extends Omit<FieldProps, "fm">,
+    FilterProps<object>,
+    FilterProps<object> {
   fm?: any; // Membuat `fm` nullable
 }
 
@@ -322,8 +331,20 @@ export const TableList = <T extends object>({
               e.filter !== false && (e.type !== "date" || index === dateIndex)
           ) // Hapus jika `false`
           .map((e) => ({
-            name: e?.nameFilter || e.name,
-            label: e?.header && typeof e?.header === "string" ? e.header : "", // Default null jika tidak ada label
+            nameFilter: e?.nameFilter,
+            placeholderFilter: e?.placeholderFilter,
+            name:
+              Array.isArray(e?.nameFilter) && e?.nameFilter?.length
+                ? e.nameFilter[0]
+                : typeof e?.nameFilter === "string"
+                ? e.nameFilter
+                : e?.name,
+            label:
+              e?.labelFilter && typeof e?.labelFilter === "string"
+                ? e.labelFilter // Default null jika tidak ada label
+                : e?.header && typeof e?.header === "string"
+                ? e.header
+                : "", // Default null jika tidak ada label
             type:
               typeof e.onLoadFilter === "function"
                 ? "dropdown-async"
@@ -630,7 +651,7 @@ export const TableList = <T extends object>({
                     }}
                     open={show}
                     content={
-                      <div className="flex flex-col p-4 w-80 gap-y-1">
+                      <div className="flex flex-col p-4 w-80 gap-y-1 overflow-y-scroll max-h-96">
                         {/* <div className="text-md font-semibold">Filter</div> */}
 
                         <Form
@@ -675,17 +696,28 @@ export const TableList = <T extends object>({
                                           >
                                             <Field
                                               fm={fm}
-                                              name={"start_date"}
+                                              name={
+                                                e?.nameFilter?.[0] ||
+                                                "start_date"
+                                              }
                                               label={e?.label}
                                               type={"date"}
-                                              placeholder={`From`}
+                                              placeholder={
+                                                e?.placeholderFilter?.[0] ||
+                                                "Form"
+                                              }
                                             />
                                             <Field
                                               fm={fm}
-                                              name={"end_date"}
+                                              name={
+                                                e?.nameFilter?.[1] || "end_date"
+                                              }
                                               label={e?.label}
                                               type={"date"}
-                                              placeholder={`To`}
+                                              placeholder={
+                                                e?.placeholderFilter?.[1] ||
+                                                "To"
+                                              }
                                               visibleLabel={true}
                                             />
                                           </div>