month picker

This commit is contained in:
rizky 2024-08-12 23:11:30 -07:00
parent bdb9216c17
commit 44fdee4f2b
5 changed files with 71 additions and 45 deletions

View File

@ -116,7 +116,7 @@ const Calendar: React.FC<Props> = ({
setShowMonths(!showMonths); setShowMonths(!showMonths);
} else { } else {
hideDatepicker(); hideDatepicker();
clickDay(1,month + 1, date.year() ); clickDay(1,month, date.year() );
} }
}, 250); }, 250);
}, },
@ -313,7 +313,7 @@ const Calendar: React.FC<Props> = ({
hideMonths(); hideMonths();
}} }}
> >
<>{calendarData.date.year()}</> <div className="c-py-2">{calendarData.date.year()}</div>
</RoundedButton> </RoundedButton>
</div> </div>
</div> </div>

View File

@ -112,7 +112,6 @@ const Datepicker: React.FC<DatepickerType> = ({
const changeFirstMonth = useCallback( const changeFirstMonth = useCallback(
(month: number) => { (month: number) => {
console.log("HALOOO")
firstGotoDate( firstGotoDate(
dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`) dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`)
); );

View File

@ -3,7 +3,7 @@ import { BaseForm } from "../form/base/BaseForm";
import { FilterLocal } from "./utils/types"; import { FilterLocal } from "./utils/types";
import { useLocal } from "lib/utils/use-local"; import { useLocal } from "lib/utils/use-local";
import { getFilter } from "./utils/get-filter"; import { getFilter } from "./utils/get-filter";
import { FMLocal } from "lib/exports"; import { FieldLoading, FMLocal } from "lib/exports";
export const FilterContent: FC<{ export const FilterContent: FC<{
mode: string; mode: string;
@ -14,12 +14,16 @@ export const FilterContent: FC<{
_item: PrasiItem; _item: PrasiItem;
}> = ({ mode, filter, PassProp, child, _item, onSubmit }) => { }> = ({ mode, filter, PassProp, child, _item, onSubmit }) => {
const internal = useLocal({}); const internal = useLocal({});
return ( return (
<div <div
className={cx( className={cx(
`c-flex c-flex-1 filter-content filter-${mode}`, `c-flex c-flex-1 filter-content filter-${mode}`,
mode === "raw"
? css`
flex-grow: 1;
height: 100%;
`
: "",
css` css`
&.filter-regular { &.filter-regular {
width: 100%; width: 100%;
@ -102,10 +106,32 @@ export const FilterContent: FC<{
<BaseForm <BaseForm
data={filter.data} data={filter.data}
on_submit={async (form) => { on_submit={async (form) => {
if (typeof onSubmit === "function" && mode === "raw") { try {
await onSubmit(form.fm); 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); const f = getFilter(filter.name);
if (f) { if (f) {
for (const list of Object.values(f.list.ref)) { for (const list of Object.values(f.list.ref)) {

View File

@ -1,8 +1,8 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "@/utils" import { cn } from "@/utils";
const ScrollArea = React.forwardRef< const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
@ -12,14 +12,14 @@ const ScrollArea = React.forwardRef<
className={cn("c-relative c-overflow-hidden", className)} className={cn("c-relative c-overflow-hidden", className)}
{...props} {...props}
> >
<ScrollAreaPrimitive.Viewport className="c-h-full c-w-full c-rounded-[inherit]"> <ScrollAreaPrimitive.Viewport className="c-h-full c-w-full c-rounded-[inherit] c-float-right c-absolute c-top-0 c-pl-2">
{children} {children}
</ScrollAreaPrimitive.Viewport> </ScrollAreaPrimitive.Viewport>
<ScrollBar /> <ScrollBar />
<ScrollAreaPrimitive.Corner /> <ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root> </ScrollAreaPrimitive.Root>
)) ));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef< const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, 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.ScrollAreaThumb className="c-relative c-flex-1 c-rounded-full c-bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar> </ScrollAreaPrimitive.ScrollAreaScrollbar>
)) ));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar } export { ScrollArea, ScrollBar };

View File

@ -15,6 +15,31 @@ export const FormatValue: FC<{
mode?: "money" | "datetime" | "timeago" | "date"; mode?: "money" | "datetime" | "timeago" | "date";
}> = (prop) => { }> = (prop) => {
const { value, gen_fields, name, mode } = 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) { if (gen_fields) {
const gf = JSON.stringify(gen_fields); const gf = JSON.stringify(gen_fields);
if (!fields_map.has(gf)) { if (!fields_map.has(gf)) {
@ -45,31 +70,7 @@ export const FormatValue: FC<{
if (typeof value === "boolean") return <>{value ? "Yes" : "No"}</>; 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({ // await db._batch.update({
// table: "goal", // table: "goal",
// data: [], // data: [],