@skalfa/skalfa-component 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/modal/ModalConfirm.component.js +5 -3
- package/dist/nav/Sidebar.component.js +1 -1
- package/dist/nav/Tabbar.component.js +1 -3
- package/dist/supervision/FormSupervision.component.js +5 -2
- package/dist/supervision/TableSupervision.component.js +16 -16
- package/dist/table/ControlBar.component.js +14 -12
- package/dist/table/FilterComponent.js +15 -12
- package/dist/table/Table.component.js +4 -2
- package/dist/wrap/ShortcutProvider.js +4 -2
- package/package.json +1 -1
- package/src/modal/ModalConfirm.component.tsx +6 -4
- package/src/nav/Footer.component.tsx +9 -9
- package/src/nav/Navbar.component.tsx +6 -6
- package/src/nav/Sidebar.component.tsx +1 -1
- package/src/nav/Tabbar.component.tsx +1 -3
- package/src/supervision/FormSupervision.component.tsx +8 -4
- package/src/supervision/TableSupervision.component.tsx +26 -27
- package/src/table/ControlBar.component.tsx +15 -13
- package/src/table/FilterComponent.tsx +22 -17
- package/src/table/Table.component.tsx +6 -3
- package/src/wrap/ShortcutProvider.tsx +4 -2
|
@@ -7,8 +7,10 @@ const react_1 = require("react");
|
|
|
7
7
|
const _utils_1 = require("@utils");
|
|
8
8
|
const _components_1 = require("@components");
|
|
9
9
|
const skalfa_icon_1 = require("@skalfa/skalfa-icon");
|
|
10
|
+
const skalfa_lang_1 = require("@skalfa/skalfa-lang");
|
|
10
11
|
;
|
|
11
12
|
function ModalConfirmComponent({ show, title, children, footer, submitControl, onClose, className = "", }) {
|
|
13
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
12
14
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
13
15
|
const [toast, setToast] = (0, react_1.useState)(false);
|
|
14
16
|
const [loading, setLoading] = (0, react_1.useState)(false);
|
|
@@ -28,12 +30,12 @@ function ModalConfirmComponent({ show, title, children, footer, submitControl, o
|
|
|
28
30
|
}, [show]);
|
|
29
31
|
const renderChildren = (actionSize = 'md') => {
|
|
30
32
|
if (toast == "success") {
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: "
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: l.base.success ? l.base.success() : "Success" })] }));
|
|
32
34
|
}
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 p-6", (0, _utils_1.pcn)(className, "header")), children: (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title }) })), children, toast == "failed" && ((0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children:
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 p-6", (0, _utils_1.pcn)(className, "header")), children: (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title }) })), children, toast == "failed" && ((0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: l.base.confirmFailed ? l.base.confirmFailed() : "Failed" })] }) })), renderAction(actionSize)] }));
|
|
34
36
|
};
|
|
35
37
|
const renderAction = (size = 'md') => {
|
|
36
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-4 p-6 pt-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-4 p-6 pt-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: l.base.cancel ? l.base.cancel() : "", variant: "outline", onClick: () => onClose(), block: true, size: size }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: l.base.confirm ? l.base.confirm() : "", loading: loading, onClick: async () => {
|
|
37
39
|
if (!submitControl?.onSubmit)
|
|
38
40
|
return;
|
|
39
41
|
setLoading(true);
|
|
@@ -64,7 +64,7 @@ function SidebarComponent({ id, head, footer, items, basePath, className = "", }
|
|
|
64
64
|
(0, react_1.useEffect)(() => {
|
|
65
65
|
setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`, false);
|
|
66
66
|
}, [pathName]);
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-y-auto overflow-x-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
68
68
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down", className: (0, _utils_1.cn)(checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
|
|
69
69
|
menu_head?.items?.map((menu, menu_key) => {
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path && cekActive(menu?.path || "") && "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
|
|
@@ -10,8 +10,6 @@ function TabbarComponent({ items, onChange, active,
|
|
|
10
10
|
className = "", }) {
|
|
11
11
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-base", (0, _utils_1.pcn)(className, "base")), children: items?.map((item, i) => {
|
|
12
12
|
const isItemActive = active == (typeof item != "string" ? item?.value : item);
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-item", isItemActive
|
|
14
|
-
? "tabbar-item-active"
|
|
15
|
-
: "tabbar-item-inactive", (0, _utils_1.pcn)(className, "item"), (0, _utils_1.pcn)(className, "active")), onClick: () => onChange?.(typeof item != "string" ? item?.value : item), children: typeof item != "string" ? item?.label : item }, i));
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-item", isItemActive ? "tabbar-item-active" : "tabbar-item-inactive", (0, _utils_1.pcn)(className, "item"), (0, _utils_1.pcn)(className, "active")), onClick: () => onChange?.(typeof item != "string" ? item?.value : item), children: typeof item != "string" ? item?.label : item }, i));
|
|
16
14
|
}) }) }));
|
|
17
15
|
}
|
|
@@ -116,7 +116,7 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
|
|
|
116
116
|
});
|
|
117
117
|
setValues(updatedValues);
|
|
118
118
|
};
|
|
119
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) })] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label:
|
|
119
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) })] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `${l.base.add ? l.base.add() : "Add"} ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
|
|
120
120
|
}
|
|
121
121
|
if (inputType === "custom") {
|
|
122
122
|
const customRender = form.construction;
|
|
@@ -125,5 +125,8 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
|
|
|
125
125
|
const Component = inputMap[inputType] || __1.InputComponent;
|
|
126
126
|
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name) }) }, key));
|
|
127
127
|
};
|
|
128
|
-
|
|
128
|
+
(0, react_1.useEffect)(() => {
|
|
129
|
+
setModal(false);
|
|
130
|
+
}, [values]);
|
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("text-lg font-semibold mb-4", (0, _utils_1.pcn)(className, "title")), children: title }), modal == "success" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: successMessage || l.base?.success ? l.base.success() : "Success!" })] })) : ((0, jsx_runtime_1.jsx)("form", { id: id, className: (0, _utils_1.cn)("flex flex-col h-full pb-8"), onSubmit: submit, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("grid grid-cols-12 gap-4 flex-1 content-start", (0, _utils_1.pcn)(className, "base")), children: [fresh && fields.map((f, i) => renderInput(f, i)), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "hidden md:block col-span-12", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { type: "submit", label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) }) })), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "md:hidden col-span-12 mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", type: "submit", loading: loading, block: true, className: (0, _utils_1.pcn)(className, "submit") }) })), footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) })), modal == "failed" && ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-12 mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: l.base.formFailed ? l.base.formFailed() : "Failed to save data, please check your data and internet connection then try again!" })] }))] }) })), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), title: l.base?.formConfirm ? l.base.formConfirm() : "Are you sure all data is correct?", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" } })] }));
|
|
129
132
|
}
|
|
@@ -23,26 +23,26 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
23
23
|
_utils_1.shortcut.register("arrowdown", () => {
|
|
24
24
|
const max = data?.data?.length - 1;
|
|
25
25
|
setFocus(focus == null ? 0 : focus >= max ? max : (focus + 1));
|
|
26
|
-
},
|
|
26
|
+
}, l.base.shortcutDown ? l.base.shortcutDown() : "");
|
|
27
27
|
_utils_1.shortcut.register("arrowup", () => {
|
|
28
28
|
setFocus(focus == null ? 0 : focus <= 0 ? 0 : (focus - 1));
|
|
29
|
-
},
|
|
29
|
+
}, l.base.shortcutUp ? l.base.shortcutUp() : "");
|
|
30
30
|
if (focus != null) {
|
|
31
31
|
_utils_1.shortcut.register("delete", () => {
|
|
32
32
|
setSelected(data?.data?.at(focus));
|
|
33
33
|
setToggle(`MODAL_DELETE_${toggleKey}`);
|
|
34
|
-
},
|
|
34
|
+
}, l.base.shortcutDelete ? l.base.shortcutDelete() : "");
|
|
35
35
|
_utils_1.shortcut.register(" ", () => {
|
|
36
36
|
setSelected(data?.data?.at(focus));
|
|
37
37
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
38
|
-
},
|
|
38
|
+
}, l.base.shortcutEdit ? l.base.shortcutEdit() : "");
|
|
39
39
|
_utils_1.shortcut.register("enter", () => {
|
|
40
40
|
setSelected(data?.data?.at(focus));
|
|
41
41
|
setToggle(`MODAL_SHOW_${toggleKey}`);
|
|
42
|
-
},
|
|
42
|
+
}, l.base.shortcutDetail ? l.base.shortcutDetail() : "");
|
|
43
43
|
_utils_1.shortcut.register("escape", () => {
|
|
44
44
|
setFocus(null);
|
|
45
|
-
}, "
|
|
45
|
+
}, l.base.shortcutBack ? l.base.shortcutBack() : "");
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
return () => {
|
|
@@ -166,7 +166,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
166
166
|
construction: {
|
|
167
167
|
name: typeof col == "string" ? col : col?.selector,
|
|
168
168
|
label: typeof col == "string" ? col : col?.label,
|
|
169
|
-
placeholder: `
|
|
169
|
+
placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder(`${typeof col == "string" ? col : col?.label}`) : `Enter ${typeof col == "string" ? col : col?.label}...`,
|
|
170
170
|
},
|
|
171
171
|
};
|
|
172
172
|
}) || (data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
|
|
@@ -176,7 +176,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
176
176
|
construction: {
|
|
177
177
|
name: col,
|
|
178
178
|
label: col,
|
|
179
|
-
placeholder: `
|
|
179
|
+
placeholder: l.base.inputPlaceholder ? l.base.inputPlaceholder(col) : `Enter ${col}...`,
|
|
180
180
|
},
|
|
181
181
|
};
|
|
182
182
|
})
|
|
@@ -205,24 +205,24 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
205
205
|
if (cb == "CREATE") {
|
|
206
206
|
if (isSm)
|
|
207
207
|
return;
|
|
208
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label:
|
|
208
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: l.base.add ? l.base.add() : "Add", size: "sm", onClick: () => {
|
|
209
209
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
210
210
|
setSelected(null);
|
|
211
211
|
} }) }, "button-add"));
|
|
212
212
|
}
|
|
213
213
|
if (cb == "IMPORT") {
|
|
214
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel",
|
|
214
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
|
|
215
215
|
}
|
|
216
216
|
if (cb == "EXPORT") {
|
|
217
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel",
|
|
217
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
|
|
218
218
|
}
|
|
219
219
|
if (cb == "PRINT") {
|
|
220
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-pdf", label: "
|
|
220
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-pdf", label: l.base.print ? l.base.print() : "Print", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
|
|
221
221
|
}
|
|
222
222
|
return cb;
|
|
223
223
|
}) || [
|
|
224
224
|
...(!isSm ? [
|
|
225
|
-
(0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label:
|
|
225
|
+
(0, jsx_runtime_1.jsx)("div", { className: "pl-1.5 pr-3 mr-2 border-r", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: l.base.add ? l.base.add() : "Add", size: "sm", onClick: () => {
|
|
226
226
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
227
227
|
setSelected(null);
|
|
228
228
|
} }) }, "button-add")
|
|
@@ -255,13 +255,13 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
255
255
|
} : undefined, ...tableControl }), controlBar?.find((cb) => cb == "CREATE") && ((0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", className: "fixed bottom-24 right-4 w-14 h-14 z-20 md:hidden", size: "lg", rounded: true, onClick: () => {
|
|
256
256
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
257
257
|
setSelected(null);
|
|
258
|
-
} })), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "bg-background", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), children: detailPage }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ?
|
|
258
|
+
} })), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: l.base.detailTitle ? l.base.detailTitle() : "Detail", className: "bg-background", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), children: detailPage }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? (l.base.editTitle ? l.base.editTitle() : "Edit") : (l.base.addTitle ? l.base.addTitle() : "Add"), className: (0, _utils_1.cn)("bg-white", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: formPage }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: l.base.exportTitle ? l.base.exportTitle() : "Export", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "export", columnControl: columns?.map((cc) => ({
|
|
259
259
|
label: cc.label || "",
|
|
260
260
|
selector: cc.selector || "",
|
|
261
|
-
})) }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title:
|
|
261
|
+
})) }) }), (0, jsx_runtime_1.jsx)(__1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: l.base.importTitle ? l.base.importTitle() : "Import", className: "bg-white md:w-[1200px] max-w-[1200px]", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: { path: fetchControl?.path + "/import" }, columnControl: columns?.map((cc) => ({
|
|
262
262
|
label: cc.label || "",
|
|
263
263
|
selector: cc.selector || "",
|
|
264
|
-
})) }) }), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), title:
|
|
264
|
+
})) }) }), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), title: l.base.deleteTitle ? l.base.deleteTitle({ data: selected?.[columns?.at(0)?.selector || ""] }) : `Delete ${selected?.[columns?.at(0)?.selector || ""]}?`, submitControl: {
|
|
265
265
|
onSubmit: {
|
|
266
266
|
...(fetchControl.path
|
|
267
267
|
? { path: `${fetchControl.path}/${selected?.id || ""}` }
|
|
@@ -14,7 +14,9 @@ const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
|
14
14
|
const Button_component_1 = require("../button/Button.component");
|
|
15
15
|
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
16
16
|
const FilterComponent_1 = require("./FilterComponent");
|
|
17
|
+
const skalfa_lang_1 = require("@skalfa/skalfa-lang");
|
|
17
18
|
function ControlBarComponent({ id = "", options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }) {
|
|
19
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
18
20
|
const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
|
|
19
21
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
20
22
|
const searchRef = (0, react_1.useRef)(null);
|
|
@@ -22,27 +24,27 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
22
24
|
if (options?.includes("SEARCH")) {
|
|
23
25
|
_utils_1.shortcut.register("ctrl+s", () => {
|
|
24
26
|
searchRef.current?.focus();
|
|
25
|
-
}, "
|
|
27
|
+
}, l.base.shortcutSearch ? l.base.shortcutSearch() : "Search");
|
|
26
28
|
}
|
|
27
29
|
if (options?.includes("FILTER")) {
|
|
28
30
|
_utils_1.shortcut.register("ctrl+f", () => {
|
|
29
31
|
setToggle("FILTER");
|
|
30
|
-
}, "Filter");
|
|
32
|
+
}, l.base.shortcutFilter ? l.base.shortcutFilter() : "Filter");
|
|
31
33
|
}
|
|
32
34
|
if (options?.includes("SORT")) {
|
|
33
35
|
_utils_1.shortcut.register("ctrl+o", () => {
|
|
34
36
|
setToggle("SORT");
|
|
35
|
-
}, "
|
|
37
|
+
}, l.base.shortcutSort ? l.base.shortcutSort() : "Sort");
|
|
36
38
|
}
|
|
37
39
|
if (options?.includes("SELECTABLE")) {
|
|
38
40
|
_utils_1.shortcut.register("ctrl+l", () => {
|
|
39
41
|
setToggle("SELECTABLE");
|
|
40
|
-
},
|
|
42
|
+
}, l.base.shortcutSelectable ? l.base.shortcutSelectable() : "Select");
|
|
41
43
|
}
|
|
42
44
|
if (options?.includes("REFRESH")) {
|
|
43
45
|
_utils_1.shortcut.register("ctrl+shift+r", () => {
|
|
44
46
|
onRefresh?.();
|
|
45
|
-
}, "Refresh
|
|
47
|
+
}, l.base.shortcutRefresh ? l.base.shortcutRefresh() : "Refresh");
|
|
46
48
|
}
|
|
47
49
|
return () => {
|
|
48
50
|
options?.includes("SEARCH") && _utils_1.shortcut.unregister("ctrl+s");
|
|
@@ -78,7 +80,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
78
80
|
// =========================>
|
|
79
81
|
}
|
|
80
82
|
if (option == "CREATE") {
|
|
81
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/plus", label:
|
|
83
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/plus", label: l.base.add ? l.base.add() : "Add", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
|
|
82
84
|
}
|
|
83
85
|
{
|
|
84
86
|
// =========================>
|
|
@@ -87,7 +89,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
87
89
|
}
|
|
88
90
|
if (option == "SEARCH") {
|
|
89
91
|
const searchable = !!options?.find((option) => option == "SEARCHABLE");
|
|
90
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar-search-wrapper", searchable ? "control-bar-search-wrapper-searchable" : "control-bar-search-wrapper-standalone"), children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { ref: searchRef, name: "search", placeholder: "
|
|
92
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar-search-wrapper", searchable ? "control-bar-search-wrapper-searchable" : "control-bar-search-wrapper-standalone"), children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { ref: searchRef, name: "search", placeholder: l.base.searchPlaceholder ? l.base.searchPlaceholder() : "Search here...", rightIcon: "solid/magnifying-glass", value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
|
|
91
93
|
}
|
|
92
94
|
{
|
|
93
95
|
// =========================>
|
|
@@ -108,7 +110,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
108
110
|
// =========================>
|
|
109
111
|
}
|
|
110
112
|
if (option == "SELECTABLE") {
|
|
111
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/eye-low-vision", variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SELECTABLE"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SELECTABLE", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SELECTABLE && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "
|
|
113
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/eye-low-vision", variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SELECTABLE"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SELECTABLE", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SELECTABLE && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: l.base.selectable ? l.base.selectable() : "Show Column" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
|
|
112
114
|
return {
|
|
113
115
|
label: option.label,
|
|
114
116
|
value: option.selector,
|
|
@@ -121,7 +123,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
121
123
|
// =========================>
|
|
122
124
|
}
|
|
123
125
|
if (option == "SORT") {
|
|
124
|
-
return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/sort", variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SORT"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SORT", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SORT && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "
|
|
126
|
+
return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/sort", variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SORT"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SORT", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SORT && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: l.base.sort ? l.base.sort() : "Sort By" }), (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-sort-list', children: sortableOptions?.map((option, key) => {
|
|
125
127
|
const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
|
|
126
128
|
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-sort-item', !!sortBy && "control-bar-sort-item-active"), onClick: () => onChangeSort(option.selector), children: [(0, jsx_runtime_1.jsx)("p", { children: option.label }), sortBy && ((0, jsx_runtime_1.jsxs)("div", { className: 'control-bar-sort-active-icon', children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z", className: 'control-bar-sort-icon' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'control-bar-sort-badge', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
|
|
127
129
|
}) })] }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
@@ -158,7 +160,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
158
160
|
// =========================>
|
|
159
161
|
}
|
|
160
162
|
if (option == "SEARCH") {
|
|
161
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "search", placeholder: "
|
|
163
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "search", placeholder: l.base.searchPlaceholder ? l.base.searchPlaceholder() : "Search here...", rightIcon: "solid/magnifying-glass", value: search, onChange: (e) => onSearch?.(e) }) }, key));
|
|
162
164
|
}
|
|
163
165
|
{
|
|
164
166
|
// =========================>
|
|
@@ -179,7 +181,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
179
181
|
// =========================>
|
|
180
182
|
}
|
|
181
183
|
if (option == "SELECTABLE") {
|
|
182
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "
|
|
184
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: l.base.selectable ? l.base.selectable() : "Show Column" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
|
|
183
185
|
return {
|
|
184
186
|
label: option.label,
|
|
185
187
|
value: option.selector,
|
|
@@ -192,7 +194,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
192
194
|
// =========================>
|
|
193
195
|
}
|
|
194
196
|
if (option == "SORT") {
|
|
195
|
-
return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "
|
|
197
|
+
return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: l.base.sort ? l.base.sort() : "Sort By" }), (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-col', children: sortableOptions?.map((option, key) => {
|
|
196
198
|
const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
|
|
197
199
|
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-mobile-sort-item', !!sortBy && "control-bar-mobile-sort-item-active"), onClick: () => onChangeSort(option.selector), children: [(0, jsx_runtime_1.jsx)("p", { children: option.label }), sortBy && ((0, jsx_runtime_1.jsxs)("div", { className: 'text-primary', children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z", className: 'text-xs' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'text-[9px] ml-1', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
|
|
198
200
|
}) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
@@ -15,6 +15,7 @@ const InputNumber_component_1 = require("../input/InputNumber.component");
|
|
|
15
15
|
const Modal_component_1 = require("../modal/Modal.component");
|
|
16
16
|
const Select_component_1 = require("../input/Select.component");
|
|
17
17
|
const _contexts_1 = require("@contexts");
|
|
18
|
+
const skalfa_lang_1 = require("@skalfa/skalfa-lang");
|
|
18
19
|
const FILTER_OPERATORS = [
|
|
19
20
|
{ label: "Cari", value: "li" },
|
|
20
21
|
{ label: "Sama", value: "eq" },
|
|
@@ -29,6 +30,7 @@ const LOGIC_OPTIONS = [
|
|
|
29
30
|
];
|
|
30
31
|
const BOOKMARK_KEY = "filter-bookmarks";
|
|
31
32
|
function FilterComponent({ columns, onChange, value, onMinimize, className = "", }) {
|
|
33
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
32
34
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
33
35
|
const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
|
|
34
36
|
const [filters, setFilters] = (0, react_1.useState)([]);
|
|
@@ -63,16 +65,16 @@ function FilterComponent({ columns, onChange, value, onMinimize, className = "",
|
|
|
63
65
|
(0, react_1.useEffect)(() => {
|
|
64
66
|
localStorage.setItem(BOOKMARK_KEY, JSON.stringify(bookmarks));
|
|
65
67
|
}, [bookmarks]);
|
|
66
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/bookmark", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(Chip_component_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/ellipsis-h", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/rotate", label: "
|
|
68
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: l.base.filter ? l.base.filter() : "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/bookmark", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(Chip_component_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/ellipsis-h", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/rotate", label: l.base.clear ? l.base.clear() : "Filter", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setFilters([]) }), onMinimize && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/chevron-up", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: onMinimize }))] })] }), filters.map((f, i) => {
|
|
67
69
|
const column = columns.find((c) => c.selector === f.column);
|
|
68
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: "
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: l.base.filterLogic ? l.base.filterLogic() : "And/Or", value: f.logic, onChange: (e) => handleChange(i, "logic", e), className: "filter-input-field" }) })), (0, jsx_runtime_1.jsx)("div", { className: i > 0 ? "filter-col-column-with-logic" : "filter-col-column", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_column_${i}`, options: columns.map((c) => ({
|
|
69
71
|
label: c.label,
|
|
70
72
|
value: c.selector,
|
|
71
|
-
})), placeholder: "
|
|
72
|
-
}), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "
|
|
73
|
+
})), placeholder: l.base.column ? l.base.column() : "Column", value: f.column, onChange: (e) => handleChange(i, "column", e), className: "filter-input-field" }) }), (0, jsx_runtime_1.jsx)("div", { className: "filter-col-operator", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_operator_${i}`, options: FILTER_OPERATORS, placeholder: l.base.filterOperator ? l.base.filterOperator() : "Operation", value: f.type, onChange: (e) => handleChange(i, "type", e), className: "filter-input-field" }) }), isSm && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" })), column && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-value", children: (0, jsx_runtime_1.jsx)(InputFilterValueComponent, { type: column.type, name: `filter_value_${i}`, placeholder: "...", value: f.value || "", onChange: (e) => handleChange(i, "value", e), options: column.type === "select" && column.options ? column.options : [], className: "filter-input-field", between: f.type === "bw", multiple: ["in", "ni"].includes(f.type || "") }) })), !isSm && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
|
|
74
|
+
}), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: l.base.add ? l.base.add() : "Add", icon: "solid/plus", variant: "outline", paint: "primary", size: isSm ? "xs" : "sm", onClick: addFilter, className: "filter-add-btn" })] }), (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK_LIST"], onClose: () => setToggle("MODAL_BOOKMARK_LIST", false), title: l.base.filterBookmarks ? l.base.filterBookmarks() : "Filter Bookmark", children: (0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-list-container", children: bookmarks?.length ? bookmarks?.map((b, key) => ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-row", children: [(0, jsx_runtime_1.jsx)("p", { className: "filter-bookmark-name", children: b.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/plus", variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
|
|
73
75
|
setFilters(b.filters);
|
|
74
76
|
setToggle("MODAL_BOOKMARK_LIST", false);
|
|
75
|
-
} }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.
|
|
77
|
+
} }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-empty-text", children: [" -- ", l.base.filterBookmarkEmpty ? l.base.filterBookmarkEmpty() : "No Bookmark", " --"] })) }) }), (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK"], onClose: () => setToggle("MODAL_BOOKMARK", false), title: l.base.filterBookmark ? l.base.filterBookmark() : "Filter Bookmark", footer: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: l.base.apply ? l.base.apply() : "Apply", onClick: () => {
|
|
76
78
|
let updated = [];
|
|
77
79
|
if (toggle["MODAL_BOOKMARK"]?.bookmark_id == "new") {
|
|
78
80
|
const newBookmark = {
|
|
@@ -90,18 +92,19 @@ function FilterComponent({ columns, onChange, value, onMinimize, className = "",
|
|
|
90
92
|
}
|
|
91
93
|
setBookmarks(updated);
|
|
92
94
|
setToggle("MODAL_BOOKMARK", false);
|
|
93
|
-
} }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `bookmark_id`, placeholder: "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
|
|
95
|
+
} }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `bookmark_id`, placeholder: l.base.filterBookmarkPlaceholder ? l.base.filterBookmarkPlaceholder() : "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
|
|
94
96
|
{
|
|
95
|
-
label: "
|
|
97
|
+
label: `-- ${l.base.filterBookmarkNew ? l.base.filterBookmarkNew() : "New Filter Bookmark"} --`,
|
|
96
98
|
value: "new",
|
|
97
99
|
},
|
|
98
100
|
...bookmarks.map((b) => ({
|
|
99
101
|
label: b.name,
|
|
100
102
|
value: b.id,
|
|
101
103
|
}))
|
|
102
|
-
] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "bookmark_name", placeholder: "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
|
|
104
|
+
] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "bookmark_name", placeholder: l.base.filterBookmarkNewPlaceholder ? l.base.filterBookmarkNewPlaceholder() : "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
|
|
103
105
|
}
|
|
104
106
|
function InputFilterValueComponent({ type, name, value, onChange, options = [], placeholder = "", className = "", between, multiple, }) {
|
|
107
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
105
108
|
const resolvedType = type || "text";
|
|
106
109
|
if (!between) {
|
|
107
110
|
switch (resolvedType) {
|
|
@@ -124,13 +127,13 @@ function InputFilterValueComponent({ type, name, value, onChange, options = [],
|
|
|
124
127
|
const handle = (v) => onChange(pos === "from" ? [v, to] : [from, v]);
|
|
125
128
|
switch (resolvedType) {
|
|
126
129
|
case "number":
|
|
127
|
-
return ((0, jsx_runtime_1.jsx)(InputNumber_component_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
|
|
130
|
+
return ((0, jsx_runtime_1.jsx)(InputNumber_component_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai", className: className }));
|
|
128
131
|
case "currency":
|
|
129
|
-
return ((0, jsx_runtime_1.jsx)(InputCurrency_component_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
|
|
132
|
+
return ((0, jsx_runtime_1.jsx)(InputCurrency_component_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai", className: className }));
|
|
130
133
|
case "date":
|
|
131
|
-
return ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
|
|
134
|
+
return ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai", className: className }));
|
|
132
135
|
default:
|
|
133
|
-
return ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
|
|
136
|
+
return ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? l.base.filterFrom ? l.base.filterFrom() : "Dari" : l.base.filterTo ? l.base.filterTo() : "Sampai", className: className }));
|
|
134
137
|
}
|
|
135
138
|
};
|
|
136
139
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-between-container", children: [renderInput("from"), (0, jsx_runtime_1.jsx)("span", { children: "s/d" }), renderInput("to")] }));
|
|
@@ -11,7 +11,9 @@ const Pagination_component_1 = require("./Pagination.component");
|
|
|
11
11
|
const ScrollContainer_component_1 = require("../wrap/ScrollContainer.component");
|
|
12
12
|
const Checkbox_component_1 = require("../input/Checkbox.component");
|
|
13
13
|
const Swipe_component_1 = require("../wrap/Swipe.component");
|
|
14
|
+
const skalfa_lang_1 = require("@skalfa/skalfa-lang");
|
|
14
15
|
function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
|
|
16
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
15
17
|
const [displayColumns, setDisplayColumns] = (0, react_1.useState)([]);
|
|
16
18
|
const [showFloatingAction, setShowFloatingAction] = (0, react_1.useState)(false);
|
|
17
19
|
const [floatingActionActive, setFloatingActionActive] = (0, react_1.useState)(false);
|
|
@@ -98,10 +100,10 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
|
|
|
98
100
|
})), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: "w-full", onScroll: (e) => {
|
|
99
101
|
actionColumnRef.current?.clientWidth && e.scrollLeft &&
|
|
100
102
|
setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
|
|
101
|
-
}, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children:
|
|
103
|
+
}, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: l.base.tableLoading ? l.base.tableLoading() : "" }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: l.base.tableEmpty ? l.base.tableEmpty() : "Data empty" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {
|
|
102
104
|
return ((0, jsx_runtime_1.jsxs)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, className: (0, _utils_1.cn)("table-body-row", key % 2 ? "bg-light-primary/10" : "bg-white", focus == key && "bg-light-primary/30", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-max", (0, _utils_1.pcn)(className, "column")), children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: checks?.includes(item?.id), onChange: () => checks?.includes(item?.id) ? onChangeChecks?.(checks.filter((i) => i !== item?.id)) : onChangeChecks?.([...(checks || []), item?.id]) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-8", (0, _utils_1.pcn)(className, "column")), children: numberOfRow(key) }), renderItem(item, key), (0, jsx_runtime_1.jsx)("div", { ref: actionColumnRef, className: "table-action-column", children: item["action"] }), item["action"] && showFloatingAction && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-floating-action", (0, _utils_1.pcn)(className, "floating-action")), onClick: () => floatingActionActive !== false &&
|
|
103
105
|
floatingActionActive == key ? setFloatingActionActive(false) : setFloatingActionActive(key), children: [(0, jsx_runtime_1.jsx)("div", { className: "table-floating-action-icon-wrapper", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: floatingActionActive === false || floatingActionActive != key ? "solid/chevron-left" : "solid/chevron-right" }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-floating-action-content", floatingActionActive === key && "table-floating-action-content-active"), children: item["action"] })] }))] }, key));
|
|
104
106
|
}) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-mobile-list", children: data.map((item, key) => {
|
|
105
107
|
return ((0, jsx_runtime_1.jsx)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, children: renderItem(item, key) }, key));
|
|
106
|
-
}) })) })) }) }), !!actionBulking && !!checks?.length && ((0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-bar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-title", children: [checks?.length, "
|
|
108
|
+
}) })) })) }) }), !!actionBulking && !!checks?.length && ((0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-bar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-title", children: [checks?.length, " ", l.base.tableSelected ? l.base.tableSelected() : ""] }), (0, jsx_runtime_1.jsx)("div", { className: "table-bulk-actions-buttons", children: actionBulking?.(checks) })] })), !block && pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-desktop", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })), pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-mobile", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) }))] }));
|
|
107
109
|
}
|
|
@@ -7,7 +7,9 @@ const react_1 = require("react");
|
|
|
7
7
|
const _utils_1 = require("@utils");
|
|
8
8
|
const _contexts_1 = require("@contexts");
|
|
9
9
|
const Modal_component_1 = require("../modal/Modal.component");
|
|
10
|
+
const skalfa_lang_1 = require("@skalfa/skalfa-lang");
|
|
10
11
|
function ShortcutProvider() {
|
|
12
|
+
const l = (0, skalfa_lang_1.useLang)();
|
|
11
13
|
const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
|
|
12
14
|
const shortcuts = _utils_1.shortcut.list();
|
|
13
15
|
(0, react_1.useEffect)(() => {
|
|
@@ -16,7 +18,7 @@ function ShortcutProvider() {
|
|
|
16
18
|
(0, react_1.useEffect)(() => {
|
|
17
19
|
_utils_1.shortcut.register("ctrl+/", () => {
|
|
18
20
|
setToggle("MODAL_SHORTCUT_HELP");
|
|
19
|
-
},
|
|
21
|
+
}, l.base.shortcutList ? l.base.shortcutList() : "");
|
|
20
22
|
}, []);
|
|
21
23
|
function formatShortcutKey(key) {
|
|
22
24
|
return key
|
|
@@ -38,5 +40,5 @@ function ShortcutProvider() {
|
|
|
38
40
|
})
|
|
39
41
|
.join(" + ");
|
|
40
42
|
}
|
|
41
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_SHORTCUT_HELP"], onClose: () => setToggle("MODAL_SHORTCUT_HELP"), title: "
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_SHORTCUT_HELP"], onClose: () => setToggle("MODAL_SHORTCUT_HELP"), title: l.base.shortcut ? l.base.shortcut() : "", children: (0, jsx_runtime_1.jsx)("div", { className: "shortcut-help-grid", children: shortcuts.map(({ key, description }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "shortcut-key-badge", children: formatShortcutKey(key) }), (0, jsx_runtime_1.jsxs)("span", { children: [": ", description] })] }, key))) }) }) }));
|
|
42
44
|
}
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import { ReactNode, useEffect, useMemo, useState } from "react";
|
|
|
4
4
|
import { api, ApiType, cn, pcn, registry, shortcut, useResponsive } from "@utils";
|
|
5
5
|
import { ButtonComponent, ButtonProps, BottomSheetComponent } from "@components";
|
|
6
6
|
import { Icon } from "@skalfa/skalfa-icon";
|
|
7
|
+
import { useLang } from "@skalfa/skalfa-lang";
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
|
|
@@ -41,6 +42,7 @@ export function ModalConfirmComponent({
|
|
|
41
42
|
|
|
42
43
|
className = "",
|
|
43
44
|
}: ModalConfirmProps) {
|
|
45
|
+
const l = useLang()
|
|
44
46
|
const { isSm } = useResponsive();
|
|
45
47
|
const [toast, setToast] = useState<boolean | "success" | "failed">(false);
|
|
46
48
|
const [loading, setLoading] = useState(false);
|
|
@@ -69,7 +71,7 @@ export function ModalConfirmComponent({
|
|
|
69
71
|
<div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
|
|
70
72
|
<Icon icon={"solid/check"} className="text-primary text-2xl" />
|
|
71
73
|
</div>
|
|
72
|
-
<p className="text-primary text-lg font-semibold mt-4">{"
|
|
74
|
+
<p className="text-primary text-lg font-semibold mt-4">{l.base.success ? l.base.success() : "Success"}</p>
|
|
73
75
|
</div>
|
|
74
76
|
)
|
|
75
77
|
}
|
|
@@ -97,7 +99,7 @@ export function ModalConfirmComponent({
|
|
|
97
99
|
<Icon icon={"solid/exclamation-triangle"} className="text-danger text-lg" />
|
|
98
100
|
</div>
|
|
99
101
|
</div>
|
|
100
|
-
<p className="text-danger text-sm font-semibold">{
|
|
102
|
+
<p className="text-danger text-sm font-semibold">{l.base.confirmFailed ? l.base.confirmFailed() : "Failed"}</p>
|
|
101
103
|
</div>
|
|
102
104
|
</div>
|
|
103
105
|
)}
|
|
@@ -112,14 +114,14 @@ export function ModalConfirmComponent({
|
|
|
112
114
|
return (
|
|
113
115
|
<div className="flex justify-center gap-4 p-6 pt-2">
|
|
114
116
|
<ButtonComponent
|
|
115
|
-
label="
|
|
117
|
+
label={l.base.cancel ? l.base.cancel() : ""}
|
|
116
118
|
variant="outline"
|
|
117
119
|
onClick={() => onClose()}
|
|
118
120
|
block
|
|
119
121
|
size={size}
|
|
120
122
|
/>
|
|
121
123
|
<ButtonComponent
|
|
122
|
-
label={"
|
|
124
|
+
label={l.base.confirm ? l.base.confirm() : ""}
|
|
123
125
|
loading={loading}
|
|
124
126
|
onClick={async () => {
|
|
125
127
|
if(!submitControl?.onSubmit) return;
|