diff --git a/comps/charts/bar.tsx b/comps/charts/bar.tsx index 6ee5ad2..0fb2cbd 100755 --- a/comps/charts/bar.tsx +++ b/comps/charts/bar.tsx @@ -41,6 +41,7 @@ export const BarChart: FC<{ datasetIdKey="id" options={{ responsive: true, + maintainAspectRatio: false, plugins: legend === "none" ? { diff --git a/comps/custom/Datepicker/components/Calendar/index.tsx b/comps/custom/Datepicker/components/Calendar/index.tsx index 99f9d65..5707937 100755 --- a/comps/custom/Datepicker/components/Calendar/index.tsx +++ b/comps/custom/Datepicker/components/Calendar/index.tsx @@ -43,6 +43,7 @@ interface Props { onClickNext: () => void; changeMonth: (month: number) => void; changeYear: (year: number) => void; + mode?: "monthly" | "daily"; } const Calendar: React.FC = ({ @@ -53,6 +54,7 @@ const Calendar: React.FC = ({ onClickNext, changeMonth, changeYear, + mode = "daily", }) => { // Contexts const { @@ -73,6 +75,12 @@ const Calendar: React.FC = ({ const [showMonths, setShowMonths] = useState(false); const [showYears, setShowYears] = useState(false); const [year, setYear] = useState(date.year()); + useEffect(() => { + if (mode === "monthly") { + setShowMonths(true); + hideYears(); + } + }, []); // Functions const previous = useCallback(() => { return getLastDaysInMonth( @@ -104,7 +112,12 @@ const Calendar: React.FC = ({ (month: number) => { setTimeout(() => { changeMonth(month); - setShowMonths(!showMonths); + if (mode === "daily") { + setShowMonths(!showMonths); + } else { + hideDatepicker(); + clickDay(1,month + 1, date.year() ); + } }, 250); }, [changeMonth, showMonths] @@ -115,6 +128,10 @@ const Calendar: React.FC = ({ setTimeout(() => { changeYear(year); setShowYears(!showYears); + if (mode === "monthly") { + setShowMonths(true); + clickDay(1,date.month() + 1, year ); + } }, 250); }, [changeYear, showYears] @@ -125,7 +142,6 @@ const Calendar: React.FC = ({ const fullDay = `${year}-${month}-${day}`; let newStart; let newEnd = null; - function chosePeriod(start: string, end: string) { const ipt = input?.current; changeDatepickerValue( diff --git a/comps/custom/Datepicker/components/Datepicker.tsx b/comps/custom/Datepicker/components/Datepicker.tsx index f6ea330..d353ec6 100755 --- a/comps/custom/Datepicker/components/Datepicker.tsx +++ b/comps/custom/Datepicker/components/Datepicker.tsx @@ -51,6 +51,7 @@ const Datepicker: React.FC = ({ startWeekOn = "sun", classNames = undefined, popoverDirection = undefined, + mode="daily" }) => { const local = useLocal({ open: false }); // Ref @@ -95,6 +96,7 @@ const Datepicker: React.FC = ({ if (newDate.isSame(reformatDate) || newDate.isAfter(reformatDate)) { setSecondDate(nextMonth(date)); } + console.log(date) setFirstDate(date); }, [secondDate] @@ -110,6 +112,7 @@ const Datepicker: React.FC = ({ const changeFirstMonth = useCallback( (month: number) => { + console.log("HALOOO") firstGotoDate( dayjs(`${firstDate.year()}-${month < 10 ? "0" : ""}${month}-01`) ); @@ -148,6 +151,7 @@ const Datepicker: React.FC = ({ const changeSecondMonth = useCallback( (month: number) => { + console.log("ALOO") secondGotoDate( dayjs(`${secondDate.year()}-${month < 10 ? "0" : ""}${month}-01`) ); @@ -323,8 +327,8 @@ const Datepicker: React.FC = ({ return typeof containerClassName === "function" ? containerClassName(defaultContainerClassName) : typeof containerClassName === "string" && containerClassName !== "" - ? containerClassName - : defaultContainerClassName; + ? containerClassName + : defaultContainerClassName; }, [containerClassName]); return ( @@ -339,7 +343,9 @@ const Datepicker: React.FC = ({ open={local.open} content={
@@ -356,6 +362,7 @@ const Datepicker: React.FC = ({ onClickNext={nextMonthFirst} changeMonth={changeFirstMonth} changeYear={changeFirstYear} + mode={mode} minDate={minDate} maxDate={maxDate} /> @@ -372,6 +379,7 @@ const Datepicker: React.FC = ({ onClickNext={nextMonthSecond} changeMonth={changeSecondMonth} changeYear={changeSecondYear} + mode={mode} minDate={minDate} maxDate={maxDate} /> diff --git a/comps/custom/Datepicker/types/index.ts b/comps/custom/Datepicker/types/index.ts index b9e561c..9f5487a 100755 --- a/comps/custom/Datepicker/types/index.ts +++ b/comps/custom/Datepicker/types/index.ts @@ -82,6 +82,7 @@ export interface DatepickerType { disabledDates?: DateRangeType[] | null; startWeekOn?: string | null; popoverDirection?: PopoverDirectionType; + mode?: "daily" | "monthly" } export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange" diff --git a/comps/custom/Popover.tsx b/comps/custom/Popover.tsx index 357805a..d699fe9 100755 --- a/comps/custom/Popover.tsx +++ b/comps/custom/Popover.tsx @@ -137,6 +137,7 @@ function PopoverArrow() { top: arrowY != null ? `${arrowY}px` : "", [staticSide]: "-4px", transform: "rotate(45deg)", + cursor: "pointer" }} className={cx( "arrow", diff --git a/comps/filter/FilterContent.tsx b/comps/filter/FilterContent.tsx index e72f5e3..22083a6 100755 --- a/comps/filter/FilterContent.tsx +++ b/comps/filter/FilterContent.tsx @@ -3,14 +3,16 @@ 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"; export const FilterContent: FC<{ mode: string; filter: FilterLocal; + onSubmit?: (form: FMLocal | null) => Promise; PassProp: any; child: any; _item: PrasiItem; -}> = ({ mode, filter, PassProp, child, _item }) => { +}> = ({ mode, filter, PassProp, child, _item, onSubmit }) => { const internal = useLocal({}); return (
{ - const f = getFilter(filter.name); + on_submit={async (form) => { + if (typeof onSubmit === "function" && mode === "raw") { + const data = await onSubmit(form.fm); + if(typeof form.fm?.data === "object"){ + form.fm.data = { + ...form.fm.data, + _where: data + } + } + } + const f = getFilter(filter.name); if (f) { for (const list of Object.values(f.list.ref)) { list.reload(); @@ -113,7 +124,9 @@ export const FilterContent: FC<{ return ( <> {!!(PassProp && child) && ( - {child} + + {child} + )} ); diff --git a/comps/filter/FilterField.tsx b/comps/filter/FilterField.tsx index 335c06a..d0d0e2a 100755 --- a/comps/filter/FilterField.tsx +++ b/comps/filter/FilterField.tsx @@ -29,7 +29,7 @@ export const FilterField: FC<{ internal.render_timeout = setTimeout(() => { filter_window.prasiContext.render(); }, 500); - }, [filter.form?.data[name]]); + }, [filter.form]); let show_modifier = filter.mode !== "inline"; diff --git a/comps/filter/MasterFilter.tsx b/comps/filter/MasterFilter.tsx index 89786ab..10c5d06 100755 --- a/comps/filter/MasterFilter.tsx +++ b/comps/filter/MasterFilter.tsx @@ -1,7 +1,7 @@ import { useLocal } from "@/utils/use-local"; import { FC, ReactNode } from "react"; import { createPortal } from "react-dom"; -import { GenField } from "../form/typings"; +import { FMLocal, GenField } from "../form/typings"; import { FilterContent } from "./FilterContent"; import { getFilter } from "./utils/get-filter"; import { default_filter_local } from "./utils/types"; @@ -16,6 +16,7 @@ type FilterProps = { mode: FilterMode; children?: ReactNode; onClose?: () => void; + onSubmit?: (fm: FMLocal | null) => Promise; PassProp: any; child: any; _item: PrasiItem; @@ -31,6 +32,7 @@ export const MasterFilter: FC = ({ child, onClose, _item, + onSubmit, }): ReactNode => { const filter = useLocal({ ...default_filter_local }); filter.name = name; @@ -74,6 +76,7 @@ export const MasterFilter: FC = ({ )} > = ({ return ( <> { const f = getFilter(filter_name); - let where: any = {}; if (f) { let fields: GFCol[] = []; + // if (p.gen__fields) { fields = parseGenField(p.gen__fields); } for (const pf of Object.values(f.filter.ref)) { - const w = parseSingleFilter(pf, fields); - for (const [k, v] of Object.entries(w)) { - where[k] = v; + if (pf.mode === "raw") { + const data = pf.data?._where ? pf.data?._where : pf.data + for (const [k, v] of Object.entries(data)) { + where[k] = v; + } + } else { + const w = parseSingleFilter(pf, fields); + for (const [k, v] of Object.entries(w)) { + where[k] = v; + } } } } @@ -27,6 +34,6 @@ export const filterWhere = (filter_name: string, p: any) => { type: p.sft__type, }); } - +console.log({where}) return where; }; diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx index 76a69da..2daa64c 100755 --- a/comps/form/base/BaseForm.tsx +++ b/comps/form/base/BaseForm.tsx @@ -61,9 +61,9 @@ export const BaseForm = >( return prop; }; - form.createFm = () => { + form.createFm = useCallback(() => { if (form.fm) { - form.fm.data = form.data; + form.fm.data = data; return form.fm; } let size = "full"; @@ -72,7 +72,7 @@ export const BaseForm = >( size = "half"; } form.fm = { - data: form.data, + data: data, props: { label_mode: "vertical" }, error: { get: () => { @@ -84,7 +84,7 @@ export const BaseForm = >( render: form.render, } as any; return form.fm as any; - }; + }, [data]); form.fieldProps = (arg) => { return { @@ -95,8 +95,8 @@ export const BaseForm = >( }; useEffect(() => { - form.data = data; - form.render(); + // form.data = data; + // form.render(); if (form.internal.width === 0) { setTimeout(() => { @@ -142,7 +142,9 @@ export const BaseForm = >( form.render(); }, 50); } - + if (!form.fm) { + form.fm = form.createFm(); + } return (
{ diff --git a/comps/form/base/types.ts b/comps/form/base/types.ts index 6dead62..f212e87 100755 --- a/comps/form/base/types.ts +++ b/comps/form/base/types.ts @@ -3,7 +3,7 @@ import { FMLocal, FieldLocal, FieldProp } from "../typings"; export const default_base_form_local = { status: "init" as "init" | "submitting" | "ready", - data: {} as any, + // data: {} as any, internal: { width: 0, init_render: 0, @@ -23,7 +23,7 @@ type CreateFieldArg = { }; export type BaseFormLocal = Omit & { - data: T; + // data: T; createArg: (arg: CreateFieldArg) => FieldProp; createField: (arg: CreateFieldArg) => FieldLocal; createFm: () => FMLocal; diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx index ade3a15..0a4ec44 100755 --- a/comps/form/field/Field.tsx +++ b/comps/form/field/Field.tsx @@ -13,7 +13,7 @@ export const Field: FC = (arg) => { const { fm } = arg; const field = useField(arg); const name = field.name; - const local = useLocal({ prev_val: fm.data[name] }); + const local = useLocal({ prev_val: fm.data?.[name] }); const w = field.width; @@ -29,14 +29,29 @@ export const Field: FC = (arg) => { if (arg.on_change) { arg.on_change({ value: fm.data[name], name, fm }); } + if(!fm.events){ + fm.events = { + on_change(name, new_value) { + + }, + } + } fm.events.on_change(name, fm.data[name]); fm.render(); } }, [fm.data[name]]); + useEffect(() => { + if (typeof arg.on_init === "function") { + arg.on_init({ name, field }); + } + }, [field]); if (field.status === "init" && !isEditor) return null; - const errors = fm.error.get(name); + let errors = fm.error.get(name); + if(field.error){ + errors = [field.error] + } const props = { ...arg.props }; let editorClassName = ""; @@ -45,6 +60,8 @@ export const Field: FC = (arg) => { props.className.split(" ").find((e: string) => e.startsWith("s-")) || ""; } + const disabled = + typeof field.disabled === "function" ? field.disabled() : field.disabled; if (field.hidden) return <>; return ( @@ -72,7 +89,7 @@ export const Field: FC = (arg) => { "c-flex-col c-space-y-1", css` .field-outer { - border: 1px solid ${field.disabled ? "#ececeb" : "#cecece"}; + border: 1px solid ${disabled ? "#ececeb" : "#cecece"}; &.focused { border: 1px solid #1c4ed8; @@ -98,18 +115,18 @@ export const Field: FC = (arg) => { {field.desc}
)} - {errors.length > 0 && ( + {errors.length ? (
+ > {errors.map((err) => { return
{err}
; })}
- )} + ) : <>}
); diff --git a/comps/form/field/Label.tsx b/comps/form/field/Label.tsx index d287de7..450e7fd 100755 --- a/comps/form/field/Label.tsx +++ b/comps/form/field/Label.tsx @@ -6,13 +6,14 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal }> = ({ fm, }) => { const errors = fm.error.get(field.name); - + const disabled = + typeof field.disabled === "function" ? field.disabled() : field.disabled; return (
0 && `c-text-red-600`)}> {field.label} - {field.required && !field.disabled && ( + {field.required && !disabled && ( -