UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-06-03 19:16:21 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

refactor(frontend): update nlpSample formDialog

Browse Source
This commit is contained in:
yassinedorbozgithub 2025-02-06 01:55:52 +01:00
parent 28a6fccaa7
commit 0cb2f5ff6b
6 changed files with 105 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app-components/dialogs/FormDialog.tsx
View File

@ -25,9 +25,11 @@ export const FormDialog = ({
<Dialog fullWidth {...rest}>
<DialogTitle onClose={handleClose}>{title}</DialogTitle>
<DialogContent>{children}</DialogContent>
<DialogActions style={{ padding: "0.5rem" }}>
<DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
</DialogActions>
{rest.hasButtons === false ? null : (
<DialogActions style={{ padding: "0.5rem" }}>
<DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
</DialogActions>
)}
</Dialog>
);
};

93
frontend/src/components/nlp/components/NlpSample.tsx
View File

@ -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 CircleIcon from "@mui/icons-material/Circle";
import ClearIcon from "@mui/icons-material/Clear";
import DeleteIcon from "@mui/icons-material/Delete";
@ -26,7 +27,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import { useState } from "react";
import { useQueryClient } from "react-query";
import { DeleteDialog } from "@/app-components/dialogs";
import { ConfirmDialogBody } from "@/app-components/dialogs";
import { ChipEntity } from "@/app-components/displays/ChipEntity";
import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
import FileUploadButton from "@/app-components/inputs/FileInput";
@ -45,7 +46,7 @@ import { useFind } from "@/hooks/crud/useFind";
import { useGetFromCache } from "@/hooks/crud/useGet";
import { useImport } from "@/hooks/crud/useImport";
import { useConfig } from "@/hooks/useConfig";
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";
@ -62,7 +63,7 @@ import { PermissionAction } from "@/types/permission.types";
import { getDateTimeFormatter } from "@/utils/date";
import { buildURL } from "@/utils/URL";
import { NlpSampleDialog } from "../NlpSampleDialog";
import { NlpSampleFormDialog } from "./NlpSampleFormDialog";
const NLP_SAMPLE_TYPE_COLORS = {
all: "#fff",
@ -75,6 +76,7 @@ export default function NlpSample() {
const { apiUrl } = useConfig();
const { toast } = useToast();
const { t } = useTranslate();
const dialogs = useDialogs();
const queryClient = useQueryClient();
const [type, setType] = useState<NlpSampleType | "all">("all");
const [language, setLanguage] = useState<string | undefined>(undefined);
@ -92,28 +94,23 @@ export default function NlpSample() {
],
$iLike: ["text"],
});
const { mutateAsync: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
const { mutate: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
onError: () => {
toast.error(t("message.internal_server_error"));
},
onSuccess() {
deleteDialogCtl.closeDialog();
toast.success(t("message.item_delete_success"));
},
});
const { mutateAsync: deleteNlpSamples } = useDeleteMany(
EntityType.NLP_SAMPLE,
{
onError: (error) => {
toast.error(error);
},
onSuccess: () => {
deleteDialogCtl.closeDialog();
setSelectedNlpSamples([]);
toast.success(t("message.item_delete_success"));
},
const { mutate: deleteNlpSamples } = useDeleteMany(EntityType.NLP_SAMPLE, {
onError: (error) => {
toast.error(error);
},
);
onSuccess: () => {
setSelectedNlpSamples([]);
toast.success(t("message.item_delete_success"));
},
});
const { mutateAsync: importDataset, isLoading } = useImport(
EntityType.NLP_SAMPLE,
{
@ -147,8 +144,6 @@ export default function NlpSample() {
params: searchPayload,
},
);
const deleteDialogCtl = useDialog<string>(false);
const editDialogCtl = useDialog<INlpDatasetSample>(false);
const actionColumns = getActionsColumn<INlpSample>(
[
{
@ -173,13 +168,22 @@ export default function NlpSample() {
: null,
};
editDialogCtl.openDialog(data);
dialogs.open(NlpSampleFormDialog, data, {
maxWidth: "md",
hasButtons: false,
});
},
requires: [PermissionAction.UPDATE],
},
{
label: ActionColumnLabel.Delete,
action: (row) => deleteDialogCtl.openDialog(row.id),
action: async ({ id }) => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
if (isConfirmed) {
deleteNlpSample(id);
}
},
requires: [PermissionAction.DELETE],
},
],
@ -300,19 +304,6 @@ export default function NlpSample() {
return (
<Grid item xs={12}>
<NlpSampleDialog {...getDisplayDialogs(editDialogCtl)} />
<DeleteDialog
{...deleteDialogCtl}
callback={() => {
if (selectedNlpSamples.length > 0) {
deleteNlpSamples(selectedNlpSamples);
setSelectedNlpSamples([]);
deleteDialogCtl.closeDialog();
} else if (deleteDialogCtl.data) {
deleteNlpSample(deleteDialogCtl.data);
}
}}
/>
<Grid container alignItems="center">
<Grid
container
@ -406,18 +397,26 @@ export default function NlpSample() {
{t("button.export")}
</Button>
) : null}
{selectedNlpSamples.length > 0 && (
<Grid item>
<Button
startIcon={<DeleteIcon />}
variant="contained"
color="error"
onClick={() => deleteDialogCtl.openDialog(undefined)}
>
{t("button.delete")}
</Button>
</Grid>
)}
<Grid item>
<Button
startIcon={<DeleteIcon />}
variant="contained"
color="error"
onClick={async () => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
mode: "selection",
count: selectedNlpSamples.length,
});
if (isConfirmed) {
deleteNlpSamples(selectedNlpSamples);
}
}}
disabled={!selectedNlpSamples.length}
>
{t("button.delete")}
</Button>
</Grid>
</ButtonGroup>
</Grid>
</Grid>

