Cadoles/daddy
20
0
Fork 0
Code Issues 16 Pull Requests Releases Wiki Activity

Création/mise à jour basique d'un DAD

Browse Source
This commit is contained in:
wpetit
2020-08-26 14:51:53 +02:00
parent f03a0c96dc
commit 39d266f701
19 changed files with 536 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/DecisionSupportFilePage/ClarificationSection.tsx
View File

@ -1,23 +1,35 @@
import React, { FunctionComponent, useState, ChangeEvent, useEffect } from 'react';
import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
import { useDebounce } from '../../hooks/useDebounce';
import { asDate } from '../../util/date';
export interface ClarificationSectionProps extends DecisionSupportFileUpdaterProps {};
const ClarificationSectionName = 'clarification';
export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf, updateDSF }) => {
const [ section, setSection ] = useState({
objectives: '',
motivations: '',
scope: '',
nature: '',
deadline: undefined,
hasDeadline: false,
const [ state, setState ] = useState({
changed: false,
section: {
objectives: '',
motivations: '',
scope: '',
nature: '',
deadline: undefined,
hasDeadline: false,
}
});
useEffect(() => {
updateDSF({ ...dsf, sections: { ...dsf.sections, [ClarificationSectionName]: { ...section }} })
}, [section]);
if (!state.changed) return;
updateDSF({ ...dsf, sections: { ...dsf.sections, [ClarificationSectionName]: { ...state.section }} })
setState(state => ({ ...state, changed: false }));
}, [state.changed]);
useEffect(() => {
if (!dsf.sections[ClarificationSectionName]) return;
setState(state => ({ ...state, changed: false, section: {...state.section, ...dsf.sections[ClarificationSectionName] }}));
}, [dsf.sections[ClarificationSectionName]]);
const onTitleChange = (evt: ChangeEvent<HTMLInputElement>) => {
const title = (evt.currentTarget).value;
@ -27,12 +39,12 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
const onSectionAttrChange = (attrName: string, evt: ChangeEvent<HTMLInputElement>) => {
const target = evt.currentTarget;
const value = target.hasOwnProperty('checked') ? target.checked : target.value;
setSection(section => ({ ...section, [attrName]: value }));
setState(state => ({ ...state, changed: true, section: {...state.section, [attrName]: value }}));
};
const onDeadlineChange = (evt: ChangeEvent<HTMLInputElement>) => {
const deadline = evt.currentTarget.valueAsDate;
setSection(section => ({ ...section, deadline }));
setState(state => ({ ...state, changed: true, section: { ...state.section, deadline }}));
};
return (
@ -48,7 +60,7 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
<label className="label">Quelle décision devons nous prendre ?</label>
<div className="control">
<textarea className="textarea"
value={section.objectives}
value={state.section.objectives}
onChange={onSectionAttrChange.bind(null, 'objectives')}
placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre."
rows={10}>
@ -60,7 +72,7 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
<label className="label">Pourquoi devons nous prendre cette décision ?</label>
<div className="control">
<textarea className="textarea"
value={section.motivations}
value={state.section.motivations}
onChange={onSectionAttrChange.bind(null, 'motivations')}
placeholder="Décrire pourquoi il est important de prendre cette décision."
rows={10}>
@ -74,7 +86,7 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
<div className="select">
<select
onChange={onSectionAttrChange.bind(null, 'scope')}
value={section.scope}>
value={state.section.scope}>
<option></option>
<option value="individual">Individuelle</option>
<option value="identified-group">Groupe identifié</option>
@ -88,7 +100,7 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
<div className="control">
<div className="select">
<select onChange={onSectionAttrChange.bind(null, 'nature')}
value={section.nature}>
value={state.section.nature}>
<option></option>
<option value="operational">Opérationnelle</option>
<option value="tactic">Tactique</option>
@ -103,13 +115,13 @@ export const ClarificationSection: FunctionComponent<ClarificationSectionProps>
<label className="checkbox">
<input type="checkbox"
onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
checked={section.hasDeadline} />
checked={state.section.hasDeadline} />
<span className="ml-1">Existe t'il une échéance particulière pour cette décision ?</span>
</label>
<div className="field">
<div className="control">
<input disabled={!section.hasDeadline}
value={section.deadline ? section.deadline.toISOString().substr(0, 10) : ''}
<input disabled={!state.section.hasDeadline}
value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
onChange={onDeadlineChange}
type="date" className="input" />
</div>