feature - members page done. search not working and transition to member page not working

.gitmodules

@@ -1,12 +1,12 @@
 [submodule "dist/lib/webcomponentsjs"]
 	path = dist/lib/webcomponentsjs
 	url = https://github.com/webcomponents/webcomponentsjs
-[submodule "dist/lib/xmpp-chat-component"]
-	path = dist/lib/xmpp-chat-component
-	url = git@git.happy-dev.fr:happy-dev/xmpp-chat-component.git
 [submodule "dist/lib/sib-core"]
 	path = dist/lib/sib-core
 	url = git@git.happy-dev.fr:startinblox/sib-core.git
 [submodule "dist/lib/sib-router"]
 	path = dist/lib/sib-router
 	url = git@git.happy-dev.fr:startinblox/sib-router.git
+[submodule "dist/lib/sib-chat"]
+	path = dist/lib/sib-chat
+	url = git@git.happy-dev.fr:startinblox/sib-chat.git

dist/lib/sib-chat

@@ -0,0 +1 @@
+Subproject commit 8793dea94c3be9c068ee3ee6a7a0dc5e084f442a

dist/lib/xmpp-chat-component

@@ -1 +0,0 @@
-Subproject commit 3c6fe0b63a6d311610bcf53cb84b552ef382f17e

index.php

@@ -40,16 +40,15 @@
     </main>
 
     <!-- This is a hack : https://git.happy-dev.fr/happy-dev/xmpp-chat-component/issues/24 -->
-    <hd-chat-window
+    <sib-chat
-        id="chat-singleton"
+      data-src="https://djangoldp.happy-dev.fr/users/1"
-        data-authentication="anonymous"
+      data-authentication="login"
-        data-auto-login="true"
+      data-auto-login="true"
-        data-bosh-service-url="https://conversejs.org/http-bind/"
+      data-bosh-service-url="http://jabber.happy-dev.fr/http-bind/" // FIXME: make HTTPS
-        data-debug="false"
+      data-debug="false"
-        data-jid="nomnom.im"
+      data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json">
-        data-locales-url="<?php echo $cdn; ?>/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
+    </sib-chat>
-        data-room-jid="anonymous@conference.nomnom.im">
+
-    </hd-chat-window>
     <script>
       // Store url on load
       var currentRoute  = getCurrentRoute();
@@ -78,7 +77,7 @@
             currentRoute += "-chat";
           }
           var currentView = document.querySelector("#" + currentRoute);
-          if (currentView.querySelector("hd-chat-window") == null) {
+          if (currentView.querySelector("sib-chat") == null) {
             currentView.appendChild(chatSingleton);
             currentView.style.display = 'block';
           }

src/html/dependencies-dev.php

@@ -14,5 +14,5 @@
     <!-- Web components -->
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/sib-core/sib-display.html?v=<?php echo $v ?>" />
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/sib-router/sib-router.html?v=<?php echo $v ?>" />
-    <link rel="import" href="<?php echo $dn; ?>/dist/lib/xmpp-chat-component/chat-window-component.html?v=<?php echo $v ?>">
+    <link rel="import" href="<?php echo $dn; ?>/dist/lib/sib-chat/sib-chat.html?v=<?php echo $v ?>">
 

src/html/member.html

@@ -1,12 +1,12 @@
 <div id="member" class="view-with-vertical-menu" style="display: none">
-  <ldp-router id="member-page-router" class="vertical-menu border-left" default-route="member-chat">
+  <sib-router id="member-page-router" class="vertical-menu border-left" default-route="member-chat">
-    <ldp-route name="member-chat">
+    <sib-route name="member-chat">
       <i class="fa fa-comment" aria-hidden="true"></i>
-    </ldp-route>
+    </sib-route>
-    <ldp-route name="member-detail">
+    <sib-route name="member-detail">
       <i class="fa fa-user" aria-hidden="true"></i>
-    </ldp-route>
+    </sib-route>
-  </ldp-router>
+  </sib-router>
 
   <div id="member-chat" class="chat-wrapper"></div>
 
@@ -15,28 +15,28 @@
       <i class="fa fa-pencil" aria-hidden="true"></i>
       <i class="name fa fa-pencil" aria-hidden="true"></i>
 
-      <ldp-display 
+      <sib-display 
         id="member-info" 
         data-src="<?php echo $sdn; ?>/members/1/" 
         set-name="firstname, name-separator, lastname"
         value-name-separator="&nbsp;"
         data-fields="avatar, name, cell, email, number"
-        widget-avatar="ldp-display-img"
+        widget-avatar="sib-display-img"
-        widget-cell="ldp-display-cell"
+        widget-cell="sib-display-cell"
-        widget-email="ldp-display-mailto"
+        widget-email="sib-display-mailto"
-        widget-number="ldp-display-tel"
+        widget-number="sib-display-tel"
         bind-resources
-      ></ldp-display>
+      ></sib-display>
     </div>
 
     <div class="section skills">
       <i class="fa fa-pencil" aria-hidden="true"></i>
       <h2>Compétences</h2>
-      <ldp-display 
+      <sib-display 
         id="member-skills" 
         id-suffix="skills"
         bind-resources
-      ></ldp-display>
+      ></sib-display>
     </div>
   </div>
 </div>

src/html/members.html

@@ -1,14 +1,15 @@
 <script>
   document.addEventListener("WebComponentsReady", function(event) { 
-    class UserInfo extends SIBDisplayLookupList {
+    class HDAppUserInfo extends SIBDisplayLookupList {
       get parentElement() {return "div"}
       getTemplate(value, index) {
-        var firstname, lastname;
+        var firstname, lastname, email;
 
         if(typeof value == "object")
           if(value.first_name) {
             firstname = value.first_name;
             lastname  = value.last_name;
+            email     = value.email;
           }
           else {
             store.get(value).then(resource => {
@@ -19,25 +20,52 @@
             else this.value = [];
             return '';
           }
-        return `<span id="${firstname}-${lastname}">${firstname} ${lastname}</span>`;
+        return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>
+                <div id="${email}">${email}</div>`;
       }
     }
-    customElements.define('hdapp-userinfo', UserInfo);
+    customElements.define('hdapp-userinfo', HDAppUserInfo);
+
+    class HDAppCell extends SIBDisplayLookupList {
+      get parentElement() {return "div"}
+      getTemplate(value, index) {
+        var city, country;
+
+        if(typeof value == "object")
+          if(value.city) {
+            city      = value.city;
+            country   = value.country;
+          }
+          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="${city}-${country}">${city} ${country}</span>`;
+      }
+    }
+    customElements.define("hdapp-usercell", HDAppCell);
   });
 
-//  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/" 
-    data-fields="user"
+    data-fields="avatar, user, before-pseudo, pseudo, bio, cell, skills"
+    value-before-pseudo="@"
+    widget-avatar="sib-display-img"
     widget-user="hdapp-userinfo"
+    widget-cell="hdapp-usercell"
+    widget-skills="sib-display-lookuplist"
+    search-fields="pseudo"
+    next="member"
   ></sib-display>
 </div>
+
+

src/html/menu.html

@@ -8,7 +8,7 @@
     <div id="menu-items" class="col-7 col-md-7">
       <sib-route class="nav-item pb-2 active align-self-stretch text-center text-md-left" name="members">
         <i class="fa fa-users" aria-hidden="true"></i>
-        <span class="d-none d-md-inline"> Membres</span>
+        <span class="d-none d-md-inline">Membres</span>
       </sib-route>
       <sib-route class="d-none" name="member" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>
       <sib-route class="d-none" name="edit-profile" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>