@skalfa/skalfa-component 1.0.0 → 1.0.2
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/index.js +175 -56
- package/dist/input/InputCheckbox.component.js +2 -2
- package/dist/input/InputDate.component.js +5 -3
- package/dist/input/InputDatetime.component.js +13 -8
- package/dist/input/InputDocument.component.js +6 -4
- package/dist/input/InputImage.component.js +5 -3
- package/dist/input/InputMap.component.js +5 -3
- package/dist/input/InputRadio.component.js +2 -2
- package/dist/input/InputTime.component.js +5 -3
- package/dist/modal/FloatingPage.component.js +2 -2
- package/dist/modal/Modal.component.js +2 -2
- package/dist/modal/ModalConfirm.component.d.ts +1 -1
- package/dist/modal/ModalConfirm.component.js +5 -3
- package/dist/modal/Toast.component.js +2 -2
- package/dist/nav/Headbar.component.js +3 -2
- package/dist/nav/Navbar.component.js +2 -2
- package/dist/supervision/FormSupervision.component.d.ts +13 -1
- package/dist/supervision/FormSupervision.component.js +32 -17
- package/dist/supervision/TableSupervision.component.d.ts +6 -1
- package/dist/supervision/TableSupervision.component.js +25 -19
- package/dist/table/ControlBar.component.d.ts +1 -1
- package/dist/table/ControlBar.component.js +20 -14
- package/dist/table/FilterComponent.js +24 -17
- package/dist/table/Pagination.component.js +4 -3
- package/dist/table/Table.component.d.ts +3 -1
- package/dist/table/Table.component.js +11 -7
- package/dist/wrap/ShortcutProvider.js +2 -2
- package/package.json +3 -2
|
@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
8
8
|
const _utils_1 = require("@utils");
|
|
9
|
-
const
|
|
9
|
+
const Button_component_1 = require("../button/Button.component");
|
|
10
10
|
;
|
|
11
11
|
function ModalComponent({ show, onClose, title, children, tip, footer, className = "", }) {
|
|
12
12
|
(0, react_1.useEffect)(() => {
|
|
@@ -23,5 +23,5 @@ function ModalComponent({ show, onClose, title, children, tip, footer, className
|
|
|
23
23
|
_utils_1.shortcut.unregister("escape");
|
|
24
24
|
};
|
|
25
25
|
}, [show]);
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] }), (0, jsx_runtime_1.jsx)(
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
|
|
27
27
|
}
|
|
@@ -7,7 +7,9 @@ const react_1 = require("react");
|
|
|
7
7
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
8
8
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
|
-
const
|
|
10
|
+
const Toast_component_1 = require("./Toast.component");
|
|
11
|
+
const Button_component_1 = require("../button/Button.component");
|
|
12
|
+
const BottomSheet_component_1 = require("./BottomSheet.component");
|
|
11
13
|
;
|
|
12
14
|
function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className = "", }) {
|
|
13
15
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
@@ -31,7 +33,7 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
|
|
|
31
33
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 items-center text-primary", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon || free_solid_svg_icons_1.faQuestion, className: `text-xl` }) }), (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title })] })), children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: footer }))] }));
|
|
32
34
|
}, [title, footer, children]);
|
|
33
35
|
const renderAction = (size = 'md') => {
|
|
34
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(
|
|
36
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Batal", variant: "simple", onClick: () => onClose(), className: "text-foreground bg-background rounded-none", block: true, size: size }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
|
|
35
37
|
if (!submitControl?.onSubmit)
|
|
36
38
|
return;
|
|
37
39
|
setLoading(true);
|
|
@@ -64,5 +66,5 @@ function ModalConfirmComponent({ show, title, children, icon, footer, submitCont
|
|
|
64
66
|
}
|
|
65
67
|
}, className: "rounded-none", block: true, size: size, ...submitControl })] }));
|
|
66
68
|
};
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSm ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal modal-confirm", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [renderChildren, renderAction()] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSm ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal modal-confirm", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [renderChildren, renderAction()] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, footer: renderAction('lg'), children: renderChildren }) })), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: toast == "failed", onClose: () => setToast(false), title: "Gagal", className: "!border-danger header::text-danger", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Gagal ", title || "", "! cek data dan koneksi internet dan coba kembali!"] }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: toast == "success", onClose: () => setToast(false), title: "Berhasil", className: "!border-success header::text-success", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Berhasil ", title || "", "!"] }) })] }));
|
|
68
70
|
}
|
|
@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
8
8
|
const _utils_1 = require("@utils");
|
|
9
|
-
const
|
|
9
|
+
const Button_component_1 = require("../button/Button.component");
|
|
10
10
|
;
|
|
11
11
|
function ToastComponent({ show, onClose, title, children, footer, className = "", }) {
|
|
12
12
|
const [countdown, setCountdown] = (0, react_1.useState)(5);
|
|
@@ -51,7 +51,7 @@ function ToastComponent({ show, onClose, title, children, footer, className = ""
|
|
|
51
51
|
}, 1000);
|
|
52
52
|
setTimerId(id);
|
|
53
53
|
};
|
|
54
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("toast", !show && "translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pt-2 px-3 flex justify-between items-center text-foreground", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("h6", { className: "font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-foreground/50", children: countdown }), (0, jsx_runtime_1.jsx)(
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("toast", !show && "translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pt-2 px-3 flex justify-between items-center text-foreground", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("h6", { className: "font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-foreground/50", children: countdown }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => {
|
|
55
55
|
clearInterval(timerId || "");
|
|
56
56
|
onClose();
|
|
57
57
|
}, size: "sm" })] })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] }) }));
|
|
@@ -7,7 +7,8 @@ const react_1 = require("react");
|
|
|
7
7
|
const navigation_1 = require("next/navigation");
|
|
8
8
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
9
9
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
10
|
-
const
|
|
10
|
+
const Image_component_1 = require("../wrap/Image.component");
|
|
11
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
11
12
|
const _utils_1 = require("@utils");
|
|
12
13
|
const defaultUser = {
|
|
13
14
|
name: "Jhon Duck",
|
|
@@ -28,5 +29,5 @@ function HeadbarComponent({ children, user = defaultUser, onLogout, onEditProfil
|
|
|
28
29
|
const styles = {
|
|
29
30
|
base: (0, _utils_1.cn)("headbar-base", className),
|
|
30
31
|
};
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: styles.base, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full ", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-right-controls", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-profile-trigger", onClick: () => setProfile(!profile), children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-user-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: styles.base, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full ", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-right-controls", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-profile-trigger", onClick: () => setProfile(!profile), children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-user-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(Image_component_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-name", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-role", children: user.role })] })] })] }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setProfile(false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("headbar-dropdown", profile ? "scale-y-100" : "scale-y-0"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-dropdown-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(Image_component_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser, className: "text-2xl text-light-foreground" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "text-lg font-bold line-clamp-1", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "text-xs -mt-1 font-semibold line-clamp-1", children: user.role })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item", onClick: onEditProfile, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUserCog }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Edit Profile" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item-danger", onClick: handleLogout, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPowerOff }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Keluar" })] })] })] }) })] }));
|
|
32
33
|
}
|
|
@@ -9,7 +9,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
9
9
|
const link_1 = __importDefault(require("next/link"));
|
|
10
10
|
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
11
11
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
12
|
-
const
|
|
12
|
+
const Button_component_1 = require("../button/Button.component");
|
|
13
13
|
const _utils_1 = require("@utils");
|
|
14
14
|
const defaultItems = [
|
|
15
15
|
{ label: "Tentang", path: "" },
|
|
@@ -22,5 +22,5 @@ const defaultSpecialLink = {
|
|
|
22
22
|
icon: free_solid_svg_icons_1.faStore,
|
|
23
23
|
};
|
|
24
24
|
function NavbarComponent({ logoTitle = "Next Light v.3", logoSubtitle = "The Magic Starter Template", logoPath = "/", specialLink = defaultSpecialLink, items = defaultItems, isLoggedIn = false, onLogin, onRegister, onProfile, className = "", }) {
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("navbar-topbar", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-container", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-base", children: ["Ini untuk", (0, jsx_runtime_1.jsxs)(link_1.default, { href: specialLink.path, className: "navbar-special-link", children: [specialLink.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: specialLink.icon, className: "mr-1" }), specialLink.label] })] }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-sm", children: item.label }) }, key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-main", children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-main-container", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: logoPath, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-max", children: [(0, jsx_runtime_1.jsx)("h1", { className: "navbar-logo-title", children: logoTitle }), logoSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "navbar-logo-subtitle", children: logoSubtitle }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-12 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-base", children: item.label }) }, key))) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-8", children: !isLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "navbar-auth-buttons", children: [(0, jsx_runtime_1.jsx)(
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("navbar-topbar", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-container", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-base", children: ["Ini untuk", (0, jsx_runtime_1.jsxs)(link_1.default, { href: specialLink.path, className: "navbar-special-link", children: [specialLink.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: specialLink.icon, className: "mr-1" }), specialLink.label] })] }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-sm", children: item.label }) }, key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-main", children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-main-container", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: logoPath, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-max", children: [(0, jsx_runtime_1.jsx)("h1", { className: "navbar-logo-title", children: logoTitle }), logoSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "navbar-logo-subtitle", children: logoSubtitle }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-12 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-base", children: item.label }) }, key))) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-8", children: !isLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "navbar-auth-buttons", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Daftar", size: "sm", variant: "light", onClick: onRegister })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 w-max items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-[1px] bg-foreground mx-2.5" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 cursor-pointer -ml-2 text-light-foreground hover:text-foreground", onClick: onProfile, children: (0, jsx_runtime_1.jsx)("div", { className: "h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser }) }) })] })) })] })] }) })] }));
|
|
26
26
|
}
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
|
|
3
|
-
import {
|
|
3
|
+
import { InputCheckboxProps } from "../input/InputCheckbox.component";
|
|
4
|
+
import { InputProps } from "../input/Input.component";
|
|
5
|
+
import { InputCurrencyProps } from "../input/InputCurrency.component";
|
|
6
|
+
import { InputDateProps } from "../input/InputDate.component";
|
|
7
|
+
import { InputNumberProps } from "../input/InputNumber.component";
|
|
8
|
+
import { InputOtpProps } from "../input/InputOtp.component";
|
|
9
|
+
import { InputPasswordProps } from "../input/InputPassword.component";
|
|
10
|
+
import { InputRadioProps } from "../input/InputRadio.component";
|
|
11
|
+
import { SelectProps } from "../input/Select.component";
|
|
12
|
+
import { InputTimeProps } from "../input/InputTime.component";
|
|
13
|
+
import { InputImageProps } from "../input/InputImage.component";
|
|
14
|
+
import { InputDateTimeProps } from "../input/InputDatetime.component";
|
|
15
|
+
import { InputMapProps } from "../input/InputMap.component";
|
|
4
16
|
type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
|
|
5
17
|
formControl: (name: string) => {
|
|
6
18
|
register: (regName: string, regValidations?: ValidationRules | undefined) => void;
|
|
@@ -6,7 +6,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
8
8
|
const _utils_1 = require("@utils");
|
|
9
|
-
const
|
|
9
|
+
const InputCheckbox_component_1 = require("../input/InputCheckbox.component");
|
|
10
|
+
const Input_component_1 = require("../input/Input.component");
|
|
11
|
+
const InputCurrency_component_1 = require("../input/InputCurrency.component");
|
|
12
|
+
const InputDate_component_1 = require("../input/InputDate.component");
|
|
13
|
+
const InputNumber_component_1 = require("../input/InputNumber.component");
|
|
14
|
+
const InputOtp_component_1 = require("../input/InputOtp.component");
|
|
15
|
+
const InputPassword_component_1 = require("../input/InputPassword.component");
|
|
16
|
+
const InputRadio_component_1 = require("../input/InputRadio.component");
|
|
17
|
+
const Select_component_1 = require("../input/Select.component");
|
|
18
|
+
const Button_component_1 = require("../button/Button.component");
|
|
19
|
+
const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
|
|
20
|
+
const Toast_component_1 = require("../modal/Toast.component");
|
|
21
|
+
const InputTime_component_1 = require("../input/InputTime.component");
|
|
22
|
+
const InputImage_component_1 = require("../input/InputImage.component");
|
|
23
|
+
const InputDatetime_component_1 = require("../input/InputDatetime.component");
|
|
24
|
+
const InputMap_component_1 = require("../input/InputMap.component");
|
|
10
25
|
function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
|
|
11
26
|
const [modal, setModal] = (0, react_1.useState)(false);
|
|
12
27
|
const [fresh, setFresh] = (0, react_1.useState)(true);
|
|
@@ -122,19 +137,19 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
|
|
|
122
137
|
}, [values, fields, mapGroups]);
|
|
123
138
|
const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
|
|
124
139
|
const inputMap = {
|
|
125
|
-
default:
|
|
126
|
-
check:
|
|
127
|
-
currency:
|
|
128
|
-
date:
|
|
129
|
-
datetime:
|
|
130
|
-
time:
|
|
131
|
-
number:
|
|
132
|
-
radio:
|
|
133
|
-
select:
|
|
134
|
-
"enter-password":
|
|
135
|
-
otp:
|
|
136
|
-
image:
|
|
137
|
-
map:
|
|
140
|
+
default: Input_component_1.InputComponent,
|
|
141
|
+
check: InputCheckbox_component_1.InputCheckboxComponent,
|
|
142
|
+
currency: InputCurrency_component_1.InputCurrencyComponent,
|
|
143
|
+
date: InputDate_component_1.InputDateComponent,
|
|
144
|
+
datetime: InputDatetime_component_1.InputDatetimeComponent,
|
|
145
|
+
time: InputTime_component_1.InputTimeComponent,
|
|
146
|
+
number: InputNumber_component_1.InputNumberComponent,
|
|
147
|
+
radio: InputRadio_component_1.InputRadioComponent,
|
|
148
|
+
select: Select_component_1.SelectComponent,
|
|
149
|
+
"enter-password": InputPassword_component_1.InputPasswordComponent,
|
|
150
|
+
otp: InputOtp_component_1.InputOtpComponent,
|
|
151
|
+
image: InputImage_component_1.InputImageComponent,
|
|
152
|
+
map: InputMap_component_1.InputMapComponent,
|
|
138
153
|
cluster: () => null,
|
|
139
154
|
custom: () => null,
|
|
140
155
|
};
|
|
@@ -155,14 +170,14 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
|
|
|
155
170
|
setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
|
|
156
171
|
unregisterPrefix(`${groupKey}[${gIndex}]`);
|
|
157
172
|
};
|
|
158
|
-
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)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(
|
|
173
|
+
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)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
|
|
159
174
|
}
|
|
160
175
|
if (inputType === "custom") {
|
|
161
176
|
const customRender = form.construction;
|
|
162
177
|
return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
|
|
163
178
|
}
|
|
164
|
-
const Component = inputMap[inputType] ||
|
|
179
|
+
const Component = inputMap[inputType] || Input_component_1.InputComponent;
|
|
165
180
|
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), disabled: ws?.disabled, readOnly: ws?.readonly }) }, key));
|
|
166
181
|
};
|
|
167
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(
|
|
182
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
|
|
168
183
|
}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
import { conversion, FetchControlType, ShortcutHandler, UseResourceProps } from "@utils";
|
|
3
|
-
import { FloatingPageProps
|
|
3
|
+
import { FloatingPageProps } from "../modal/FloatingPage.component";
|
|
4
|
+
import { ButtonProps } from "../button/Button.component";
|
|
5
|
+
import { TableProps } from "../table/Table.component";
|
|
6
|
+
import { FormType } from "./FormSupervision.component";
|
|
7
|
+
import { ModalConfirmProps } from "../modal/ModalConfirm.component";
|
|
8
|
+
import { ControlBarOptionType } from "../table/ControlBar.component";
|
|
4
9
|
export interface TableSupervisionColumnProps {
|
|
5
10
|
selector: string;
|
|
6
11
|
label?: string;
|
|
@@ -8,7 +8,13 @@ const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
|
|
|
8
8
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
10
|
const _contexts_1 = require("@contexts");
|
|
11
|
-
const
|
|
11
|
+
const FloatingPage_component_1 = require("../modal/FloatingPage.component");
|
|
12
|
+
const Button_component_1 = require("../button/Button.component");
|
|
13
|
+
const Table_component_1 = require("../table/Table.component");
|
|
14
|
+
const FormSupervision_component_1 = require("./FormSupervision.component");
|
|
15
|
+
const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
|
|
16
|
+
const TypographyColumn_component_1 = require("../typography/TypographyColumn.component");
|
|
17
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
12
18
|
const ExportExcel = _utils_1.registry.get("ExportExcel");
|
|
13
19
|
const ImportExcel = _utils_1.registry.get("ImportExcel");
|
|
14
20
|
function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }) {
|
|
@@ -99,19 +105,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
99
105
|
const renderTableAction = (actions, item, options) => {
|
|
100
106
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-supervision-action-list", options?.className), children: (Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
|
|
101
107
|
if (action == "EDIT") {
|
|
102
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
108
|
+
return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
|
|
103
109
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
104
110
|
item && setSelected?.(item);
|
|
105
111
|
} }, key));
|
|
106
112
|
}
|
|
107
113
|
if (action == "DELETE") {
|
|
108
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
114
|
+
return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
|
|
109
115
|
setToggle(`MODAL_DELETE_${toggleKey}`);
|
|
110
116
|
item && setSelected?.(item);
|
|
111
117
|
} }, key));
|
|
112
118
|
}
|
|
113
119
|
if (typeof action == "object") {
|
|
114
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
120
|
+
return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: action.label, variant: "outline", paint: "primary", size: options?.size || "xs", rounded: true, onClick: () => {
|
|
115
121
|
setToggle(`MODAL_${_utils_1.conversion.strSnake(action.label).toUpperCase()}_${toggleKey}`);
|
|
116
122
|
item && setSelected?.(item);
|
|
117
123
|
}, ...action.button }, key));
|
|
@@ -132,19 +138,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
132
138
|
return null;
|
|
133
139
|
return ((0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-container", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-body", children: !!selected && (typeof detailContent === "object" && Array.isArray(detailContent) ? detailContent?.map((column, key) => {
|
|
134
140
|
if (typeof column === "string") {
|
|
135
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
141
|
+
return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
|
|
136
142
|
}
|
|
137
143
|
else if (typeof column === "object" && column !== null) {
|
|
138
144
|
const colObj = column;
|
|
139
145
|
const rawContent = typeof colObj.item === "string" ? selected[colObj.item] : colObj.item(selected);
|
|
140
146
|
const conversionKey = colObj.conversion;
|
|
141
147
|
const content = conversionKey && _utils_1.conversion[conversionKey] ? _utils_1.conversion[conversionKey](rawContent) : rawContent;
|
|
142
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
148
|
+
return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
|
|
143
149
|
}
|
|
144
150
|
else {
|
|
145
151
|
return column?.(selected);
|
|
146
152
|
}
|
|
147
|
-
}) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(
|
|
153
|
+
}) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
|
|
148
154
|
}, [selected, detailContent, columns]);
|
|
149
155
|
// ============================
|
|
150
156
|
// ## Form preparation
|
|
@@ -163,7 +169,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
163
169
|
}) : [];
|
|
164
170
|
}, [formControl]);
|
|
165
171
|
const formPage = (0, react_1.useMemo)(() => {
|
|
166
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
172
|
+
return ((0, jsx_runtime_1.jsx)(FormSupervision_component_1.FormSupervisionComponent, { fields: fields, defaultValue: formControl?.defaultValue, payload: formControl?.payload, submitControl: fetchControl, onSuccess: () => {
|
|
167
173
|
setToggle(`MODAL_FORM_${toggleKey}`, false);
|
|
168
174
|
reset();
|
|
169
175
|
} }));
|
|
@@ -180,28 +186,28 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
180
186
|
if (toggle[`REFRESH_${toggleKey}`] != undefined)
|
|
181
187
|
reset();
|
|
182
188
|
}, [toggle[`REFRESH_${toggleKey}`]]);
|
|
183
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(
|
|
189
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(Table_component_1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
|
|
184
190
|
if (cb == "CREATE") {
|
|
185
191
|
if (isSm)
|
|
186
192
|
return;
|
|
187
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
193
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
|
|
188
194
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
189
195
|
setSelected(null);
|
|
190
196
|
} }) }, "button-add"));
|
|
191
197
|
}
|
|
192
198
|
if (cb == "IMPORT") {
|
|
193
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
199
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Import", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
|
|
194
200
|
}
|
|
195
201
|
if (cb == "EXPORT") {
|
|
196
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
202
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Export", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
|
|
197
203
|
}
|
|
198
204
|
if (cb == "PRINT") {
|
|
199
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
205
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFilePdf, label: "Cetak", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
|
|
200
206
|
}
|
|
201
207
|
return cb;
|
|
202
208
|
}) || [
|
|
203
209
|
...(!isSm ? [
|
|
204
|
-
(0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
210
|
+
(0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
|
|
205
211
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
206
212
|
setSelected(null);
|
|
207
213
|
} }) }, "button-add")
|
|
@@ -230,19 +236,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
230
236
|
}
|
|
231
237
|
} : undefined
|
|
232
238
|
} : responsiveControl?.mobile || undefined,
|
|
233
|
-
} : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(
|
|
239
|
+
} : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, className: "table-supervision-mobile-add-btn", size: "lg", rounded: true, onClick: () => {
|
|
234
240
|
setToggle(`MODAL_FORM_${toggleKey}`);
|
|
235
241
|
setSelected(null);
|
|
236
|
-
} }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(
|
|
242
|
+
} }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), size: "98vh", ...detailModalProps, children: detailPage })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...detailModalProps, children: detailPage }))), isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), size: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-mobile-container", children: formPage }) })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-container", children: formPage }) })), ExportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
|
|
237
243
|
label: cc.label || "",
|
|
238
244
|
selector: cc.selector || "",
|
|
239
245
|
status: cc.exportable === false ? "hidden" : cc.exportable === true ? "default" : typeof cc.exportable === "string" ? cc.exportable : undefined,
|
|
240
|
-
})) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(
|
|
246
|
+
})) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: importControl, fetchControl: fetchControl.path ? {
|
|
241
247
|
path: fetchControl.path,
|
|
242
248
|
} : undefined, columnControl: columns?.filter((cc) => cc.importable !== false).map((cc) => ({
|
|
243
249
|
label: cc.label || "",
|
|
244
250
|
selector: cc.selector || "",
|
|
245
|
-
})) }) })), (0, jsx_runtime_1.jsx)(
|
|
251
|
+
})) }) })), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, submitControl: {
|
|
246
252
|
onSubmit: {
|
|
247
253
|
...(fetchControl.path
|
|
248
254
|
? { path: `${fetchControl.path}/${selected?.id || ""}` }
|
|
@@ -256,7 +262,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
256
262
|
},
|
|
257
263
|
}, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin menghapus ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin yang dihapus sudah benar?" })) }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
|
|
258
264
|
const submitControl = ac.modal?.submitControl?.onSubmit;
|
|
259
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
265
|
+
return ((0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `${ac.label} Data?`, submitControl: {
|
|
260
266
|
onSubmit: {
|
|
261
267
|
...(submitControl?.path
|
|
262
268
|
? { path: `${submitControl.path}/${selected?.id || ""}` }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ApiFilterType } from '@utils';
|
|
3
|
-
import { FilterColumnOption } from
|
|
3
|
+
import { FilterColumnOption } from "./FilterComponent";
|
|
4
4
|
export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
|
|
5
5
|
export interface ControlBarProps {
|
|
6
6
|
id?: string;
|
|
@@ -8,7 +8,13 @@ const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
|
8
8
|
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
9
9
|
const _utils_1 = require("@utils");
|
|
10
10
|
const _contexts_1 = require("@contexts");
|
|
11
|
-
const
|
|
11
|
+
const InputCheckbox_component_1 = require("../input/InputCheckbox.component");
|
|
12
|
+
const Input_component_1 = require("../input/Input.component");
|
|
13
|
+
const Select_component_1 = require("../input/Select.component");
|
|
14
|
+
const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
|
|
15
|
+
const Button_component_1 = require("../button/Button.component");
|
|
16
|
+
const BottomSheet_component_1 = require("../modal/BottomSheet.component");
|
|
17
|
+
const FilterComponent_1 = require("./FilterComponent");
|
|
12
18
|
function ControlBarComponent({ id = "", options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }) {
|
|
13
19
|
const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
|
|
14
20
|
const { isSm } = (0, _utils_1.useResponsive)();
|
|
@@ -73,7 +79,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
73
79
|
// =========================>
|
|
74
80
|
}
|
|
75
81
|
if (option == "CREATE") {
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
82
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
|
|
77
83
|
}
|
|
78
84
|
{
|
|
79
85
|
// =========================>
|
|
@@ -82,7 +88,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
82
88
|
}
|
|
83
89
|
if (option == "SEARCH") {
|
|
84
90
|
const searchable = !!options?.find((option) => option == "SEARCHABLE");
|
|
85
|
-
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)(
|
|
91
|
+
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: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
|
|
86
92
|
}
|
|
87
93
|
{
|
|
88
94
|
// =========================>
|
|
@@ -90,7 +96,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
90
96
|
// =========================>
|
|
91
97
|
}
|
|
92
98
|
if (option == "SEARCHABLE") {
|
|
93
|
-
return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-searchable-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
99
|
+
return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-searchable-wrapper", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
|
|
94
100
|
return {
|
|
95
101
|
label: column.label,
|
|
96
102
|
value: column.selector,
|
|
@@ -103,7 +109,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
103
109
|
// =========================>
|
|
104
110
|
}
|
|
105
111
|
if (option == "SELECTABLE") {
|
|
106
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(
|
|
112
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEyeLowVision, 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: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
|
|
107
113
|
return {
|
|
108
114
|
label: option.label,
|
|
109
115
|
value: option.selector,
|
|
@@ -116,7 +122,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
116
122
|
// =========================>
|
|
117
123
|
}
|
|
118
124
|
if (option == "SORT") {
|
|
119
|
-
return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(
|
|
125
|
+
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: free_solid_svg_icons_1.faSort, 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: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-sort-list', children: sortableOptions?.map((option, key) => {
|
|
120
126
|
const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
|
|
121
127
|
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)(react_fontawesome_1.FontAwesomeIcon, { icon: sortBy == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, 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));
|
|
122
128
|
}) })] }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
@@ -127,7 +133,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
127
133
|
// =========================>
|
|
128
134
|
}
|
|
129
135
|
if (option == "REFRESH") {
|
|
130
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper-refresh", children: (0, jsx_runtime_1.jsx)(
|
|
136
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper-refresh", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRefresh, variant: "outline", className: "control-bar-icon-button", onClick: () => onRefresh?.(), size: "sm" }) }, key));
|
|
131
137
|
}
|
|
132
138
|
{
|
|
133
139
|
// =========================>
|
|
@@ -135,7 +141,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
135
141
|
// =========================>
|
|
136
142
|
}
|
|
137
143
|
if (option == "FILTER") {
|
|
138
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
144
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSliders, label: "Filter", variant: "outline", className: "control-bar-filter-button", onClick: () => setToggle("FILTER"), size: "sm" }) }, key));
|
|
139
145
|
}
|
|
140
146
|
{
|
|
141
147
|
// =========================>
|
|
@@ -143,17 +149,17 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
143
149
|
// =========================>
|
|
144
150
|
}
|
|
145
151
|
if (option == "MOBILE_OPTION") {
|
|
146
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(
|
|
152
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisV, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("MOBILE_OPTION"), size: "sm" }) }, key));
|
|
147
153
|
}
|
|
148
154
|
return option;
|
|
149
|
-
}) }), !!filterableColumns && !!filterableColumns?.length && ((0, jsx_runtime_1.jsx)(
|
|
155
|
+
}) }), !!filterableColumns && !!filterableColumns?.length && ((0, jsx_runtime_1.jsx)(FilterComponent_1.FilterComponent, { className: (0, _utils_1.cn)(!toggle.FILTER ? "control-bar-filter-panel-hidden" : "control-bar-filter-panel"), columns: filterableColumns, onChange: onFilter, value: filter, onMinimize: () => setToggle("FILTER") })), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle["MOBILE_OPTION"], onClose: () => setToggle("MOBILE_OPTION", false), maxSize: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-mobile-container', children: options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option, key) => {
|
|
150
156
|
{
|
|
151
157
|
// =========================>
|
|
152
158
|
// ## Search Field
|
|
153
159
|
// =========================>
|
|
154
160
|
}
|
|
155
161
|
if (option == "SEARCH") {
|
|
156
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(
|
|
162
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e) }) }, key));
|
|
157
163
|
}
|
|
158
164
|
{
|
|
159
165
|
// =========================>
|
|
@@ -161,7 +167,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
161
167
|
// =========================>
|
|
162
168
|
}
|
|
163
169
|
if (option == "SEARCHABLE") {
|
|
164
|
-
return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(
|
|
170
|
+
return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
|
|
165
171
|
return {
|
|
166
172
|
label: column.label,
|
|
167
173
|
value: column.selector,
|
|
@@ -174,7 +180,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
174
180
|
// =========================>
|
|
175
181
|
}
|
|
176
182
|
if (option == "SELECTABLE") {
|
|
177
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(
|
|
183
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
|
|
178
184
|
return {
|
|
179
185
|
label: option.label,
|
|
180
186
|
value: option.selector,
|
|
@@ -198,7 +204,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
|
|
|
198
204
|
// =========================>
|
|
199
205
|
}
|
|
200
206
|
if (option == "FILTER") {
|
|
201
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: filterableColumns && filterableColumns?.length && ((0, jsx_runtime_1.jsx)(
|
|
207
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: filterableColumns && filterableColumns?.length && ((0, jsx_runtime_1.jsx)(FilterComponent_1.FilterComponent, { className: 'control-bar-mobile-filter title::text-xs', columns: filterableColumns, onChange: onFilter, value: filter })) }, key));
|
|
202
208
|
}
|
|
203
209
|
return option;
|
|
204
210
|
}) }) }))] }));
|