mirror of
https://github.com/hexastack/hexabot
synced 2025-04-25 08:50:43 +00:00
refactor(frontend): update editUser dialog
This commit is contained in:
yassinedorbozgithub
parent
b66df78c80
commit
c972626a78
@ -1,153 +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 {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
Grid,
|
||||
} from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { Controller, 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 AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { DialogControlProps } from "@/hooks/useDialog";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType, Format } from "@/services/types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
import { IUser, IUserAttributes } from "@/types/user.types";
|
||||
|
||||
const getFullName = (val: IUser) => `${val.first_name} ${val.last_name}`;
|
||||
|
||||
export type EditUserDialogProps = DialogControlProps<{
|
||||
user: IUser;
|
||||
roles: IRole[];
|
||||
}>;
|
||||
|
||||
export const EditUserDialog: FC<EditUserDialogProps> = ({
|
||||
open,
|
||||
data,
|
||||
closeDialog,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const [fullName, setFullName] = useState<string>("");
|
||||
const { mutateAsync: updateUser } = useUpdate(EntityType.USER, {
|
||||
onError: (error) => {
|
||||
toast.error(error.message || t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
closeDialog();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<IUserAttributes>({
|
||||
defaultValues: { roles: data?.roles.map((role) => role.id) },
|
||||
});
|
||||
const validationRules = {
|
||||
roles: {
|
||||
required: t("message.roles_is_required"),
|
||||
},
|
||||
};
|
||||
const onSubmitForm = async (params: IUserAttributes) => {
|
||||
if (data?.user.id)
|
||||
updateUser({
|
||||
id: data.user.id,
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.user) setFullName(getFullName(data?.user));
|
||||
|
||||
if (open) reset({ roles: data?.user?.roles });
|
||||
}, [open, reset, data]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<DialogTitle onClose={closeDialog}>
|
||||
{t("title.manage_roles")}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
disabled
|
||||
label={t("label.auth_user")}
|
||||
value={fullName}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Grid container gap={3}>
|
||||
<Grid item xs>
|
||||
<Controller
|
||||
name="roles"
|
||||
rules={validationRules.roles}
|
||||
control={control}
|
||||
defaultValue={data?.roles?.map(({ id }) => id) || []}
|
||||
render={({ field }) => {
|
||||
const { onChange, ...rest } = field;
|
||||
|
||||
return (
|
||||
<AutoCompleteEntitySelect<IRole>
|
||||
autoFocus
|
||||
searchFields={["name"]}
|
||||
entity={EntityType.ROLE}
|
||||
format={Format.BASIC}
|
||||
labelKey="name"
|
||||
label={t("label.roles")}
|
||||
multiple={true}
|
||||
{...field}
|
||||
error={!!errors.roles}
|
||||
helperText={
|
||||
errors.roles ? errors.roles.message : null
|
||||
}
|
||||
onChange={(_e, selected) =>
|
||||
onChange(selected.map(({ id }) => id))
|
||||
}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid alignContent="center">
|
||||
<Link href="/roles">
|
||||
<Button variant="contained">{t("button.manage")}</Button>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogButtons closeDialog={closeDialog} />
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
134
frontend/src/components/users/EditUserForm.tsx
Normal file
134
frontend/src/components/users/EditUserForm.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* 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 { Button, Grid, Link } from "@mui/material";
|
||||
import { FC, Fragment, useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
|
||||
import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
|
||||
import { Input } from "@/app-components/inputs/Input";
|
||||
import { useUpdate } from "@/hooks/crud/useUpdate";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { EntityType, Format } from "@/services/types";
|
||||
import { ComponentFormProps } from "@/types/common/dialogs.types";
|
||||
import { IRole } from "@/types/role.types";
|
||||
import { IUser, IUserAttributes } from "@/types/user.types";
|
||||
|
||||
const getFullName = (user?: IUser) => `${user?.first_name} ${user?.last_name}`;
|
||||
|
||||
export type EditUserFormData = {
|
||||
user: IUser;
|
||||
roles: IRole[];
|
||||
};
|
||||
export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
|
||||
data,
|
||||
Wrapper = Fragment,
|
||||
WrapperProps,
|
||||
...rest
|
||||
}) => {
|
||||
const { t } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const { mutate: updateUser } = useUpdate(EntityType.USER, {
|
||||
onError: (error) => {
|
||||
rest.onError?.();
|
||||
toast.error(error.message || t("message.internal_server_error"));
|
||||
},
|
||||
onSuccess() {
|
||||
rest.onSuccess?.();
|
||||
toast.success(t("message.success_save"));
|
||||
},
|
||||
});
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
} = useForm<IUserAttributes>({
|
||||
defaultValues: { roles: data?.roles.map((role) => role.id) },
|
||||
});
|
||||
const validationRules = {
|
||||
roles: {
|
||||
required: t("message.roles_is_required"),
|
||||
},
|
||||
};
|
||||
const onSubmitForm = (params: IUserAttributes) => {
|
||||
if (data?.user.id)
|
||||
updateUser({
|
||||
id: data.user.id,
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.user) reset({ roles: data?.user?.roles });
|
||||
}, [reset, data?.user]);
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
open={!!WrapperProps?.open}
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
{...WrapperProps}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<ContentContainer>
|
||||
<ContentItem>
|
||||
<Input
|
||||
disabled
|
||||
label={t("label.auth_user")}
|
||||
value={getFullName(data?.user)}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
/>
|
||||
</ContentItem>
|
||||
<ContentItem>
|
||||
<Grid container gap={3}>
|
||||
<Grid item xs>
|
||||
<Controller
|
||||
name="roles"
|
||||
rules={validationRules.roles}
|
||||
control={control}
|
||||
defaultValue={data?.roles?.map(({ id }) => id) || []}
|
||||
render={({ field }) => {
|
||||
const { onChange, ...rest } = field;
|
||||
|
||||
return (
|
||||
<AutoCompleteEntitySelect<IRole>
|
||||
autoFocus
|
||||
searchFields={["name"]}
|
||||
entity={EntityType.ROLE}
|
||||
format={Format.BASIC}
|
||||
labelKey="name"
|
||||
label={t("label.roles")}
|
||||
multiple={true}
|
||||
{...field}
|
||||
error={!!errors.roles}
|
||||
helperText={errors.roles ? errors.roles.message : null}
|
||||
onChange={(_e, selected) =>
|
||||
onChange(selected.map(({ id }) => id))
|
||||
}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid alignContent="center">
|
||||
<Link href="/roles">
|
||||
<Button variant="contained">{t("button.manage")}</Button>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ContentItem>
|
||||
</ContentContainer>
|
||||
</form>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
24
frontend/src/components/users/EditUserFormDialog.tsx
Normal file
24
frontend/src/components/users/EditUserFormDialog.tsx
Normal file
@ -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 { EditUserForm, EditUserFormData } from "./EditUserForm";
|
||||
|
||||
export const CategoryFormDialog = <
|
||||
T extends EditUserFormData = EditUserFormData,
|
||||
>(
|
||||
props: ComponentFormDialogProps<T>,
|
||||
) => (
|
||||
<GenericFormDialog<T>
|
||||
Form={EditUserForm}
|
||||
editText="title.manage_roles"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user