diff --git a/frontend/src/app-components/buttons/FormButtons.tsx b/frontend/src/app-components/buttons/FormButtons.tsx index 9b277ddb..a4c56429 100644 --- a/frontend/src/app-components/buttons/FormButtons.tsx +++ b/frontend/src/app-components/buttons/FormButtons.tsx @@ -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 ( } {...cancelButtonProps} > - {t("button.cancel")} + {t(cancelButtonTitle)} ); diff --git a/frontend/src/app-components/dialogs/FormDialog.tsx b/frontend/src/app-components/dialogs/FormDialog.tsx index 97fac8e9..20469895 100644 --- a/frontend/src/app-components/dialogs/FormDialog.tsx +++ b/frontend/src/app-components/dialogs/FormDialog.tsx @@ -22,16 +22,20 @@ export const FormDialog = ({ ...rest }: FormDialogProps) => { const onCancel = () => rest.onClose?.({}, "backdropClick"); - - return ( - - {title} - {children} + const dialogActions = + rest.hasButtons === false ? null : ( + ); + + return ( + + {title} + {children} + {dialogActions} ); }; diff --git a/frontend/src/app-components/dialogs/GenericFormDialog.tsx b/frontend/src/app-components/dialogs/GenericFormDialog.tsx index 3f4772e0..f73e0e57 100644 --- a/frontend/src/app-components/dialogs/GenericFormDialog.tsx +++ b/frontend/src/app-components/dialogs/GenericFormDialog.tsx @@ -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 = ComponentFormDialogProps & { Form: React.ElementType; + rowKey?: keyof T; addText?: TTranslationKeys; editText?: TTranslationKeys; }; export const GenericFormDialog = ({ Form, - payload, + rowKey, + payload: data, ...rest }: GenericFormDialogProps) => { const { t } = useTranslate(); - const translationKey = payload ? rest.editText : rest.addText; + const hasRow = rowKey ? data?.[rowKey] : data; + const translationKey = hasRow ? rest.editText : rest.addText; return (
{ rest.onClose(true); }} @@ -38,6 +39,7 @@ export const GenericFormDialog = ({ title: translationKey && t(translationKey), ...rest, }} + {...{ data, Wrapper }} /> ); }; diff --git a/frontend/src/components/contents/ContentDialog.tsx b/frontend/src/components/contents/ContentForm.tsx similarity index 64% rename from frontend/src/components/contents/ContentDialog.tsx rename to frontend/src/components/contents/ContentForm.tsx index 4bd93b07..3315b4c2 100644 --- a/frontend/src/components/contents/ContentDialog.tsx +++ b/frontend/src/components/contents/ContentForm.tsx @@ -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 = ({ contentField: contentField, field, @@ -139,14 +128,14 @@ const buildDynamicFields = ( }, }); -export type ContentDialogProps = DialogControlProps<{ +export type ContentFormData = { content?: IContent; contentType?: IContentType; -}>; -export const ContentDialog: FC = ({ - open, +}; +export const ContentForm: FC> = ({ data, - closeDialog, + Wrapper = Fragment, + WrapperProps, ...rest }) => { const { content, contentType } = data || { @@ -177,44 +166,34 @@ export const ContentDialog: FC = ({ 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 = ({ }, [content, reset]); return ( - + - - {content ? t("title.edit_node") : t("title.new_content")} - - - - {(contentType?.fields || []).map((contentField, index) => ( - - ( - - - - )} - /> - - ))} - - - - - + + {(contentType?.fields || []).map((contentField, index) => ( + + ( + + + + )} + /> + + ))} + - + ); }; diff --git a/frontend/src/components/contents/ContentFormDialog.tsx b/frontend/src/components/contents/ContentFormDialog.tsx new file mode 100644 index 00000000..9b82959d --- /dev/null +++ b/frontend/src/components/contents/ContentFormDialog.tsx @@ -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 = ( + props: ComponentFormDialogProps, +) => ( + + Form={ContentForm} + rowKey="content" + addText="title.new_content" + editText="title.edit_node" + {...props} + /> +); diff --git a/frontend/src/components/contents/ContentImportDialog.tsx b/frontend/src/components/contents/ContentImportForm.tsx similarity index 54% rename from frontend/src/components/contents/ContentImportDialog.tsx rename to frontend/src/components/contents/ContentImportForm.tsx index ddf613bb..52fe9dbb 100644 --- a/frontend/src/components/contents/ContentImportDialog.tsx +++ b/frontend/src/components/contents/ContentImportForm.tsx @@ -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 = ({ - open, - data, - closeDialog, - ...rest -}) => { +export type ContentImportFormData = { row: null; contentType: IContentType }; +export const ContentImportForm: FC< + ComponentFormProps +> = ({ data, Wrapper = Fragment, WrapperProps, ...rest }) => { const [attachmentId, setAttachmentId] = useState(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 ( - - {t("title.import")} - + +
= ({ /> - - - - - -
+ + ); }; diff --git a/frontend/src/components/contents/ContentImportFormDialog.tsx b/frontend/src/components/contents/ContentImportFormDialog.tsx new file mode 100644 index 00000000..046896ea --- /dev/null +++ b/frontend/src/components/contents/ContentImportFormDialog.tsx @@ -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, +) => ( + + Form={ContentImportForm} + rowKey="row" + addText="button.import" + confirmButtonProps={{ value: "button.import" }} + {...props} + /> +); diff --git a/frontend/src/components/contents/index.tsx b/frontend/src/components/contents/index.tsx index 646455d7..ee639e4b 100644 --- a/frontend/src/components/contents/index.tsx +++ b/frontend/src/components/contents/index.tsx @@ -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(false); + const dialogs = useDialogs(); // data fetching const { onSearch, searchPayload } = useSearch({ $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 = () => { } + chip={ + + } title={t("title.content")} > @@ -135,7 +123,9 @@ export const Contents = () => { - -
- ); -}; diff --git a/frontend/src/components/roles/RoleDialog.tsx b/frontend/src/components/roles/RoleDialog.tsx deleted file mode 100644 index 144c1387..00000000 --- a/frontend/src/components/roles/RoleDialog.tsx +++ /dev/null @@ -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; -export const RoleDialog: FC = ({ - 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({ - 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 ( - -
- - {data ? t("title.edit_role") : t("title.new_role")} - - - - - - - - - - - -
- - ); -}; diff --git a/frontend/src/components/roles/RoleForm.tsx b/frontend/src/components/roles/RoleForm.tsx new file mode 100644 index 00000000..5cc39de2 --- /dev/null +++ b/frontend/src/components/roles/RoleForm.tsx @@ -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> = ({ + 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({ + 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 ( + +
+ + + + + +
+ + ); +}; diff --git a/frontend/src/components/roles/RoleFormDialog.tsx b/frontend/src/components/roles/RoleFormDialog.tsx new file mode 100644 index 00000000..92590398 --- /dev/null +++ b/frontend/src/components/roles/RoleFormDialog.tsx @@ -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 = ( + props: ComponentFormDialogProps, +) => ( + + Form={RoleForm} + addText="title.new_role" + editText="title.edit_role" + {...props} + /> +); diff --git a/frontend/src/components/roles/index.tsx b/frontend/src/components/roles/index.tsx index f23655e4..531818da 100644 --- a/frontend/src/components/roles/index.tsx +++ b/frontend/src/components/roles/index.tsx @@ -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(false); - const editDialogCtl = useDialog(false); - const deleteDialogCtl = useDialog(false); - const permissionDialogCtl = useDialog<{ - role: IRole; - }>(false); + const dialogs = useDialogs(); const hasPermission = useHasPermission(); const { onSearch, searchPayload } = useSearch({ $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 ( - {permissionDialogCtl.open ? ( - - ) : null} - - - { - if (deleteDialogCtl.data) deleteRole(deleteDialogCtl.data); - }} - /> { sx={{ float: "right", }} - onClick={() => { - addDialogCtl.openDialog(); - }} + onClick={() => dialogs.open(RoleFormDialog, null)} > {t("button.add")} diff --git a/frontend/src/layout/themes/theme.ts b/frontend/src/layout/themes/theme.ts index aa52d8af..84e9e0ef 100644 --- a/frontend/src/layout/themes/theme.ts +++ b/frontend/src/layout/themes/theme.ts @@ -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: { diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index fcff228c..ca640433 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -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) => {
- - ( - - )} - > - - - - - - - - - - - {getLayout()} - - - - - - - - - - - - + ( + + )} + > + + + + + + + + + + + {getLayout()} + + + + + + + + + + +
diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts index 64191fc1..d5b010b2 100644 --- a/frontend/src/types/common/dialogs.types.ts +++ b/frontend/src/types/common/dialogs.types.ts @@ -150,7 +150,8 @@ export interface DialogProviderProps { // form dialog export interface FormDialogProps extends FormButtonsProps, - Omit { + Omit, + DialogExtraOptions { title?: string; children?: React.ReactNode; }