fix search filter
This commit is contained in:
Rizky
parent
c0e612e6f6
commit
0d7c142e93
|
|
@ -13,7 +13,7 @@ export const FilterContent: FC<{
|
|||
child: any;
|
||||
_item: PrasiItem;
|
||||
}> = ({ mode, filter, PassProp, child, _item, onSubmit }) => {
|
||||
const internal = useLocal({});
|
||||
filter.PassProp = PassProp;
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
|
|
@ -94,7 +94,6 @@ export const FilterContent: FC<{
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1000;
|
||||
/* Styles specific to popup */
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
|
|
@ -104,38 +103,30 @@ export const FilterContent: FC<{
|
|||
)}
|
||||
>
|
||||
<BaseForm
|
||||
tag="blank"
|
||||
data={filter.data}
|
||||
onSubmit={async (form) => {
|
||||
const fm = form.fm;
|
||||
name={filter.name}
|
||||
onSubmit={async ({ fm }) => {
|
||||
try {
|
||||
if (typeof form.fm?.data === "object") {
|
||||
form.render();
|
||||
form.fm.render();
|
||||
if (typeof fm.data === "object") {
|
||||
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 = {
|
||||
if (typeof fm.data === "object") {
|
||||
fm.data = {
|
||||
__status: "submit",
|
||||
...form.fm.data,
|
||||
...fm.data,
|
||||
_where: data,
|
||||
};
|
||||
form.fm.render();
|
||||
fm.render();
|
||||
filter.data = {
|
||||
__status: "submit",
|
||||
...form.fm.data,
|
||||
...fm.data,
|
||||
_where: data,
|
||||
};
|
||||
filter.render();
|
||||
|
|
@ -150,15 +141,62 @@ export const FilterContent: FC<{
|
|||
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) => {
|
||||
filter.form = form;
|
||||
{({ fm }) => {
|
||||
filter.fm = fm;
|
||||
return (
|
||||
<>
|
||||
{!!(PassProp && child) && (
|
||||
<PassProp filter={filter} fm={form.fm}>
|
||||
<PassProp filter={filter} fm={filter.fm}>
|
||||
{child}
|
||||
</PassProp>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@ export const FilterField: FC<{
|
|||
search_timeout: null as any,
|
||||
});
|
||||
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;
|
||||
|
||||
const singleOptions = ["equal", "not_equal"];
|
||||
|
|
@ -32,167 +33,183 @@ export const FilterField: FC<{
|
|||
internal.render_timeout = setTimeout(() => {
|
||||
filter_window.prasiContext.render();
|
||||
}, 500);
|
||||
}, [filter.form]);
|
||||
}, [fm]);
|
||||
|
||||
let show_modifier = filter.mode !== "inline";
|
||||
return null;
|
||||
// return (
|
||||
// <BaseField
|
||||
// {...filter.form.fieldProps({
|
||||
// name: name || "",
|
||||
// label: label || name || "",
|
||||
// render: internal.render,
|
||||
// prefix: show_modifier
|
||||
// ? () => (
|
||||
// <FieldModifier
|
||||
// onChange={(modifier) => {
|
||||
// filter.modifiers[name] = modifier;
|
||||
// filter.render();
|
||||
// filter_window.prasiContext.render();
|
||||
// }}
|
||||
// modifier={filter.modifiers[name]}
|
||||
// type={type}
|
||||
// />
|
||||
// )
|
||||
// : undefined,
|
||||
// onLoad() {
|
||||
// return [{ label: "halo", value: "asda" }];
|
||||
// },
|
||||
// subType: singleOptions.includes(filter.modifiers[name])
|
||||
// ? "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 (
|
||||
// <>
|
||||
// {type === "text" && (
|
||||
// <FieldTypeInput
|
||||
// {...field}
|
||||
// prop={{
|
||||
// type: "input",
|
||||
// sub_type: "text",
|
||||
// }}
|
||||
// />
|
||||
// )}
|
||||
// {type === "number" && (
|
||||
// <>
|
||||
// <FieldTypeInput
|
||||
// {...field}
|
||||
// field={{
|
||||
// ...field.field,
|
||||
// name:
|
||||
// filter.modifiers[name] === "between"
|
||||
// ? name
|
||||
// : `${name}_from`,
|
||||
// }}
|
||||
// prop={{
|
||||
// type: "input",
|
||||
// sub_type: "number",
|
||||
// }}
|
||||
// />
|
||||
// {filter.modifiers[name] === "between" && (
|
||||
// <FieldTypeInput
|
||||
// {...field}
|
||||
// field={{ ...field.field, name: `${name}_to` }}
|
||||
// prop={{
|
||||
// type: "input",
|
||||
// sub_type: "number",
|
||||
// }}
|
||||
// />
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// {type === "date" && (
|
||||
// <>
|
||||
// <FieldTypeInput
|
||||
// {...field}
|
||||
// field={{
|
||||
// ...field.field,
|
||||
// name:
|
||||
// filter.modifiers[name] === "between"
|
||||
// ? name
|
||||
// : `${name}_from`,
|
||||
// }}
|
||||
// prop={{
|
||||
// type: "input",
|
||||
// sub_type: "date",
|
||||
// }}
|
||||
// />
|
||||
// {filter.modifiers[name] === "between" && (
|
||||
// <FieldTypeInput
|
||||
// {...field}
|
||||
// field={{ ...field.field, name: `${name}_to` }}
|
||||
// prop={{
|
||||
// type: "input",
|
||||
// sub_type: "date",
|
||||
// }}
|
||||
// />
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// {type === "boolean" && (
|
||||
// <FieldCheckbox
|
||||
// arg={field.arg}
|
||||
// field={field.field}
|
||||
// fm={field.fm}
|
||||
// />
|
||||
// )}
|
||||
// {type === "options" && (
|
||||
// <>
|
||||
// {singleOptions.includes(filter.modifiers[name]) && (
|
||||
// <SingleOption {...field} />
|
||||
// )}
|
||||
// {multiOptions.includes(filter.modifiers[name]) && (
|
||||
// <MultiOption {...field} />
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// </>
|
||||
// );
|
||||
// }}
|
||||
// </BaseField>
|
||||
// );
|
||||
const arg = {
|
||||
name: name || "",
|
||||
fm,
|
||||
label: label || name || "",
|
||||
render: internal.render,
|
||||
prefix: show_modifier
|
||||
? () => (
|
||||
<FieldModifier
|
||||
onChange={(modifier) => {
|
||||
filter.modifiers[name] = modifier;
|
||||
filter.render();
|
||||
filter_window.prasiContext.render();
|
||||
}}
|
||||
modifier={filter.modifiers[name]}
|
||||
type={type}
|
||||
/>
|
||||
)
|
||||
: undefined,
|
||||
onLoad() {
|
||||
return [{ label: "halo", value: "asda" }];
|
||||
},
|
||||
subType: singleOptions.includes(filter.modifiers[name])
|
||||
? "dropdown"
|
||||
: "typeahead",
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseField
|
||||
fm={fm}
|
||||
label={label || name}
|
||||
name={name || ""}
|
||||
PassProp={filter.PassProp}
|
||||
>
|
||||
{(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);
|
||||
if (!field.fm.data[name]) {
|
||||
fm.submit();
|
||||
} else {
|
||||
internal.search_timeout = setTimeout(() => {
|
||||
fm?.submit();
|
||||
}, 1500);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
clearTimeout(internal.search_timeout);
|
||||
fm?.submit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{type === "text" && (
|
||||
<FieldTypeInput
|
||||
{...field}
|
||||
arg={arg}
|
||||
prop={{
|
||||
type: "input",
|
||||
sub_type: "text",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{type === "number" && (
|
||||
<>
|
||||
<FieldTypeInput
|
||||
arg={arg}
|
||||
{...field}
|
||||
field={{
|
||||
...field.field,
|
||||
name:
|
||||
filter.modifiers[name] === "between"
|
||||
? name
|
||||
: `${name}_from`,
|
||||
}}
|
||||
prop={{
|
||||
type: "input",
|
||||
sub_type: "number",
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ export const MasterFilter: FC<FilterProps> = ({
|
|||
}
|
||||
filter.raw_status = "ready";
|
||||
filter.render();
|
||||
|
||||
});
|
||||
} else {
|
||||
filter.raw_status = "ready";
|
||||
|
|
@ -95,6 +94,7 @@ export const MasterFilter: FC<FilterProps> = ({
|
|||
if (mode === "raw" && filter.raw_status !== "ready") {
|
||||
return <FieldLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterContent
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { BaseFormLocal } from "../../form/base/types";
|
||||
import { GenField } from "../../form/typings";
|
||||
import { FMLocal, GenField } from "../../form/typings";
|
||||
|
||||
export type FilterFieldType =
|
||||
| "search-all"
|
||||
|
|
@ -14,7 +13,8 @@ export const default_filter_local = {
|
|||
columns: [] as string[],
|
||||
fields: [] as GenField[],
|
||||
tableName: "",
|
||||
form: null as null | BaseFormLocal<any>,
|
||||
fm: null as null | FMLocal,
|
||||
PassProp: null as null | any,
|
||||
modifiers: {} as Record<string, string>,
|
||||
types: {} as Record<string, FilterFieldType>,
|
||||
name: "",
|
||||
|
|
|
|||
Loading…
Reference in New Issue