Différences

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

--- richclient:emberjs:td6 [2018/03/20 01:50] – [Fonctionnalités à implémenter] jcheron
+++ richclient:emberjs:td6 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 4: / Ligne 4: @@
 |< 100% >|
-| {{::ember.png?150|}} | Ce projet utilise le repository github : [[https://github.com/s4-dut-info-2018/boards-app|boards-app]] |
+| {{::ember.png?150|}} | Ce projet utilise le repository github : [[https://github.com/s4-dut-info-2018/boards-app|boards-app]]\\ 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]] |
 <html></div></html>
@@ Ligne 18: / Ligne 18: @@
 Vous pouvez au choix :
   * Partir de votre propre projet et y inclure les éléments du projet Github
-  * Partir du projet GitHub pour y intégrer vos propres fonctionnalités
+  * Partir du projet GitHub pour y intégrer vos propres fonctionnalités (recommandé)
+Dans le cas 2 (récupération du projet Git) :
+Dézipper le projet, le renommer (en board-app), aller dans le dossier, puis exécuter :
+<sxh bash;gutter:false>
+npm install
+npm install -g bower
+bower install
+</sxh>
+Vérifier le nom de la base de données (propriété **namespace**) dans le fichier **app/adapters/application.js**
+Démarrer les serveurs : mongodb, restheart, ember
 ==== Factorisation des vues ====
@@ Ligne 88: / Ligne 101: @@
 ^Attribut ^Rôle ^
 |elements | Tableau des objets (models) à afficher |
-|fields | Tableau des champs à afficher : 2 formats acceptés pour chaque champ (chaîne ou objet du type **{name:'attribute',caption:'caption'}** ) |
+|fields | Tableau des champs à afficher : 2 formats acceptés pour chaque champ (chaîne ou objet du type **{name:'attribute',caption:'caption',component:'compo-name'}** ) |
 |operations | Tableau des opérations à afficher sous forme de bouton et associées à chaque objet, chaque élément permet de définir un lien : **{icon:'remove red',link:'projects.delete'}** ou une action **{icon:'edit red',action:'edit'}** |
 |emptyMessage| Message à afficher si le tableau des objets est vide |
+<html><div class="note"></html>
+L'utilisation de composants pour les champs affichés (**fields**) est disponible à partir du commit [[https://github.com/s4-dut-info-2018/boards-app/commit/bf991dbfc6cb375a22a70cb44be3e68a762d5635|bf991db]]
+__Exemple d'utilisation : Affichage de l'identity du dev dans un label__
+Créer un composant pour le label :
+<sxh bash;gutter:false>
+ember g component lbl-value
+</sxh>
+Implémenter le composant (**value** représente la valeur du champ):
+<sxh html;title:app/templates/components/lbl-value.hbs>
+<span class="ui label"><i class="ui user icon"></i>{{value}}</span>
+</sxh>
+Mentionner le composant dans la déclaration fields de la route :
+<sxh javascript;title:app/routes/developers.js;highlight:[8]>
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+export default Route.extend({
+  model(){
+    return RSVP.hash({
+      developers:this.get('store').findAll('developer',{include:"projects"}),
+      fields:[{name:'identity',component:'lbl-value',caption:'Labeled identity'}],
+      operations:[{icon:'red remove',link:'developers.delete'},{icon:'edit',link:'developers.update'}]
+    });
+  }
+});
+</sxh>
+<html></div></html>
 ==== Factorisation des routes ====
@@ Ligne 145: / Ligne 189: @@
 </sxh>
-==== Fonctionnalités à implémenter ====
+===== Fonctionnalités à implémenter =====
+==== CRUD ====
 <wrap mytodo>**<nowiki>//</nowiki>TODO 1.1**</wrap>
@@ Ligne 159: / Ligne 204: @@
   * Factoriser au mieux le code
+==== Route index ====
 <wrap mytodo>**<nowiki>//</nowiki>TODO 1.2**</wrap>
@@ Ligne 179: / Ligne 225: @@
 </sxh>
-Il ne reste plus qu'à charger chacun des models dans cette route, pour obtenir le nombre d'instance de chaque dans le template
+Il ne reste plus qu'à charger chacun des models dans cette route, pour obtenir le nombre d'instance de chaque dans le template.
+<sxh javascript;title:app/routes/index.js>
+import Ember from 'ember'
+import RSVP from 'rsvp';
+const { Route, getOwner } = Ember;
+export default Route.extend({
+  model() {
+    return RSVP.hash({
+      models: getOwner(this).lookup('data-adapter:main').getModelTypes().map(type => {
+                      return {name: type.name,objects:this.get('store').findAll(type.name)};
+                      }),
+      icons: ['user','table','address card outline','tasks','step forward','tag']
+    });
+  }
+});
+</sxh>
+Il suffit maintenant de parcourir **model.models** dans le template **index.hbs**, et d'afficher pour chaque classe **modelClass** sa propriété **name**: **modelClass.name**, ou le nombre de ses instances : **modelClass.objects.length**.
+On pourra utiliser le composant semantic-ui [[https://semantic-ui.com/views/item.html|Item]], et le composant [[https://semantic-ui.com/collections/grid.html|Grid]] pour le placement.