mirror of
https://github.com/hexastack/hexabot
synced 2025-02-22 20:38:32 +00:00
Merge pull request #711 from Hexastack/706-refactor-roles-dialogs-add-edit-delete-permissions
refactor(frontend): update useDialogs for roles contents
This commit is contained in:
Med Marrouchi
GitHub
commit
462bce2edb
@ -11,6 +11,7 @@ import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Button, Grid } from "@mui/material";
|
||||
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { TTranslationKeys } from "@/i18n/i18n.types";
|
||||
import { FormButtonsProps } from "@/types/common/dialogs.types";
|
||||
|
||||
export const DialogFormButtons = ({
|
||||
@ -20,6 +21,10 @@ export const DialogFormButtons = ({
|
||||
confirmButtonProps,
|
||||
}: FormButtonsProps) => {
|
||||
const { t } = useTranslate();
|
||||
const cancelButtonTitle = (cancelButtonProps?.value ||
|
||||
"button.cancel") as TTranslationKeys;
|
||||
const confirmButtonTitle = (confirmButtonProps?.value ||
|
||||
"button.submit") as TTranslationKeys;
|
||||
|
||||
return (
|
||||
<Grid
|
||||
@ -35,16 +40,15 @@ export const DialogFormButtons = ({
|
||||
startIcon={<CloseIcon />}
|
||||
{...cancelButtonProps}
|
||||
>
|
||||
{t("button.cancel")}
|
||||
{t(cancelButtonTitle)}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="contained"
|
||||
onClick={onSubmit}
|
||||
startIcon={<CheckIcon />}
|
||||
{...confirmButtonProps}
|
||||
>
|
||||
{t("button.submit")}
|
||||
{t(confirmButtonTitle)}
|
||||
</Button>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@ -22,16 +22,20 @@ export const FormDialog = ({
|
||||
...rest
|
||||
}: FormDialogProps) => {
|
||||
const onCancel = () => rest.onClose?.({}, "backdropClick");
|
||||
|
||||
return (
|
||||
<Dialog fullWidth {...rest}>
|
||||
<DialogTitle onClose={onCancel}>{title}</DialogTitle>
|
||||
<DialogContent>{children}</DialogContent>
|
||||
const dialogActions =
|
||||
rest.hasButtons === false ? null : (
|
||||
<DialogActions style={{ padding: "0.5rem" }}>
|
||||
<DialogFormButtons
|
||||
{...{ onSubmit, onCancel, confirmButtonProps, cancelButtonProps }}
|
||||
/>
|
||||
</DialogActions>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog fullWidth {...rest}>
|
||||
<DialogTitle onClose={onCancel}>{title}</DialogTitle>
|
||||
<DialogContent>{children}</DialogContent>
|
||||
{dialogActions}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@ -8,29 +8,30 @@
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { FormDialog } from "@/app-components/dialogs";
|
||||
import { FormDialog as Wrapper } from "@/app-components/dialogs";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { TTranslationKeys } from "@/i18n/i18n.types";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
|
||||
type GenericFormDialogProps<T> = ComponentFormDialogProps<T> & {
|
||||
Form: React.ElementType;
|
||||
rowKey?: keyof T;
|
||||
addText?: TTranslationKeys;
|
||||
editText?: TTranslationKeys;
|
||||
};
|
||||
|
||||
export const GenericFormDialog = <T,>({
|
||||
Form,
|
||||
payload,
|
||||
rowKey,
|
||||
payload: data,
|
||||
...rest
|
||||
}: GenericFormDialogProps<T>) => {
|
||||
const { t } = useTranslate();
|
||||
const translationKey = payload ? rest.editText : rest.addText;
|
||||
const hasRow = rowKey ? data?.[rowKey] : data;
|
||||
const translationKey = hasRow ? rest.editText : rest.addText;
|
||||
|
||||
return (
|
||||
<Form
|
||||
data={payload}
|
||||
Wrapper={FormDialog}
|
||||
onSuccess={() => {
|
||||
rest.onClose(true);
|
||||
}}
|
||||
@ -38,6 +39,7 @@ export const GenericFormDialog = <T,>({
|
||||
title: translationKey && t(translationKey),
|
||||
...rest,
|
||||
}}
|
||||
{...{ data, Wrapper }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,16 +7,8 @@
|
||||
*/
|
||||
|
||||
import LinkIcon from "@mui/icons-material/Link";
|
||||
import {
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Switch,
|
||||
} from "@mui/material";
|
||||
import { isAbsoluteUrl } from "next/dist/shared/lib/utils";
|
||||
import { FC, useEffect } from "react";
|
||||
import { FormControl, FormControlLabel, Switch } from "@mui/material";
|
||||
import { FC, Fragment, useEffect } from "react";
|
||||
import {
|
||||
Controller,
|
||||
ControllerRenderProps,
|
||||
@ -25,19 +17,16 @@ import {
|
||||
} from "react-hook-form";
|
||||
|
||||
import AttachmentInput from "@/app-components/attachment/AttachmentInput";
|
||||
import DialogButtons from "@/app-components/buttons/DialogButtons";
|
||||
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
|
||||
import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
|
||||
import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
|
||||
import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
|
||||
import { Adornment } from "@/app-components/inputs/Adornment";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useCreate } from "@/hooks/crud/useCreate";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { DialogControlProps } from "@/hooks/useDialog";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType } from "@/services/types";
|
||||
import { AttachmentResourceRef } from "@/types/attachment.types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
import {
|
||||
ContentField,
|
||||
ContentFieldType,
|
||||
@ -45,6 +34,7 @@ import {
|
||||
} from "@/types/content-type.types";
|
||||
import { IContent, IContentAttributes } from "@/types/content.types";
|
||||
import { MIME_TYPES } from "@/utils/attachment";
|
||||
import { isAbsoluteUrl } from "@/utils/URL";
|
||||
|
||||
interface ContentFieldInput {
|
||||
contentField: ContentField;
|
||||
@ -56,7 +46,6 @@ interface ContentFieldInput {
|
||||
>;
|
||||
idx: number;
|
||||
}
|
||||
|
||||
const ContentFieldInput: React.FC<ContentFieldInput> = ({
|
||||
contentField: contentField,
|
||||
field,
|
||||
@ -139,14 +128,14 @@ const buildDynamicFields = (
|
||||
},
|
||||
});
|
||||
|
||||
export type ContentDialogProps = DialogControlProps<{
|
||||
export type ContentFormData = {
|
||||
content?: IContent;
|
||||
contentType?: IContentType;
|
||||
}>;
|
||||
export const ContentDialog: FC<ContentDialogProps> = ({
|
||||
open,
|
||||
};
|
||||
export const ContentForm: FC<ComponentFormProps<ContentFormData>> = ({
|
||||
data,
|
||||
closeDialog,
|
||||
Wrapper = Fragment,
|
||||
WrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { content, contentType } = data || {
|
||||
@ -177,44 +166,34 @@ export const ContentDialog: FC<ContentDialogProps> = ({
|
||||
isAbsoluteUrl(value) || t("message.url_is_invalid"),
|
||||
},
|
||||
};
|
||||
const { mutateAsync: createContent } = useCreate(EntityType.CONTENT);
|
||||
const { mutateAsync: updateContent } = useUpdate(EntityType.CONTENT);
|
||||
const onSubmitForm = async (params: IContentAttributes) => {
|
||||
const { mutate: createContent } = useCreate(EntityType.CONTENT);
|
||||
const { mutate: updateContent } = useUpdate(EntityType.CONTENT);
|
||||
const options = {
|
||||
onError: (error: Error) => {
|
||||
rest.onError?.();
|
||||
toast.error(error.message || t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess: () => {
|
||||
rest.onSuccess?.();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
};
|
||||
const onSubmitForm = (params: IContentAttributes) => {
|
||||
if (content) {
|
||||
updateContent(
|
||||
{ id: content.id, params: buildDynamicFields(params, contentType) },
|
||||
{
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess: () => {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
},
|
||||
options,
|
||||
);
|
||||
} else if (contentType) {
|
||||
createContent(
|
||||
{ ...buildDynamicFields(params, contentType), entity: contentType.id },
|
||||
{
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
},
|
||||
onSuccess: () => {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
},
|
||||
options,
|
||||
);
|
||||
} else {
|
||||
throw new Error("Content Type must be passed to the dialog form.");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) reset();
|
||||
}, [open, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (content) {
|
||||
reset(content);
|
||||
@ -224,47 +203,43 @@ export const ContentDialog: FC<ContentDialogProps> = ({
|
||||
}, [content, reset]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
|
||||
<Wrapper
|
||||
open={!!WrapperProps?.open}
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
{...WrapperProps}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<DialogTitle onClose={closeDialog}>
|
||||
{content ? t("title.edit_node") : t("title.new_content")}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<ContentContainer>
|
||||
{(contentType?.fields || []).map((contentField, index) => (
|
||||
<ContentItem key={contentField.name}>
|
||||
<Controller
|
||||
name={contentField.name}
|
||||
control={control}
|
||||
defaultValue={
|
||||
content ? content["dynamicFields"][contentField.name] : null
|
||||
}
|
||||
rules={
|
||||
contentField.name === "title"
|
||||
? validationRules.title
|
||||
: contentField.type === ContentFieldType.URL
|
||||
? validationRules.url
|
||||
: undefined
|
||||
}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
|
||||
<ContentFieldInput
|
||||
contentField={contentField}
|
||||
field={field}
|
||||
errors={errors}
|
||||
idx={index}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</ContentItem>
|
||||
))}
|
||||
</ContentContainer>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogButtons closeDialog={closeDialog} />
|
||||
</DialogActions>
|
||||
<ContentContainer>
|
||||
{(contentType?.fields || []).map((contentField, index) => (
|
||||
<ContentItem key={contentField.name}>
|
||||
<Controller
|
||||
name={contentField.name}
|
||||
control={control}
|
||||
defaultValue={
|
||||
content ? content["dynamicFields"][contentField.name] : null
|
||||
}
|
||||
rules={
|
||||
contentField.name === "title"
|
||||
? validationRules.title
|
||||
: contentField.type === ContentFieldType.URL
|
||||
? validationRules.url
|
||||
: undefined
|
||||
}
|
||||
render={({ field }) => (
|
||||
<FormControl fullWidth sx={{ paddingTop: ".75rem" }}>
|
||||
<ContentFieldInput
|
||||
contentField={contentField}
|
||||
field={field}
|
||||
errors={errors}
|
||||
idx={index}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</ContentItem>
|
||||
))}
|
||||
</ContentContainer>
|
||||
</form>
|
||||
</Dialog>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
24
frontend/src/components/contents/ContentFormDialog.tsx
Normal file
24
frontend/src/components/contents/ContentFormDialog.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { GenericFormDialog } from "@/app-components/dialogs";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
|
||||
import { ContentForm, ContentFormData } from "./ContentForm";
|
||||
|
||||
export const ContentFormDialog = <T extends ContentFormData = ContentFormData>(
|
||||
props: ComponentFormDialogProps<T>,
|
||||
) => (
|
||||
<GenericFormDialog<T>
|
||||
Form={ContentForm}
|
||||
rowKey="content"
|
||||
addText="title.new_content"
|
||||
editText="title.edit_node"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -6,72 +6,62 @@
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
|
||||
import { FC, useState } from "react";
|
||||
import { FC, Fragment, useState } from "react";
|
||||
import { useQuery } from "react-query";
|
||||
|
||||
import AttachmentInput from "@/app-components/attachment/AttachmentInput";
|
||||
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
|
||||
import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
|
||||
import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
|
||||
import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
|
||||
import { useApiClient } from "@/hooks/useApiClient";
|
||||
import { DialogControlProps } from "@/hooks/useDialog";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { AttachmentResourceRef } from "@/types/attachment.types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
import { IContentType } from "@/types/content-type.types";
|
||||
|
||||
export type ContentImportDialogProps = DialogControlProps<{
|
||||
contentType?: IContentType;
|
||||
}>;
|
||||
|
||||
export const ContentImportDialog: FC<ContentImportDialogProps> = ({
|
||||
open,
|
||||
data,
|
||||
closeDialog,
|
||||
...rest
|
||||
}) => {
|
||||
export type ContentImportFormData = { row: null; contentType: IContentType };
|
||||
export const ContentImportForm: FC<
|
||||
ComponentFormProps<ContentImportFormData>
|
||||
> = ({ data, Wrapper = Fragment, WrapperProps, ...rest }) => {
|
||||
const [attachmentId, setAttachmentId] = useState<string | null>(null);
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { apiClient } = useApiClient();
|
||||
const { refetch, isFetching } = useQuery(
|
||||
["importContent", data?.contentType?.id, attachmentId],
|
||||
["importContent", data?.contentType.id, attachmentId],
|
||||
async () => {
|
||||
if (data?.contentType?.id && attachmentId) {
|
||||
if (data?.contentType.id && attachmentId) {
|
||||
await apiClient.importContent(data.contentType.id, attachmentId);
|
||||
}
|
||||
},
|
||||
{
|
||||
enabled: false,
|
||||
onSuccess: () => {
|
||||
handleCloseDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
if (rest.callback) {
|
||||
rest.callback();
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
rest.onError?.();
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess: () => {
|
||||
rest.onSuccess?.();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
},
|
||||
);
|
||||
const handleCloseDialog = () => {
|
||||
closeDialog();
|
||||
setAttachmentId(null);
|
||||
};
|
||||
const handleImportClick = () => {
|
||||
if (attachmentId && data?.contentType?.id) {
|
||||
if (attachmentId && data?.contentType.id) {
|
||||
refetch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth onClose={handleCloseDialog} {...rest}>
|
||||
<DialogTitle onClose={handleCloseDialog}>{t("title.import")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Wrapper
|
||||
open={!!WrapperProps?.open}
|
||||
onSubmit={handleImportClick}
|
||||
{...WrapperProps}
|
||||
confirmButtonProps={{
|
||||
...WrapperProps?.confirmButtonProps,
|
||||
disabled: !attachmentId || isFetching,
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleImportClick}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<AttachmentInput
|
||||
@ -86,23 +76,7 @@ export const ContentImportDialog: FC<ContentImportDialogProps> = ({
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
disabled={!attachmentId || isFetching}
|
||||
onClick={handleImportClick}
|
||||
>
|
||||
{t("button.import")}
|
||||
</Button>
|
||||
<Button
|
||||
startIcon={<CloseIcon />}
|
||||
variant="outlined"
|
||||
onClick={handleCloseDialog}
|
||||
disabled={isFetching}
|
||||
>
|
||||
{t("button.cancel")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</form>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
26
frontend/src/components/contents/ContentImportFormDialog.tsx
Normal file
26
frontend/src/components/contents/ContentImportFormDialog.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { GenericFormDialog } from "@/app-components/dialogs";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
|
||||
import { ContentImportForm, ContentImportFormData } from "./ContentImportForm";
|
||||
|
||||
export const ContentImportFormDialog = <
|
||||
T extends ContentImportFormData = ContentImportFormData,
|
||||
>(
|
||||
props: ComponentFormDialogProps<T>,
|
||||
) => (
|
||||
<GenericFormDialog<T>
|
||||
Form={ContentImportForm}
|
||||
rowKey="row"
|
||||
addText="button.import"
|
||||
confirmButtonProps={{ value: "button.import" }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -14,7 +14,7 @@ import { Button, Chip, Grid, Paper, Switch, Typography } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { DeleteDialog } from "@/app-components/dialogs";
|
||||
import { ConfirmDialogBody } from "@/app-components/dialogs";
|
||||
import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
|
||||
import {
|
||||
ActionColumnLabel,
|
||||
@ -26,54 +26,38 @@ import { useDelete } from "@/hooks/crud/useDelete";
|
||||
import { useFind } from "@/hooks/crud/useFind";
|
||||
import { useGet, useGetFromCache } from "@/hooks/crud/useGet";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
|
||||
import { useDialogs } from "@/hooks/useDialogs";
|
||||
import { useHasPermission } from "@/hooks/useHasPermission";
|
||||
import { useSearch } from "@/hooks/useSearch";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { PageHeader } from "@/layout/content/PageHeader";
|
||||
import { EntityType, Format } from "@/services/types";
|
||||
import { IContentType } from "@/types/content-type.types";
|
||||
import { IContent } from "@/types/content.types";
|
||||
import { PermissionAction } from "@/types/permission.types";
|
||||
import { getDateTimeFormatter } from "@/utils/date";
|
||||
|
||||
import { ContentDialog } from "./ContentDialog";
|
||||
import { ContentImportDialog } from "./ContentImportDialog";
|
||||
import { ContentFormDialog } from "./ContentFormDialog";
|
||||
import { ContentImportFormDialog } from "./ContentImportFormDialog";
|
||||
|
||||
export const Contents = () => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { query } = useRouter();
|
||||
// Dialog Controls
|
||||
const addDialogCtl = useDialog<{
|
||||
content?: IContent;
|
||||
contentType?: IContentType;
|
||||
}>(false);
|
||||
const editDialogCtl = useDialog<{
|
||||
content?: IContent;
|
||||
contentType?: IContentType;
|
||||
}>(false);
|
||||
const deleteDialogCtl = useDialog<string>(false);
|
||||
const dialogs = useDialogs();
|
||||
// data fetching
|
||||
const { onSearch, searchPayload } = useSearch<IContent>({
|
||||
$eq: [{ entity: String(query.id) }],
|
||||
$iLike: ["title"],
|
||||
});
|
||||
const importDialogCtl = useDialog<{
|
||||
contentType?: IContentType;
|
||||
}>(false);
|
||||
const hasPermission = useHasPermission();
|
||||
const { data: contentType } = useGet(String(query.id), {
|
||||
entity: EntityType.CONTENT_TYPE,
|
||||
});
|
||||
const { dataGridProps, refetch } = useFind(
|
||||
{ entity: EntityType.CONTENT, format: Format.FULL },
|
||||
{
|
||||
params: searchPayload,
|
||||
},
|
||||
);
|
||||
const { mutateAsync: updateContent } = useUpdate(EntityType.CONTENT, {
|
||||
const { mutate: updateContent } = useUpdate(EntityType.CONTENT, {
|
||||
onError: (error) => {
|
||||
toast.error(error.message || t("message.internal_server_error"));
|
||||
},
|
||||
@ -81,9 +65,8 @@ export const Contents = () => {
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const { mutateAsync: deleteContent } = useDelete(EntityType.CONTENT, {
|
||||
const { mutate: deleteContent } = useDelete(EntityType.CONTENT, {
|
||||
onSuccess: () => {
|
||||
deleteDialogCtl.closeDialog();
|
||||
toast.success(t("message.item_delete_success"));
|
||||
},
|
||||
});
|
||||
@ -93,22 +76,25 @@ export const Contents = () => {
|
||||
[
|
||||
{
|
||||
label: ActionColumnLabel.Edit,
|
||||
action: (content) =>
|
||||
editDialogCtl.openDialog({
|
||||
contentType,
|
||||
content,
|
||||
}),
|
||||
action: (row) =>
|
||||
dialogs.open(ContentFormDialog, { content: row, contentType }),
|
||||
requires: [PermissionAction.UPDATE],
|
||||
},
|
||||
{
|
||||
label: ActionColumnLabel.Delete,
|
||||
action: (content) => deleteDialogCtl.openDialog(content.id),
|
||||
action: async ({ id }) => {
|
||||
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
|
||||
|
||||
if (isConfirmed) {
|
||||
deleteContent(id);
|
||||
}
|
||||
},
|
||||
requires: [PermissionAction.DELETE],
|
||||
},
|
||||
],
|
||||
t("label.operations"),
|
||||
);
|
||||
const { data } = useGet(String(query.id), {
|
||||
const { data: contentType } = useGet(String(query.id), {
|
||||
entity: EntityType.CONTENT_TYPE,
|
||||
});
|
||||
|
||||
@ -123,7 +109,9 @@ export const Contents = () => {
|
||||
|
||||
<PageHeader
|
||||
icon={faAlignLeft}
|
||||
chip={<Chip label={data?.name} size="medium" variant="title" />}
|
||||
chip={
|
||||
<Chip label={contentType?.name} size="medium" variant="title" />
|
||||
}
|
||||
title={t("title.content")}
|
||||
>
|
||||
<Grid justifyContent="flex-end" gap={1} container alignItems="center">
|
||||
@ -135,7 +123,9 @@ export const Contents = () => {
|
||||
<Button
|
||||
startIcon={<AddIcon />}
|
||||
variant="contained"
|
||||
onClick={() => addDialogCtl.openDialog({ contentType })}
|
||||
onClick={() =>
|
||||
dialogs.open(ContentFormDialog, { contentType })
|
||||
}
|
||||
sx={{ float: "right" }}
|
||||
>
|
||||
{t("button.add")}
|
||||
@ -147,7 +137,15 @@ export const Contents = () => {
|
||||
<Button
|
||||
startIcon={<UploadIcon />}
|
||||
variant="contained"
|
||||
onClick={() => importDialogCtl.openDialog({ contentType })}
|
||||
onClick={async () => {
|
||||
if (contentType) {
|
||||
await dialogs.open(ContentImportFormDialog, {
|
||||
row: null,
|
||||
contentType,
|
||||
});
|
||||
refetch();
|
||||
}
|
||||
}}
|
||||
sx={{ float: "right" }}
|
||||
>
|
||||
{t("button.import")}
|
||||
@ -159,21 +157,6 @@ export const Contents = () => {
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Paper>
|
||||
<ContentDialog {...getDisplayDialogs(addDialogCtl)} />
|
||||
<ContentDialog {...getDisplayDialogs(editDialogCtl)} />
|
||||
<ContentImportDialog
|
||||
{...getDisplayDialogs(importDialogCtl)}
|
||||
callback={() => {
|
||||
refetch();
|
||||
}}
|
||||
/>
|
||||
<DeleteDialog
|
||||
{...deleteDialogCtl}
|
||||
callback={() => {
|
||||
if (deleteDialogCtl?.data) deleteContent(deleteDialogCtl.data);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Grid padding={2} container>
|
||||
<Grid item width="100%">
|
||||
<DataGrid<IContent>
|
||||
|
||||
268
frontend/src/components/roles/PermissionsBody.tsx
Normal file
268
frontend/src/components/roles/PermissionsBody.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
/*
|
||||
* Copyright © 2024 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
|
||||
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Divider,
|
||||
Grid,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { FC, Fragment, useEffect, useState } from "react";
|
||||
|
||||
import { IconButton } from "@/app-components/buttons/IconButton";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useCreate } from "@/hooks/crud/useCreate";
|
||||
import { useDelete } from "@/hooks/crud/useDelete";
|
||||
import { useFind } from "@/hooks/crud/useFind";
|
||||
import { useGetFromCache } from "@/hooks/crud/useGet";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType, Format } from "@/services/types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
import { IPermission, IPermissionAttributes } from "@/types/permission.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
|
||||
const DEFAULT_PAYLOAD: IPermissionAttributes = {
|
||||
action: "",
|
||||
model: "",
|
||||
relation: "",
|
||||
role: "",
|
||||
};
|
||||
const AccordionModelHead = () => (
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
minHeight="3rem"
|
||||
alignContent="center"
|
||||
bgcolor="#0001"
|
||||
>
|
||||
<Grid item width="6rem" m="0.2rem" />
|
||||
<Grid item xs textAlign="left">
|
||||
<Typography fontWeight={700} fontSize="body2.fontSize">
|
||||
Action
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs textAlign="left">
|
||||
<Typography fontWeight={700} fontSize="body2.fontSize">
|
||||
Relation
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export const PermissionsBody: FC<ComponentFormProps<IRole>> = ({
|
||||
data: role,
|
||||
Wrapper = Fragment,
|
||||
WrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { data: models, refetch: modelRefetch } = useFind(
|
||||
{ entity: EntityType.MODEL, format: Format.FULL },
|
||||
{
|
||||
hasCount: false,
|
||||
},
|
||||
);
|
||||
const getPermissionFromCache = useGetFromCache(EntityType.PERMISSION);
|
||||
const options = {
|
||||
onError: (error: Error) => {
|
||||
toast.error(error.message || t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess: () => {
|
||||
modelRefetch();
|
||||
toast.success(t("message.item_delete_success"));
|
||||
},
|
||||
};
|
||||
const { mutate: createPermission } = useCreate(EntityType.PERMISSION, {
|
||||
...options,
|
||||
onError: (error: Error & { statusCode?: number }) => {
|
||||
rest.onError?.();
|
||||
if (error.statusCode === 409) {
|
||||
toast.error(t("message.permission_already_exists"));
|
||||
} else {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
}
|
||||
},
|
||||
});
|
||||
const { mutate: deletePermission } = useDelete(
|
||||
EntityType.PERMISSION,
|
||||
options,
|
||||
);
|
||||
const [expanded, setExpanded] = useState<string | undefined>();
|
||||
const [payload, setPayload] =
|
||||
useState<IPermissionAttributes>(DEFAULT_PAYLOAD);
|
||||
const reset = () => setPayload(DEFAULT_PAYLOAD);
|
||||
const handleChange = (panel: string) => () => {
|
||||
setExpanded(panel === expanded ? "" : panel);
|
||||
setPayload(DEFAULT_PAYLOAD);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof expanded !== "string" && models?.[0]?.id) {
|
||||
setExpanded(models[0].id);
|
||||
}
|
||||
}, [models]);
|
||||
|
||||
return (
|
||||
<Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
|
||||
<Typography fontWeight={700} sx={{ marginBottom: 2 }}>
|
||||
{role?.name}
|
||||
</Typography>
|
||||
{models?.map((model) => (
|
||||
<Accordion
|
||||
key={model.id}
|
||||
expanded={expanded === model.id}
|
||||
onChange={handleChange(model.id)}
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
boxShadow: "none",
|
||||
"&:before": {
|
||||
display: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<KeyboardArrowUpIcon />}
|
||||
sx={{
|
||||
backgroundColor: "background.default",
|
||||
borderRadius: 1,
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
>
|
||||
<Typography>{model.name}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{ p: 0, m: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
m: 2,
|
||||
border: "1px solid #0002",
|
||||
}}
|
||||
>
|
||||
<AccordionModelHead />
|
||||
{model.permissions
|
||||
?.map((p) => getPermissionFromCache(p))
|
||||
?.filter(
|
||||
(permission) => permission && permission.role === role?.id,
|
||||
)
|
||||
.map((p) => p as IPermission)
|
||||
.map(({ id, action, relation }, index) => {
|
||||
return (
|
||||
<>
|
||||
{index > 0 && <Divider />}
|
||||
<Grid
|
||||
container
|
||||
key={id}
|
||||
sx={{
|
||||
borderRadius: 0.8,
|
||||
padding: 1,
|
||||
"&:hover": {
|
||||
backgroundColor: "background.default",
|
||||
},
|
||||
}}
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item width="6rem">
|
||||
<IconButton
|
||||
variant="text"
|
||||
color="error"
|
||||
onClick={() => deletePermission(id)}
|
||||
size="small"
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Typography>{action}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Typography sx={{ ml: "0.2rem" }}>
|
||||
{relation}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
<Grid
|
||||
container
|
||||
minHeight="2.5rem"
|
||||
padding="1rem 0"
|
||||
borderTop="1px solid #0002"
|
||||
>
|
||||
<Grid item width="6rem" alignContent="center" pl="0.6rem">
|
||||
<IconButton
|
||||
size="small"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
if (role?.id)
|
||||
createPermission({
|
||||
...payload,
|
||||
role: role.id,
|
||||
model: model.id,
|
||||
});
|
||||
reset();
|
||||
}}
|
||||
disabled={!payload.action || !payload.relation}
|
||||
>
|
||||
<AddIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs alignContent="center">
|
||||
<Input
|
||||
select
|
||||
sx={{ width: "6.875rem" }}
|
||||
label="Action"
|
||||
value={payload.action}
|
||||
onChange={(e) => {
|
||||
if (e.target.value)
|
||||
setPayload((currentPayload) => ({
|
||||
...currentPayload,
|
||||
action: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<MenuItem value="create">{t("label.create")}</MenuItem>
|
||||
<MenuItem value="read">{t("label.read")}</MenuItem>
|
||||
<MenuItem value="update">{t("label.update")}</MenuItem>
|
||||
<MenuItem value="delete">{t("label.delete")}</MenuItem>
|
||||
</Input>
|
||||
</Grid>
|
||||
<Grid item xs alignContent="center">
|
||||
<Input
|
||||
select
|
||||
sx={{ width: "6.875rem" }}
|
||||
label={t("label.relation")}
|
||||
value={payload.relation}
|
||||
onChange={(e) => {
|
||||
if (e.target.value)
|
||||
setPayload((currentPayload) => ({
|
||||
...currentPayload,
|
||||
relation: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<MenuItem value="role">{t("label.role")}</MenuItem>
|
||||
</Input>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
))}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
23
frontend/src/components/roles/PermissionsBodyDialog.tsx
Normal file
23
frontend/src/components/roles/PermissionsBodyDialog.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { GenericFormDialog } from "@/app-components/dialogs";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
|
||||
import { PermissionsBody } from "./PermissionsBody";
|
||||
|
||||
export const PermissionBodyDialog = <T extends IRole = IRole>(
|
||||
props: ComponentFormDialogProps<T>,
|
||||
) => (
|
||||
<GenericFormDialog<T>
|
||||
Form={PermissionsBody}
|
||||
editText="title.manage_permissions"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -1,278 +0,0 @@
|
||||
/*
|
||||
* Copyright © 2024 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
|
||||
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Dialog,
|
||||
Grid,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Typography,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Divider,
|
||||
} from "@mui/material";
|
||||
import { useState, FC, useEffect } from "react";
|
||||
|
||||
import { IconButton } from "@/app-components/buttons/IconButton";
|
||||
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useCreate } from "@/hooks/crud/useCreate";
|
||||
import { useDelete } from "@/hooks/crud/useDelete";
|
||||
import { useFind } from "@/hooks/crud/useFind";
|
||||
import { useGetFromCache } from "@/hooks/crud/useGet";
|
||||
import { DialogControlProps } from "@/hooks/useDialog";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType, Format } from "@/services/types";
|
||||
import { IPermission, IPermissionAttributes } from "@/types/permission.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
|
||||
export type PermissionsDialogProps = DialogControlProps<{
|
||||
role: IRole;
|
||||
}>;
|
||||
|
||||
const DEFAULT_PAYLOAD: IPermissionAttributes = {
|
||||
action: "",
|
||||
model: "",
|
||||
relation: "",
|
||||
role: "",
|
||||
};
|
||||
const AccordionModelHead = () => (
|
||||
<Grid container direction="row" minHeight="35px" alignContent="center" mb={1}>
|
||||
<Grid item width="96px" />
|
||||
<Grid item xs textAlign="left">
|
||||
<Typography fontWeight={700} fontSize="body2.fontSize">
|
||||
Action
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs textAlign="left">
|
||||
<Typography fontWeight={700} fontSize="body2.fontSize">
|
||||
Relation
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export const PermissionsDialog: FC<PermissionsDialogProps> = ({
|
||||
open,
|
||||
data,
|
||||
closeDialog: closeFunction,
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { data: models, refetch: modelRefetch } = useFind(
|
||||
{ entity: EntityType.MODEL, format: Format.FULL },
|
||||
{
|
||||
hasCount: false,
|
||||
},
|
||||
);
|
||||
const getPermisionFromCache = useGetFromCache(EntityType.PERMISSION);
|
||||
const { mutateAsync: createPermission } = useCreate(EntityType.PERMISSION, {
|
||||
onError: (error: Error & { statusCode?: number }) => {
|
||||
if (error.statusCode === 409) {
|
||||
toast.error(t("message.permission_already_exists"));
|
||||
} else {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
modelRefetch();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const { mutateAsync: deletePermission } = useDelete(EntityType.PERMISSION, {
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess: () => {
|
||||
modelRefetch();
|
||||
toast.success(t("message.item_delete_success"));
|
||||
},
|
||||
});
|
||||
const [expanded, setExpanded] = useState<string | false>(false);
|
||||
const [payload, setPayload] =
|
||||
useState<IPermissionAttributes>(DEFAULT_PAYLOAD);
|
||||
const reset = () => setPayload(DEFAULT_PAYLOAD);
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
|
||||
setExpanded(isExpanded ? panel : false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (expanded === false && models?.[0]?.id) setExpanded(models[0].id);
|
||||
}, [models]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
fullWidth
|
||||
onClose={closeFunction}
|
||||
sx={{ maxWidth: "850px", margin: "auto" }}
|
||||
maxWidth="md"
|
||||
>
|
||||
<DialogTitle onClose={closeFunction}>
|
||||
{t("title.manage_permissions")}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography fontWeight={700} sx={{ marginBottom: 2 }}>
|
||||
{data?.role.name}
|
||||
</Typography>
|
||||
{models?.map((model) => {
|
||||
return (
|
||||
<Accordion
|
||||
key={model.id}
|
||||
expanded={expanded === model.id}
|
||||
onChange={handleChange(model.id)}
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
boxShadow: "none",
|
||||
"&:before": {
|
||||
display: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<KeyboardArrowUpIcon />}
|
||||
sx={{
|
||||
backgroundColor: "background.default",
|
||||
borderRadius: 1,
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
>
|
||||
<Typography>{model.name}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{ p: 0, m: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<AccordionModelHead />
|
||||
{model.permissions
|
||||
?.map((p) => getPermisionFromCache(p))
|
||||
?.filter(
|
||||
(permission) =>
|
||||
permission && permission.role === data?.role.id,
|
||||
)
|
||||
.map((p) => p as IPermission)
|
||||
.map(({ id, action, relation }, index) => {
|
||||
return (
|
||||
<>
|
||||
{index > 0 && <Divider />}
|
||||
<Grid
|
||||
container
|
||||
key={id}
|
||||
sx={{
|
||||
borderRadius: 0.8,
|
||||
padding: 1,
|
||||
"&:hover": {
|
||||
backgroundColor: "background.default",
|
||||
},
|
||||
}}
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item width="96px">
|
||||
<IconButton
|
||||
variant="text"
|
||||
color="error"
|
||||
onClick={() => {
|
||||
deletePermission(id);
|
||||
}}
|
||||
size="small"
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Typography>{action}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Typography>{relation}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
<Grid container minHeight="40px" padding={1}>
|
||||
<Grid item width="96px" alignContent="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
if (data?.role.id)
|
||||
createPermission({
|
||||
...payload,
|
||||
model: model.id,
|
||||
role: data.role.id,
|
||||
});
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
<AddIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs alignContent="center">
|
||||
<Input
|
||||
select
|
||||
sx={{ width: "110px" }}
|
||||
label="Action"
|
||||
value={payload.action}
|
||||
onChange={(e) => {
|
||||
if (e.target.value)
|
||||
setPayload((currentPayload) => ({
|
||||
...currentPayload,
|
||||
action: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<MenuItem value="create">{t("label.create")}</MenuItem>
|
||||
<MenuItem value="read">{t("label.read")}</MenuItem>
|
||||
<MenuItem value="update">{t("label.update")}</MenuItem>
|
||||
<MenuItem value="delete">{t("label.delete")}</MenuItem>
|
||||
</Input>
|
||||
</Grid>
|
||||
<Grid item xs alignContent="center">
|
||||
<Input
|
||||
select
|
||||
sx={{ width: "110px" }}
|
||||
label={t("label.relation")}
|
||||
value={payload.relation}
|
||||
onChange={(e) => {
|
||||
if (e.target.value)
|
||||
setPayload((currentPayload) => ({
|
||||
...currentPayload,
|
||||
relation: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<MenuItem value="role">{t("label.role")}</MenuItem>
|
||||
</Input>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
})}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" onClick={closeFunction}>
|
||||
{t("button.close")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -1,114 +0,0 @@
|
||||
/*
|
||||
* Copyright © 2024 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { Dialog, DialogActions, DialogContent } from "@mui/material";
|
||||
import { FC, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import DialogButtons from "@/app-components/buttons/DialogButtons";
|
||||
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
|
||||
import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
|
||||
import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useCreate } from "@/hooks/crud/useCreate";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { DialogControlProps } from "@/hooks/useDialog";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType } from "@/services/types";
|
||||
import { IRole, IRoleAttributes } from "@/types/role.types";
|
||||
|
||||
export type RoleDialogProps = DialogControlProps<IRole>;
|
||||
export const RoleDialog: FC<RoleDialogProps> = ({
|
||||
open,
|
||||
data,
|
||||
closeDialog,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { mutateAsync: createRole } = useCreate(EntityType.ROLE, {
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
},
|
||||
onSuccess() {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const { mutateAsync: updateRole } = useUpdate(EntityType.ROLE, {
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const {
|
||||
handleSubmit,
|
||||
reset,
|
||||
register,
|
||||
formState: { errors },
|
||||
} = useForm<IRoleAttributes>({
|
||||
defaultValues: { name: "" },
|
||||
});
|
||||
const validationRules = {
|
||||
name: {
|
||||
required: t("message.name_is_required"),
|
||||
},
|
||||
};
|
||||
const onSubmitForm = async (params: IRoleAttributes) => {
|
||||
if (data) {
|
||||
updateRole({ id: data.id, params });
|
||||
} else {
|
||||
createRole(params);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) reset();
|
||||
}, [open, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
reset({
|
||||
name: data.name,
|
||||
});
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<DialogTitle onClose={closeDialog}>
|
||||
{data ? t("title.edit_role") : t("title.new_role")}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.name")}
|
||||
error={!!errors.name}
|
||||
required
|
||||
autoFocus
|
||||
helperText={errors.name ? errors.name.message : null}
|
||||
{...register("name", validationRules.name)}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogButtons closeDialog={closeDialog} />
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
94
frontend/src/components/roles/RoleForm.tsx
Normal file
94
frontend/src/components/roles/RoleForm.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
/*
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { FC, Fragment, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useCreate } from "@/hooks/crud/useCreate";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType } from "@/services/types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
import { IRole, IRoleAttributes } from "@/types/role.types";
|
||||
|
||||
export const RoleForm: FC<ComponentFormProps<IRole>> = ({
|
||||
data,
|
||||
Wrapper = Fragment,
|
||||
WrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const options = {
|
||||
onError: (error: Error) => {
|
||||
toast.error(error);
|
||||
},
|
||||
onSuccess() {
|
||||
rest.onSuccess?.();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
};
|
||||
const { mutate: createRole } = useCreate(EntityType.ROLE, options);
|
||||
const { mutate: updateRole } = useUpdate(EntityType.ROLE, options);
|
||||
const {
|
||||
handleSubmit,
|
||||
reset,
|
||||
register,
|
||||
formState: { errors },
|
||||
} = useForm<IRoleAttributes>({
|
||||
defaultValues: { name: "" },
|
||||
});
|
||||
const validationRules = {
|
||||
name: {
|
||||
required: t("message.name_is_required"),
|
||||
},
|
||||
};
|
||||
const onSubmitForm = (params: IRoleAttributes) => {
|
||||
if (data) {
|
||||
updateRole({ id: data.id, params });
|
||||
} else {
|
||||
createRole(params);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
reset({
|
||||
name: data.name,
|
||||
});
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
open={!!WrapperProps?.open}
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
{...WrapperProps}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.name")}
|
||||
error={!!errors.name}
|
||||
required
|
||||
autoFocus
|
||||
helperText={errors.name ? errors.name.message : null}
|
||||
{...register("name", validationRules.name)}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</form>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
24
frontend/src/components/roles/RoleFormDialog.tsx
Normal file
24
frontend/src/components/roles/RoleFormDialog.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
import { GenericFormDialog } from "@/app-components/dialogs";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
|
||||
import { RoleForm } from "./RoleForm";
|
||||
|
||||
export const RoleFormDialog = <T extends IRole = IRole>(
|
||||
props: ComponentFormDialogProps<T>,
|
||||
) => (
|
||||
<GenericFormDialog<T>
|
||||
Form={RoleForm}
|
||||
addText="title.new_role"
|
||||
editText="title.edit_role"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -10,9 +10,8 @@ import { faUniversalAccess } from "@fortawesome/free-solid-svg-icons";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import { Button, Grid, Paper } from "@mui/material";
|
||||
import { GridColDef } from "@mui/x-data-grid";
|
||||
import React from "react";
|
||||
|
||||
import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
|
||||
import { ConfirmDialogBody } from "@/app-components/dialogs";
|
||||
import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
|
||||
import {
|
||||
ActionColumnLabel,
|
||||
@ -22,7 +21,7 @@ import { renderHeader } from "@/app-components/tables/columns/renderHeader";
|
||||
import { DataGrid } from "@/app-components/tables/DataGrid";
|
||||
import { useDelete } from "@/hooks/crud/useDelete";
|
||||
import { useFind } from "@/hooks/crud/useFind";
|
||||
import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
|
||||
import { useDialogs } from "@/hooks/useDialogs";
|
||||
import { useHasPermission } from "@/hooks/useHasPermission";
|
||||
import { useSearch } from "@/hooks/useSearch";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
@ -33,18 +32,13 @@ import { PermissionAction } from "@/types/permission.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
import { getDateTimeFormatter } from "@/utils/date";
|
||||
|
||||
import { PermissionsDialog } from "./PermissionsDialog";
|
||||
import { RoleDialog } from "./RoleDialog";
|
||||
import { PermissionBodyDialog } from "./PermissionsBodyDialog";
|
||||
import { RoleFormDialog } from "./RoleFormDialog";
|
||||
|
||||
export const Roles = () => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const addDialogCtl = useDialog<IRole>(false);
|
||||
const editDialogCtl = useDialog<IRole>(false);
|
||||
const deleteDialogCtl = useDialog<string>(false);
|
||||
const permissionDialogCtl = useDialog<{
|
||||
role: IRole;
|
||||
}>(false);
|
||||
const dialogs = useDialogs();
|
||||
const hasPermission = useHasPermission();
|
||||
const { onSearch, searchPayload } = useSearch<IRole>({
|
||||
$iLike: ["name"],
|
||||
@ -55,12 +49,11 @@ export const Roles = () => {
|
||||
params: searchPayload,
|
||||
},
|
||||
);
|
||||
const { mutateAsync: deleteRole } = useDelete(EntityType.ROLE, {
|
||||
const { mutate: deleteRole } = useDelete(EntityType.ROLE, {
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
},
|
||||
onSuccess() {
|
||||
deleteDialogCtl.closeDialog();
|
||||
toast.success(t("message.item_delete_success"));
|
||||
},
|
||||
});
|
||||
@ -70,19 +63,25 @@ export const Roles = () => {
|
||||
{
|
||||
label: ActionColumnLabel.Permissions,
|
||||
action: (row) =>
|
||||
permissionDialogCtl.openDialog({
|
||||
role: row,
|
||||
dialogs.open(PermissionBodyDialog, row, {
|
||||
hasButtons: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: ActionColumnLabel.Edit,
|
||||
action: (row) => editDialogCtl.openDialog(row),
|
||||
action: (row) => dialogs.open(RoleFormDialog, row),
|
||||
requires: [PermissionAction.UPDATE],
|
||||
},
|
||||
|
||||
{
|
||||
label: ActionColumnLabel.Delete,
|
||||
action: (row) => deleteDialogCtl.openDialog(row.id),
|
||||
action: async ({ id }) => {
|
||||
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
|
||||
|
||||
if (isConfirmed) {
|
||||
deleteRole(id);
|
||||
}
|
||||
},
|
||||
requires: [PermissionAction.DELETE],
|
||||
},
|
||||
],
|
||||
@ -125,17 +124,6 @@ export const Roles = () => {
|
||||
|
||||
return (
|
||||
<Grid container gap={3} flexDirection="column">
|
||||
{permissionDialogCtl.open ? (
|
||||
<PermissionsDialog {...permissionDialogCtl} />
|
||||
) : null}
|
||||
<RoleDialog {...getDisplayDialogs(addDialogCtl)} />
|
||||
<RoleDialog {...getDisplayDialogs(editDialogCtl)} />
|
||||
<DeleteDialog
|
||||
{...deleteDialogCtl}
|
||||
callback={() => {
|
||||
if (deleteDialogCtl.data) deleteRole(deleteDialogCtl.data);
|
||||
}}
|
||||
/>
|
||||
<PageHeader title={t("title.roles")} icon={faUniversalAccess}>
|
||||
<Grid
|
||||
justifyContent="flex-end"
|
||||
@ -156,9 +144,7 @@ export const Roles = () => {
|
||||
sx={{
|
||||
float: "right",
|
||||
}}
|
||||
onClick={() => {
|
||||
addDialogCtl.openDialog();
|
||||
}}
|
||||
onClick={() => dialogs.open(RoleFormDialog, null)}
|
||||
>
|
||||
{t("button.add")}
|
||||
</Button>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
/*
|
||||
* Copyright © 2024 Hexastack. All rights reserved.
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
|
||||
import { Color, SimplePaletteColorOptions } from "@mui/material";
|
||||
import { grey, teal } from "@mui/material/colors";
|
||||
import { createTheme } from "@mui/material/styles";
|
||||
@ -129,7 +130,7 @@ export const theme = createTheme({
|
||||
MuiDialogActions: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
paddingRight: "15px",
|
||||
padding: "0.5rem",
|
||||
borderTop: borderLine,
|
||||
backgroundColor: COLOR_PALETTE.lighterGray,
|
||||
},
|
||||
@ -159,10 +160,9 @@ export const theme = createTheme({
|
||||
},
|
||||
MuiDialogContent: {
|
||||
styleOverrides: {
|
||||
root: { marginTop: "20px" },
|
||||
root: { paddingTop: "15px!important" },
|
||||
},
|
||||
},
|
||||
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
/*
|
||||
* Copyright © 2024 Hexastack. All rights reserved.
|
||||
* Copyright © 2025 Hexastack. All rights reserved.
|
||||
*
|
||||
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||
*/
|
||||
|
||||
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
|
||||
import type { NextPage } from "next";
|
||||
@ -74,37 +75,35 @@ const App = ({ Component, pageProps }: TAppPropsWithLayout) => {
|
||||
<main className={roboto.className}>
|
||||
<ConfigProvider>
|
||||
<ThemeProvider theme={theme}>
|
||||
<DialogsProvider>
|
||||
<ToastProvider
|
||||
maxSnack={3}
|
||||
anchorOrigin={{ vertical: "top", horizontal: "center" }}
|
||||
action={(snackbarKey) => (
|
||||
<SnackbarCloseButton snackbarKey={snackbarKey} />
|
||||
)}
|
||||
>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CssBaseline />
|
||||
<ApiClientProvider>
|
||||
<DialogsProvider>
|
||||
<BroadcastChannelProvider channelName="main-channel">
|
||||
<AuthProvider>
|
||||
<PermissionProvider>
|
||||
<SettingsProvider>
|
||||
<SocketProvider>
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
</SocketProvider>
|
||||
</SettingsProvider>
|
||||
</PermissionProvider>
|
||||
</AuthProvider>
|
||||
</BroadcastChannelProvider>
|
||||
</DialogsProvider>
|
||||
</ApiClientProvider>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</QueryClientProvider>
|
||||
</StyledEngineProvider>
|
||||
</ToastProvider>
|
||||
</DialogsProvider>
|
||||
<ToastProvider
|
||||
maxSnack={3}
|
||||
anchorOrigin={{ vertical: "top", horizontal: "center" }}
|
||||
action={(snackbarKey) => (
|
||||
<SnackbarCloseButton snackbarKey={snackbarKey} />
|
||||
)}
|
||||
>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<CssBaseline />
|
||||
<ApiClientProvider>
|
||||
<BroadcastChannelProvider channelName="main-channel">
|
||||
<AuthProvider>
|
||||
<PermissionProvider>
|
||||
<SettingsProvider>
|
||||
<DialogsProvider>
|
||||
<SocketProvider>
|
||||
{getLayout(<Component {...pageProps} />)}
|
||||
</SocketProvider>
|
||||
</DialogsProvider>
|
||||
</SettingsProvider>
|
||||
</PermissionProvider>
|
||||
</AuthProvider>
|
||||
</BroadcastChannelProvider>
|
||||
</ApiClientProvider>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</QueryClientProvider>
|
||||
</StyledEngineProvider>
|
||||
</ToastProvider>
|
||||
</ThemeProvider>
|
||||
</ConfigProvider>
|
||||
</main>
|
||||
|
||||
@ -150,7 +150,8 @@ export interface DialogProviderProps {
|
||||
// form dialog
|
||||
export interface FormDialogProps
|
||||
extends FormButtonsProps,
|
||||
Omit<MuiDialogProps, "onSubmit"> {
|
||||
Omit<MuiDialogProps, "onSubmit">,
|
||||
DialogExtraOptions {
|
||||
title?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user