Create roles working (#56)

This commit is contained in:
Arnaud D. Natali 2023-09-18 15:08:32 +02:00 committed by GitHub
commit 46d8522182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 189 additions and 2 deletions

View File

@ -13,6 +13,11 @@ export type IPutRoleParams = {
rules: OfficeRole["rules"];
};
export type IPostRoleParams = {
name: OfficeRole["name"];
office: OfficeRole["office"];
};
export default class OfficeRoles extends BaseAdmin {
private static instance: OfficeRoles;
private readonly baseURl = this.namespaceUrl.concat("/office-roles");
@ -63,4 +68,14 @@ export default class OfficeRoles extends BaseAdmin {
return Promise.reject(err);
}
}
public async post(body: IPostRoleParams) {
const url = new URL(this.baseURl);
try {
return await this.postRequest<OfficeRole>(url, body);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
}

View File

@ -13,6 +13,9 @@ export type IPutRoleParams = {
rules: Role["rules"];
};
export type IPostRoleParams = {
name: Role["name"];
};
export default class Roles extends BaseAdmin {
private static instance: Roles;
private readonly baseURl = this.namespaceUrl.concat("/roles");
@ -43,6 +46,16 @@ export default class Roles extends BaseAdmin {
}
}
public async post(body: IPostRoleParams) {
const url = new URL(this.baseURl);
try {
return await this.postRequest<Role>(url, body);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async getOne(q?: IGetRolesParams): Promise<Role | null> {
const url = new URL(this.baseURl);
if (q) {

View File

@ -15,8 +15,8 @@
}
.folderlist-container {
max-height: 100vh;
height: 100vh;
max-height: calc(100vh - 290px);
height: calc(100vh - 290px);
overflow: auto;
border-right: 1px solid var(--grey-medium);
}

View File

@ -6,6 +6,8 @@ import { useRouter } from "next/router";
import React, { useCallback, useState } from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import Button from "@Front/Components/DesignSystem/Button";
type IProps = {
roles: OfficeRole[];
@ -62,6 +64,11 @@ export default function RoleListContainer(props: IProps) {
/>
</div>
</div>
<div>
<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
<Button fullwidth={true}>Créer un rôle</Button>
</Link>
</div>
</div>
);
}

View File

@ -0,0 +1,24 @@
@import "@Themes/constants.scss";
.root {
.header {
margin-top: 24px;
}
.form-container {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 32px;
}
.buttons-container {
display: flex;
gap: 32px;
@media (max-width: $screen-s) {
flex-direction: column-reverse;
gap: 16px;
}
}
}

View File

@ -0,0 +1,95 @@
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";
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 (
<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>
);
}

View File

@ -155,6 +155,13 @@
"path": "/roles/[uid]",
"labelKey": "roles_informations"
}
},
"Create": {
"enabled": true,
"props": {
"path": "/roles/create",
"labelKey": "create_role"
}
}
}
},

View File

@ -155,6 +155,13 @@
"path": "/roles/[uid]",
"labelKey": "roles_informations"
}
},
"Create": {
"enabled": true,
"props": {
"path": "/roles/create",
"labelKey": "create_role"
}
}
}
},

View File

@ -155,6 +155,13 @@
"path": "/roles/[uid]",
"labelKey": "roles_informations"
}
},
"Create": {
"enabled": true,
"props": {
"path": "/roles/create",
"labelKey": "create_role"
}
}
}
},

View File

@ -155,6 +155,13 @@
"path": "/roles/[uid]",
"labelKey": "roles_informations"
}
},
"Create": {
"enabled": true,
"props": {
"path": "/roles/create",
"labelKey": "create_role"
}
}
}
},

View File

@ -0,0 +1,5 @@
import RolesCreate from "@Front/Components/Layouts/Roles/RolesCreate";
export default function Route() {
return <RolesCreate />;
}