-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[tra-15398]Mettre au DSFR la modale de signature de l'émetteur (#3786)
- Loading branch information
Showing
10 changed files
with
266 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
180 changes: 180 additions & 0 deletions
180
front/src/Apps/Dashboard/Validation/Bsvhu/SignVhuEmission.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| import { useMutation, useQuery } from "@apollo/client"; | ||
| import Button from "@codegouvfr/react-dsfr/Button"; | ||
| import Input from "@codegouvfr/react-dsfr/Input"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { | ||
| Mutation, | ||
| MutationSignBsvhuArgs, | ||
| Query, | ||
| QueryBsvhuArgs, | ||
| SignatureTypeInput | ||
| } from "@td/codegen-ui"; | ||
| import { subMonths } from "date-fns"; | ||
| import React from "react"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { generatePath, Link, useLocation, useParams } from "react-router-dom"; | ||
| import { z } from "zod"; | ||
| import { datetimeToYYYYMMDD } from "../../../../common/datetime"; | ||
| import { Loader } from "../../../common/Components"; | ||
| import { DsfrNotificationError } from "../../../common/Components/Error/Error"; | ||
| import TdModal from "../../../common/Components/Modal/Modal"; | ||
| import { | ||
| GET_VHU_FORM, | ||
| SIGN_BSVHU | ||
| } from "../../../common/queries/bsvhu/queries"; | ||
| import routes from "../../../routes"; | ||
| import { BsvhuJourneySummary } from "./BsvhuJourneySummary"; | ||
| import WasteVhuSummary from "./WasteVhuSummary"; | ||
|
|
||
| const schema = z.object({ | ||
| author: z | ||
| .string() | ||
| .min(3, "Le nom et prénom de l'auteur de la signature est requis"), | ||
| date: z.coerce | ||
| .date({ | ||
| required_error: "La date d'émission est requise", | ||
| invalid_type_error: "Format de date invalide." | ||
| }) | ||
| .transform(v => v?.toISOString()) | ||
| }); | ||
| export type ZodBsvhuEmission = z.infer<typeof schema>; | ||
|
|
||
| const SignVhuEmission = ({ bsvhuId, onClose }) => { | ||
| const { siret } = useParams<{ siret: string }>(); | ||
| const location = useLocation(); | ||
|
|
||
| const { data } = useQuery<Pick<Query, "bsvhu">, QueryBsvhuArgs>( | ||
| GET_VHU_FORM, | ||
| { | ||
| variables: { | ||
| id: bsvhuId | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| const [signBsvhu, { loading, error }] = useMutation< | ||
| Pick<Mutation, "signBsvhu">, | ||
| MutationSignBsvhuArgs | ||
| >(SIGN_BSVHU); | ||
|
|
||
| const title = "Signer le bordereau"; | ||
| const TODAY = new Date(); | ||
|
|
||
| const initialState = { | ||
| date: datetimeToYYYYMMDD(TODAY), | ||
| author: "" | ||
| }; | ||
|
|
||
| const { handleSubmit, reset, formState, register } = | ||
| useForm<ZodBsvhuEmission>({ | ||
| values: initialState, | ||
| resolver: async (data, context, options) => { | ||
| return zodResolver(schema)(data, context, options); | ||
| } | ||
| }); | ||
|
|
||
| if (data == null) { | ||
| return <Loader />; | ||
| } | ||
|
|
||
| const { bsvhu } = data; | ||
|
|
||
| const onCancel = () => { | ||
| reset(); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <TdModal onClose={onClose} title={title} ariaLabel={title} isOpen size="L"> | ||
| {bsvhu.metadata?.errors?.some( | ||
| error => error.requiredFor === SignatureTypeInput.Emission | ||
| ) ? ( | ||
| <> | ||
| <p className="tw-mt-2 tw-text-red-700"> | ||
| Vous devez mettre à jour le bordereau et renseigner les champs | ||
| obligatoires avant de le signer. | ||
| </p> | ||
| <ul className="tw-mb-2 tw-text-red-700 tw-list-disc"> | ||
| {bsvhu.metadata?.errors.map((error, idx) => ( | ||
| <li key={idx}>{error.message}</li> | ||
| ))} | ||
| </ul> | ||
| <Link | ||
| to={generatePath(routes.dashboard.bsvhus.edit, { | ||
| siret, | ||
| id: bsvhu.id | ||
| })} | ||
| className="btn btn--primary" | ||
| state={{ background: location }} | ||
| > | ||
| Mettre le bordereau à jour pour le signer | ||
| </Link> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <WasteVhuSummary bsvhu={bsvhu} /> | ||
| <BsvhuJourneySummary bsvhu={bsvhu} /> | ||
|
|
||
| <p className="fr-text fr-mb-2w"> | ||
| En qualité <strong>d'émetteur du déchet</strong>, j'atteste que les | ||
| informations ci-dessus sont correctes. En signant ce document, | ||
| j'autorise le transporteur à prendre en charge le déchet. | ||
| </p> | ||
|
|
||
| <form | ||
| onSubmit={handleSubmit(async data => { | ||
| await signBsvhu({ | ||
| variables: { | ||
| id: bsvhu.id, | ||
| input: { | ||
| ...data, | ||
| type: SignatureTypeInput.Emission | ||
| } | ||
| } | ||
| }); | ||
| onClose(); | ||
| })} | ||
| > | ||
| <div className="fr-col-4 fr-mb-2w"> | ||
| <Input | ||
| label="Date de prise en charge" | ||
| nativeInputProps={{ | ||
| type: "date", | ||
| min: datetimeToYYYYMMDD(subMonths(TODAY, 2)), | ||
| max: datetimeToYYYYMMDD(TODAY), | ||
| ...register("date") | ||
| }} | ||
| state={formState.errors.date ? "error" : "default"} | ||
| stateRelatedMessage={formState.errors.date?.message} | ||
| /> | ||
| </div> | ||
| <div className="fr-col-8 fr-mb-2w"> | ||
| <Input | ||
| label="Nom et prénom" | ||
| state={formState.errors.author ? "error" : "default"} | ||
| nativeInputProps={{ | ||
| ...register("author") | ||
| }} | ||
| stateRelatedMessage={formState.errors.author?.message} | ||
| /> | ||
| </div> | ||
| <div className="fr-mb-8w"> | ||
| {error && <DsfrNotificationError apolloError={error} />} | ||
| </div> | ||
|
|
||
| <div className="fr-modal__footer"> | ||
| <div className="fr-btns-group fr-btns-group--right fr-btns-group--inline fr-btns-group--icon-left"> | ||
| <Button type="button" priority="secondary" onClick={onCancel}> | ||
| Annuler | ||
| </Button> | ||
| <Button disabled={loading}>Signer</Button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </> | ||
| )} | ||
| </TdModal> | ||
| ); | ||
| }; | ||
|
|
||
| export default SignVhuEmission; |
50 changes: 50 additions & 0 deletions
50
front/src/Apps/Dashboard/Validation/Bsvhu/WasteVhuSummary.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Bsvhu, BsvhuPackaging } from "@td/codegen-ui"; | ||
| import * as React from "react"; | ||
| import { | ||
| DsfrDataList, | ||
| DsfrDataListDescription, | ||
| DsfrDataListItem, | ||
| DsfrDataListTerm | ||
| } from "../../../../common/components"; | ||
| import { isDangerous } from "@td/constants"; | ||
|
|
||
| interface WasteVhuSummaryProps { | ||
| bsvhu: Bsvhu; | ||
| } | ||
| const WasteVhuSummary = ({ bsvhu }: WasteVhuSummaryProps) => { | ||
| const isDangerousWaste = isDangerous(bsvhu.wasteCode ?? ""); | ||
| const usualName = isDangerousWaste ? "VHU pollué" : "VHU dépollué"; | ||
| return ( | ||
| <DsfrDataList> | ||
| <DsfrDataListItem> | ||
| <DsfrDataListTerm>BSVHU n°</DsfrDataListTerm> | ||
| <DsfrDataListDescription>{bsvhu.id}</DsfrDataListDescription> | ||
| </DsfrDataListItem> | ||
| <DsfrDataListItem> | ||
| <DsfrDataListTerm>Code déchet</DsfrDataListTerm> | ||
| <DsfrDataListDescription>{bsvhu.wasteCode}</DsfrDataListDescription> | ||
| </DsfrDataListItem> | ||
| <DsfrDataListItem> | ||
| <DsfrDataListTerm>Nom usuel du déchet</DsfrDataListTerm> | ||
| <DsfrDataListDescription>{usualName}</DsfrDataListDescription> | ||
| </DsfrDataListItem> | ||
| <DsfrDataListItem> | ||
| <DsfrDataListTerm> | ||
| {bsvhu.packaging === BsvhuPackaging.Lot | ||
| ? "Nombre de lot(s)" | ||
| : "Nombre d'unité(s)"} | ||
| </DsfrDataListTerm> | ||
| <DsfrDataListDescription>{bsvhu.quantity}</DsfrDataListDescription> | ||
| </DsfrDataListItem> | ||
| <DsfrDataListItem> | ||
| <DsfrDataListTerm> | ||
| {bsvhu.weight?.isEstimate ? "Poids estimé" : "Poids réel"} | ||
| </DsfrDataListTerm> | ||
| <DsfrDataListDescription> | ||
| {`${bsvhu.weight?.value}t`} | ||
| </DsfrDataListDescription> | ||
| </DsfrDataListItem> | ||
| </DsfrDataList> | ||
| ); | ||
| }; | ||
| export default WasteVhuSummary; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.