43
frontend/src/components/nlp/NlpSampleDialog.tsx → frontend/src/components/nlp/components/NlpSampleForm.tsx
View File

@ -1,38 +1,35 @@
/*
* 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 { Dialog, DialogContent } from "@mui/material";
import { FC } from "react";
import { FC, Fragment } from "react";
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
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 { ComponentFormProps } from "@/types/common/dialogs.types";
import {
INlpDatasetSample,
INlpDatasetSampleAttributes,
INlpSampleFormAttributes,
} from "@/types/nlp-sample.types";
import NlpDatasetSample from "./components/NlpTrainForm";
import NlpDatasetSample from "./NlpTrainForm";
export type NlpSampleDialogProps = DialogControlProps<INlpDatasetSample>;
export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
open,
data: sample,
closeDialog,
export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
data,
Wrapper = Fragment,
WrapperProps,
...rest
}) => {
const { t } = useTranslate();
const { toast } = useToast();
const { mutateAsync: updateSample } = useUpdate<
const { mutate: updateSample } = useUpdate<
EntityType.NLP_SAMPLE,
INlpDatasetSampleAttributes
>(EntityType.NLP_SAMPLE, {
@ -44,10 +41,10 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
},
});
const onSubmitForm = (form: INlpSampleFormAttributes) => {
if (sample?.id) {
if (data?.id) {
updateSample(
{
id: sample.id,
id: data.id,
params: {
text: form.text,
type: form.type,
@ -57,7 +54,7 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
},
{
onSuccess: () => {
closeDialog();
rest.onSuccess?.();
},
},
);
@ -65,13 +62,13 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
};
return (
<Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
<DialogTitle onClose={closeDialog}>
{t("title.edit_nlp_sample")}
</DialogTitle>
<DialogContent>
<NlpDatasetSample sample={sample} submitForm={onSubmitForm} />
</DialogContent>
</Dialog>
<Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
<form>
<NlpDatasetSample
sample={data || undefined}
submitForm={onSubmitForm}
/>
</form>
</Wrapper>
);
};

26
frontend/src/components/nlp/components/NlpSampleFormDialog.tsx Normal file
View 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 { INlpDatasetSample } from "@/types/nlp-sample.types";
import { NlpSampleForm } from "./NlpSampleForm";
export const NlpSampleFormDialog = <
T extends INlpDatasetSample = INlpDatasetSample,
>(
props: ComponentFormDialogProps<T>,
) => (
<GenericFormDialog<T>
Form={NlpSampleForm}
addText="title.new_category"
editText="title.edit_category"
{...props}
/>
);

4
frontend/src/contexts/dialogs.context.tsx
View File

@ -55,7 +55,7 @@ function DialogsProvider(props: DialogProviderProps) {
payload: P,
options: OpenDialogOptions<R> = {},
) {
const { onClose = async () => {} } = options;
const { onClose = async () => {}, ...rest } = options;
let resolve: ((result: R) => void) | undefined;
const promise = new Promise<R>((resolveImpl) => {
resolve = resolveImpl;
@ -77,7 +77,7 @@ function DialogsProvider(props: DialogProviderProps) {
payload,
onClose,
resolve,
msgProps: { count: options.count, mode: options.mode },
msgProps: rest,
};
setStack((prevStack) => [...prevStack, newEntry]);

10
frontend/src/types/common/dialogs.types.ts
View File

@ -9,12 +9,14 @@
import { DialogProps as MuiDialogProps } from "@mui/material";
import { BaseSyntheticEvent } from "react";
interface ConfirmDialogExtraOptions {
interface DialogExtraOptions {
mode?: "click" | "selection";
count?: number;
maxWidth?: MuiDialogProps["maxWidth"];
hasButtons?: boolean;
}
// context
export interface OpenDialogOptions<R> extends ConfirmDialogExtraOptions {
export interface OpenDialogOptions<R> extends DialogExtraOptions {
/**
* A function that is called before closing the dialog closes. The dialog
* stays open as long as the returned promise is not resolved. Use this if
@ -133,7 +135,7 @@ export interface DialogStackEntry<P, R> {
payload: P;
onClose: (result: R) => Promise<void>;
resolve: (result: R) => void;
msgProps: ConfirmDialogExtraOptions;
msgProps: DialogExtraOptions;
}
export interface DialogProviderProps {
@ -142,7 +144,7 @@ export interface DialogProviderProps {
}
// form dialog
export interface FormDialogProps extends MuiDialogProps {
export interface FormDialogProps extends MuiDialogProps, DialogExtraOptions {
title?: string;
children?: React.ReactNode;
onSubmit: (e: BaseSyntheticEvent) => void;