✨ Document informations page
This commit is contained in:
Maxime Lalo
parent
c84036d3d7
commit
d803248db3
@ -58,7 +58,6 @@ export default class ProfileModal extends React.Component<IProps, IState> {
|
||||
Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
|
||||
]}
|
||||
/>
|
||||
<NavigationLink text="Gestion des noms de domaine" />
|
||||
<NavigationLink text="CGU" />
|
||||
<div className={classes["separator"]} />
|
||||
<LogOutButton />
|
||||
|
||||
@ -34,7 +34,7 @@ export default function DocumentTypeListContainer(props: IProps) {
|
||||
(block: IBlock) => {
|
||||
props.onCloseLeftSide && props.onCloseLeftSide();
|
||||
console.log("Block selected :", block);
|
||||
const redirectPath = Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path;
|
||||
const redirectPath = Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path;
|
||||
router.push(redirectPath.replace("[uid]", block.id));
|
||||
},
|
||||
[props, router],
|
||||
|
||||
@ -5,6 +5,7 @@ import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
|
||||
import Module from "@Front/Config/Module";
|
||||
import { validateOrReject } from "class-validator";
|
||||
import { DocumentType } from "le-coffre-resources/dist/Admin";
|
||||
import { useRouter } from "next/router";
|
||||
@ -39,12 +40,19 @@ export default function DocumentTypesEdit() {
|
||||
});
|
||||
await validateOrReject(documentToUpdate, { groups: ["updateDocumentType"] });
|
||||
const documentTypeUpdated = await DocumentTypes.getInstance().put(documentTypeUid as string, documentToUpdate);
|
||||
console.log(documentTypeUpdated);
|
||||
router.push(
|
||||
Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path.replace(
|
||||
"[uid]",
|
||||
documentTypeUpdated.uid ?? "",
|
||||
),
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
[documentTypeUid],
|
||||
[documentTypeUid, router],
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@ -1,91 +1,39 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
.header {
|
||||
.document-infos {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.deed-type-container {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
margin-top: 32px;
|
||||
background-color: var(--grey-soft);
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.box {
|
||||
.box-title {
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
@media (max-width: $screen-s) {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.middle-box {
|
||||
flex: 1;
|
||||
.document-infos-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.pencil {
|
||||
align-self: center;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.right {
|
||||
}
|
||||
}
|
||||
|
||||
.documents-container {
|
||||
margin-top: 32px;
|
||||
padding: 32px 16px;
|
||||
|
||||
border: 1px solid var(--grey);
|
||||
|
||||
.container-title {
|
||||
}
|
||||
|
||||
.documents {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,89 +1,72 @@
|
||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||
import PenICon from "@Assets/Icons/pen.svg";
|
||||
import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import Form from "@Front/Components/DesignSystem/Form";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
|
||||
import Module from "@Front/Config/Module";
|
||||
import classNames from "classnames";
|
||||
import { DocumentType } from "le-coffre-resources/dist/Admin";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {};
|
||||
export default function DocumentTypesInformations(props: IProps) {
|
||||
export default function DocumentTypesInformations() {
|
||||
const router = useRouter();
|
||||
let { documentTypeUid } = router.query;
|
||||
|
||||
const [documentTypeSelected, setDocumentTypeSelected] = useState<DocumentType | null>(null);
|
||||
const [documentSelected, setDocumentSelected] = useState<DocumentType | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function getDocumentType() {
|
||||
async function getDocument() {
|
||||
if (!documentTypeUid) return;
|
||||
const documentType = await DocumentTypes.getInstance().getByUid(documentTypeUid as string);
|
||||
setDocumentTypeSelected(documentType);
|
||||
const document = await DocumentTypes.getInstance().getByUid(documentTypeUid as string, {
|
||||
_count: true,
|
||||
});
|
||||
if (!document) return;
|
||||
setDocumentSelected(document);
|
||||
}
|
||||
|
||||
getDocumentType();
|
||||
getDocument();
|
||||
}, [documentTypeUid]);
|
||||
|
||||
const onSubmitHandler = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {}, []);
|
||||
|
||||
return (
|
||||
<DefaultDocumentTypesDashboard mobileBackText={"Liste des types d'actes"}>
|
||||
<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
|
||||
<Button variant={EButtonVariant.LINE}>
|
||||
Modifier la liste des documents
|
||||
<Image src={ChevronIcon} alt="Chevron" />
|
||||
</Button>
|
||||
<div className={classes["folder-header"]}>
|
||||
<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
|
||||
</div>
|
||||
<div className={classes["subtitle"]}>
|
||||
<Typography typo={ITypo.H3}>{documentTypeSelected?.name}</Typography>
|
||||
</div>
|
||||
<div className={classes["deed-type-container"]}>
|
||||
<div className={classes["infos"]}>
|
||||
<div className={classes["box"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
|
||||
Nom du type d'acte
|
||||
<div className={classes["document-infos"]}>
|
||||
<div className={classes["left"]}>
|
||||
<div className={classes["document-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Nom du document
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{documentTypeSelected?.name}</Typography>
|
||||
<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
|
||||
</div>
|
||||
<div className={classNames(classes["middle-box"], classes["box"])}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
|
||||
Description
|
||||
<div className={classes["document-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Description visible par les collaborateurs de l'office
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
|
||||
</div>
|
||||
<div className={classes["document-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Description visible par les clients de l'office
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["pencil"]}>
|
||||
<div className={classes["right"]}>
|
||||
<Link
|
||||
href={Module.getInstance()
|
||||
.get()
|
||||
.modules.pages.DocumentTypes.pages.Edit.props.path.replace("[uid]", documentTypeUid as string)}
|
||||
.modules.pages.DocumentTypes.pages.Edit.props.path.replace("[uid]", documentSelected?.uid ?? "")}
|
||||
className={classes["edit-icon-container"]}>
|
||||
<Image src={PenICon} alt="éditer le type d'acte" />
|
||||
<Image src={PenICon} alt="edit informations" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["documents-container"]}>
|
||||
<Form onSubmit={onSubmitHandler}>
|
||||
<div className={classes["container-title"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Documents paramétrés</Typography>
|
||||
</div>
|
||||
<div className={classes["button-container"]}>
|
||||
<Button type="submit">Enregistrer</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<div className={classes["delete-container"]}>
|
||||
<Button variant={EButtonVariant.GHOST}>Supprimer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultDocumentTypesDashboard>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user