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

fix search filter

This commit is contained in:
Rizky 2024-12-11 09:13:10 +00:00
parent c0e612e6f6
commit 0d7c142e93
4 changed files with 268 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
comps/filter/FilterContent.tsx
View File

@ -13,7 +13,7 @@ export const FilterContent: FC<{
child: any; child: any;
_item: PrasiItem; _item: PrasiItem;
}> = ({ mode, filter, PassProp, child, _item, onSubmit }) => { }> = ({ mode, filter, PassProp, child, _item, onSubmit }) => {
const internal = useLocal({}); filter.PassProp = PassProp;
return ( return (
<div <div
className={cx( className={cx(
@ -94,7 +94,6 @@ export const FilterContent: FC<{
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1000; z-index: 1000;
/* Styles specific to popup */
} }
.form-inner { .form-inner {
@ -104,38 +103,30 @@ export const FilterContent: FC<{
)} )}
> >
<BaseForm <BaseForm
tag="blank"
data={filter.data} data={filter.data}
onSubmit={async (form) => { name={filter.name}
const fm = form.fm; onSubmit={async ({ fm }) => {
try { try {
if (typeof form.fm?.data === "object") { if (typeof fm.data === "object") {
form.render(); fm.render();
form.fm.render();
} }
} catch (ex) {}
if (mode === "raw" && fm) { if (mode === "raw" && fm) {
if (form && form.fm) {
Object.keys(form.fm.data).map((e) => {
if (!form?.fm.data?.[e]) {
delete form.fm?.data[e];
}
});
}
const submit = async (fm: FMLocal) => { const submit = async (fm: FMLocal) => {
fm.render(); fm.render();
if (typeof onSubmit === "function") { if (typeof onSubmit === "function") {
const data = await onSubmit(fm); const data = await onSubmit(fm);
if (typeof form.fm?.data === "object") { if (typeof fm.data === "object") {
form.fm.data = { fm.data = {
__status: "submit", __status: "submit",
...form.fm.data, ...fm.data,
_where: data, _where: data,
}; };
form.fm.render(); fm.render();
filter.data = { filter.data = {
__status: "submit", __status: "submit",
...form.fm.data, ...fm.data,
_where: data, _where: data,
}; };
filter.render(); filter.render();
@ -150,15 +141,62 @@ export const FilterContent: FC<{
list.reload(); list.reload();
} }
} }
} catch (ex) {}
return true;
}} }}
render={internal.render} // onSubmit={async (form) => {
// const fm = form.fm;
// try {
// if (typeof form.fm?.data === "object") {
// form.render();
// form.fm.render();
// }
// } catch (ex) {}
// if (mode === "raw" && fm) {
// if (form && form.fm) {
// Object.keys(form.fm.data).map((e) => {
// if (!form?.fm.data?.[e]) {
// delete form.fm?.data[e];
// }
// });
// }
// const submit = async (fm: FMLocal) => {
// fm.render();
// if (typeof onSubmit === "function") {
// const data = await onSubmit(fm);
// if (typeof form.fm?.data === "object") {
// form.fm.data = {
// __status: "submit",
// ...form.fm.data,
// _where: data,
// };
// form.fm.render();
// filter.data = {
// __status: "submit",
// ...form.fm.data,
// _where: data,
// };
// filter.render();
// }
// }
// };
// await submit(fm);
// }
// const f = getFilter(filter.name);
// if (f) {
// for (const list of Object.values(f.list.ref)) {
// list.reload();
// }
// }
// }}
> >
{(form) => { {({ fm }) => {
filter.form = form; filter.fm = fm;
return ( return (
<> <>
{!!(PassProp && child) && ( {!!(PassProp && child) && (
<PassProp filter={filter} fm={form.fm}> <PassProp filter={filter} fm={filter.fm}>
{child} {child}
</PassProp> </PassProp>
)} )}

339
comps/filter/FilterField.tsx
View File

@ -20,8 +20,9 @@ export const FilterField: FC<{
search_timeout: null as any, search_timeout: null as any,
}); });
if (!name) return <>No Name</>; if (!name) return <>No Name</>;
if (!filter.form) return <div>Loading...</div>; if (!filter.fm) return <div>Loading...</div>;
const fm = filter.fm;
filter.types[name] = type; filter.types[name] = type;
const singleOptions = ["equal", "not_equal"]; const singleOptions = ["equal", "not_equal"];
@ -32,167 +33,183 @@ export const FilterField: FC<{
internal.render_timeout = setTimeout(() => { internal.render_timeout = setTimeout(() => {
filter_window.prasiContext.render(); filter_window.prasiContext.render();
}, 500); }, 500);
}, [filter.form]); }, [fm]);
let show_modifier = filter.mode !== "inline"; let show_modifier = filter.mode !== "inline";
return null; const arg = {
// return ( name: name || "",
// <BaseField fm,
// {...filter.form.fieldProps({ label: label || name || "",
// name: name || "", render: internal.render,
// label: label || name || "", prefix: show_modifier
// render: internal.render, ? () => (
// prefix: show_modifier <FieldModifier
// ? () => ( onChange={(modifier) => {
// <FieldModifier filter.modifiers[name] = modifier;
// onChange={(modifier) => { filter.render();
// filter.modifiers[name] = modifier; filter_window.prasiContext.render();
// filter.render(); }}
// filter_window.prasiContext.render(); modifier={filter.modifiers[name]}
// }} type={type}
// modifier={filter.modifiers[name]} />
// type={type} )
// /> : undefined,
// ) onLoad() {
// : undefined, return [{ label: "halo", value: "asda" }];
// onLoad() { },
// return [{ label: "halo", value: "asda" }]; subType: singleOptions.includes(filter.modifiers[name])
// }, ? "dropdown"
// subType: singleOptions.includes(filter.modifiers[name]) : "typeahead",
// ? "dropdown" };
// : "typeahead",
// })}
// >
// {(field) => {
// if (type === "search-all") {
// return (
// <div className={cx("search-all c-flex items-center")}>
// <div className="c-pl-2">
// <svg
// xmlns="http://www.w3.org/2000/svg"
// width="14"
// height="14"
// viewBox="0 0 24 24"
// fill="none"
// stroke="currentColor"
// strokeWidth="2"
// strokeLinecap="round"
// strokeLinejoin="round"
// >
// <circle cx="11" cy="11" r="8" />
// <path d="m21 21-4.3-4.3" />
// </svg>
// </div>
// <input
// type="search"
// value={field.fm?.data?.[name]}
// placeholder={field.field.label}
// onBlur={() => {
// // clearTimeout(internal.search_timeout);
// // filter.form?.submit();
// }}
// spellCheck={false}
// className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
// onChange={(e) => {
// field.fm.data[name] = e.currentTarget.value;
// field.fm.render();
// clearTimeout(internal.search_timeout);
// internal.search_timeout = setTimeout(() => {
// filter.form?.submit();
// }, 1500);
// }}
// />
// </div>
// );
// }
// return ( return (
// <> <BaseField
// {type === "text" && ( fm={fm}
// <FieldTypeInput label={label || name}
// {...field} name={name || ""}
// prop={{ PassProp={filter.PassProp}
// type: "input", >
// sub_type: "text", {(field) => {
// }} if (type === "search-all") {
// /> return (
// )} <div className={cx("search-all c-flex items-center")}>
// {type === "number" && ( <div className="c-pl-2">
// <> <svg
// <FieldTypeInput xmlns="http://www.w3.org/2000/svg"
// {...field} width="14"
// field={{ height="14"
// ...field.field, viewBox="0 0 24 24"
// name: fill="none"
// filter.modifiers[name] === "between" stroke="currentColor"
// ? name strokeWidth="2"
// : `${name}_from`, strokeLinecap="round"
// }} strokeLinejoin="round"
// prop={{ >
// type: "input", <circle cx="11" cy="11" r="8" />
// sub_type: "number", <path d="m21 21-4.3-4.3" />
// }} </svg>
// /> </div>
// {filter.modifiers[name] === "between" && ( <input
// <FieldTypeInput type="search"
// {...field} value={field.fm?.data?.[name]}
// field={{ ...field.field, name: `${name}_to` }} placeholder={field.field.label}
// prop={{ onBlur={() => {
// type: "input", // clearTimeout(internal.search_timeout);
// sub_type: "number", // filter.form?.submit();
// }} }}
// /> spellCheck={false}
// )} className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
// </> onChange={(e) => {
// )} field.fm.data[name] = e.currentTarget.value;
// {type === "date" && ( field.fm.render();
// <> clearTimeout(internal.search_timeout);
// <FieldTypeInput if (!field.fm.data[name]) {
// {...field} fm.submit();
// field={{ } else {
// ...field.field, internal.search_timeout = setTimeout(() => {
// name: fm?.submit();
// filter.modifiers[name] === "between" }, 1500);
// ? name }
// : `${name}_from`, }}
// }} onKeyDown={(e) => {
// prop={{ if (e.key === "Enter") {
// type: "input", clearTimeout(internal.search_timeout);
// sub_type: "date", fm?.submit();
// }} }
// /> }}
// {filter.modifiers[name] === "between" && ( />
// <FieldTypeInput </div>
// {...field} );
// field={{ ...field.field, name: `${name}_to` }} }
// prop={{
// type: "input", return (
// sub_type: "date", <>
// }} {type === "text" && (
// /> <FieldTypeInput
// )} {...field}
// </> arg={arg}
// )} prop={{
// {type === "boolean" && ( type: "input",
// <FieldCheckbox sub_type: "text",
// arg={field.arg} }}
// field={field.field} />
// fm={field.fm} )}
// /> {type === "number" && (
// )} <>
// {type === "options" && ( <FieldTypeInput
// <> arg={arg}
// {singleOptions.includes(filter.modifiers[name]) && ( {...field}
// <SingleOption {...field} /> field={{
// )} ...field.field,
// {multiOptions.includes(filter.modifiers[name]) && ( name:
// <MultiOption {...field} /> filter.modifiers[name] === "between"
// )} ? name
// </> : `${name}_from`,
// )} }}
// </> prop={{
// ); type: "input",
// }} sub_type: "number",
// </BaseField> }}
// ); />
{filter.modifiers[name] === "between" && (
<FieldTypeInput
arg={arg}
{...field}
field={{ ...field.field, name: `${name}_to` }}
prop={{
type: "input",
sub_type: "number",
}}
/>
)}
</>
)}
{type === "date" && (
<>
<FieldTypeInput
arg={arg}
{...field}
field={{
...field.field,
name:
filter.modifiers[name] === "between"
? name
: `${name}_from`,
}}
prop={{
type: "input",
sub_type: "date",
}}
/>
{filter.modifiers[name] === "between" && (
<FieldTypeInput
arg={arg}
{...field}
field={{ ...field.field, name: `${name}_to` }}
prop={{
type: "input",
sub_type: "date",
}}
/>
)}
</>
)}
{type === "boolean" && (
<FieldCheckbox arg={arg} field={field.field} fm={field.fm} />
)}
{type === "options" && (
<>
{singleOptions.includes(filter.modifiers[name]) && (
<SingleOption arg={arg} {...field} />
)}
{multiOptions.includes(filter.modifiers[name]) && (
<MultiOption arg={arg} {...field} />
)}
</>
)}
</>
);
}}
</BaseField>
);
}; };

2
comps/filter/MasterFilter.tsx
View File

@ -73,7 +73,6 @@ export const MasterFilter: FC<FilterProps> = ({
} }
filter.raw_status = "ready"; filter.raw_status = "ready";
filter.render(); filter.render();
}); });
} else { } else {
filter.raw_status = "ready"; filter.raw_status = "ready";
@ -95,6 +94,7 @@ export const MasterFilter: FC<FilterProps> = ({
if (mode === "raw" && filter.raw_status !== "ready") { if (mode === "raw" && filter.raw_status !== "ready") {
return <FieldLoading />; return <FieldLoading />;
} }
return ( return (
<> <>
<FilterContent <FilterContent

6
comps/filter/utils/types.tsx
View File

@ -1,5 +1,4 @@
import { BaseFormLocal } from "../../form/base/types"; import { FMLocal, GenField } from "../../form/typings";
import { GenField } from "../../form/typings";
export type FilterFieldType = export type FilterFieldType =
| "search-all" | "search-all"
@ -14,7 +13,8 @@ export const default_filter_local = {
columns: [] as string[], columns: [] as string[],
fields: [] as GenField[], fields: [] as GenField[],
tableName: "", tableName: "",
form: null as null | BaseFormLocal<any>, fm: null as null | FMLocal,
PassProp: null as null | any,
modifiers: {} as Record<string, string>, modifiers: {} as Record<string, string>,
types: {} as Record<string, FilterFieldType>, types: {} as Record<string, FilterFieldType>,
name: "", name: "",