richclient:emberjs:td7

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
richclient:emberjs:td7 [2018/03/27 00:03] – [Models] jcheronrichclient:emberjs:td7 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 11: Ligne 11:
  
 ===== Objectifs ===== ===== Objectifs =====
-  * Conception Web client riche+  * Conception d'interfaces Web client riche 
 +  * Manipulations datas 
 +  * Utilisation composants
  
 ===== -- Eléments à implémenter ===== ===== -- Eléments à implémenter =====
Ligne 32: Ligne 34:
 === Comportement/conception de l'interface === === 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.\\ 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.   * 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. 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. 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 double-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).+  * 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**   * 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   * Il est possible de déplacer les stories entre les steps par un drap and drop
Ligne 58: Ligne 60:
  
  
-==== Models ====+=== Models ===
 Ajouts de membres non persistants aux models : Ajouts de membres non persistants aux models :
  
Ligne 64: Ligne 66:
 ^Model ^propriété ^Rôle ^ ^Model ^propriété ^Rôle ^
 |**project** |<html><span class="variable">boardVisible</span></html> |booléen déterminant si board est visible | |**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 | |**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>
  
  
  • richclient/emberjs/td7.1522101834.txt.gz
  • Dernière modification : il y a 7 ans
  • (modification externe)