107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
|
|
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import Form from "@Front/Components/DesignSystem/Form";
|
|
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
|
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
|
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
|
import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
|
|
import Module from "@Front/Config/Module";
|
|
import { Office, OfficeRole } from "le-coffre-resources/dist/Admin";
|
|
import { useRouter } from "next/router";
|
|
import { useCallback, useState } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import JwtService from "@Front/Services/JwtService/JwtService";
|
|
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
|
|
import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
|
|
|
|
type IProps = {};
|
|
export default function RolesCreate(props: IProps) {
|
|
const [hasChanged, setHasChanged] = useState<boolean>(false);
|
|
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
|
|
|
|
const router = useRouter();
|
|
const onSubmitHandler = useCallback(
|
|
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
|
|
try {
|
|
const jwt = JwtService.getInstance().decodeJwt();
|
|
const role = await OfficeRoles.getInstance().post(
|
|
OfficeRole.hydrate<OfficeRole>({
|
|
name: values["name"],
|
|
office: Office.hydrate<Office>({
|
|
uid: jwt?.office_Id,
|
|
}),
|
|
}),
|
|
);
|
|
|
|
router.push(Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path.replace("[uid]", role.uid!));
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
},
|
|
[router],
|
|
);
|
|
|
|
const closeConfirmModal = useCallback(() => {
|
|
setIsConfirmModalVisible(false);
|
|
}, []);
|
|
|
|
const onFieldChange = useCallback((name: string, field: any) => {
|
|
setHasChanged(true);
|
|
}, []);
|
|
|
|
const redirect = useCallback(() => {
|
|
router.push(Module.getInstance().get().modules.pages.Roles.props.path);
|
|
}, [router]);
|
|
|
|
const onCancel = useCallback(() => {
|
|
if (hasChanged) {
|
|
setIsConfirmModalVisible(true);
|
|
} else {
|
|
redirect();
|
|
}
|
|
}, [hasChanged, redirect]);
|
|
|
|
return (
|
|
<Rules
|
|
mode={RulesMode.NECESSARY}
|
|
rules={[
|
|
{
|
|
action: AppRuleActions.create,
|
|
name: AppRuleNames.officeRoles,
|
|
},
|
|
]}>
|
|
<DefaultRolesDashboard mobileBackText={"Liste des rôles"} hasBackArrow title="Créer un rôle">
|
|
<div className={classes["root"]}>
|
|
<div className={classes["header"]}>
|
|
<Typography typo={ITypo.H1Bis}>Créer un rôle</Typography>
|
|
</div>
|
|
<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
|
|
<TextField name="name" placeholder="Nom du rôle" />
|
|
<div className={classes["buttons-container"]}>
|
|
<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
|
|
Annuler
|
|
</Button>
|
|
<Button type="submit">Créer le rôle</Button>
|
|
</div>
|
|
</Form>
|
|
<Confirm
|
|
isOpen={isConfirmModalVisible}
|
|
onClose={closeConfirmModal}
|
|
onAccept={redirect}
|
|
closeBtn
|
|
header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
|
|
cancelText={"Annuler"}
|
|
confirmText={"Quitter"}>
|
|
<div className={classes["modal-content"]}>
|
|
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
|
Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
|
|
</Typography>
|
|
</div>
|
|
</Confirm>
|
|
</div>
|
|
</DefaultRolesDashboard>
|
|
</Rules>
|
|
);
|
|
}
|