Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:angularjs:boards-2 [2016/03/23 00:51] – [2.7- A poursuivre...] jcheron
+++ slam4:richclient:angularjs:boards-2 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 68: / Ligne 68: @@
 |**/** | Route par défaut ||
-==== -- Service (2 points) ====
+==== -- Service (1.5 points) ====
 <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 :
-**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>
@@ Ligne 111: / Ligne 111: @@
 ^::: | <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">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.\\
 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>
@@ Ligne 128: / Ligne 127: @@
 |< 100% >|
 ^**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 |
 ^Méthodes publiques | <html><span class="method">goto(story)</span></html>\\ Accède à l'url **story/:code** en utilisant le service **$location**  |
@@ Ligne 172: / Ligne 171: @@
 {{:slam4:richclient:angularjs:boards:storiesbystep.png?|}}
+=== Filtre sur ng-repeat ===
+On utilisera la directive **ng-repeat** avec un filtre (filter) composé d'une expression (testant le membre **step** de chaque **story**).
+Le filtre peut faire appel à une méthode définie dans le contrôleur :
+**Exemple :**
+<sxh html;title:HTML>
+<div ng-repeat="item in items | filter: myCtrl.check"></div>
+</sxh>
+<sxh javascript;title:Méthode du contrôleur>
+this.check=function(item){
+    return item.code=="AAA";
+};
+</sxh>
+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 ===
+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 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** |
 ==== -- Url /story/:code (3 points) ====
@@ Ligne 179: / Ligne 213: @@
 <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 :**
@@ Ligne 191: / Ligne 225: @@
 ^**Controller** | **story.js** (storyController) |
 ^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  |
-^::: | <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...  ====
@@ Ligne 203: / Ligne 232: @@
 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 / :**
-  * 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 =====
@@ Ligne 221: / Ligne 249: @@
     <meta charset="UTF-8">
     <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>
@@ Ligne 261: / Ligne 290: @@
 }
 .story-panel{
-    float: left;
-    width: 300px;
 }
 .story{
@@ Ligne 278: / Ligne 306: @@
 .assign-to{
     font-weight: bold;
+}
+.selected{
+    background-color: #dff0d8;
+    color: #3c763d;
+}
+.selected::after{
+    content: '';
+    display: block;
+    clear: both;
 }
 </sxh>
 ==== Bootstrap ====
-{{:slam4:richclient:angularjs:boards:glyphicon.png?|}}
+{{:slam4:richclient:angularjs:boards:username.png?|}}
 <sxh html;title:GlyphIcon>
-  <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>&nbsp;Done
+  <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;James Gosling
 </sxh>