mirror of
https://github.com/hexastack/hexabot
synced 2025-06-26 18:27:28 +00:00
fix(frontend): apply feedback updates
This commit is contained in:
parent
51c3a88d01
commit
2ba5c6660a
@ -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 { Dialog, DialogActions, DialogContent } from "@mui/material";
|
||||
|
||||
import { DialogTitle } from "@/app-components/dialogs";
|
||||
@ -16,7 +17,7 @@ import { FormButtons } from "../buttons/FormButtons";
|
||||
export const FormDialog = <T,>({
|
||||
title,
|
||||
children,
|
||||
onConfirm,
|
||||
onSubmit,
|
||||
...rest
|
||||
}: FormDialogProps<T>) => {
|
||||
return (
|
||||
@ -26,9 +27,9 @@ export const FormDialog = <T,>({
|
||||
</DialogTitle>
|
||||
<DialogContent>{children}</DialogContent>
|
||||
<DialogActions>
|
||||
<FormButtons<T>
|
||||
<FormButtons
|
||||
onCancel={() => rest.onClose?.({}, "backdropClick")}
|
||||
onConfirm={onConfirm}
|
||||
onConfirm={onSubmit}
|
||||
/>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
@ -1,17 +1,13 @@
|
||||
/*
|
||||
* 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 {
|
||||
BaseSyntheticEvent,
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
} from "react";
|
||||
|
||||
import React, { BaseSyntheticEvent, FC, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
|
||||
@ -23,16 +19,14 @@ import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType } from "@/services/types";
|
||||
import { ICategory, ICategoryAttributes } from "@/types/category.types";
|
||||
import {
|
||||
ComponentFormProps,
|
||||
HTMLFormElementExtension,
|
||||
HTMLFormElementExtra,
|
||||
} from "@/types/common/dialogs.types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
|
||||
export const CategoryForm = forwardRef<
|
||||
HTMLFormElement,
|
||||
ComponentFormProps<ICategory>
|
||||
>(({ data, ...rest }, ref) => {
|
||||
export const CategoryForm: FC<ComponentFormProps<ICategory>> = ({
|
||||
data,
|
||||
FormWrapper = React.Fragment,
|
||||
FormWrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const options = {
|
||||
@ -81,13 +75,6 @@ export const CategoryForm = forwardRef<
|
||||
});
|
||||
};
|
||||
|
||||
useImperativeHandle<
|
||||
HTMLFormElementExtension<ICategory>,
|
||||
HTMLFormElementExtra<ICategory>
|
||||
>(ref, () => ({
|
||||
submitAsync,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
reset({
|
||||
@ -99,19 +86,25 @@ export const CategoryForm = forwardRef<
|
||||
}, [data, reset]);
|
||||
|
||||
return (
|
||||
<form ref={ref} onSubmit={submitAsync}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.label")}
|
||||
{...register("label", validationRules.label)}
|
||||
autoFocus
|
||||
helperText={errors.label ? errors.label.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</form>
|
||||
<FormWrapper
|
||||
open={!!FormWrapperProps?.open}
|
||||
onSubmit={submitAsync}
|
||||
{...FormWrapperProps}
|
||||
>
|
||||
<form onSubmit={submitAsync}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
label={t("placeholder.label")}
|
||||
{...register("label", validationRules.label)}
|
||||
autoFocus
|
||||
helperText={errors.label ? errors.label.message : null}
|
||||
/>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</form>
|
||||
</FormWrapper>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
CategoryForm.displayName = "CategoryForm";
|
||||
|
@ -1,20 +1,16 @@
|
||||
/*
|
||||
* 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 { useRef } from "react";
|
||||
|
||||
import { FormDialog } from "@/app-components/dialogs";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { ICategory } from "@/types/category.types";
|
||||
import {
|
||||
ComponentFormDialogProps,
|
||||
HTMLFormElementExtra,
|
||||
} from "@/types/common/dialogs.types";
|
||||
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
|
||||
|
||||
import { CategoryForm } from "./CategoryForm";
|
||||
|
||||
@ -23,25 +19,18 @@ export const CategoryFormDialog = <T extends ICategory = ICategory>({
|
||||
...rest
|
||||
}: ComponentFormDialogProps<T>) => {
|
||||
const { t } = useTranslate();
|
||||
const formRef = useRef<(HTMLFormElement & HTMLFormElementExtra<T>) | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
return (
|
||||
<FormDialog<T>
|
||||
title={payload ? t("title.edit_category") : t("title.new_category")}
|
||||
onConfirm={async (e) => {
|
||||
return await formRef.current?.submitAsync(e);
|
||||
<CategoryForm
|
||||
data={payload}
|
||||
onSuccess={() => {
|
||||
rest.onClose(true);
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
<CategoryForm
|
||||
ref={formRef}
|
||||
data={payload}
|
||||
onSuccess={() => {
|
||||
rest.onClose(true);
|
||||
}}
|
||||
/>
|
||||
</FormDialog>
|
||||
FormWrapper={FormDialog}
|
||||
FormWrapperProps={{
|
||||
title: payload ? t("title.edit_category") : t("title.new_category"),
|
||||
...rest,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
import { DialogProps as MuiDialogProps } from "@mui/material";
|
||||
import { BaseSyntheticEvent, ReactNode } from "react";
|
||||
import { BaseSyntheticEvent } from "react";
|
||||
|
||||
// context
|
||||
|
||||
@ -139,11 +139,9 @@ export interface DialogProviderProps {
|
||||
|
||||
// form dialog
|
||||
export interface FormDialogProps<T> extends MuiDialogProps {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
onConfirm: (
|
||||
e: BaseSyntheticEvent<object, any, any>,
|
||||
) => Promise<T | undefined>;
|
||||
title?: string;
|
||||
children?: React.ReactNode;
|
||||
onSubmit: (e: BaseSyntheticEvent) => Promise<T>;
|
||||
}
|
||||
|
||||
// form
|
||||
@ -151,23 +149,13 @@ export type ComponentFormProps<T> = {
|
||||
data: T | null;
|
||||
onError?: () => void;
|
||||
onSuccess?: () => void;
|
||||
FormWrapper?: React.FC<FormDialogProps<T>>;
|
||||
FormWrapperProps?: Partial<FormDialogProps<T>>;
|
||||
};
|
||||
|
||||
export interface FormButtonsProps<T> {
|
||||
onCancel?: () => void;
|
||||
onConfirm?: (
|
||||
e: BaseSyntheticEvent<object, any, any>,
|
||||
) => Promise<T | undefined>;
|
||||
onConfirm: (e: BaseSyntheticEvent) => Promise<T>;
|
||||
}
|
||||
|
||||
export type HTMLFormElementExtra<T> = {
|
||||
submitAsync: (
|
||||
e: BaseSyntheticEvent<object, any, any>,
|
||||
) => Promise<T | undefined>;
|
||||
};
|
||||
|
||||
export type HTMLFormElementExtension<T> =
|
||||
| HTMLFormElement
|
||||
| HTMLFormElementExtra<T>;
|
||||
|
||||
export type ComponentFormDialogProps<T> = DialogProps<T | null, boolean>;
|
||||
|
Loading…
Reference in New Issue
Block a user