Différences

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

--- richclient:emberjs:td5 [2019/03/25 15:23] – créée jcheron
+++ richclient:emberjs:td5 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 4: / Ligne 4: @@
 |< 100% >|
-| {{::ember.png?150|}} | Dépôts eCampus :\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12596|parcours 1]]\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12605|parcours 2]] |
+| {{::ember.png?150|}} | QCM eCampus :\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12596|parcours 1]]\\  * [[https://ecampus.unicaen.fr/course/view.php?id=12605|parcours 2]] |
 <html></div></html>
@@ Ligne 15: / Ligne 15: @@
   * Utilisation composants
-===== -- Eléments à implémenter =====
+===== - Eléments à implémenter =====
-Création d'un moteur de recherche pour les projets
+==== - Route project/:project_id/board ====
+<wrap mytodo>**<nowiki>//</nowiki>TODO 2.1**</wrap>
+Cette route est déjà partiellement implémentée (**project/:project_id**):
+{{:richclient:emberjs:td7:projectstories.png?900|Project stories}}
+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é.
+{{:richclient:emberjs:td7:projectstoriesboard.png?900|Dashboard}}
+=== 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 :
+<sxh javascript;gutter:false>
+['one', 'two', 'three', 'four',
+        'five', 'six', 'seven', 'eight', 'nine',
+        'ten', 'eleven', 'twelve', 'thirteen', 'fourteen',
+        'fifteen', 'sixteen']
+</sxh>
+=== Models ===
+Ajouts de membres non persistants aux models :
+|< 100% >|
+^Model ^propriété ^Rôle ^
+|**project** |<html><span class="variable">boardVisible</span></html> |booléen déterminant si board est visible |
+|::: |<html><span class="variable">backlog</span></html> | computed property* des stories à afficher dans le backlog (* sur boardVisible et stories.@each.step) |
+|**story** |<html><span class="variable">active</span></html> |booléen déterminant si la story est sélectionnée |
+|::: |<html><span class="variable">progress</span></html> | computed property* donnant l'avancement de la story (% des tâches réalisées) (* sur tasks@each.done) |
+=== Component ===
+Pour le drag and drop, on utilise les fonctionnalités HTML5, au travers de 2 composants (fortement inspirés de cet [[https://emberway.io/ember-js-and-html5-drag-and-drop-fa5dfe478a9a|article]] ) :
+**draggable-dropzone** correspond à la zone de drop (step d'accueil)
+<sxh javascript;title:app/components/draggable-dropzone.js>
+import Component from '@ember/component';
+import {set,get} from '@ember/object';
+export default Component.extend({
+  classNames        : [ 'draggableDropzone' ],
+  classNameBindings : [ 'dragClass' ],
+  dragClass         : 'deactivated',
+  dragLeave(event) {
+    event.preventDefault();
+    set(this, 'dragClass', 'deactivated');
+  },
+  dragOver(event) {
+    event.preventDefault();
+    set(this, 'dragClass', 'activated');
+  },
+  drop(event) {
+    var data = event.dataTransfer.getData('text/data');
+    this.sendAction('dropped', data,get(this,'content'));
+    set(this, 'dragClass', 'deactivated');
+  }
+});
+</sxh>
+**draggable-item** correspond à l'élément déplacé (drag) (story)
+<sxh javascript;title:app/components/draggable-item.js>
+import Component from '@ember/component';
+import {get} from '@ember/object';
+export default Component.extend({
+    classNameBindings: ['isActive'],
+    isActive: Ember.computed('content.active', function() {
+      let content=get(this,'content');
+      if(get(content,'active'))
+        return this.get('activeClass');
+      return '';
+    }),
+    attributeBindings : [ 'draggable' ],
+    draggable         : 'true',
+    dragStart(event) {
+      return event.dataTransfer.setData('text/data', get(this, 'content').get('id'));
+    },
+    doubleClick(){
+      this.sendAction("onDblClick",get(this,'content'));
+    },
+    click(){
+      this.sendAction("onClick",get(this,'content'));
+    }
+});
+</sxh>
+Exemple d'utilisation **draggable-dropzone**:
+<sxh html>
+{{#draggable-dropzone content=step dropped="addToStep" class="column"}}
+...
+{{/draggable-dropzone}}
+</sxh>
+|< 100% >|
+^Attribut ^Rôle ^
+|content| objet associé |
+|dropped | action déclenchée sur le drop dont le prototype est (dragContent.id,dropZoneContent) |
+Exemple d'utilisation **draggable-dropzone**:
+<sxh html>
+{{#draggable-item class="ui segment" activeClass="green inverted" content=story onClick="activate"}}
+...
+{{/draggable-item}}
+</sxh>
+|< 100% >|
+^Attribut ^Rôle ^
+|content| objet associé |
+|activeClass | Classe utlisée si content.active==true |
+|onClick| action déclenchée sur le click de l'élément  |
+<html><div class="note"></html>
+  * Créer impérativement une **page d'accueil** permettant de naviguer entre les différents TODOs
+  * Alimenter la base de données avec des enregistrements réalistes en nombre suffisant (BDD à mettre dans le dossier **DB** de votre repository)
+  * Mettez en valeur votre projet et présentez son contenu dans le **README.md**
+<html></div></html>