Semaine 5 - La grille (suite)

Afin de boucler la boucle sur la grille, il vous est demandé de compléter les fonctionnalités amorcées la semaine dernière.

Fonctionnalités

• Liste de grilles ('/')
  • Aucune nouvelle fonctionnalité nécessaire. La liste doit être maintenue à jour à partir de la base de données.
• Création d’une grille ('/grilles/nouveau')
  • Le formulaire doit dorénavant appeler une action serveur puis une fonction dans data afin de créer la grille. Une redirection vers la page de la nouvelle grille est ensuite nécessaire.
• Affichage d’une grille ('/grilles/[grilleId]')
  • La récupération des cellules d’une grille et les informations de la grille doivent être récupérées par une seule requête en utilisant des jointures.
  • Un clic sur une cellule de la grille devrait insérer une cellule à la bonne coordonnées dans la base de données.
  • Un clic sur une cellule existante devrait mettre à jour sa couleur dans la base de données.
  • Une composante de type color picker doit être utilisée pour choisir une couleur avant de cliquer dans une cellule. Vous pouvez en trouver sur npm, comme React Colorful. Pour faciliter votre travail, il est suggéré de garder la palette affichée en tout temps et de l’insérer dans une composante parent de votre grille.

Code fourni

// Vous pouvez vous aider de ce bout de code (modifiable au besoin)
// Cette fonction serait appelée lors d'un clic du div ayant la classe Grille

const clickGridHandler = (e) => {
    // récupère les coordonnées en pixel et les converti en colonnes/rangées
    const convertPxToCell = (pxX, pxY) => {
      const col = Math.floor(pxX / (cellSize + borderWidth));
      const row = Math.floor(pxY / (cellSize + borderWidth));
      return { x: col, y: row };
    };

    // récupère le décalage de la grille dans l'interface
    const bounds = e.currentTarget.getBoundingClientRect();
    // vérifie si l'utilisateur a cliqué sur une cellule occupée
    const isFilled = e.target !== e.currentTarget;
    // récupère x (colonne) et y (rangée) en base 0
    const { x, y } = convertPxToCell(
      e.clientX - bounds.left,
      e.clientY - bounds.top,
    );
    console.log(isFilled, x, y);
};

À faire (en détails)

Remise

Le projet est à remettre sur Teams avant le début du cours 06 et sa pondération totale (incluant la partie du cours 04) est de 10%.

Critères d’évaluation

Absence d’erreur de programmation	Respect des contraintes de développement	Justesse de la création des composantes	Optimisation et clarté du code JavaScript	Qualité de l’intégration
Est-ce que tout fonctionne correctement?	Est-ce que le projet respecte les consignes et les méthodes demandées?	Est-ce que le projet est bien découpé en composantes pertinentes?	Est-ce que le code est clair, simple et efficace?	Est-ce que l’interface est bien construite, cohérente et soignée?
10 pts	30 pts	25 pts	25 pts	10 pts