From 913f1dc942e81a809232792862485628b9c5e09d Mon Sep 17 00:00:00 2001 From: rizky Date: Thu, 28 Nov 2024 00:27:23 -0700 Subject: [PATCH] fix lib --- .../Datepicker/components/Calendar/Week.tsx | 4 +- .../Datepicker/components/Calendar/index.tsx | 9 -- comps/custom/Datepicker/helpers/index.ts | 15 +--- comps/form/base/BaseForm.tsx | 4 +- comps/form/field/FieldInput.tsx | 1 - comps/form/field/Label.tsx | 8 +- comps/form/field/table-edit/TableEdit.tsx | 7 +- comps/form/field/type/PreviewAfterUpload.tsx | 36 ++++++++ comps/form/field/type/TypeLink.tsx | 2 +- comps/form/field/type/TypeRadio.tsx | 3 + comps/form/gen/fields.ts | 2 +- comps/form/utils/init.tsx | 16 ++-- comps/form/utils/use-field.tsx | 1 - comps/icon.tsx | 2 +- comps/import/Import.tsx | 4 +- comps/list/TLList.tsx | 2 +- comps/list/TableList.tsx | 90 ++++++++++++++++--- comps/ui/toast.tsx | 1 + exports.tsx | 3 +- preset/menu/Menu.tsx | 42 +++++++-- preset/menu/utils/type-menu.ts | 6 +- server/server-route.ts | 1 - utils/date.ts | 8 ++ 23 files changed, 192 insertions(+), 75 deletions(-) create mode 100755 comps/form/field/type/PreviewAfterUpload.tsx diff --git a/comps/custom/Datepicker/components/Calendar/Week.tsx b/comps/custom/Datepicker/components/Calendar/Week.tsx index 6795bf4..e39d453 100755 --- a/comps/custom/Datepicker/components/Calendar/Week.tsx +++ b/comps/custom/Datepicker/components/Calendar/Week.tsx @@ -43,11 +43,11 @@ const Week: React.FC = ({style}) => { > {style === "google" ? dayjs(`2022-11-${6 + (item + startDateModifier)}`) .locale(i18n) - .format("dddd") : ucFirst( + .format(isMobile ? "dd" :"dddd") : ucFirst( shortString( dayjs(`2022-11-${6 + (item + startDateModifier)}`) .locale(i18n) - .format("dddd") + .format(isMobile ? "dd" :"dddd") ), )} diff --git a/comps/custom/Datepicker/components/Calendar/index.tsx b/comps/custom/Datepicker/components/Calendar/index.tsx index 34aefdf..65ac602 100755 --- a/comps/custom/Datepicker/components/Calendar/index.tsx +++ b/comps/custom/Datepicker/components/Calendar/index.tsx @@ -377,15 +377,6 @@ const Calendar: React.FC = ({ return onMark(day, date) } return <> - if (new Date().getDate() === day) - return ( -
-
- ! -
-
- ); - return <> }} /> diff --git a/comps/custom/Datepicker/helpers/index.ts b/comps/custom/Datepicker/helpers/index.ts index e84f6b9..9cf0242 100755 --- a/comps/custom/Datepicker/helpers/index.ts +++ b/comps/custom/Datepicker/helpers/index.ts @@ -145,7 +145,6 @@ export function getNumberOfDay( let number = 0; let startDateModifier = 0; - if (startWeekOn) { switch (startWeekOn) { case "mon": @@ -173,16 +172,7 @@ export function getNumberOfDay( break; } } - - isMobile ? [ - "S", - "M", - "T", - "W", - "T", - "F", - "S", - ]: [ + const days = [ "Sunday", "Monday", "Tuesday", @@ -190,7 +180,8 @@ export function getNumberOfDay( "Thursday", "Friday", "Saturday", - ].forEach((item, index) => { + ] + days.forEach((item, index) => { if (item.includes(dayString)) { number = (index + startDateModifier) % 7; } diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx index bcfaf47..0f351c0 100755 --- a/comps/form/base/BaseForm.tsx +++ b/comps/form/base/BaseForm.tsx @@ -1,10 +1,10 @@ +import { Toaster } from "lib/exports"; import { ReactNode, useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; -import { editorFormWidth } from "../Form"; import { FMLocal } from "../typings"; import { createFm } from "./utils/create-fm"; import { DivForm } from "./utils/DivForm"; -import { Toaster } from "lib/exports"; +import { editorFormWidth } from "../Form"; export type BaseFormProps = { name: string; diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx index 3184a41..9e211c0 100755 --- a/comps/form/field/FieldInput.tsx +++ b/comps/form/field/FieldInput.tsx @@ -60,7 +60,6 @@ export const FieldInput: FC<{ child: get(_item, "edit.props.child.value") as PrasiItem, bottom: childsTableEdit.find((e) => e.name === "bottom") as PrasiItem, }; - console.log({ tableEdit }); table_edit = ( { diff --git a/comps/form/field/Label.tsx b/comps/form/field/Label.tsx index 42f17cd..b50ccb4 100755 --- a/comps/form/field/Label.tsx +++ b/comps/form/field/Label.tsx @@ -9,10 +9,6 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal; arg: FieldProp }> = ({ const errors = fm.error.get(field.name); const disabled = typeof field.disabled === "function" ? field.disabled() : field.disabled; - useEffect(() => { - if (field.name === "complete_description") - console.log("log", field.required); - }, []); const required = typeof arg.required === "string" ? arg.required === "y" @@ -30,12 +26,12 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal; arg: FieldProp }> = ({ "c-mt-3 c-w-full c-justify-between" )} > -
+
0 && `c-text-red-600`)}> {field.label} {required && !disabled && ( - + {(form) => { return ( -
+
{columns.map((header) => { return ( { if (Array.isArray(fm.data[name])) { - fm.data[name].push({}); + fm.data[name].push({...e}); } else { - fm.data[name] = [{}]; + fm.data[name] = [{...e}]; } + console.log("CEKK") fm.render(); setTimeout(() => { const last = Array.from( diff --git a/comps/form/field/type/PreviewAfterUpload.tsx b/comps/form/field/type/PreviewAfterUpload.tsx new file mode 100755 index 0000000..f801f28 --- /dev/null +++ b/comps/form/field/type/PreviewAfterUpload.tsx @@ -0,0 +1,36 @@ +import { FC } from "react" +import { FilePreview } from "./FilePreview"; +import { Trash2 } from "lucide-react"; +import { FMLocal } from "lib/exports"; + + +export const PreviewAfterUpload: FC<{ + fm: FMLocal, fieldName: string, local: any +}> = ({ fm, fieldName, local }) => { + return ( +
+
+ + +
{ + e.preventDefault(); + e.stopPropagation(); + if (confirm("Clear this file ?")) { + fm.data[fieldName] = null; + local.attachment = ""; + local.render(); + fm.render(); + } + }} + className={cx( + "c-flex c-flex-row c-items-center c-border c-px-2 c-rounded c-cursor-pointer hover:c-bg-red-100" + )} + > + +
+ +
+
+ ) +} \ No newline at end of file diff --git a/comps/form/field/type/TypeLink.tsx b/comps/form/field/type/TypeLink.tsx index 5d9d6ee..bb75f23 100755 --- a/comps/form/field/type/TypeLink.tsx +++ b/comps/form/field/type/TypeLink.tsx @@ -242,7 +242,7 @@ export const navigateLink = async ( if (prev_link) prev_link = prev_link + "+"; } - navigate(`${link.url}#lnk=${prev_link + vhash}${prm}`); + navigate(`${link.url}#lnk=${prev_link + vhash}${prm ? prm : ""}`); return true; } }; diff --git a/comps/form/field/type/TypeRadio.tsx b/comps/form/field/type/TypeRadio.tsx index 7e20b29..9a0b819 100755 --- a/comps/form/field/type/TypeRadio.tsx +++ b/comps/form/field/type/TypeRadio.tsx @@ -12,6 +12,8 @@ export const FieldRadio: FC<{ list: [] as any[], value: [] as any[], }); + const disabled = + typeof field.disabled === "function" ? field.disabled() : field.disabled; useEffect(() => { const callback = (res: any[]) => { local.list = res; @@ -40,6 +42,7 @@ export const FieldRadio: FC<{
{ + if(!disabled) arg.opt_set_value({ fm, name: field.name, diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts index 50c72aa..66b1b15 100755 --- a/comps/form/gen/fields.ts +++ b/comps/form/gen/fields.ts @@ -348,7 +348,7 @@ return (React.createElement(React.Fragment, null, props: { type, sub_type, - name: field.name, + name: field.name, label, link__text: [ ` diff --git a/comps/form/utils/init.tsx b/comps/form/utils/init.tsx index 4e3c3c4..422b01e 100755 --- a/comps/form/utils/init.tsx +++ b/comps/form/utils/init.tsx @@ -109,7 +109,7 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
, { - duration:3000, + duration: 3000, className: css` background: #e4ffed; border: 2px solid green; @@ -134,7 +134,7 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
, { - duration:3000, + duration: 3000, className: css` background: #e4ffed; border: 2px solid green; @@ -147,10 +147,10 @@ export const formInit = (fm: FMLocal, props: FMProps) => { fm.reload = async () => { fm.status = isEditor ? "ready" : "loading"; fm.render(); - + let toastId = null as any; if (sonar === "on" && !isEditor) { toast.dismiss(); - toast.loading( + toastId = toast.loading( <> Loading data... @@ -158,7 +158,6 @@ export const formInit = (fm: FMLocal, props: FMProps) => { { dismissible: true } ); } - let should_load = true; if (isEditor) { const item_id = props.item.id; @@ -204,7 +203,6 @@ export const formInit = (fm: FMLocal, props: FMProps) => { } } } - toast.dismiss(); if (fm.is_newly_created) { @@ -214,6 +212,11 @@ export const formInit = (fm: FMLocal, props: FMProps) => { fm.status = "ready"; fm.render(); + setTimeout(() => { + + toast.dismiss(); + + }, 2000) }; fm.submit = async () => { @@ -289,7 +292,6 @@ export const formInit = (fm: FMLocal, props: FMProps) => { } ); } else { - toastSuccess({ addNewText: lang.t("Add New") }); } } diff --git a/comps/form/utils/use-field.tsx b/comps/form/utils/use-field.tsx index 3ba511d..91a43ab 100755 --- a/comps/form/utils/use-field.tsx +++ b/comps/form/utils/use-field.tsx @@ -67,6 +67,5 @@ export const useField = ( }, []); field.prop = arg as any; - return field; }; diff --git a/comps/icon.tsx b/comps/icon.tsx index ed8833b..eb898b5 100755 --- a/comps/icon.tsx +++ b/comps/icon.tsx @@ -34,7 +34,7 @@ import { Plus, QrCode, Rocket, - Settings, +Settings, Ship, Siren, StickyNote, diff --git a/comps/import/Import.tsx b/comps/import/Import.tsx index 71781bb..33397c2 100755 --- a/comps/import/Import.tsx +++ b/comps/import/Import.tsx @@ -95,12 +95,12 @@ export const Import: FC<{ clearInterval(interval); resolve([]); } - }, 100); + }, 50); }); } await task(list[n], n); - await sleep(100); + await sleep(50); n++; } }; diff --git a/comps/list/TLList.tsx b/comps/list/TLList.tsx index f16d99e..7b12af5 100755 --- a/comps/list/TLList.tsx +++ b/comps/list/TLList.tsx @@ -35,7 +35,7 @@ export const TLList: FC<{ ) : (
; -type SelectedRow = (arg: { row: any; rows: any[]; idx: any }) => boolean; +type SelectedRow = (arg: { + row: any; + rows: any[]; + idx: any; + select?: boolean; + data?: any[]; +}) => boolean; type TableListProp = { child: any; PassProp: any; @@ -137,6 +143,7 @@ export const TableList: FC = ({ el: null as null | HTMLDivElement, width: 0, height: 0, + selectedAllRows: false as boolean, selectedRowIds: [] as (string | number)[], pk: null as null | GFCol, scrolled: false, @@ -468,9 +475,11 @@ export const TableList: FC = ({ rows: data, }); }); + local.selectedAllRows = true; local.render(); } else { // jika tidak, maka local selected rows akan dikosongkan + local.selectedAllRows = false; local.selectedRows = []; local.render(); } @@ -494,6 +503,7 @@ export const TableList: FC = ({ local.selectedRows = local.selectedRows.filter( (data) => data.pk !== rowId ); + local.selectedAllRows = false; local.render(); } }; @@ -610,8 +620,24 @@ export const TableList: FC = ({ frozen: true, renderHeaderCell(props) { return ( -
- {/* */} +
+ {isCheckbox ? ( + + ) : ( + <> + )}
); }, @@ -622,7 +648,29 @@ export const TableList: FC = ({ tbl: local, child, }); - + if (isCheckbox) { + const isChecked = local.selectedRows.some( + (checked) => checked.pk === props.row.id + ); + return ( +
+ +
+ ); + } return ( = ({ ) { return local.cached_row.get(props.row); } - const isSelect = selected({ - idx: props.rowIdx, - row: props.row, - rows: local.data, - }); + const isSelect = local.selectedAllRows + ? true + : selected({ + idx: props.rowIdx, + row: props.row, + rows: local.data, + select: local.selectedAllRows + ? true + : local.selectedRows.some( + (checked) => checked.pk === props.row.id + ), + data: local.selectedAllRows + ? local.data + : local.selectedRows, + }); const child_row = ( = ({ }; const CheckboxList: FC<{ on_click: (e: any) => void; + checked?: boolean; value?: boolean; -}> = ({ value, on_click }) => { +}> = ({ value, checked, on_click }) => { const local = useLocal({ + checked: false as any, value: false as boolean, }); + useEffect(() => { + local.checked = checked; + local.render(); + }, []); return (
{ - local.value = !local.value; - on_click(local.value); + local.checked = !local.checked; + on_click(typeof value === "boolean" ? !local.checked : value); local.render(); }} className="c-flex c-flex-row c-space-x-1 cursor-pointer c-items-center rounded-full p-0.5" > - {local.value ? ( + {local.checked ? ( void }; export const Menu: FC = (props) => { - const imenu = props.menu; - let role = props.role; - role = props.on_init(); - let menu = get(imenu, role) || []; const ref = useRef(null); const local = useLocal({ ...local_default }, ({ setDelayedRender }) => { setDelayedRender(true); }); - + const imenu = props.menu; + // useEffect(() => { + // }, []); if (local.pathname !== getPathname()) { local.pathname = getPathname(); } @@ -37,9 +39,30 @@ export const Menu: FC = (props) => { useEffect(() => { local.mode = props.mode; - local.render(); - }, [props.mode]); + local.ready = false; + local.render(); + if (typeof imenu === "function") { + const res = imenu(); + if (res instanceof Promise) { + res.then((e) => { + local.menu = e; + local.render(); + }) + }else{ + local.menu = res; + local.render(); + } + } else { + let role = props.role; + role = props.on_init(); + let menu = get(imenu, role) || []; + local.menu = menu; + } + local.ready = true; + local.render(); + }, [props.mode]); + if (!local.ready) return ; return (
= (props) => { >
; + } useEffect(() => { data.map((item) => { const menu = { diff --git a/preset/menu/utils/type-menu.ts b/preset/menu/utils/type-menu.ts index 6932f23..b51e1fc 100755 --- a/preset/menu/utils/type-menu.ts +++ b/preset/menu/utils/type-menu.ts @@ -4,7 +4,7 @@ export type IMenu = [string, any, string | IMenu[]]; export type MenuProp = { role: string; on_init: () => string; - menu: Array>; + menu: Array> | (() => Promise); PassProp: any; child: ReactNode; mode: "full" | "mini"; @@ -12,7 +12,9 @@ export type MenuProp = { style: "navbar" | "sidebar"; layout?: { current_menu: string; render: () => void }; on_load?: (on_done: (exec: () => void) => void) => void; - get_menu?: (mn: Array>) => Array> + get_menu?: ( + mn: Array> + ) => Array>; }; export type MenuActive = { data: any; diff --git a/server/server-route.ts b/server/server-route.ts index 0858384..2a8ef7b 100755 --- a/server/server-route.ts +++ b/server/server-route.ts @@ -73,7 +73,6 @@ export const useServerRouter = >( async handle(arg: ServerContext | SessionContext) { const { url, req, handle } = arg; const found = findRoute(rou, undefined, url.pathname); - if (found) { const route = found.data; diff --git a/utils/date.ts b/utils/date.ts index 9065bf8..3fd95b8 100755 --- a/utils/date.ts +++ b/utils/date.ts @@ -3,6 +3,13 @@ import relative from "dayjs/plugin/relativeTime"; day.extend(relative); +export const formatDay = (date: string | Date, mode: string) => { + if (date instanceof Date || typeof date === "string") { + return day(date).format(mode); + } + return "-"; +}; + export const longDate = (date: string | Date) => { if (date instanceof Date || typeof date === "string") { return day(date).format("DD MMM YYYY - hh:mm"); @@ -23,6 +30,7 @@ export const timeAgo = (date: string | Date) => { } return "-"; }; + export const formatTime = (date: string | Date) => { if (date instanceof Date || typeof date === "string") { return day(date).format("hh:mm");