mirror of
https://github.com/hexastack/hexabot
synced 2025-02-23 04:48:51 +00:00
Merge pull request #688 from Hexastack/687-refactor-labels-dialogs-add-edit-delete
refactor(frontend): update label dialogs
This commit is contained in:
Med Marrouchi
GitHub
commit
0c4e6a6ff3
@ -1,150 +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 { ILabel, ILabelAttributes } from "@/types/label.types";
|
||||
import { slugify } from "@/utils/string";
|
||||
|
||||
export type LabelDialogProps = DialogControlProps<ILabel>;
|
||||
export const LabelDialog: FC<LabelDialogProps> = ({
|
||||
open,
|
||||
data,
|
||||
closeDialog,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { mutateAsync: createLabel } = useCreate(EntityType.LABEL, {
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const { mutateAsync: updateLabel } = useUpdate(EntityType.LABEL, {
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const {
|
||||
reset,
|
||||
register,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
} = useForm<ILabelAttributes>({
|
||||
defaultValues: {
|
||||
name: data?.name || "",
|
||||
title: data?.title || "",
|
||||
description: data?.description || "",
|
||||
},
|
||||
});
|
||||
const validationRules = {
|
||||
title: {
|
||||
required: t("message.title_is_required"),
|
||||
},
|
||||
name: {},
|
||||
description: {},
|
||||
};
|
||||
const onSubmitForm = async (params: ILabelAttributes) => {
|
||||
if (data) {
|
||||
updateLabel({ id: data.id, params });
|
||||
} else {
|
||||
createLabel(params);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) reset();
|
||||
}, [open, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
reset({
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
});
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<DialogTitle onClose={closeDialog}>
|
||||
{data ? t("title.edit_label") : t("title.new_label")}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.title")}
|
||||
error={!!errors.title}
|
||||
required
|
||||
autoFocus
|
||||
{...register("title", validationRules.title)}
|
||||
InputProps={{
|
||||
onChange: ({ target: { value } }) => {
|
||||
setValue("title", value);
|
||||
setValue("name", slugify(value).toUpperCase());
|
||||
},
|
||||
}}
|
||||
helperText={errors.title ? errors.title.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Input
|
||||
placeholder={t("placeholder.name")}
|
||||
error={!!errors.name}
|
||||
{...register("name", validationRules.name)}
|
||||
disabled
|
||||
helperText={errors.name ? errors.name.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("label.description")}
|
||||
error={!!errors.description}
|
||||
{...register("description", validationRules.description)}
|
||||
helperText={
|
||||
errors.description ? errors.description.message : null
|
||||
}
|
||||
multiline={true}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogButtons closeDialog={closeDialog} />
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
131
frontend/src/components/labels/LabelForm.tsx
Normal file
131
frontend/src/components/labels/LabelForm.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
/*
|
||||
* 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 { ILabel, ILabelAttributes } from "@/types/label.types";
|
||||
import { slugify } from "@/utils/string";
|
||||
|
||||
export const LabelForm: FC<ComponentFormProps<ILabel>> = ({
|
||||
data,
|
||||
Wrapper = Fragment,
|
||||
WrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
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 { mutate: createLabel } = useCreate(EntityType.LABEL, options);
|
||||
const { mutate: updateLabel } = useUpdate(EntityType.LABEL, options);
|
||||
const {
|
||||
reset,
|
||||
register,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
} = useForm<ILabelAttributes>({
|
||||
defaultValues: {
|
||||
name: data?.name || "",
|
||||
title: data?.title || "",
|
||||
description: data?.description || "",
|
||||
},
|
||||
});
|
||||
const validationRules = {
|
||||
title: {
|
||||
required: t("message.title_is_required"),
|
||||
},
|
||||
name: {},
|
||||
description: {},
|
||||
};
|
||||
const onSubmitForm = (params: ILabelAttributes) => {
|
||||
if (data) {
|
||||
updateLabel({ id: data.id, params });
|
||||
} else {
|
||||
createLabel(params);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
reset({
|
||||
name: data.name,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
});
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
open={!!WrapperProps?.open}
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
{...WrapperProps}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.title")}
|
||||
error={!!errors.title}
|
||||
required
|
||||
autoFocus
|
||||
{...register("title", validationRules.title)}
|
||||
InputProps={{
|
||||
onChange: ({ target: { value } }) => {
|
||||
setValue("title", value);
|
||||
setValue("name", slugify(value).toUpperCase());
|
||||
},
|
||||
}}
|
||||
helperText={errors.title ? errors.title.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Input
|
||||
placeholder={t("placeholder.name")}
|
||||
error={!!errors.name}
|
||||
{...register("name", validationRules.name)}
|
||||
disabled
|
||||
helperText={errors.name ? errors.name.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("label.description")}
|
||||
error={!!errors.description}
|
||||
{...register("description", validationRules.description)}
|
||||
helperText={
|
||||
errors.description ? errors.description.message : null
|
||||
}
|
||||
multiline={true}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</form>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
37
frontend/src/components/labels/LabelFormDialog.tsx
Normal file
37
frontend/src/components/labels/LabelFormDialog.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
/*
|
||||
* 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 } from "react";
|
||||
|
||||
import { FormDialog } from "@/app-components/dialogs";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
import { ILabel } from "@/types/label.types";
|
||||
|
||||
import { LabelForm } from "./LabelForm";
|
||||
|
||||
export const LabelFormDialog: FC<ComponentFormDialogProps<ILabel>> = ({
|
||||
payload,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
|
||||
return (
|
||||
<LabelForm
|
||||
data={payload}
|
||||
onSuccess={() => {
|
||||
rest.onClose(true);
|
||||
}}
|
||||
Wrapper={FormDialog}
|
||||
WrapperProps={{
|
||||
title: payload ? t("title.edit_label") : t("title.new_label"),
|
||||
...rest,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,18 +1,18 @@
|
||||
/*
|
||||
* 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 { faTags } 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 +22,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,14 +33,12 @@ import { ILabel } from "@/types/label.types";
|
||||
import { PermissionAction } from "@/types/permission.types";
|
||||
import { getDateTimeFormatter } from "@/utils/date";
|
||||
|
||||
import { LabelDialog } from "./LabelDialog";
|
||||
import { LabelFormDialog } from "./LabelFormDialog";
|
||||
|
||||
export const Labels = () => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const addDialogCtl = useDialog<ILabel>(false);
|
||||
const editDialogCtl = useDialog<ILabel>(false);
|
||||
const deleteDialogCtl = useDialog<string>(false);
|
||||
const dialogs = useDialogs();
|
||||
const hasPermission = useHasPermission();
|
||||
const { onSearch, searchPayload } = useSearch<ILabel>({
|
||||
$or: ["name", "title"],
|
||||
@ -51,12 +49,11 @@ export const Labels = () => {
|
||||
params: searchPayload,
|
||||
},
|
||||
);
|
||||
const { mutateAsync: deleteLabel } = useDelete(EntityType.LABEL, {
|
||||
const { mutate: deleteLabel } = useDelete(EntityType.LABEL, {
|
||||
onError: () => {
|
||||
toast.error(t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
deleteDialogCtl.closeDialog();
|
||||
toast.success(t("message.item_delete_success"));
|
||||
},
|
||||
});
|
||||
@ -65,12 +62,18 @@ export const Labels = () => {
|
||||
[
|
||||
{
|
||||
label: ActionColumnLabel.Edit,
|
||||
action: (row) => editDialogCtl.openDialog(row),
|
||||
action: (row) => dialogs.open(LabelFormDialog, row),
|
||||
requires: [PermissionAction.UPDATE],
|
||||
},
|
||||
{
|
||||
label: ActionColumnLabel.Delete,
|
||||
action: (row) => deleteDialogCtl.openDialog(row.id),
|
||||
action: async ({ id }) => {
|
||||
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
|
||||
|
||||
if (isConfirmed) {
|
||||
deleteLabel(id);
|
||||
}
|
||||
},
|
||||
requires: [PermissionAction.DELETE],
|
||||
},
|
||||
],
|
||||
@ -149,14 +152,6 @@ export const Labels = () => {
|
||||
|
||||
return (
|
||||
<Grid container gap={3} flexDirection="column">
|
||||
<LabelDialog {...getDisplayDialogs(addDialogCtl)} />
|
||||
<LabelDialog {...getDisplayDialogs(editDialogCtl)} />
|
||||
<DeleteDialog
|
||||
{...deleteDialogCtl}
|
||||
callback={() => {
|
||||
if (deleteDialogCtl?.data) deleteLabel(deleteDialogCtl.data);
|
||||
}}
|
||||
/>
|
||||
<PageHeader icon={faTags} title={t("title.labels")}>
|
||||
<Grid
|
||||
justifyContent="flex-end"
|
||||
@ -175,7 +170,7 @@ export const Labels = () => {
|
||||
startIcon={<AddIcon />}
|
||||
variant="contained"
|
||||
sx={{ float: "right" }}
|
||||
onClick={() => addDialogCtl.openDialog()}
|
||||
onClick={() => dialogs.open(LabelFormDialog, null)}
|
||||
>
|
||||
{t("button.add")}
|
||||
</Button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user