mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
74 lines (73 loc) • 4.92 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionIcon, Button, Flex, Group, Stack, Text, ThemeIcon, Tooltip, } from "@mantine/core";
import { IconAlertCircle, IconArrowLeft, IconEye, IconPencil, IconPlus, IconTrash, } from "@tabler/icons-react";
import { useMemo } from "react";
import { modals } from "@mantine/modals";
import { useDeleteQuery } from "./querys";
import notify from "../../utils/notification";
export const CreateButton = ({ path, currentPermissions, LinkComponent, appMainPath }) => {
const isAllowed = useMemo(() => currentPermissions?.includes("create"), [currentPermissions]);
if (!isAllowed) {
return null;
}
return (_jsx(Button, { size: "compact-xs", fz: 14, p: 0, w: 86, radius: "xl", leftSection: _jsx(IconPlus, { size: 13, stroke: 3 }), component: LinkComponent, href: `${appMainPath}/${path}/create`, disabled: !isAllowed, children: "Create" }));
};
export const UpdateButton = ({ id, path, currentPermissions, LinkComponent, appMainPath }) => {
const isAllowed = useMemo(() => currentPermissions?.includes("update"), [currentPermissions]);
if (!isAllowed) {
return null;
}
return (_jsx(Tooltip, { label: "Edit", children: _jsx(ActionIcon, { variant: "light", size: 24, component: LinkComponent, href: `${appMainPath}/${path}/update?id=${id}`, children: _jsx(IconPencil, { size: 14, stroke: 1.8 }) }) }));
};
export const ViewButton = ({ id, path, currentPermissions, LinkComponent, appMainPath }) => {
const isAllowed = useMemo(() => currentPermissions?.includes("view"), [currentPermissions]);
if (!isAllowed) {
return null;
}
return (_jsx(Tooltip, { label: "Detail View", children: _jsx(ActionIcon, { variant: "light", size: 24, component: LinkComponent, color: "green.6", href: `${appMainPath}/${path}/view?id=${id}`, children: _jsx(IconEye, { size: 14, stroke: 1.8 }) }) }));
};
export const BackButton = ({ id, path, currentPermissions, LinkComponent, appMainPath }) => {
const isAllowed = useMemo(() => currentPermissions?.includes("view"), [currentPermissions]);
if (!isAllowed) {
return null;
}
return (_jsx(Tooltip, { label: "Back", children: _jsx(ActionIcon, { variant: "light", size: 24, component: LinkComponent, href: `${appMainPath}/${path}/list`, children: _jsx(IconArrowLeft, { size: 16, stroke: 2.3 }) }) }));
};
export const DeleteButton = ({ actionQuery, rootConfig, data, currentPermissions, requestParams }) => {
const { mutateAsync: _delete, isPending } = useDeleteQuery({
actionQuery,
rootConfig,
data,
requestParams
});
const isAllowed = useMemo(() => currentPermissions?.includes("delete"), [currentPermissions]);
if (!isAllowed) {
return null;
}
return (_jsx(Tooltip, { label: "Delete", children: _jsx(ActionIcon, { variant: "light", color: "red.6", size: 24, autoContrast: true, onClick: () => {
modals.open({
title: (_jsxs(Flex, { className: "items-center justify-center gap-2", children: [_jsx(ThemeIcon, { autoContrast: true, variant: "light", color: "red.6", size: 38, children: _jsx(IconAlertCircle, { color: "red", size: 30, stroke: 1.6 }) }), "Please confirm your action"] })),
size: "sm",
radius: "md",
centered: true,
withCloseButton: false,
overlayProps: {
backgroundOpacity: 0.55,
blur: 3,
},
children: (_jsx(Flex, { className: "items-center justify-center flex-col", children: _jsxs(Stack, { children: [_jsx(Text, { size: "sm", children: "Are you sure you want to delete this data?" }), _jsxs(Group, { mt: "xl", wrap: "nowrap", children: [_jsx(Button, { fullWidth: true, onClick: async () => await _delete({})
.then(() => {
modals.closeAll();
notify({
type: "success",
message: "Data Deleted succsfuly",
});
})
.catch(() => notify({
type: "error",
message: "Error on deleting data",
})), color: "red", loading: isPending, children: "Confirm" }), _jsx(Button, { fullWidth: true, variant: "outline", onClick: () => modals.closeAll(), loading: isPending, children: "Cancel" })] })] }) })),
});
}, children: _jsx(IconTrash, { size: 14, stroke: 1.8, color: "red" }) }) }));
};