feat: enhance Field and TableList components with additional filter properties for improved data handling

This commit is contained in:
faisolavolut 2025-04-08 13:43:43 +07:00
parent 6264ef8e97
commit 5c8c012c7c
2 changed files with 42 additions and 9 deletions

View File

@ -72,6 +72,7 @@ export interface FieldProps {
description?: string | (() => any);
styleField?: string | null;
isDebounce?: boolean;
data?: any;
}
export const Field: React.FC<FieldProps> = ({
fm,

View File

@ -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>