Différences

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

--- richclient:emberjs:td7 [2018/03/27 01:19] – [1.1- Route project/:project_id/board] jcheron
+++ richclient:emberjs:td7 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 11: / Ligne 11: @@
 ===== Objectifs =====
-  * Conception Web client riche
+  * Conception d'interfaces Web client riche
+  * Manipulations datas
+  * Utilisation composants
 ===== -- Eléments à implémenter =====
@@ Ligne 32: / Ligne 34: @@
 === Comportement/conception de l'interface ===
-=== Steps ===
+== Steps ==
 Les Steps s'affichent de manière complète dans l'interface, même si elles ne contiennent aucune story.\\
@@ Ligne 39: / Ligne 41: @@
   * Chaque **step** est composée d'un **ui top attached segment** pour son titre, suivi d'un **ui attached segment** pour son contenu.
-=== Stories ===
+== Stories ==
 Lorsque la route **project/:project_id** est active, toutes les stories sont affichées dans le product backlog.
@@ Ligne 58: / Ligne 60: @@
-==== Models ====
+=== Models ===
 Ajouts de membres non persistants aux models :
@@ Ligne 64: / Ligne 66: @@
 ^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) |
+|::: |<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  |
+==== -- Route Stories/edit/:story_id ====
+<wrap mytodo>**<nowiki>//</nowiki>TODO 2.2**</wrap>
+<wrap info>Affiche la **story** correspondant au **code** passé dans l'url.</wrap>
+{{:richclient:emberjs:td7:storytasks.png?|Story tasks}}
+**Comportement de l'interface :**
+  * Une task **done** est barrée
+  * Les cases à cocher permettent de faire passer une tâche de non réalisée (done=false) à réalisée (done=true) et inversement
+===== Thanks =====
+<html><div class="info">
+<div style="font-size:14px;font-weight: bold;">Si vous avez apprécié :</div>
+<br>
+<a class="github-button" href="https://github.com/emberjs/ember.js" data-icon="octicon-star" data-show-count="true" aria-label="Star emberjs/ember.js on GitHub">ember.js thanks</a>
+<br>
+<a class="github-button" href="https://github.com/Semantic-Org/Semantic-UI" data-icon="octicon-star" data-show-count="true" aria-label="Star Semantic-Org/Semantic-UI on GitHub">Semantic-UI thanks</a>
+<br>
+<a class="github-button" href="https://github.com/twbs/bootstrap" data-icon="octicon-star" data-show-count="true" aria-label="Star twbs/bootstrap on GitHub">Bootstrap thanks</a></html>
+<html></div></html>
+<html><script async defer src="https://buttons.github.io/buttons.js"></script></html>