month picker
This commit is contained in:
parent
bdb9216c17
commit
44fdee4f2b
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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`)
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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)) {
|
||||||
|
|
|
||||||
|
|
@ -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 };
|
||||||
|
|
|
||||||
|
|
@ -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: [],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue