From 4f7c8b23c670dd915a4ab7d9c6270fd4c7b4b76a Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Tue, 3 Jul 2018 16:54:41 +0200
Subject: [PATCH] feature : members name displayed in list

---
 dist/lib/sib-core          |  2 +-
 dist/lib/sib-router        |  2 +-
 src/html/channel.html      | 34 +++++++++++++++-------------
 src/html/edit-profile.html |  2 +-
 src/html/members.html      | 46 +++++++++++++++++++++++++++-----------
 src/html/projects.html     | 24 +++++++++++---------
 6 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/dist/lib/sib-core b/dist/lib/sib-core
index cbba4db..444d258 160000
--- a/dist/lib/sib-core
+++ b/dist/lib/sib-core
@@ -1 +1 @@
-Subproject commit cbba4db47150bcac8e86a364e2a4b20ad27fb387
+Subproject commit 444d258357cc525300c291e45f7be7f920f972e1
diff --git a/dist/lib/sib-router b/dist/lib/sib-router
index 488ca64..6109962 160000
--- a/dist/lib/sib-router
+++ b/dist/lib/sib-router
@@ -1 +1 @@
-Subproject commit 488ca64e9aafd20bbdb15c2d087f4771d135d681
+Subproject commit 6109962852d523b23d47fb344083e77917ec1a9c
diff --git a/src/html/channel.html b/src/html/channel.html
index 850f2ca..5434e53 100644
--- a/src/html/channel.html
+++ b/src/html/channel.html
@@ -1,22 +1,24 @@
 <script>
-  class LDPDisplayMember extends LDPWidget {
-    get template() {
-      return `
-        <div name="${this.name}">
-          <img src="${this.value.avatar}"/>
-          <span>${this.value.firstname} ${this.value.lastname}</span>
-        </div>
-      `;
-    }
+  document.addEventListener("WebComponentsReady", function(event) { 
+    class LDPDisplayMember extends SIBWidget {
+      get template() {
+        return `
+          <div name="${this.name}">
+            <img src="${this.value.avatar}"/>
+            <span>${this.value.firstname} ${this.value.lastname}</span>
+          </div>
+        `;
+      }
 
-    render() {
-      store.get(this.value).then( (value) => {
-        this._value = value;
-        this.innerHTML = this.template;
-      });
+      render() {
+        store.get(this.value).then( (value) => {
+          this._value = value;
+          this.innerHTML = this.template;
+        });
+      }
     }
-  }
-  customElements.define("ldp-display-member", LDPDisplayMember);
+    customElements.define("ldp-display-member", LDPDisplayMember);
+  });
 </script>
 
 <div id="channel" class="view-with-vertical-menu" style="display: none">
diff --git a/src/html/edit-profile.html b/src/html/edit-profile.html
index f2dfa90..baf28d0 100644
--- a/src/html/edit-profile.html
+++ b/src/html/edit-profile.html
@@ -19,7 +19,7 @@
 
 <div id="edit-profile" style="display: none">
   <label for="avatar-input">
-    <img id="avatar-preview" src="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" style="width: 100%;"/>
+    <img id="avatar-preview" src="http://cdn.local/hdapp/members/alexandre-bourlier.jpg" style="width: 100%;"/>
   </label>
   <input type="file" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />`;
 
diff --git a/src/html/members.html b/src/html/members.html
index 8ecfdbc..8a39341 100644
--- a/src/html/members.html
+++ b/src/html/members.html
@@ -1,23 +1,43 @@
 <script>
-  class LDPDisplayCell extends SIBDisplayLookupList {
-    get template() {
-      return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
+  document.addEventListener("WebComponentsReady", function(event) { 
+    class UserInfo extends SIBDisplayLookupList {
+      get parentElement() {return "div"}
+      getTemplate(value, index) {
+        var firstname, lastname;
+
+        if(typeof value == "object")
+          if(value.first_name) {
+            firstname = value.first_name;
+            lastname  = value.last_name;
+          }
+          else {
+            store.get(value).then(resource => {
+                this.value.push(resource);
+                this.render();
+            });
+            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
+            else this.value = [];
+            return '';
+          }
+        return `<span id="${firstname}-${lastname}">${firstname} ${lastname}</span>`;
+      }
     }
-  }
-  customElements.define("ldp-display-cell", LDPDisplayCell);
+    customElements.define('hdapp-userinfo', UserInfo);
+  });
+
+//  class LDPDisplayCell extends SIBDisplayLookupList {
+//    get template() {
+//      return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
+//    }
+//  }
+//  customElements.define("ldp-display-cell", LDPDisplayCell);
 </script>
 
 <div id="members" class="view" style="display: none">
   <sib-display 
     id="profiles-list" 
     data-src="<?php echo $sdn; ?>/members/" 
-    set-name="firstname, name-separator, lastname"
-    value-name-separator="&nbsp;"
-    value-city-separator=",&nbsp;"
-    data-fields="avatar, name, cell"
-    widget-avatar="sib-display-img"
-    widget-cell="ldp-display-cell"
-    search-fields="firstname, lastname"
-    next="member"
+    data-fields="user"
+    widget-user="hdapp-userinfo"
   ></sib-display>
 </div>
diff --git a/src/html/projects.html b/src/html/projects.html
index ff8a1c4..28203c5 100644
--- a/src/html/projects.html
+++ b/src/html/projects.html
@@ -1,17 +1,19 @@
 <script>
-  class LDPDisplayClient extends LDPWidget {
-    get template() {
-      return `<img name="${this.name}" src="${this.value.logo}"/>`;
-    }
+  document.addEventListener("WebComponentsReady", function(event) { 
+    class LDPDisplayClient extends SIBWidget {
+      get template() {
+        return `<img name="${this.name}" src="${this.value.logo}"/>`;
+      }
 
-    render() {
-      store.get(this.value).then( (value) => {
-        this._value = value;
-        this.innerHTML = this.template;
-      });
+      render() {
+        store.get(this.value).then( (value) => {
+          this._value = value;
+          this.innerHTML = this.template;
+        });
+      }
     }
-  }
-  customElements.define("ldp-display-client", LDPDisplayClient);
+    customElements.define("ldp-display-client", LDPDisplayClient);
+  });
 </script>
 
 <div id="projects" style="display: none">