Ceci est une ancienne révision du document !
TD n°7
Objectifs
- Conception Web client riche
-- Eléments à implémenter
-- Route project/:project_id/board
//TODO 2.1
Cette route est déjà partiellement implémentée (project/:project_id):
Elle affiche la liste complète des stories du projet sélectionné.
on lui ajoute la partie tableau de bord, permettant d'afficher par steps (en colonnes), les user stories du projet sélectionné.
Comportement/conception de l'interface
Steps
Les Steps s'affichent de manière complète dans l'interface, même si elles ne contiennent aucune story.
On utilisera :
- le composant HTML ui-grid de semantic pour leur disposition.
- Chaque step est composée d'un ui top attached segment pour son titre, suivi d'un ui attached segment pour son contenu.
Stories
Lorsque la route project/:project_id est active, toutes les stories sont affichées dans le product backlog. Lorsque la route project/:project_id/board est active, toutes les stories non affectées à une step sont affichées dans le product backlog, les autres sont réparties entre leurs steps respectives.
- Le click sur une story présente dans le board la rend active et affiche la barre de 3 boutons (Open, MoveTo -dropDown des steps- et Remove).
- Les boutons Open.. renvoient vers l'url story/:story_id
- Il est possible de déplacer les stories entre les steps par un drap and drop
Le tableau suivant pourra servir a élaborer la grille des steps :
['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen']
Models
Ajouts de membres non persistants aux models :
Model | propriété | Rôle |
---|---|---|
project | boardVisible | booléen déterminant si board est visible |
backlog | computed property des stories à afficher dans le backlog (sur boardVisible et stories.@each.step) | |
story | active | booléen déterminant si la story est sélectionnée |