slam4:richclient:angularjs:boards-2

Différences

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

Lien vers cette vue comparative

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 00:57] – [2.5- Url /stories ou / (3 points)] jcheronslam4: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 || |**/** | 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>
Ligne 111: Ligne 111:
 ^::: | <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>
Ligne 128: Ligne 127:
 |< 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**  |
Ligne 172: Ligne 171:
  
 {{:slam4:richclient:angularjs:boards:storiesbystep.png?|}} {{: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**). 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) ==== ==== -- Url /story/:code (3 points) ====
Ligne 181: Ligne 213:
 <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 :**
Ligne 193: Ligne 225:
 ^**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...  ====
Ligne 205: Ligne 232:
  
 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 =====
  
Ligne 223: Ligne 249:
     <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>
Ligne 263: Ligne 290:
 } }
 .story-panel{ .story-panel{
-    float: left; +
-    width: 300px;+
 } }
 .story{ .story{
Ligne 280: Ligne 306:
 .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>&nbsp;Done+  <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;James Gosling
 </sxh> </sxh>
  
  • slam4/richclient/angularjs/boards-2.1458691048.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)