Développement digital option web
Contrôle du module : Développement front-end full stack
Groupe : 201
Durée : 2h
Description d’interface :
- Le bouton rechercher permet de rechercher les ordinateurs par marque et par salle
- Les ordinateurs trouvés s’affichent dans une liste déroulante à choix multiple.
- La sélection d’un ordinateur permet d’afficher en dessous ses informations.
- Le formulaire à droite permet d’ajouter un nouvel ordinateur
On suppose qu’on a un fichier [Link] contenant :
export const marques=["Marque X","Marque Y","Marque Z"] export
const salles=["Salle X","Salle Y","Salle Z"]
export const Ordinateurs=[
{ Numero:100,
Marque:"MarqueX",
Intitulé:"Ordinateur X",
DateAchat:"01/12/2022",
Salle:"Salle X"},
{ Numero:200, Marque:"MarqueX",
Intitulé:"Ordinateur Y",
DateAchat:"01/01/2022",
Salle:"Salle Y"},
]
Dans le code ci-dessous, on a utilisé les composants comme montré sur l’interface :
Complétez le code :
Le composant DropList qui affiche une liste déroulante :
class DropList extends [Link]{
render(){
return (<select onChange={(e)=>……(Q1-a)… }>
{[Link] ……(Q1-a)…… }
select>) }}
Q1-a : …………………………………………………………………………………………………………………..
Q1-b : …………………………………………………………………………………………………….…………
Composant RecherchOrdinateur qui affiche une liste des intitulés des ordinateurs
function RecherchOrdinateur(props){
return (<div> <h3 style={{textDecoration: "underline", fontWeight: 'bold'}} >Ordinateur trouvés:</h3>
<select multiple onChange={(e)=>………(Q1-d)………………….([Link])}>
{[Link]((e,i)=>{
return <option key={i} value={[Link]}>……(Q1-c)…………</option>})}
</select>
</div>)
}
Page: 2 / 4
Q1-c :…………………………………………………………………………………………………………..
Q1-d :…………………………………………………………………………………………………………..
Composant FormNew: affiche un formulaire pour ajouter un nouvel ordinateur
const FormNew= (props)=>{
const [num, setNumero]=useState()
const [Intl, setIntitule]=useState()
const handleSubmit=(e)=>{
let or={Numero:num, Intitulé:Intl};
Q3-a……………….// annuler la soumission du formulaire
Q3-b……………….//envoyer le variable or au composant parent
}
return <form onSubmit={handleSubmit} >
<label>Numéro:</label><input onChange={……(Q2-a)………………..}/> <br></br>
<label>Intitulé:</label><input onChange={………(Q2-b)……………….}/><br></br>
<input type='submit' value="Nouvel ordinateur"/> </form>
}
Q2-a: …………………………………………………………………………………………………………………………..
Q2-b: …………………………………………………………………………………………………………………………
Q3-a: ……………………………………………………………………………………………………………………………
Q3-b:…………………………………………………………………………………………………………………………………….
Composant InfoOrdinateur: affiche les informations d’un seul ordinateur (props)
function InfoOrdinateur(props){
return <>
<span style={{textDecoration: "underline", fontWeight: 'bold'}}>Ordinateur selectioné:</span>
<p>Numero: {……Q4-a…………..}</p>
<p>Intitulé: {……… Q4-b …………….}</p>
<p>Date Achat: {…… Q4-c ……………………………….}</p>
</>
}
Q4-a: ………………………………………………………
Q4-b:………………………………………………………
Q4-c:………………………………………………………
Page: 3 / 4
Composant App
function App(){
const [CurrentPC, setCurrentPC]=useState(Ordinateurs[0])
const [marque,SetMarque]=useState(marques[0])
const [salle,SetSalle]=useState(salles[0])
const [ordinateursTrouvés, setOrdinateurs]=useState(Ordinateurs);
const changerMarque=(e)=>{
Q5-a :…………………………………………………………………………..
}
const changerSalle=(e)=>{
Q5-b :…………………………………………………………………………..
}
const rechercher=()=>{
Q6 :…………………………………….//recherche des ordinateurs puis changer la liste ordinateursTrouvés
………………………………………………………………………………………… ……………………….
………………………………………………………………………………………………………………………. }
const changerOrdinateur=(e)=>{//changer currentPC
Q7 :………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………..
}
const ajouterPC=(e)=>{
//ajouter un nouvel ordinateur à la liste Ordinateurs puis changer la liste ordinateursTrouvés
var today = new Date(),
date = [Link]() + '/' + ([Link]() + 1) + '/' + [Link]();
let pc={Numero:[Link],Intitulé:[Link]é,Marque:marque,Salle:salle,DateAchat:date}
Q8 :………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….. }
return (<>
<div> <div>
<label>Marque:</label> <DropList items={marques} selectedItem={changerMarque}/>
<label>Salle:</label><DropList items={salles} selectedItem={changerSalle}/>
<button onClick={rechercher} >Recherche</button></div>
<div style={{display:'inline-block'}} >
<RecherchOrdinateur elements={ ordinateursTrouvés } selectedElement={changerOrdinateur} />
</div><div style={{display:'inline-block'}}>
<FormNew submit={ajouterPC}/></div>
<div><InfoOrdinateur Ordinateur={CurrentPC}/></div>
</div> </>)}
Page: 4 / 4
