From 44fdee4f2b9ab7f87132cc64cefaa0a9f47bd2f5 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Mon, 12 Aug 2024 23:11:30 -0700
Subject: [PATCH] month picker

---
 .../Datepicker/components/Calendar/index.tsx  |  4 +-
 .../Datepicker/components/Datepicker.tsx      |  1 -
 comps/filter/FilterContent.tsx                | 38 +++++++++++---
 comps/ui/scroll-area.tsx                      | 22 ++++----
 utils/format-value.tsx                        | 51 ++++++++++---------
 5 files changed, 71 insertions(+), 45 deletions(-)

diff --git a/comps/custom/Datepicker/components/Calendar/index.tsx b/comps/custom/Datepicker/components/Calendar/index.tsx
index 5707937..111607b 100755
--- a/comps/custom/Datepicker/components/Calendar/index.tsx
+++ b/comps/custom/Datepicker/components/Calendar/index.tsx
@@ -116,7 +116,7 @@ const Calendar: React.FC<Props> = ({
           setShowMonths(!showMonths);
         } else {
           hideDatepicker();
-          clickDay(1,month + 1, date.year() );
+          clickDay(1,month, date.year() );
         }
       }, 250);
     },
@@ -313,7 +313,7 @@ const Calendar: React.FC<Props> = ({
                 hideMonths();
               }}
             >
-              <>{calendarData.date.year()}</>
+              <div className="c-py-2">{calendarData.date.year()}</div>
             </RoundedButton>
           </div>
         </div>
diff --git a/comps/custom/Datepicker/components/Datepicker.tsx b/comps/custom/Datepicker/components/Datepicker.tsx
index d353ec6..f3c1df4 100755
--- a/comps/custom/Datepicker/components/Datepicker.tsx
+++ b/comps/custom/Datepicker/components/Datepicker.tsx
@@ -112,7 +112,6 @@ const Datepicker: React.FC<DatepickerType> = ({
 
   const changeFirstMonth = useCallback(
     (month: number) => {
-      console.log("HALOOO")
       firstGotoDate(
         dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`)
       );
diff --git a/comps/filter/FilterContent.tsx b/comps/filter/FilterContent.tsx
index 7517ac0..a792df8 100755
--- a/comps/filter/FilterContent.tsx
+++ b/comps/filter/FilterContent.tsx
@@ -3,7 +3,7 @@ import { BaseForm } from "../form/base/BaseForm";
 import { FilterLocal } from "./utils/types";
 import { useLocal } from "lib/utils/use-local";
 import { getFilter } from "./utils/get-filter";
-import { FMLocal } from "lib/exports";
+import { FieldLoading, FMLocal } from "lib/exports";
 
 export const FilterContent: FC<{
   mode: string;
@@ -14,12 +14,16 @@ export const FilterContent: FC<{
   _item: PrasiItem;
 }> = ({ mode, filter, PassProp, child, _item, onSubmit }) => {
   const internal = useLocal({});
-
-
   return (
     <div
       className={cx(
         `c-flex c-flex-1 filter-content filter-${mode}`,
+        mode === "raw"
+          ? css`
+              flex-grow: 1;
+              height: 100%;
+            `
+          : "",
         css`
           &.filter-regular {
             width: 100%;
@@ -102,10 +106,32 @@ export const FilterContent: FC<{
       <BaseForm
         data={filter.data}
         on_submit={async (form) => {
-          if (typeof onSubmit === "function" && mode === "raw") {
-            await onSubmit(form.fm);
-          }
+          try {
+            if (typeof form.fm?.data === "object") {
+              const fm = form.fm?.data as any
+              form.render();
+              form.fm.render();
+            }
+          } catch (ex) {}
 
+          if (typeof onSubmit === "function" && mode === "raw") {
+            const data = await onSubmit(form.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();
+            }
+          }
+          // form.render();
           const f = getFilter(filter.name);
           if (f) {
             for (const list of Object.values(f.list.ref)) {
diff --git a/comps/ui/scroll-area.tsx b/comps/ui/scroll-area.tsx
index 2060164..a748abb 100755
--- a/comps/ui/scroll-area.tsx
+++ b/comps/ui/scroll-area.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { cn } from "@/utils"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/utils";
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
@@ -12,14 +12,14 @@ const ScrollArea = React.forwardRef<
     className={cn("c-relative c-overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="c-h-full c-w-full c-rounded-[inherit]">
-      {children}
+    <ScrollAreaPrimitive.Viewport className="c-h-full c-w-full c-rounded-[inherit] c-float-right c-absolute c-top-0 c-pl-2">
+    {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -40,7 +40,7 @@ const ScrollBar = React.forwardRef<
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="c-relative c-flex-1 c-rounded-full c-bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/utils/format-value.tsx b/utils/format-value.tsx
index ba40b8b..517954e 100755
--- a/utils/format-value.tsx
+++ b/utils/format-value.tsx
@@ -15,6 +15,31 @@ export const FormatValue: FC<{
   mode?: "money" | "datetime" | "timeago" | "date";
 }> = (prop) => {
   const { value, gen_fields, name, mode } = prop;
+  if (mode === "money") {
+    if (isEmptyString(value)) return "-";
+    return formatMoney(ceil_comma(Number(value) || 0));
+  } else if (mode === "datetime") {
+    if (!value || isEmptyString(value)) return "-";
+    try {
+      return formatDate(dayjs(value), "DD MMMM YYYY HH:mm");
+    } catch (ex: any) {
+      return "-";
+    }
+  } else if (mode === "date") {
+    if (!value || isEmptyString(value)) return "-";
+    try {
+      return formatDate(dayjs(value), "DD MMMM YYYY");
+    } catch (ex: any) {
+      return "-";
+    }
+  } else if (mode === "timeago") {
+    if (!value || isEmptyString(value)) return "-";
+    try {
+      return timeAgo(dayjs(value));
+    } catch (ex: any) {
+      return "-";
+    }
+  }
   if (gen_fields) {
     const gf = JSON.stringify(gen_fields);
     if (!fields_map.has(gf)) {
@@ -45,31 +70,7 @@ export const FormatValue: FC<{
 
     if (typeof value === "boolean") return <>{value ? "Yes" : "No"}</>;
 
-    if (mode === "money") {
-      if (isEmptyString(value)) return "-";
-      return formatMoney(ceil_comma(Number(value) || 0));
-    } else if (mode === "datetime") {
-      if (!value || isEmptyString(value)) return "-";
-      try {
-        return formatDate(dayjs(value), "DD MMMM YYYY HH:mm");
-      } catch (ex: any) {
-        return "-";
-      }
-    } else if (mode === "date") {
-      if (!value || isEmptyString(value)) return "-";
-      try {
-        return formatDate(dayjs(value), "DD MMMM YYYY");
-      } catch (ex: any) {
-        return "-";
-      }
-    } else if (mode === "timeago") {
-      if (!value || isEmptyString(value)) return "-";
-      try {
-        return timeAgo(dayjs(value));
-      } catch (ex: any) {
-        return "-";
-      }
-    }
+   
     // await db._batch.update({
     //   table: "goal",
     //   data: [],