| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| slam4:richclient:angularjs:boards-2 [2016/03/23 01:12] – [2.5- Url /stories ou / (3 points)] jcheron | slam4:richclient:angularjs:boards-2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |**/** | Route par défaut || | |**/** | Route par défaut || |
| |
| ==== -- Service (2 points) ==== | ==== -- Service (1.5 points) ==== |
| <wrap mytodo>**<nowiki>//</nowiki>TODO 2.2**</wrap> | <wrap mytodo>**<nowiki>//</nowiki>TODO 2.2**</wrap> |
| |
| Le service **dataService** simule la connexion à un web service ; il est défini de la façon suivante : | Le service **dataService** simule la connexion à un web service ; il est défini de la façon suivante : |
| |
| **stories**, **tags** et **devs** seront définis "en dur" à l'intérieur du service dans l'équivalent de variables privées : | **steps**, **stories**, **tags** et **devs** seront définis "en dur" à l'intérieur du service dans l'équivalent de variables privées : |
| |
| <sxh javascript;title:variables privées> | <sxh javascript;title:variables privées> |
| ^::: | <html><span class="method">getDevs()</span></html>\\ Retourne **devs** | | ^::: | <html><span class="method">getDevs()</span></html>\\ Retourne **devs** | |
| ^::: | <html><span class="method">getStory(code)</span></html>\\ Retourne la user story correspondant au **code** donné, **null** si le code est inexistant | | ^::: | <html><span class="method">getStory(code)</span></html>\\ Retourne la user story correspondant au **code** donné, **null** si le code est inexistant | |
| ^::: | <html><span class="method">setStoryAvancement(story)</span></html>\\ ajoute et valorise le membre **avancement** de la **story** passée en paramètre (avancement=nb tâches réalisées/ nb tâches).\\ Une tâche est réalisée si son membre done=true.\\ A l'issue du passage **story.avancement** est existant et correctement valorisé | | |
| |
| Créez dataService, implémentez les méthodes publiques.\\ | Créez dataService, implémentez les méthodes publiques.\\ |
| Il faudra ensuite injecter **dataService** aux 2 contrôleurs **storiesController** et **StoryController** | Il faudra ensuite injecter **dataService** aux 2 contrôleurs **storiesController** et **StoryController** |
| |
| ==== -- Url /stories ou / (4 points) ==== | ==== -- Url /stories ou / (3.5 points) ==== |
| |
| <wrap mytodo>**<nowiki>//</nowiki>TODO 2.3**</wrap> | <wrap mytodo>**<nowiki>//</nowiki>TODO 2.3**</wrap> |
| |< 100% >| | |< 100% >| |
| ^**Controller** | **stories.js** (storiesController) | | ^**Controller** | **stories.js** (storiesController) | |
| ^Variables publique | <html><span class="variable">stories</span></html>\\ Tableau des user stories | | ^Variables publiques | <html><span class="variable">stories</span></html>\\ Tableau des user stories | |
| ^::: | <html><span class="variable">selected</span></html>\\ **story** sélectionnée | | ^::: | <html><span class="variable">selected</span></html>\\ **story** sélectionnée | |
| ^Méthodes publiques | <html><span class="method">goto(story)</span></html>\\ Accède à l'url **story/:code** en utilisant le service **$location** | | ^Méthodes publiques | <html><span class="method">goto(story)</span></html>\\ Accède à l'url **story/:code** en utilisant le service **$location** | |
| </sxh> | </sxh> |
| |
| La boucle **ng-repeat** affichera dans ce cas les éléments du tableau **items** dont le membre code est égal à "AAA" | La boucle **ng-repeat** affichera dans ce cas les éléments du tableau **items** dont le membre **code** est égal à "AAA" |
| |
| === Disposition des éléments === | === Disposition des éléments === |
| On utilisera le [[http://getbootstrap.com/css/#grid-example-basic|GridSystem Bootstrap]] pour disposer correctement les conteneurs de step sur la page : | On utilisera le [[http://getbootstrap.com/css/#grid-example-basic|GridSystem Bootstrap]] pour disposer correctement les conteneurs de step sur la page : |
| |
| La grille Bootstrap est composée de 12 colonnes, chaque classe de type **col-md-n** attribuée à un élément permet de lui donner une largeur de n/12. | * La grille Bootstrap est composée de 12 colonnes, chaque classe css de type **col-md-n** attribuée à un élément permet de lui donner une largeur de n/12. |
| | * Pour nos steps, si nous en avons 3, chacune d'entre elles devra avoir une largeur de **12/3=4** et donc avoir la classe **col-md-4** |
| | |
| | |
| | Modifier le template **stories.html** et le contrôleur **storiesController** : |
| | |
| | |< 100% >| |
| | ^**Controller** | **stories.js** (storiesController) | |
| | ^Méthode publique à ajouter | <html><span class="method">getColClass()</span></html>\\ Retourne la classe css à attribuer aux colonnes (col-md-x) en fonction du nombre de **steps** | |
| |
| Pour nos steps, si nous en avons 3, chacune d'entre elle devra avoir une largeur de **12/3=4** et donc avoir la classe **col-md-4** | |
| ==== -- Url /story/:code (3 points) ==== | ==== -- Url /story/:code (3 points) ==== |
| |
| <wrap info>Affiche la **story** correspondant au **code** passé dans l'url.</wrap> | <wrap info>Affiche la **story** correspondant au **code** passé dans l'url.</wrap> |
| |
| {{:slam4:richclient:angularjs:boards:storydetails.png?|}} | {{:slam4:richclient:angularjs:boards:storyinstepdetails.png?|}} |
| |
| **Comportement de l'interface :** | **Comportement de l'interface :** |
| ^**Controller** | **story.js** (storyController) | | ^**Controller** | **story.js** (storyController) | |
| ^Variables privées | <html><span class="variable">story</span></html>\\ user story à afficher | | ^Variables privées | <html><span class="variable">story</span></html>\\ user story à afficher | |
| ^::: | <html><span class="variable">devs</span></html>\\ Tableau de tous les développeurs | | |
| ^::: | <html><span class="variable">tags</span></html>\\ Tableau de tous les tags | | |
| ^Méthodes publiques | <html><span class="method">toggleDone(task)</span></html>\\ Bascule de vrai à faux et inversement le membre **done** de la tâche **task** passée en paramètre | | ^Méthodes publiques | <html><span class="method">toggleDone(task)</span></html>\\ Bascule de vrai à faux et inversement le membre **done** de la tâche **task** passée en paramètre | |
| ^::: | <html><span class="method">assignDev(dev)</span></html>\\ Assigne le développeur **dev** à la **story** | | |
| ^::: | <html><span class="method">indexOfTag(tag)</span></html>\\ Retourne l'index du **tag** passé en paramètre dans la liste des **tags** de la **story** (-1 s'il n'est pas trouvé) | | |
| ^::: | <html><span class="method">toggleTag(tag)</span></html>\\ Ajoute ou retire le **tag** passé en paramètre de la liste des **tags** de la story | | |
| |
| ==== -- A poursuivre... ==== | ==== -- A poursuivre... ==== |
| |
| Fonctionnalités supplémentaires à implémenter : | Fonctionnalités supplémentaires à implémenter : |
| |
| **Dans la page story/:code :** | |
| * Permettre l'ajout/modification/suppression de tasks (2 points) | |
| * Permettre l'ajout/modification/suppression de nouveaux tags (2 points) | |
| |
| **Dans la page /stories ou / :** | **Dans la page /stories ou / :** |
| * Filtrer les stories à afficher par sélection de devs et/ou par la présence de tags et/ou par la mention **done** (2 points) | * Ajouter/modifier/supprimer des steps |
| | * Changer l'affectation d'une story dans une step |
| |
| | Super-bonus (20 garantis) : |
| | * Mettre en place le drag & drop des stories entre les steps avec un [[http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple|module Angular]] |
| ===== -- Ressources ===== | ===== -- Ressources ===== |
| |
| <meta charset="UTF-8"> | <meta charset="UTF-8"> |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> |
| | <link rel="stylesheet" href="css/styles.css"> |
| |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
| } | } |
| .story-panel{ | .story-panel{ |
| float: left; | |
| width: 300px; | |
| } | } |
| .story{ | .story{ |
| .assign-to{ | .assign-to{ |
| font-weight: bold; | font-weight: bold; |
| | } |
| | .selected{ |
| | background-color: #dff0d8; |
| | color: #3c763d; |
| | } |
| | .selected::after{ |
| | content: ''; |
| | display: block; |
| | clear: both; |
| } | } |
| </sxh> | </sxh> |
| ==== Bootstrap ==== | ==== Bootstrap ==== |
| |
| {{:slam4:richclient:angularjs:boards:glyphicon.png?|}} | {{:slam4:richclient:angularjs:boards:username.png?|}} |
| <sxh html;title:GlyphIcon> | <sxh html;title:GlyphIcon> |
| <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Done | <span class="glyphicon glyphicon-user" aria-hidden="true"></span> James Gosling |
| </sxh> | </sxh> |
| |