generated from SocialGouv/template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from SocialGouv/feat/ajout-demande
feat(ajout): ajout demande
- Loading branch information
Showing
22 changed files
with
8,477 additions
and
128 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { CodegenConfig } from '@graphql-codegen/cli'; | ||
|
|
||
| /** | ||
| * `yarn run compile` pour mettre à jours le schema. | ||
| * process.env.NEXT_PUBLIC_API_URL ne fonctionne pas avec la cmd, il faut utiliser l'url | ||
| */ | ||
| const API_URL = "https://backoffice-env-1000jours-develop-91uqrtdu.dev.fabrique.social.gouv.fr"//process.env.NEXT_PUBLIC_API_URL | ||
|
|
||
| const config: CodegenConfig = { | ||
| schema: `${API_URL}/graphql?nocache`, | ||
| documents: ['src/**/*.tsx'], | ||
| generates: { | ||
| './src/__generated__/': { | ||
| preset: 'client', | ||
| plugins: [], | ||
| presetConfig: { | ||
| gqlTagName: 'gql', | ||
| } | ||
| } | ||
| }, | ||
| ignoreNoDocuments: true, | ||
| }; | ||
|
|
||
| export default config; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,10 +26,13 @@ | |
| "storybook:deploy:action": "npm run storybook:build && gh-pages -d .out -u \"github-actions-bot <[email protected]>\"", | ||
| "type-check": "tsc --noEmit", | ||
| "type-check:watch": "npm run type-check -- --watch", | ||
| "postinstall": "is-ci || husky install" | ||
| "postinstall": "is-ci || husky install", | ||
| "compile": "graphql-codegen", | ||
| "watch": "graphql-codegen -w" | ||
| }, | ||
| "dependencies": { | ||
| "@codegouvfr/react-dsfr": "^0.21.2", | ||
| "@apollo/client": "^3.7.5", | ||
| "@codegouvfr/react-dsfr": "^0.28.0", | ||
| "@emotion/react": "^11.10.5", | ||
| "@emotion/server": "^11.10.0", | ||
| "@emotion/styled": "^11.10.5", | ||
|
|
@@ -40,15 +43,20 @@ | |
| "@sentry/nextjs": "^6.17.9", | ||
| "@socialgouv/matomo-next": "^1.4.0", | ||
| "axios": "^1.2.4", | ||
| "graphql": "^16.6.0", | ||
| "next": "13.1.6", | ||
| "next-auth": "^4.18.10", | ||
| "next-seo": "^5.1.0", | ||
| "react": "18.2.0", | ||
| "react-dom": "18.2.0", | ||
| "sass": "^1.57.1", | ||
| "ts-node": "^10.9.1", | ||
| "tss-react": "^4.5.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.17.5", | ||
| "@graphql-codegen/cli": "^2.16.4", | ||
| "@graphql-codegen/client-preset": "^1.2.6", | ||
| "@storybook/addon-actions": "^6.4.19", | ||
| "@storybook/addon-docs": "^6.5.15", | ||
| "@storybook/addon-essentials": "^6.4.19", | ||
|
|
@@ -77,6 +85,6 @@ | |
| "node-talisman": "^1.28.0", | ||
| "start-server-and-test": "^1.14.0", | ||
| "storybook-dark-mode": "^2.0.5", | ||
| "typescript": "4.9.4" | ||
| "typescript": "^4.9.4" | ||
| } | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| import React, { Fragment, useEffect, useState } from "react"; | ||
| import { useSession } from "next-auth/react"; | ||
| import { useQuery } from '@apollo/client'; | ||
|
|
||
| import { useStyles } from "tss-react/dsfr"; | ||
| import { LoggedState } from "../src/components/LoggedState"; | ||
| import DatabaseApi from "../src/services/api/database"; | ||
| import { Enum_Demandedecontact_Type_De_Contact, WidgetEpdsSources } from "../src/__generated__/graphql"; | ||
| import { sortWidgetSourceByName } from "../src/utils/main.util"; | ||
| import { Departement } from "../types/geogouv"; | ||
|
|
||
| import { SelectDepartment } from "../src/components/SelectDepartment"; | ||
| import { Input } from "@codegouvfr/react-dsfr/Input"; | ||
| import Select from "@codegouvfr/react-dsfr/Select"; | ||
| import Button from "@codegouvfr/react-dsfr/Button"; | ||
| import Alert from "@codegouvfr/react-dsfr/Alert"; | ||
|
|
||
|
|
||
| export default function AjoutDemande() { | ||
| const { css } = useStyles(); | ||
| const widthFitContent = css({ width: "fit-content" }) | ||
|
|
||
| const { data: session, status } = useSession() | ||
| const [isLogged, setLogged] = useState<Boolean>() | ||
|
|
||
| const [widgetSources, setWidgetSources] = useState<WidgetEpdsSources[]>([]) | ||
| const [selectedDepartment, setSelectedDepartment] = useState<Departement>() | ||
| const [selectedContactOrigin, setSelectedContactOrigin] = useState<String>() | ||
| const [selectedContactMode, setSelectedContactMode] = useState<String>() | ||
| const [selectedContactSupport, setSelectedContactSupport] = useState<String>() | ||
|
|
||
| useEffect(() => { | ||
| console.log(isLogged) | ||
| }, [isLogged]) | ||
|
|
||
| useEffect(() => { | ||
| setLogged(status === "authenticated") | ||
| }, [status]) | ||
|
|
||
| const { loading, data, error } = useQuery( | ||
| DatabaseApi.GET_WIDGET_SOURCES | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (data) { | ||
| setWidgetSources(sortWidgetSourceByName([...data.widgetEpdsSources])) | ||
| } | ||
| }, [data]) | ||
|
|
||
| const createNewContact = async (event: any) => { | ||
| // Stop the form from submitting and refreshing the page. | ||
| event.preventDefault() | ||
| const target = event.target | ||
|
|
||
| // Get data from the form. | ||
| const data = { | ||
| name: target.name.value, | ||
| childNumber: target.childNumber.value, | ||
| childBirthDate: target.childBirthDate.value, | ||
| department: selectedDepartment, | ||
| contactDate: target.contactDate.value, | ||
| contactOrigin: selectedContactOrigin, | ||
| contactMode: selectedContactMode, | ||
| contactSupport: selectedContactSupport, | ||
| comment: target.comment.value | ||
| } | ||
|
|
||
| // TODO: branchement back | ||
| } | ||
|
|
||
| return <div> | ||
| <LoggedState showButton={false} /> | ||
|
|
||
| <Alert | ||
| title="Page en cours de développement" | ||
| severity="info" | ||
| /> | ||
|
|
||
| {isLogged && | ||
| <form onSubmit={createNewContact}> | ||
| <Input | ||
| label="Prénom" | ||
| nativeInputProps={{ | ||
| id: "name" | ||
| }} /> | ||
|
|
||
| <Input | ||
| label="Nombre d'enfants" | ||
| className={widthFitContent} | ||
| nativeInputProps={{ | ||
| type: "number", | ||
| id: "childNumber" | ||
| }} /> | ||
|
|
||
| <Input | ||
| label="Date de naissance du dernier enfant" | ||
| className={widthFitContent} | ||
| nativeInputProps={{ | ||
| type: "date", | ||
| id: "childBirthDate" | ||
| }} /> | ||
|
|
||
| <SelectDepartment setSelectedDepartment={setSelectedDepartment} /> | ||
|
|
||
| <Input | ||
| label="Date de prise de contact" | ||
| className={widthFitContent} | ||
| nativeInputProps={{ | ||
| type: "date", | ||
| id: "contactDate" | ||
| }} /> | ||
|
|
||
| <Select | ||
| label="Provenance du contact" | ||
| nativeSelectProps={{ | ||
| onChange: event => setSelectedContactOrigin(event.target.value), | ||
| }} | ||
| > | ||
| <Fragment key=".0"> | ||
| <option | ||
| disabled | ||
| hidden | ||
| selected | ||
| value="" | ||
| > | ||
| Sélectionnez une option | ||
| </option> | ||
| {widgetSources.map((source, index) => ( | ||
| <option key={index} value={source.nom}>{source.nom}</option> | ||
| ))} | ||
| </Fragment> | ||
| </Select> | ||
|
|
||
| <ContactModeComponent | ||
| label="Mode de prise de contact" | ||
| setSelectedContactMode={setSelectedContactMode} /> | ||
|
|
||
| <ContactSupportComponent | ||
| label="La personne contactée a-t'elle été accompagnée ?" | ||
| setSelectedContactSupport={setSelectedContactSupport} | ||
| /> | ||
|
|
||
| <Input | ||
| label="Commentaire" | ||
| textArea | ||
| nativeTextAreaProps={{ | ||
| id: "comment" | ||
| }} /> | ||
|
|
||
| <Button type="submit" onClick={() => { }}>Créer le contact</Button> | ||
| </form> | ||
| } | ||
| </div> | ||
| } | ||
|
|
||
| export type ContactModeComponentProps = { | ||
| label: string; | ||
| setSelectedContactMode: (arg: string) => void | ||
| }; | ||
|
|
||
| export type ContactSupportComponentProps = { | ||
| label: string; | ||
| setSelectedContactSupport: (arg: string) => void | ||
| }; | ||
|
|
||
|
|
||
| // A remplacer par le composant RadioButton de la lib @codegouvfr/react-dsfr lorsqu'il sera disponible | ||
| const ContactModeComponent = ({ label, setSelectedContactMode }: ContactModeComponentProps): JSX.Element => { | ||
| const typeContactList = Object.values(Enum_Demandedecontact_Type_De_Contact) | ||
|
|
||
| const handleContactMode = (event: any) => { | ||
| setSelectedContactMode(event.target.value) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="fr-form-group"> | ||
| <fieldset className="fr-fieldset fr-fieldset--inline"> | ||
| <legend className="fr-fieldset__legend fr-text--regular" id='radio-inline-legend'> | ||
| {label} | ||
| </legend> | ||
| <div className="fr-fieldset__content" onChange={handleContactMode}> | ||
| {typeContactList.map((type, index) => ( | ||
| <div className="fr-radio-group" key={index}> | ||
| <input type="radio" id={`radio-mode-${index}`} name="radio-mode" value={type} /> | ||
| <label className="fr-label" htmlFor={`radio-mode-${index}`}>{type} | ||
| </label> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </fieldset > | ||
| </div > | ||
| ) | ||
| } | ||
|
|
||
| const ContactSupportComponent = ({ label, setSelectedContactSupport }: ContactSupportComponentProps): JSX.Element => { | ||
| const supportList = ["Orientée", "Aidée", "Petit échange initial", "Non accompagnée"] | ||
|
|
||
| const handleContactSupport = (event: any) => { | ||
| setSelectedContactSupport(event.target.value) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="fr-form-group"> | ||
| <fieldset className="fr-fieldset fr-fieldset--inline"> | ||
| <legend className="fr-fieldset__legend fr-text--regular" id='radio-inline-legend'> | ||
| {label} | ||
| </legend> | ||
| <div className="fr-fieldset__content" onChange={handleContactSupport}> | ||
| {supportList.map((item, index) => ( | ||
| <div className="fr-radio-group" key={index}> | ||
| <input type="radio" id={`radio-support-${index}`} name="radio-support" value={item} /> | ||
| <label className="fr-label" htmlFor={`radio-support-${index}`}>{item} | ||
| </label> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </fieldset > | ||
| </div > | ||
| ) | ||
| } |
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.