fix(frontend): apply feedback updates

This commit is contained in:
yassinedorbozgithub 2025-02-03 11:21:05 +01:00
parent 51c3a88d01
commit 2ba5c6660a
4 changed files with 53 additions and 82 deletions

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 { 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>

View File

@ -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";

View File

@ -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,
}}
/>
);
};

View File

@ -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>;