80 lines
3.4 KiB
JavaScript
80 lines
3.4 KiB
JavaScript
import {useEffect, useState} from "react";
|
|
import {getCategoryFormBirthDate} from "../../../utils/Tools.js";
|
|
|
|
export function BirthDayField({inti_date, inti_category}) {
|
|
const [date, setDate] = useState(inti_date)
|
|
const [category, setCategory] = useState(inti_category)
|
|
const [canUpdate, setCanUpdate] = useState(false)
|
|
useEffect(() => {
|
|
const b = category !== getCategoryFormBirthDate(new Date(date), new Date('2023-09-01'))
|
|
if (b !== canUpdate)
|
|
setCanUpdate(b)
|
|
}, [date, category])
|
|
|
|
const updateCat = _ => {
|
|
setCategory(getCategoryFormBirthDate(new Date(date), new Date('2023-09-01')))
|
|
}
|
|
|
|
|
|
return <>
|
|
<div className="input-group mb-3">
|
|
<span className="input-group-text" id="birth_date">Date de naissance</span>
|
|
<input type="date" className="form-control" placeholder="jj/mm/aaaa" aria-label="birth_date"
|
|
name="birth_date" aria-describedby="birth_date" defaultValue={date} required
|
|
onChange={(e) => setDate(e.target.value)}/>
|
|
</div>
|
|
<div className="row">
|
|
<div className="input-group mb-3">
|
|
<span className="input-group-text" id="category">Catégorie</span>
|
|
<input type="text" className="form-control" placeholder="" name="category"
|
|
aria-label="category" value={category} aria-describedby="category"
|
|
disabled/>
|
|
{canUpdate && <button className="btn btn-outline-secondary" type="button" id="button-addon1"
|
|
onClick={updateCat}>Mettre à jours</button>}
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
export function OptionField({name, text, values, value}) {
|
|
return <div className="row">
|
|
<div className="input-group mb-3">
|
|
<label className="input-group-text" id={name}>{text}</label>
|
|
<select className="form-select" id={name} name={name} defaultValue={value} required>
|
|
{Object.keys(values).map((key, _) => {
|
|
return (<option key={key} value={key}>{values[key]}</option>)
|
|
})}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
export function TextField({name, text, value, placeholder, type = "text"}) {
|
|
return <div className="row">
|
|
<div className="input-group mb-3">
|
|
<span className="input-group-text" id={name}>{text}</span>
|
|
<input type={type} className="form-control" placeholder={placeholder ? placeholder : text} aria-label={name}
|
|
name={name} aria-describedby={name} defaultValue={value} required/>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
export function CheckField({name, text, value, row = false}) {
|
|
return <>{
|
|
row ?
|
|
<div className="row">
|
|
<div className="input-group mb-3">
|
|
<div className="form-check">
|
|
<input className="form-check-input" type="checkbox" id={name} name={name}
|
|
defaultChecked={value}/>
|
|
<label className="form-check-label" htmlFor={name}>{text}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
: <div className="form-check">
|
|
<input className="form-check-input" type="checkbox" id={name} name={name} defaultChecked={value}/>
|
|
<label className="form-check-label" htmlFor={name}>{text}</label>
|
|
</div>
|
|
}
|
|
</>
|
|
} |