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>
)} )}

341
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",
// })} return (
// > <BaseField
// {(field) => { fm={fm}
// if (type === "search-all") { label={label || name}
// return ( name={name || ""}
// <div className={cx("search-all c-flex items-center")}> PassProp={filter.PassProp}
// <div className="c-pl-2"> >
// <svg {(field) => {
// xmlns="http://www.w3.org/2000/svg" if (type === "search-all") {
// width="14" return (
// height="14" <div className={cx("search-all c-flex items-center")}>
// viewBox="0 0 24 24" <div className="c-pl-2">
// fill="none" <svg
// stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
// strokeWidth="2" width="14"
// strokeLinecap="round" height="14"
// strokeLinejoin="round" viewBox="0 0 24 24"
// > fill="none"
// <circle cx="11" cy="11" r="8" /> stroke="currentColor"
// <path d="m21 21-4.3-4.3" /> strokeWidth="2"
// </svg> strokeLinecap="round"
// </div> strokeLinejoin="round"
// <input >
// type="search" <circle cx="11" cy="11" r="8" />
// value={field.fm?.data?.[name]} <path d="m21 21-4.3-4.3" />
// placeholder={field.field.label} </svg>
// onBlur={() => { </div>
// // clearTimeout(internal.search_timeout); <input
// // filter.form?.submit(); type="search"
// }} value={field.fm?.data?.[name]}
// spellCheck={false} placeholder={field.field.label}
// className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full" onBlur={() => {
// onChange={(e) => { // clearTimeout(internal.search_timeout);
// field.fm.data[name] = e.currentTarget.value; // filter.form?.submit();
// field.fm.render(); }}
// clearTimeout(internal.search_timeout); spellCheck={false}
// internal.search_timeout = setTimeout(() => { className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
// filter.form?.submit(); onChange={(e) => {
// }, 1500); field.fm.data[name] = e.currentTarget.value;
// }} field.fm.render();
// /> clearTimeout(internal.search_timeout);
// </div> if (!field.fm.data[name]) {
// ); fm.submit();
// } } else {
internal.search_timeout = setTimeout(() => {
// return ( fm?.submit();
// <> }, 1500);
// {type === "text" && ( }
// <FieldTypeInput }}
// {...field} onKeyDown={(e) => {
// prop={{ if (e.key === "Enter") {
// type: "input", clearTimeout(internal.search_timeout);
// sub_type: "text", fm?.submit();
// }} }
// /> }}
// )} />
// {type === "number" && ( </div>
// <> );
// <FieldTypeInput }
// {...field}
// field={{ return (
// ...field.field, <>
// name: {type === "text" && (
// filter.modifiers[name] === "between" <FieldTypeInput
// ? name {...field}
// : `${name}_from`, arg={arg}
// }} prop={{
// prop={{ type: "input",
// type: "input", sub_type: "text",
// sub_type: "number", }}
// }} />
// /> )}
// {filter.modifiers[name] === "between" && ( {type === "number" && (
// <FieldTypeInput <>
// {...field} <FieldTypeInput
// field={{ ...field.field, name: `${name}_to` }} arg={arg}
// prop={{ {...field}
// type: "input", field={{
// sub_type: "number", ...field.field,
// }} name:
// /> filter.modifiers[name] === "between"
// )} ? name
// </> : `${name}_from`,
// )} }}
// {type === "date" && ( prop={{
// <> type: "input",
// <FieldTypeInput sub_type: "number",
// {...field} }}
// field={{ />
// ...field.field, {filter.modifiers[name] === "between" && (
// name: <FieldTypeInput
// filter.modifiers[name] === "between" arg={arg}
// ? name {...field}
// : `${name}_from`, field={{ ...field.field, name: `${name}_to` }}
// }} prop={{
// prop={{ type: "input",
// type: "input", sub_type: "number",
// sub_type: "date", }}
// }} />
// /> )}
// {filter.modifiers[name] === "between" && ( </>
// <FieldTypeInput )}
// {...field} {type === "date" && (
// field={{ ...field.field, name: `${name}_to` }} <>
// prop={{ <FieldTypeInput
// type: "input", arg={arg}
// sub_type: "date", {...field}
// }} field={{
// /> ...field.field,
// )} name:
// </> filter.modifiers[name] === "between"
// )} ? name
// {type === "boolean" && ( : `${name}_from`,
// <FieldCheckbox }}
// arg={field.arg} prop={{
// field={field.field} type: "input",
// fm={field.fm} sub_type: "date",
// /> }}
// )} />
// {type === "options" && ( {filter.modifiers[name] === "between" && (
// <> <FieldTypeInput
// {singleOptions.includes(filter.modifiers[name]) && ( arg={arg}
// <SingleOption {...field} /> {...field}
// )} field={{ ...field.field, name: `${name}_to` }}
// {multiOptions.includes(filter.modifiers[name]) && ( prop={{
// <MultiOption {...field} /> type: "input",
// )} sub_type: "date",
// </> }}
// )} />
// </> )}
// ); </>
// }} )}
// </BaseField> {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: "",