theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

👌 IMPROVE: Ajustements et Hotfix

Browse Source
This commit is contained in:
Divlo
2020-04-20 17:53:44 +02:00
parent c1fe81a921
commit 25582e4cc7
10 changed files with 278 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/components/EditFormFunction.js
View File

@ -74,6 +74,7 @@ const EditFormFunction = (props) => {
<select value={input.type} onChange={handleChangeInput} name="type" id={`type-${index}`} className="form-control">
<option value="text">text</option>
<option value="number">number</option>
<option value="calendar">calendar</option>
</select>
<div className="form-group text-center">

2
website/components/FunctionArticle.js
View File

@ -3,7 +3,7 @@ import htmlParser from 'html-react-parser';
const FunctionArticle = ({ article }) => {
return (
<div style={{ marginBottom: '50px' }} className="container-fluid">
{(article != undefined) && htmlParser(article)}
{(article != undefined) ? htmlParser(article) : <p className="text-center">L'article n'est pas encore disponible.</p>}
</div>
);
}

85
website/components/FunctionForm.js
View File

@ -1,13 +1,20 @@
import { Fragment, useState } from 'react';
import Loader from './Loader';
import htmlParser from 'html-react-parser';
import dynamic from 'next/dynamic';
import api from '../utils/api';
import fr from 'date-fns/locale/fr';
import { registerLocale } from "react-datepicker";
import date from 'date-and-time';
import "react-datepicker/dist/react-datepicker.css";
registerLocale('fr', fr);
const FunctionForm = (props) => {
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [inputState, setInputState] = useState({});
const [message, setMessage] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = (event) => {
setIsLoading(true);
@ -40,20 +47,68 @@ const FunctionForm = (props) => {
<Fragment>
<form onSubmit={handleSubmit}>
{props.inputsArray.map((input, index) => {
let inputResult;
switch(input.type) {
case "text" || "number":
inputResult = (<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />);
break;
switch (input.type) {
case "text":
case "number":
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />
</div>
);
case "calendar":
// Permet au datepicker de prendre la hauteur
if (typeof window != 'undefined') {
const newScript = document.createElement("script");
newScript.src = "/js/extraHeightCSS.js";
document.body.appendChild(newScript);
}
const DatePicker = dynamic(
() => import('react-datepicker'),
{ ssr: false }
);
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
<br/>
<DatePicker
selected={(() => {
try {
if (inputState[input.name] != undefined) {
const dateArray = inputState[input.name].split('/');
const year = dateArray[2];
const month = dateArray[1];
const day = dateArray[0];
return new Date(year, parseInt(month) - 1, parseInt(day) + 1);
}
throw "Not a valid date";
} catch {
return new Date();
}
})()}
locale="fr"
dateFormat="dd/MM/yyyy"
fixedHeight
placeholderText={input.placeholder}
onChange={(dateObject) => {
try {
const formattedDate = date.format(dateObject, 'DD/MM/YYYY', true);
handleChange({
target: {
name: input.name,
value: formattedDate
}
});
} catch {}
}}
/>
</div>
);
default:
inputResult = (<p>Erreur, l'input n'est pas valide...</p>);
return (
<p>Erreur, l'input n'est pas valide...</p>
);
}
return (
<div key={index} className="form-group">
<label className="form-label" htmlFor={input.name}>{input.label}</label>
{inputResult}
</div>
);
})}
<div className="form-group text-center">