From 0fe4955ecb70859a798f99ea228589d2f56085d5 Mon Sep 17 00:00:00 2001
From: rizrmd <rizky@avolut.com>
Date: Wed, 12 Jun 2024 19:18:47 -0700
Subject: [PATCH] fix input bug

---
 comps/form/field/FieldInput.tsx           |  1 +
 comps/form/field/table-edit/TableEdit.tsx | 66 +++++++++++------------
 comps/form/gen/gen-table-edit.ts          | 14 ++++-
 comps/form/typings.ts                     |  1 +
 comps/list/TableList.tsx                  |  7 ++-
 comps/ui/button.tsx                       |  9 +++-
 comps/ui/typeahead.tsx                    |  4 ++
 7 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 706a894..2a31b34 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -64,6 +64,7 @@ export const FieldInput: FC<{
         on_init={() => {
           return fm;
         }}
+        show_header={arg.tbl_show_header}
         name={arg.name}
         child={child}
         PassProp={PassProp}
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index 96f2898..f76d2ab 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -10,9 +10,10 @@ export const TableEdit: FC<{
   child: any;
   PassProp: any;
   item: PrasiItem;
+  show_header?: "y" | "n";
   bottom: any;
   body: any;
-}> = ({ on_init, name, child, PassProp, item, bottom, body }) => {
+}> = ({ on_init, name, child, PassProp, item, bottom, show_header }) => {
   const fm = on_init();
   const local = useLocal(
     {
@@ -36,9 +37,9 @@ export const TableEdit: FC<{
       <div className="c-w-full c-h-full c-flex c-flex-col">
         <div
           className={cx(
-            "c-h-[50px] c-w-full",
+            "c-w-full",
             css`
-              > .rdg {
+              .rdg {
                 overflow-y: hidden !important;
               }
               .rdg-cell > div {
@@ -53,40 +54,36 @@ export const TableEdit: FC<{
               .field-error {
                 display: none;
               }
-            `
+              .rdg-cell {
+                min-height: 50px !important;
+              }
+              .rdg-header-row {
+                border-top-right-radius: 5px;
+                border-top-left-radius: 5px;
+              }
+            `,
+            value.length === 0 &&
+              (show_header === "n"
+                ? css`
+                    display: none;
+                  `
+                : css`
+                    height: 50px;
+                  `),
+            value.length > 0 &&
+              css`
+                height: ${50 *
+                (show_header === "n" ? value.length : value.length + 1)}px;
+              `,
+            show_header === "n" &&
+              css`
+                .rdg-header-row {
+                  display: none;
+                }
+              `
           )}
-          style={{
-            height: isEditor
-              ? 100
-              : value.length === 0
-              ? 50
-              : value.length * 50 + 50,
-          }}
           ref={ref}
         >
-          {/* <button
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              db.milestone.create({
-                data: {
-                  goal_setting: {
-                    connect: {
-                      id: "456222b4-4c0c-4f53-b62e-3e1f685f9c4a",
-                    },
-                  },
-                  name: "124124",
-                  goal: {
-                    connect: {
-                      id: "9fa14b83-2d8b-4c3d-a18c-c17d99a37813",
-                    },
-                  },
-                },
-              });
-            }}
-          >
-            COBA
-          </button> */}
           <TableList
             row_height={50}
             feature={[]}
@@ -105,6 +102,7 @@ export const TableEdit: FC<{
               event.preventDefault();
               event.stopPropagation();
             }}
+            show_header={show_header === "y"}
             selected={() => {
               return false;
             }}
diff --git a/comps/form/gen/gen-table-edit.ts b/comps/form/gen/gen-table-edit.ts
index c75197c..ca71964 100755
--- a/comps/form/gen/gen-table-edit.ts
+++ b/comps/form/gen/gen-table-edit.ts
@@ -368,7 +368,19 @@ export const genTableEdit = async (
     const option = {
       id: createId(),
       name: "bottom",
-      padding: { b: 10, l: 10, r: 10, t: 0 },
+      padding: {
+        b: 10,
+        l: 10,
+        r: 10,
+        t: 7,
+      },
+      border: {
+        style: "solid",
+        stroke: {
+          t: 1,
+        },
+        color: "#e6e6e6",
+      },
       type: "item",
       childs: [
         {
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index 11d7518..374edac 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -72,6 +72,7 @@ export type FieldProp = {
     name: string;
     type: string;
   }) => any;
+  tbl_show_header?: "y" | "n"
   opt_set_value: (arg: {
     selected: string[];
     options: { label: string; value: string; item?: string }[];
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index 5af54e2..26c5be0 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -50,6 +50,7 @@ type TableListProp = {
   gen_fields: string[];
   row_click: OnRowClick;
   selected: SelectedRow;
+  show_header?: boolean;
   id_parent?: string;
   feature?: Array<any>;
   filter_name: string;
@@ -92,6 +93,7 @@ export const TableList: FC<TableListProp> = ({
   render_row,
   row_height: rowHeight,
   render_col,
+  show_header,
   value,
   cache_row,
 }) => {
@@ -469,7 +471,7 @@ export const TableList: FC<TableListProp> = ({
     return (
       <div
         className={cx(
-          "c-w-full c-h-full c-flex-1 c-relative c-overflow-hidden",
+          "table-list c-w-full c-h-full c-flex-1 c-relative c-overflow-hidden",
           dataGridStyle(local),
           css`
             .rdg {
@@ -491,7 +493,7 @@ export const TableList: FC<TableListProp> = ({
             <Skeleton className={cx("c-w-[180px] c-h-[11px]")} />
           </div>
         )}
-        <div className="c-absolute c-inset-0">
+        <div className="table-list-inner c-absolute c-inset-0">
           {toaster_el && createPortal(<Toaster cn={cn} />, toaster_el)}
           {local.status === "init" ? (
             <DataGrid
@@ -528,6 +530,7 @@ export const TableList: FC<TableListProp> = ({
                 selectedRows={new Set() as ReadonlySet<any>}
                 onSelectedCellChange={() => {}}
                 onSelectedRowsChange={() => {}}
+                headerRowHeight={show_header === false ? 0 : undefined}
                 renderers={
                   local.status !== "ready"
                     ? undefined
diff --git a/comps/ui/button.tsx b/comps/ui/button.tsx
index 59e29d1..4142109 100755
--- a/comps/ui/button.tsx
+++ b/comps/ui/button.tsx
@@ -19,6 +19,7 @@ const buttonVariants = cva(
           "c-bg-secondary c-text-secondary-foreground hover:c-bg-secondary/80",
         ghost: "hover:c-bg-accent hover:c-text-accent-foreground",
         link: "c-text-primary c-underline-offset-4 hover:c-underline",
+        "no-style": "",
       },
       size: {
         default: "c-h-10 c-px-4 c-py-2",
@@ -45,11 +46,17 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLDivElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+
     return (
       <div
         className={cn(
           buttonVariants({ variant, size, className }),
-          `btn-${variant || "default"} btn c-transition-all c-duration-300`
+          `btn-${variant || "default"} btn c-transition-all c-duration-300`,
+          css`
+            > div {
+              border-radius: calc(var(--radius) - 2px);
+            }
+          `
         )}
         ref={ref}
         {...props}
diff --git a/comps/ui/typeahead.tsx b/comps/ui/typeahead.tsx
index 496366d..3019156 100755
--- a/comps/ui/typeahead.tsx
+++ b/comps/ui/typeahead.tsx
@@ -423,6 +423,10 @@ export const Typeahead: FC<{
                 local.render();
               }
             }
+
+            if (local.mode === "single") {
+              e.currentTarget.select();
+            }
           }}
           onChange={async (e) => {
             const val = e.currentTarget.value;