fix

comps/filter/FilterField.tsx

@@ -4,7 +4,7 @@ import { FilterFieldType, FilterLocal, filter_window } from "./utils/types";
 import { FieldTypeText } from "../form/field/type/TypeText";
 import { FieldModifier } from "./FieldModifier";
 import { useLocal } from "lib/utils/use-local";
-import { FieldToggle } from "../form/field/type/TypeToggle";
+import { FieldCheckbox } from "../form/field/type/TypeCheckbox";
 
 export const FilterField: FC<{
   filter: FilterLocal;
@@ -42,6 +42,7 @@ export const FilterField: FC<{
             type={type}
           />
         ),
+        opt_get_value: () => { }
       })}
     >
       {(field) => (
@@ -79,7 +80,7 @@ export const FilterField: FC<{
                   suffix: "",
                 }}
               />
-              {filter.modifiers[name] === 'Between' && (
+              {filter.modifiers[name] === 'between' && (
                 <FieldTypeText
                   {...field}
                   prop={{
@@ -93,10 +94,10 @@ export const FilterField: FC<{
             </>
           )}
           {type === "boolean" && (
-            <FieldToggle {...field} />
+            <FieldCheckbox arg={field.arg} field={field.field} fm={field.fm} />
           )}
         </>
       )}
-    </BaseField>
+    </BaseField >
   );
 };

comps/filter/utils/filter-where.ts

@@ -5,7 +5,6 @@ export const filterWhere = (filter_name: string) => {
   const pf = filter_window.prasi_filter?.[getPathname()]?.[filter_name];
   const where: any = {};
   const AND: any[] = [];
-
   if (pf) {
     for (const [k, filter] of Object.entries(pf)) {
       for (const [name, value] of Object.entries(filter.data)) {
@@ -82,6 +81,19 @@ export const filterWhere = (filter_name: string) => {
               }
             }
             break;
+          case "options":
+            {
+              if (modifier === "equal") {
+                AND.push({ [name]: { value } });
+              } else if (modifier === "not_equal") {
+                AND.push({ [name]: { NOT: value } });
+              } else if (modifier === "includes") {
+                AND.push({ [name]: { hasEvery: value } });
+              } else if (modifier === "excludes") {
+                AND.push({ [name]: { notIn: value } });
+              }
+            }
+            break;
         }
       }
     }

comps/filter/utils/types.tsx

@@ -1,7 +1,7 @@
 import { BaseFormLocal } from "../../form/base/types";
 import { GenField } from "../../form/typings";
 
-export type FilterFieldType = "text" | "number" | "boolean" | "date";
+export type FilterFieldType = "text" | "number" | "boolean" | "date" | "options";
 export const default_filter_local = {
   data: {} as any,
   columns: [] as string[],
@@ -29,8 +29,14 @@ export const modifiers = {
   date: {
     between: "Between",
     greater_than: "Greater Than",
-    less_than: "Less Than"
+    less_than: "Less Than",
   },
+  options: {
+    equal: "Equal",
+    not_equal: "Not Equal",
+    includes: "Includes",
+    excludes: "Excludes"
+  }
 };
 export type FilterModifier = typeof modifiers;
 

comps/form/base/types.ts

@@ -12,6 +12,7 @@ type CreateFieldArg = {
   prefix?: ReactNode | (() => ReactNode);
   onChange?: (value: any) => void;
   render?: () => void;
+  opt_get_value?: (value: any) => any
 };
 
 export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & {

comps/form/field/type/TypeCheckbox.tsx

@@ -21,6 +21,8 @@ export const FieldCheckbox: FC<{
     else callback(res);
   }, []);
 
+  console.log('arg', arg);
+
   let value = arg.opt_get_value({
     fm,
     name: field.name,
@@ -36,7 +38,7 @@ export const FieldCheckbox: FC<{
             let isChecked = false;
             try {
               isChecked = value.some((e: any) => e === item[arg.pk]);
-            } catch (ex) {}
+            } catch (ex) { }
 
             return (
               <div

comps/form/field/type/TypeDropdown.tsx

@@ -19,15 +19,14 @@ export const TypeDropdown: FC<{
     options: local.options,
     type: field.type,
   });
-  console.log({ value });
   useEffect(() => {
     if (typeof arg.on_load === "function") {
-      const options = arg.on_load({ mode: "query" });
+      console.log("masuk")
-      console.log("Masuk");
+      const options = arg.on_load();
-      // console.log(options)
+      console.log({options})
       if (options instanceof Promise) {
         options.then((res) => {
-          console.log({ res });
+          console.log({res})
           local.options = res;
           local.loaded = true;
           local.render();
@@ -70,6 +69,7 @@ export const TypeDropdown: FC<{
     );
 
   return (
+    <>
       <Typeahead
         value={value}
         onSelect={({ search, item }) => {
@@ -93,5 +93,6 @@ export const TypeDropdown: FC<{
           return local.options;
         }}
       />
+    </>
   );
 };

comps/form/gen/fields.ts

@@ -4,6 +4,7 @@ import { createItem, parseGenField } from "lib/gen/utils";
 import capitalize from "lodash.capitalize";
 import { ArrowBigDown } from "lucide-react";
 import { on_load_rel } from "./on_load_rel";
+import { createId } from "@paralleldrive/cuid2";
 export type GFCol = {
   name: string;
   type: string;
@@ -68,8 +69,6 @@ export const newField = (
       },
     });
   } else if (["has-many", "has-one"].includes(arg.type) && arg.relation) {
-    if (["has-one"].includes(arg.type)) {
-      console.log(opt.value);
     const fields = parseGenField(opt.value);
       const res = generateSelect(fields);
       const load = on_load_rel({
@@ -78,6 +77,7 @@ export const newField = (
         select: res.select,
         pks: {},
       });
+    if (["has-one"].includes(arg.type)) {
       return createItem({
         component: {
           id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
@@ -87,63 +87,48 @@ export const newField = (
             type: "single-option",
             sub_type: "dropdown",
             rel__gen_table: arg.name,
-            // rel__gen_fields: [`[${opt.value.join(",")}]`],
+            opt__on_load: [load],
-            opt__on_load: [
-              `\
-            ${load}
-            `,
-            ],
             child: {
               childs: [],
             },
           },
         },
       });
-      // return {
-      //     name: "item",
-      //     type: "item",
-      //     component: {
-      //       id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
-      //       props: {
-      //         name: {
-      //             mode: "string",
-      //             value: arg.name
-      //         },
-      //         label: {
-      //             mode: "string",
-      //             value: formatName(arg.name)
-      //         },
-      //         type: {
-      //             mode: "string",
-      //             value: "single-option"
-      //         },
-      //         sub_type:  {
-      //             mode: "string",
-      //             value: "dropdown"
-      //         },
-      //         rel__gen_table:  {
-      //             mode: "string",
-      //             value: arg.name
-      //         },
-      //         rel__gen_fields:  {
-      //             mode: "raw",
-      //             value: `${JSON.stringify(opt.val)}`
-      //         }
-      //       },
-      //     },
-      //   };
     } else {
-      
+      return {
-      const fields = parseGenField(opt.value);
+        id: createId(),
-      const res = generateSelect(fields);
+        name: "item",
-      const load = on_load_rel({
+        type: "item",
-        pk: res.pk,
+        childs: [],
-        table: arg.name,
+        edit: null as any,
-        select: res.select,
+        component: {
-        pks: {},
+          id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
-      });
+          props: {
-      console.log(load)
+            name: {
-      
+              type: "string",
+              value: arg.name,
+            },
+            label: {
+              type: "string",
+              value: formatName(arg.name),
+            },
+            sub_type: {
+              type: "string",
+              value: "single-option",
+            },
+            rel__gen_table: {
+              type: "string",
+              value: arg.name,
+            },
+            opt__on_load: {
+              type: "raw",
+              value: `\
+              ${load}
+              `,
+            },
+          },
+        },
+      };
       return createItem({
         component: {
           id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",

comps/form/gen/gen-form.ts

@@ -4,6 +4,7 @@ import { newField } from "./fields";
 import { generateSelect } from "../../md/gen/md-select";
 import { on_load } from "../../md/gen/tbl-list/on_load";
 import { on_submit } from "../../md/gen/tbl-list/on_submit";
+import { createId } from "@paralleldrive/cuid2";
 
 export const generateForm = async (
   modify: (data: any) => void,
@@ -59,12 +60,17 @@ export const generateForm = async (
       const field = newField(item, { parent_table: table, value });
       childs.push(field);
     }
+    console.log(childs)
     if (commit) {
       item.edit.setProp("body", {
         mode: "jsx",
-        value: createItem({
+        value: {
+          id: createId(),
+          name: "item",
+          type: "item",
           childs: childs,
-        }),
+          edit: null as any,
+        },
       });
       await item.edit.commit();
     } else {

comps/form/gen/on_load_rel.ts

@@ -27,7 +27,6 @@ export const on_load_rel = ({
         sample[k] = "sample";
       }
     }
-    console.log({cols})
   
     return `\
   (arg: {

gen/utils.ts

@@ -93,7 +93,6 @@ export const createItem = (arg: SimplifiedItem): any => {
               meta: { type: "text" },
               type: "string", 
               value: v[0],
-              valueBuilt: v[0],
             };
           } else if (Array.isArray(v) && v.length === 2) {
             component.props[k] = {