feature : members name displayed in list

dist/lib/sib-core

@@ -1 +1 @@
-Subproject commit cbba4db47150bcac8e86a364e2a4b20ad27fb387
+Subproject commit 444d258357cc525300c291e45f7be7f920f972e1

dist/lib/sib-router

@@ -1 +1 @@
-Subproject commit 488ca64e9aafd20bbdb15c2d087f4771d135d681
+Subproject commit 6109962852d523b23d47fb344083e77917ec1a9c

src/html/channel.html

@@ -1,22 +1,24 @@
 <script>
-  class LDPDisplayMember extends LDPWidget {
+  document.addEventListener("WebComponentsReady", function(event) { 
-    get template() {
+    class LDPDisplayMember extends SIBWidget {
-      return `
+      get template() {
-        <div name="${this.name}">
+        return `
-          <img src="${this.value.avatar}"/>
+          <div name="${this.name}">
-          <span>${this.value.firstname} ${this.value.lastname}</span>
+            <img src="${this.value.avatar}"/>
-        </div>
+            <span>${this.value.firstname} ${this.value.lastname}</span>
-      `;
+          </div>
-    }
+        `;
+      }
 
-    render() {
+      render() {
-      store.get(this.value).then( (value) => {
+        store.get(this.value).then( (value) => {
-        this._value = value;
+          this._value = value;
-        this.innerHTML = this.template;
+          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">

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" />`;
 

src/html/members.html

@@ -1,23 +1,43 @@
 <script>
-  class LDPDisplayCell extends SIBDisplayLookupList {
+  document.addEventListener("WebComponentsReady", function(event) { 
-    get template() {
+    class UserInfo extends SIBDisplayLookupList {
-      return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
+      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('hdapp-userinfo', UserInfo);
-  customElements.define("ldp-display-cell", LDPDisplayCell);
+  });
+
+//  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"
+    data-fields="user"
-    value-name-separator="&nbsp;"
+    widget-user="hdapp-userinfo"
-    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"
   ></sib-display>
 </div>

src/html/projects.html

@@ -1,17 +1,19 @@
 <script>
-  class LDPDisplayClient extends LDPWidget {
+  document.addEventListener("WebComponentsReady", function(event) { 
-    get template() {
+    class LDPDisplayClient extends SIBWidget {
-      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+      get template() {
-    }
+        return `<img name="${this.name}" src="${this.value.logo}"/>`;
+      }
 
-    render() {
+      render() {
-      store.get(this.value).then( (value) => {
+        store.get(this.value).then( (value) => {
-        this._value = value;
+          this._value = value;
-        this.innerHTML = this.template;
+          this.innerHTML = this.template;
-      });
+        });
+      }
     }
-  }
+    customElements.define("ldp-display-client", LDPDisplayClient);
-  customElements.define("ldp-display-client", LDPDisplayClient);
+  });
 </script>
 
 <div id="projects" style="display: none">