From 9df6372ea8d4fdebefcdab04a324cb7a481aeda3 Mon Sep 17 00:00:00 2001
From: Rizky <rizky@avolut.com>
Date: Mon, 24 Jun 2024 03:46:05 -0700
Subject: [PATCH] fix

---
 comps/custom/ShowHidePanel.tsx               |   4 +-
 comps/form/field/Field.tsx                   |   2 +-
 comps/form/field/type/TypeCheckbox.tsx       |   1 -
 comps/form/field/type/TypeDropdown.tsx       |  14 +-
 comps/form/field/type/TypeMoney.tsx          |   4 +-
 comps/form/field/type/TypeSingleCheckbox.tsx |  76 ++++++++++
 comps/form/field/type/TypeSingleOption.tsx   |   5 +-
 comps/form/field/type/TypeToggle.tsx         |  21 ++-
 comps/list/TableList.tsx                     | 152 +++++++++++++++----
 gen/prop/gen_prop_fields.ts                  |  12 +-
 10 files changed, 241 insertions(+), 50 deletions(-)
 create mode 100755 comps/form/field/type/TypeSingleCheckbox.tsx

diff --git a/comps/custom/ShowHidePanel.tsx b/comps/custom/ShowHidePanel.tsx
index 1ee9be7..0f83ddb 100755
--- a/comps/custom/ShowHidePanel.tsx
+++ b/comps/custom/ShowHidePanel.tsx
@@ -7,7 +7,8 @@ export const ShowHidePanel: FC<{
   body: ReactNode;
   open: string;
   PassProp: any;
-}> = ({ head, body, open, PassProp }) => {
+  on_init: (e?: any) => void
+}> = ({ head, body, open, PassProp, on_init}) => {
   const local = useLocal(
     {
       open: true,
@@ -22,6 +23,7 @@ export const ShowHidePanel: FC<{
   useEffect(() => {
     local.open = open === "true" ? true : false;
     local.render();
+    // on_init(local);
   }, [open]);
 
   return (
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 974bbfb..31da4e5 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -38,7 +38,7 @@ export const Field: FC<FieldProp> = (arg) => {
       className={cx(
         "field",
         "c-flex",
-        css`
+        type === "single-option" && sub_type === "checkbox" ? css`padding: 5px 0px 0px 7.5px;` : css`
           padding: 5px 0px 0px 10px;
         `,
         w === "auto" && fm.size.field === "full" && "c-w-full",
diff --git a/comps/form/field/type/TypeCheckbox.tsx b/comps/form/field/type/TypeCheckbox.tsx
index 010890f..09044c7 100755
--- a/comps/form/field/type/TypeCheckbox.tsx
+++ b/comps/form/field/type/TypeCheckbox.tsx
@@ -8,7 +8,6 @@ export const FieldCheckbox: FC<{
   fm: FMLocal;
   arg: FieldProp;
 }> = ({ field, fm, arg }) => {
-  // console.log({field, fm, arg})
   const local = useLocal({
     list: [] as any[],
   });
diff --git a/comps/form/field/type/TypeDropdown.tsx b/comps/form/field/type/TypeDropdown.tsx
index 5c0efc3..3a658c6 100755
--- a/comps/form/field/type/TypeDropdown.tsx
+++ b/comps/form/field/type/TypeDropdown.tsx
@@ -26,20 +26,22 @@ export const TypeDropdown: FC<{
   useEffect(() => {
     if (typeof arg.on_load === "function") {
       const options = arg.on_load({});
+      // console.log(field.name, {options})
       if (options instanceof Promise) {
         options.then((res) => {
+          // console.log(field.name, {res})
           if (Array.isArray(res)) {
             const list: any = res.map((e: any) => {
               return {
                 label: arg.opt_get_label(e),
                 value: e.value,
+                data: e.data
               };
             });
             local.options = list;
           } else {
             local.options = res;
           }
-
           if (
             field.type === "single-option" &&
             !value &&
@@ -53,6 +55,14 @@ export const TypeDropdown: FC<{
               options: local.options,
               selected: [local.options[0]?.value],
             });
+          } else if (field.type === "single-option" && value) {
+            arg.opt_set_value({
+              fm,
+              name: field.name,
+              type: field.type,
+              options: local.options,
+              selected: [value],
+            });
           }
 
           local.loaded = true;
@@ -60,7 +70,7 @@ export const TypeDropdown: FC<{
         });
       } else {
         local.loaded = true;
-        local.options = [];
+        local.options = Array.isArray(options) ? options : [] as any;
         local.render();
       }
     }
diff --git a/comps/form/field/type/TypeMoney.tsx b/comps/form/field/type/TypeMoney.tsx
index 264c198..7bef551 100755
--- a/comps/form/field/type/TypeMoney.tsx
+++ b/comps/form/field/type/TypeMoney.tsx
@@ -40,11 +40,11 @@ export const FieldMoney: FC<{
         type={"number"}
         onClick={() => {}}
         onChange={(ev) => {
-          fm.data[field.name] = ev.currentTarget.value;
+          fm.data[field.name] = Number(ev.currentTarget.value);
           fm.render();
           if (field.on_change) {
             field.on_change({
-              value: fm.data[field.name],
+              value: Number(fm.data[field.name]),
               name: field.name,
               fm,
             });
diff --git a/comps/form/field/type/TypeSingleCheckbox.tsx b/comps/form/field/type/TypeSingleCheckbox.tsx
new file mode 100755
index 0000000..6f9c1a4
--- /dev/null
+++ b/comps/form/field/type/TypeSingleCheckbox.tsx
@@ -0,0 +1,76 @@
+import { useLocal } from "@/utils/use-local";
+import get from "lodash.get";
+import { FC, useEffect } from "react";
+import { FMLocal, FieldLocal, FieldProp } from "../../typings";
+
+export const FieldSingleCheckbox: FC<{
+  field: FieldLocal;
+  fm: FMLocal;
+  arg: FieldProp;
+}> = ({ field, fm, arg }) => {
+  const local = useLocal({
+    list: [] as any[],
+  });
+  useEffect(() => {
+    const callback = (res: any[]) => {
+      if (Array.isArray(res)) {
+        const list: any = res.map((e: any) => {
+          return {
+            label: arg.opt_get_label(e),
+            value: e.value,
+          };
+        });
+        local.list = list;
+      } else {
+        local.list = [];
+      }
+      local.render();
+    };
+    const res = arg.on_load({});
+    if (res instanceof Promise) res.then(callback);
+    else callback(res);
+  }, []);
+  let value: boolean =fm.data[field.name];
+  return (
+    <>
+      <div className={cx("c-flex c-items-center c-w-full c-flex-row")}>
+        <div className={cx(`c-flex c-flex-col c-space-y-1 c-p-0.5`)}>
+          <div
+            onClick={() => {
+              fm.data[field.name] = !value;
+              fm.render();
+            }}
+            className="c-flex c-flex-row c-space-x-1 cursor-pointer c-items-center rounded-full p-0.5"
+          >
+            {value ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className="c-fill-sky-500"
+              >
+                <path
+                  fill="currentColor"
+                  d="m10.6 14.092l-2.496-2.496q-.14-.14-.344-.15q-.204-.01-.364.15t-.16.354q0 .194.16.354l2.639 2.638q.242.243.565.243q.323 0 .565-.243l5.477-5.477q.14-.14.15-.344q.01-.204-.15-.363q-.16-.16-.354-.16q-.194 0-.353.16L10.6 14.092ZM5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Z"
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Zm0-1h12.77q.23 0 .423-.192q.192-.193.192-.423V5.615q0-.23-.192-.423Q18.615 5 18.385 5H5.615q-.23 0-.423.192Q5 5.385 5 5.615v12.77q0 .23.192.423q.193.192.423.192Z"
+                />
+              </svg>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/comps/form/field/type/TypeSingleOption.tsx b/comps/form/field/type/TypeSingleOption.tsx
index d805c41..87ebe41 100755
--- a/comps/form/field/type/TypeSingleOption.tsx
+++ b/comps/form/field/type/TypeSingleOption.tsx
@@ -4,6 +4,7 @@ import { FieldButton } from "./TypeButton";
 import { TypeDropdown } from "./TypeDropdown";
 import { FieldRadio } from "./TypeRadio";
 import { FieldToggle } from "./TypeToggle";
+import { FieldSingleCheckbox } from "./TypeSingleCheckbox";
 
 export const SingleOption: FC<{
   field: FieldLocal;
@@ -20,7 +21,9 @@ export const SingleOption: FC<{
         <FieldButton arg={arg} field={field} fm={fm} />
       ) : arg.sub_type === "radio" ? (
         <FieldRadio arg={arg} field={field} fm={fm} />
-      ) : (
+      ) : arg.sub_type === "checkbox" ? (
+        <FieldSingleCheckbox arg={arg} field={field} fm={fm} />
+      ) :(
         <></>
       )}
     </>
diff --git a/comps/form/field/type/TypeToggle.tsx b/comps/form/field/type/TypeToggle.tsx
index 5af5807..c2b4677 100755
--- a/comps/form/field/type/TypeToggle.tsx
+++ b/comps/form/field/type/TypeToggle.tsx
@@ -11,7 +11,9 @@ export const FieldToggle: FC<{
   const local = useLocal({
     list: [] as any[],
     value: [] as any[],
+    ref: null as any,
   });
+
   useEffect(() => {
     const callback = (res: any[]) => {
       local.list = res;
@@ -30,12 +32,21 @@ export const FieldToggle: FC<{
     options: local.list,
     type: field.type,
   });
-  let checked = local.value.indexOf(value) > 0 ? true : false;
+  let checked =
+    typeof value === "boolean"
+      ? value
+      : local.value.indexOf(value) > 0
+      ? true
+      : false;
 
   return (
     <>
       <div className={cx("c-flex c-items-center c-justify-start c-w-full")}>
-        <label className="c-flex c-items-center c-cursor-pointer">
+        <label className="c-flex c-items-center c-cursor-pointer" onClick={(e) => {
+          if(local.ref){
+            local.ref.click();
+          }
+        }}>
           <div className="c-mr-3 c-text-gray-700 c-font-medium">
             {get(local, "list[0].label")}
           </div>
@@ -53,18 +64,18 @@ export const FieldToggle: FC<{
             )}
           >
             <input
+              ref={(ref) => (local.ref = ref)}
               type="checkbox"
               id="toggleB"
               checked={checked}
               className="c-sr-only"
               onChange={(e) => {
                 const check = e.target.checked;
-
                 if (check) {
                   arg.opt_set_value({
                     fm,
                     name: field.name,
-                    selected: [local.list[1]?.value],
+                    selected: [local.list[0]?.value],
                     options: local.list,
                     type: field.type,
                   });
@@ -72,7 +83,7 @@ export const FieldToggle: FC<{
                   arg.opt_set_value({
                     fm,
                     name: field.name,
-                    selected: [local.list[0]?.value],
+                    selected: [local.list[1]?.value],
                     options: local.list,
                     type: field.type,
                   });
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index 2a0b87d..ec941f6 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -380,38 +380,82 @@ export const TableList: FC<TableListProp> = ({
   for (const child of childs) {
     let key = getProp(child, "name", {});
     const name = getProp(child, "title", "");
+    const type = getProp(child, "type", "");
     const width = parseInt(getProp(child, "width", {}));
+    if (type === "checkbox") {
+      const on_click = getProp(child, "opt__on_click", "");
+      console.log({ on_click });
+      columns.push({
+        key,
+        name,
+        width: 35,
+        minWidth: 45,
+        resizable: true,
+        sortable: true,
+        frozen: true,
+        renderHeaderCell(props) {
+          return (
+            <div>
+              <CheckboxList value={false} on_click={on_click} />
+            </div>
+          );
+        },
+        renderCell(props) {
+          if (typeof render_col === "function")
+            return render_col({
+              props,
+              tbl: local,
+              child,
+            });
 
-    columns.push({
-      key,
-      name,
-      width: width > 0 ? width : undefined,
-      resizable: true,
-      sortable: true,
-      renderCell(props) {
-        if (typeof render_col === "function")
-          return render_col({
-            props,
-            tbl: local,
-            child,
-          });
+          return (
+            <PassProp
+              idx={props.rowIdx}
+              row={props.row}
+              col={{
+                name: props.column.key,
+                value: props.row[props.column.key],
+                depth: props.row.__depth || 0,
+              }}
+              rows={local.data}
+            >
+              {child}
+            </PassProp>
+          );
+        },
+      });
+    } else {
+      columns.push({
+        key,
+        name,
+        width: width > 0 ? width : undefined,
+        resizable: true,
+        sortable: true,
+        renderCell(props) {
+          if (typeof render_col === "function")
+            return render_col({
+              props,
+              tbl: local,
+              child,
+            });
 
-        return (
-          <PassProp
-            idx={props.rowIdx}
-            row={props.row}
-            col={{
-              name: props.column.key,
-              value: props.row[props.column.key],
-              depth: props.row.__depth || 0,
-            }}
-            rows={local.data}
-          >
-            {child}
-          </PassProp>
-        );
-      },
-    });
+          return (
+            <PassProp
+              idx={props.rowIdx}
+              row={props.row}
+              col={{
+                name: props.column.key,
+                value: props.row[props.column.key],
+                depth: props.row.__depth || 0,
+              }}
+              rows={local.data}
+            >
+              {child}
+            </PassProp>
+          );
+        },
+      });
+    }
   }
 
   if (mode === "list") {
@@ -690,7 +734,55 @@ export const TableList: FC<TableListProp> = ({
   } else {
   }
 };
-
+const CheckboxList: FC<{
+  on_click: (e: any) => void;
+  value?: boolean;
+}> = ({ value, on_click }) => {
+  const local = useLocal({
+    value: false as boolean,
+  });
+  return (
+    <div className={cx("c-flex c-items-center c-w-full c-flex-row")}>
+      <div className={cx(`c-flex c-flex-col c-space-y-1 c-p-0.5`)}>
+        <div
+          onClick={() => {
+            local.value = !local.value;
+            on_click(local.value);
+            local.render();
+          }}
+          className="c-flex c-flex-row c-space-x-1 cursor-pointer c-items-center rounded-full p-0.5"
+        >
+          {local.value ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="c-fill-sky-500"
+            >
+              <path
+                fill="currentColor"
+                d="m10.6 14.092l-2.496-2.496q-.14-.14-.344-.15q-.204-.01-.364.15t-.16.354q0 .194.16.354l2.639 2.638q.242.243.565.243q.323 0 .565-.243l5.477-5.477q.14-.14.15-.344q.01-.204-.15-.363q-.16-.16-.354-.16q-.194 0-.353.16L10.6 14.092ZM5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Z"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M5.615 20q-.69 0-1.152-.462Q4 19.075 4 18.385V5.615q0-.69.463-1.152Q4.925 4 5.615 4h12.77q.69 0 1.152.463q.463.462.463 1.152v12.77q0 .69-.462 1.152q-.463.463-1.153.463H5.615Zm0-1h12.77q.23 0 .423-.192q.192-.193.192-.423V5.615q0-.23-.192-.423Q18.615 5 18.385 5H5.615q-.23 0-.423.192Q5 5.385 5 5.615v12.77q0 .23.192.423q.193.192.423.192Z"
+              />
+            </svg>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
 const genRows = (total: number) => {
   const result = [] as any[];
   for (let i = 0; i < total; i++) {
diff --git a/gen/prop/gen_prop_fields.ts b/gen/prop/gen_prop_fields.ts
index 7201d02..cad6832 100755
--- a/gen/prop/gen_prop_fields.ts
+++ b/gen/prop/gen_prop_fields.ts
@@ -50,13 +50,8 @@ export const gen_prop_fields = async (gen_table: string, depth?: number) => {
     id_site = window.location.hostname;
   }
   const schema = getSchemaOnStorage(id_site, gen_table);
-  if (!schema) {
-    // const result: {
-    //   label: string;
-    //   value: string;
-    //   options?: any[];
-    //   checked?: boolean;
-    // }[] = [];
+if (!schema) {
+    console.log({depth})
     const result = await load_layer_schema(
       typeof depth === "undefined" ? 3 : depth,
       {},
@@ -153,8 +148,10 @@ export const gen_prop_fields = async (gen_table: string, depth?: number) => {
     } catch (e: any) {
       console.error(e.message);
     }
+    console.log({result})
     return result;
   } else {
+    console.log({schema})
     return schema;
   }
 };
@@ -172,6 +169,7 @@ const get_layer = async (
   table: string
 ) => {
   const { cols, rels } = await load_single(table);
+  console.log({cols, rels , table})
   const options = [];
   if (cols) {
     for (const [k, v] of Object.entries(cols)) {