✨ Deed types with documents and responsive working
This commit is contained in:
Maxime Lalo
parent
729f0cf50a
commit
44d934f288
@ -0,0 +1,86 @@
|
||||
import { DocumentType } from "le-coffre-resources/dist/SuperAdmin";
|
||||
|
||||
import BaseAdmin from "../BaseAdmin";
|
||||
|
||||
// TODO Type get query params -> Where + inclue + orderby
|
||||
export interface IGetDocumentTypesparams {
|
||||
where?: {};
|
||||
include?: {};
|
||||
}
|
||||
|
||||
// TODO Type getbyuid query params
|
||||
|
||||
export type IPutDocumentTypesParams = {};
|
||||
|
||||
export interface IPostDocumentTypesParams {
|
||||
name: string;
|
||||
public_description: string;
|
||||
private_description: string;
|
||||
office: {
|
||||
uid: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default class DocumentTypes extends BaseAdmin {
|
||||
private static instance: DocumentTypes;
|
||||
private readonly baseURl = this.namespaceUrl.concat("/document-types");
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static getInstance() {
|
||||
if (!this.instance) {
|
||||
return new this();
|
||||
} else {
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
|
||||
public async get(q: IGetDocumentTypesparams): Promise<DocumentType[]> {
|
||||
const url = new URL(this.baseURl);
|
||||
const query = { q };
|
||||
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
|
||||
try {
|
||||
return await this.getRequest<DocumentType[]>(url);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description : Create a Document
|
||||
*/
|
||||
public async post(body: IPostDocumentTypesParams): Promise<DocumentType> {
|
||||
const url = new URL(this.baseURl);
|
||||
try {
|
||||
return await this.postRequest<DocumentType>(url, body as any);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
public async getByUid(uid: string, q?: any): Promise<DocumentType> {
|
||||
const url = new URL(this.baseURl.concat(`/${uid}`));
|
||||
const query = { q };
|
||||
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
|
||||
try {
|
||||
return await this.getRequest<DocumentType>(url);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
public async put(uid: string, body: IPutDocumentTypesParams): Promise<DocumentType> {
|
||||
const url = new URL(this.baseURl.concat(`/${uid}`));
|
||||
try {
|
||||
return await this.putRequest<DocumentType>(url, body);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
93
src/front/Api/LeCoffreApi/Admin/Documents/Documents.ts
Normal file
93
src/front/Api/LeCoffreApi/Admin/Documents/Documents.ts
Normal file
@ -0,0 +1,93 @@
|
||||
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
|
||||
import { Document } from "le-coffre-resources/dist/SuperAdmin";
|
||||
|
||||
import BaseAdmin from "../BaseAdmin";
|
||||
|
||||
// TODO Type get query params -> Where + inclue + orderby
|
||||
export interface IGetDocumentsparams {
|
||||
where?: {};
|
||||
include?: {};
|
||||
}
|
||||
|
||||
// TODO Type getbyuid query params
|
||||
|
||||
export type IPutDocumentsParams = {
|
||||
document_status?: EDocumentStatus;
|
||||
refused_reason?: string;
|
||||
};
|
||||
|
||||
export interface IPostDocumentsParams {}
|
||||
|
||||
export default class Documents extends BaseAdmin {
|
||||
private static instance: Documents;
|
||||
private readonly baseURl = this.namespaceUrl.concat("/documents");
|
||||
|
||||
private constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static getInstance() {
|
||||
if (!this.instance) {
|
||||
return new this();
|
||||
} else {
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
|
||||
public async get(q: IGetDocumentsparams): Promise<Document[]> {
|
||||
const url = new URL(this.baseURl);
|
||||
const query = { q };
|
||||
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
|
||||
try {
|
||||
return await this.getRequest<Document[]>(url);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description : Create a Document
|
||||
*/
|
||||
public async post(body: any): Promise<Document> {
|
||||
const url = new URL(this.baseURl);
|
||||
try {
|
||||
return await this.postRequest<Document>(url, body);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
public async getByUid(uid: string, q?: any): Promise<Document> {
|
||||
const url = new URL(this.baseURl.concat(`/${uid}`));
|
||||
const query = { q };
|
||||
if (q) Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
|
||||
try {
|
||||
return await this.getRequest<Document>(url);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
public async put(uid: string, body: IPutDocumentsParams): Promise<Document> {
|
||||
const url = new URL(this.baseURl.concat(`/${uid}`));
|
||||
try {
|
||||
return await this.putRequest<Document>(url, body);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
|
||||
public async delete(uid: string): Promise<Document> {
|
||||
const url = new URL(this.baseURl.concat(`/${uid}`));
|
||||
try {
|
||||
return await this.deleteRequest<Document>(url);
|
||||
} catch (err) {
|
||||
this.onError(err);
|
||||
return Promise.reject(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
|
||||
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
|
||||
import Button from "@Front/Components/DesignSystem/Button";
|
||||
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
|
||||
import Module from "@Front/Config/Module";
|
||||
import { DeedType } from "le-coffre-resources/dist/Admin";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useCallback, useState } from "react";
|
||||
|
||||
@ -55,6 +57,11 @@ export default function DeedListContainer(props: IProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Link href={"/"}>
|
||||
<Button fullwidth={true}>Créer un type d'acte</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,31 +1,85 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.rights-container {
|
||||
.deed-type-container {
|
||||
margin-top: 32px;
|
||||
padding: 32px 16px;
|
||||
border: 1px solid gray;
|
||||
.select-all-container {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
background-color: var(--grey-soft);
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.rights {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@media (max-width: $screen-m) {
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
grid-template-columns: 1fr;
|
||||
.infos {
|
||||
display: flex;
|
||||
gap: 100px;
|
||||
flex: 1;
|
||||
|
||||
@media (max-width: $screen-l) {
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.box {
|
||||
.box-title {
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.middle-box {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.save-container {
|
||||
.pencil {
|
||||
align-self: center;
|
||||
|
||||
@media (max-width: $screen-m) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,121 +1,121 @@
|
||||
import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
|
||||
import Rules from "@Front/Api/LeCoffreApi/Admin/Rules/Rules";
|
||||
import Button from "@Front/Components/DesignSystem/Button";
|
||||
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
||||
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
||||
import PenICon from "@Assets/Icons/pen.svg";
|
||||
import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
|
||||
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 } from "@Front/Components/DesignSystem/Typography";
|
||||
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
|
||||
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
|
||||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
|
||||
import { Role, Rule } from "le-coffre-resources/dist/Admin";
|
||||
import classNames from "classnames";
|
||||
import { DeedType, 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 { MultiValue } from "react-select";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {};
|
||||
type RuleCheckbox = Rule & {
|
||||
checked: boolean;
|
||||
};
|
||||
export default function DeedTypesInformations(props: IProps) {
|
||||
const router = useRouter();
|
||||
let { roleUid } = router.query;
|
||||
let { deedTypeUid } = router.query;
|
||||
|
||||
const [deedTypeSelected, setDeedTypeSelected] = useState<DeedType | null>(null);
|
||||
const [availableDocuments, setAvailableDocuments] = useState<DocumentType[]>([]);
|
||||
const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
|
||||
|
||||
const [roleSelected, setRoleSelected] = useState<Role | null>(null);
|
||||
const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]);
|
||||
const [selectAll, setSelectAll] = useState<boolean>(false);
|
||||
useEffect(() => {
|
||||
setSelectAll(false);
|
||||
async function getUser() {
|
||||
if (!roleUid) return;
|
||||
const role = await Roles.getInstance().getByUid(roleUid as string, {
|
||||
async function getDeedType() {
|
||||
if (!deedTypeUid) return;
|
||||
const deedType = await DeedTypes.getInstance().getByUid(deedTypeUid as string, {
|
||||
q: {
|
||||
rules: true,
|
||||
document_types: true,
|
||||
},
|
||||
});
|
||||
|
||||
const rules = await Rules.getInstance().get({});
|
||||
if (!role) return;
|
||||
setRoleSelected(role);
|
||||
if (!role.rules) return;
|
||||
const rulesCheckboxes = rules
|
||||
.map((rule) => {
|
||||
if (role.rules?.find((r) => r.uid === rule.uid)) {
|
||||
return { ...rule, checked: true };
|
||||
}
|
||||
return { ...rule, checked: false };
|
||||
})
|
||||
.sort((ruleA, ruleB) => (ruleA.name < ruleB.name ? 1 : -1))
|
||||
.sort((rule) => (rule.checked ? -1 : 1));
|
||||
|
||||
const selectAll = rulesCheckboxes.every((rule) => rule.checked);
|
||||
setSelectAll(selectAll);
|
||||
setRulesCheckboxes(rulesCheckboxes);
|
||||
setDeedTypeSelected(deedType);
|
||||
}
|
||||
|
||||
getUser();
|
||||
}, [roleUid]);
|
||||
async function getDocuments() {
|
||||
const documents = await DocumentTypes.getInstance().get({});
|
||||
setAvailableDocuments(documents);
|
||||
}
|
||||
|
||||
const handleSelectAllChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectAll(e.target.checked);
|
||||
const checked = e.target.checked;
|
||||
rulesCheckboxes.forEach((rule) => (rule.checked = checked));
|
||||
setRulesCheckboxes([...rulesCheckboxes]);
|
||||
},
|
||||
[rulesCheckboxes],
|
||||
);
|
||||
setSelectedDocuments([]);
|
||||
getDocuments();
|
||||
getDeedType();
|
||||
}, [deedTypeUid]);
|
||||
|
||||
const onSubmitHandler = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
|
||||
if (!roleSelected || !roleSelected.uid) return;
|
||||
const rules = rulesCheckboxes.filter((rule) => rule.checked)?.map((rule) => Rule.hydrate<Rule>(rule));
|
||||
const role = await Roles.getInstance().put(roleSelected.uid, {
|
||||
rules,
|
||||
});
|
||||
if (!role) return;
|
||||
setRoleSelected(role);
|
||||
if (!role.rules) return;
|
||||
setRulesCheckboxes(role.rules.map((rule) => ({ ...rule, checked: false })));
|
||||
},
|
||||
[roleSelected, rulesCheckboxes],
|
||||
);
|
||||
const onSubmitHandler = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {}, []);
|
||||
|
||||
const onDocumentChangeHandler = useCallback((values: MultiValue<IOption>) => {
|
||||
setSelectedDocuments(values as IOption[]);
|
||||
}, []);
|
||||
|
||||
const formattedOptions: IOption[] = availableDocuments.map((document) => {
|
||||
return {
|
||||
label: document.name,
|
||||
value: document.uid,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<DefaultDeedTypesDashboard mobileBackText={"Liste des rôles"}>
|
||||
<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<Typography typo={ITypo.H1Bis}>Gestion des rôles</Typography>
|
||||
<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>
|
||||
<div className={classes["subtitle"]}>
|
||||
<Typography typo={ITypo.H3}>{roleSelected?.name}</Typography>
|
||||
<Typography typo={ITypo.H3}>{deedTypeSelected?.name}</Typography>
|
||||
</div>
|
||||
<div className={classes["rights-container"]}>
|
||||
<div className={classes["rights-header"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Modifier les droits</Typography>
|
||||
</div>
|
||||
<div className={classes["select-all-container"]}>
|
||||
<CheckBox
|
||||
option={{
|
||||
label: "Tout sélectionner",
|
||||
value: "all",
|
||||
}}
|
||||
toolTip="Tout sélectionner"
|
||||
onChange={handleSelectAllChange}
|
||||
checked={selectAll}
|
||||
/>
|
||||
</div>
|
||||
<Form onSubmit={onSubmitHandler}>
|
||||
<div className={classes["rights"]}>
|
||||
{rulesCheckboxes.map((rule) => (
|
||||
<div className={classes["right"]} key={rule.uid}>
|
||||
<CheckBox option={{ label: rule.name, value: rule.uid }} checked={rule.checked} />
|
||||
</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
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{deedTypeSelected?.name}</Typography>
|
||||
</div>
|
||||
<div className={classes["save-container"]}>
|
||||
<div className={classNames(classes["middle-box"], classes["box"])}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
|
||||
Description
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["pencil"]}>
|
||||
<Link href={"/"} className={classes["edit-icon-container"]}>
|
||||
<Image src={PenICon} alt="éditer le type d'acte" />
|
||||
</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["documents"]}>
|
||||
<MultiSelect
|
||||
options={formattedOptions}
|
||||
placeholder="Type de document"
|
||||
onChange={onDocumentChangeHandler}
|
||||
defaultValue={selectedDocuments}
|
||||
/>
|
||||
</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>
|
||||
</DefaultDeedTypesDashboard>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user