From 0d540214ea83f5444e7478d4f7539690810d2eba Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Wed, 28 Aug 2024 17:24:36 -0700
Subject: [PATCH] type search

---
 .../Datepicker/components/Datepicker.tsx      |  2 -
 comps/form/field/Field.tsx                    |  4 +-
 comps/form/field/FieldInput.tsx               |  5 ++-
 comps/form/field/table-edit/TableEdit.tsx     |  8 +++-
 comps/form/field/type/TypeInput.tsx           | 44 +++++++++++++++++++
 comps/form/field/type/TypeUploadSingle.tsx    |  5 ++-
 6 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/comps/custom/Datepicker/components/Datepicker.tsx b/comps/custom/Datepicker/components/Datepicker.tsx
index f3c1df4..2c74b78 100755
--- a/comps/custom/Datepicker/components/Datepicker.tsx
+++ b/comps/custom/Datepicker/components/Datepicker.tsx
@@ -96,7 +96,6 @@ const Datepicker: React.FC<DatepickerType> = ({
       if (newDate.isSame(reformatDate) || newDate.isAfter(reformatDate)) {
         setSecondDate(nextMonth(date));
       }
-      console.log(date)
       setFirstDate(date);
     },
     [secondDate]
@@ -150,7 +149,6 @@ const Datepicker: React.FC<DatepickerType> = ({
 
   const changeSecondMonth = useCallback(
     (month: number) => {
-      console.log("ALOO")
       secondGotoDate(
         dayjs(`${secondDate.year()}-${month < 10 ? "0" : ""}${month}-01`)
       );
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index b503611..75ba261 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -15,7 +15,7 @@ const prepForSum = (obj: any): any => {
   const new_obj: any = {};
   if (obj) {
     for (const [k, v] of Object.entries(obj) as any) {
-      if (typeof v === "object" && v.id) {
+      if (typeof v === "object" && v?.id) {
         new_obj[k] = v.id;
         continue;
       }
@@ -86,7 +86,7 @@ export const Field: FC<FieldProp> = (arg) => {
       }
 
       if (arg.on_change) {
-        arg.on_change({ value: fm.data[name], name, fm });
+        arg.on_change({ value: fm.data?.[name], name, fm });
       }
 
       if (fm.deps.md) {
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 481bdec..ef348b7 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -135,7 +135,7 @@ export const FieldInput: FC<{
           {prefix && prefix !== "" ? (
             <div
               className={cx(
-                "c-pl-2 c-flex c-flex-row c-items-center",
+                "c-px-2 c-flex c-flex-row c-items-center",
                 css`
                   color: gray;
                 `
@@ -174,6 +174,7 @@ export const FieldInput: FC<{
                         arg={arg}
                         prop={
                           {
+                            placeholder: arg.placeholder,
                             type: type_field as any,
                             sub_type: arg.sub_type,
                             model_upload: arg.model_upload,
@@ -199,7 +200,7 @@ export const FieldInput: FC<{
           {suffix && suffix !== "" ? (
             <div
               className={cx(
-                "c-pr-2 c-flex c-flex-row c-items-center",
+                "c-px-2 c-flex c-flex-row c-items-center",
                 css`
                   color: gray;
                 `
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index e2521d9..78b3c44 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -83,6 +83,8 @@ export const TableEdit: FC<{
         frozen: true,
         renderCell(arg: any) {
           const { props, tbl } = arg;
+          local.tbl = tbl;
+          const key = props.column.key;
           return (
             <PassProp
               idx={props.rowIdx}
@@ -92,7 +94,9 @@ export const TableEdit: FC<{
                 value: props.row[props.column.key],
                 depth: props.row.__depth || 0,
               }}
-              fm={arg.fm}
+              rows={tbl.data}
+              fm={props.fm}
+              fm_parent={parent}
               ext_fm={{
                 idx: props.rowIdx,
                 change: () => {},
@@ -110,7 +114,7 @@ export const TableEdit: FC<{
             >
               {child}
             </PassProp>
-          ); 
+          );
         },
       });
     } else {
diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index 7a60bb0..7061aca 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -52,6 +52,10 @@ export const FieldTypeInput: FC<{
     show_pass: false,
     change_timeout: null as any,
   });
+  const internal = useLocal({
+    render_timeout: null as any,
+    search_timeout: null as any,
+  });
   let type_field = prop.sub_type;
   switch (type_field) {
     case "datetime":
@@ -334,6 +338,46 @@ export const FieldTypeInput: FC<{
         />
       );
     }
+    case "search": {
+      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"
+            placeholder={prop.placeholder}
+            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={async (ev) => {
+              fm.data[field.name] = ev.currentTarget.value;
+              renderOnChange();
+              if (prop.onChange) {
+                await prop.onChange(fm.data[field.name]);
+              }
+
+              clearTimeout(internal.search_timeout);
+              internal.search_timeout = setTimeout(() => {
+                fm?.submit();
+              }, 1500);
+            }}
+          />
+        </div>
+      );
+    }
   }
   return (
     <div className="c-flex c-relative c-flex-1">
diff --git a/comps/form/field/type/TypeUploadSingle.tsx b/comps/form/field/type/TypeUploadSingle.tsx
index d0d825b..558878c 100755
--- a/comps/form/field/type/TypeUploadSingle.tsx
+++ b/comps/form/field/type/TypeUploadSingle.tsx
@@ -37,7 +37,7 @@ export const FieldUploadSingle: FC<{
     try {
       file = event.target?.files?.[0];
     } catch (ex) {}
-    if (prop.model_upload === "import") {
+    if (prop.sub_type === "import") {
       const reader = new FileReader();
 
       function arrayBufferToBinaryString(buffer: ArrayBuffer): string {
@@ -149,7 +149,8 @@ export const FieldUploadSingle: FC<{
                 ref={(ref) => (input.ref = ref)}
                 type="file"
                 multiple={false}
-                accept={field.prop.upload?.accept}
+                // accept={field.prop.upload?.accept}
+                accept={"file/**"}
                 onChange={on_upload}
                 className={cx(
                   "c-absolute c-w-full c-h-full c-cursor-pointer c-top-0 c-left-0 c-opacity-0"