midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/form/Field.tsx
View File

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

50
components/tablelist/TableList.tsx
View File

@ -37,8 +37,10 @@ export interface Column<T = any> {
resize?: boolean; resize?: boolean;
width?: number; width?: number;
type?: "text" | "date" | "time" | "money" | "file"; type?: "text" | "date" | "time" | "money" | "file";
nameFilter?: string; nameFilter?: string | string[];
placeholderFilter?: string | string[];
onLoadFilter?: (params?: any) => Promise<any> | any; onLoadFilter?: (params?: any) => Promise<any> | any;
labelFilter?: string;
onLabel?: string | ((item: any) => any); onLabel?: string | ((item: any) => any);
onValue?: string | ((item: any) => any); onValue?: string | ((item: any) => any);
pagination?: boolean; pagination?: boolean;
@ -96,7 +98,14 @@ export interface TableListProps<T extends object> {
filter?: boolean; 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 fm?: any; // Membuat `fm` nullable
} }
@ -322,8 +331,20 @@ export const TableList = <T extends object>({
e.filter !== false && (e.type !== "date" || index === dateIndex) e.filter !== false && (e.type !== "date" || index === dateIndex)
) // Hapus jika `false` ) // Hapus jika `false`
.map((e) => ({ .map((e) => ({
name: e?.nameFilter || e.name, nameFilter: e?.nameFilter,
label: e?.header && typeof e?.header === "string" ? e.header : "", // Default null jika tidak ada label 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: type:
typeof e.onLoadFilter === "function" typeof e.onLoadFilter === "function"
? "dropdown-async" ? "dropdown-async"
@ -630,7 +651,7 @@ export const TableList = <T extends object>({
}} }}
open={show} open={show}
content={ 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> */} {/* <div className="text-md font-semibold">Filter</div> */}
<Form <Form
@ -675,17 +696,28 @@ export const TableList = <T extends object>({
> >
<Field <Field
fm={fm} fm={fm}
name={"start_date"} name={
e?.nameFilter?.[0] ||
"start_date"
}
label={e?.label} label={e?.label}
type={"date"} type={"date"}
placeholder={`From`} placeholder={
e?.placeholderFilter?.[0] ||
"Form"
}
/> />
<Field <Field
fm={fm} fm={fm}
name={"end_date"} name={
e?.nameFilter?.[1] || "end_date"
}
label={e?.label} label={e?.label}
type={"date"} type={"date"}
placeholder={`To`} placeholder={
e?.placeholderFilter?.[1] ||
"To"
}
visibleLabel={true} visibleLabel={true}
/> />
</div> </div>