From 83fab20a05018a1dc7e59d8b5e89fd717f4200e7 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Mon, 14 May 2018 19:20:00 +0200
Subject: [PATCH] Search view setup

---
 src/html/search.html  | 28 +++++++++++++++++++++++++++-
 src/js/hd-app.js      | 15 ++++++++++++---
 src/scss/_search.scss |  8 ++++++++
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/html/search.html b/src/html/search.html
index 02ff668..12733e8 100644
--- a/src/html/search.html
+++ b/src/html/search.html
@@ -1,5 +1,31 @@
 <div id="search-view">
   <div class="content container-fluid">
-    Search results here
+    <ldp-display 
+      id="search-results-members" 
+      data-src="<?php echo $sdn; ?>/members/" 
+      set-name="firstname, name-separator, lastname"
+      value-name-separator="&nbsp;"
+      data-fields="avatar, name"
+      widget-avatar="ldp-display-img"
+      search-fields="firstname, lastname"
+      next="member"
+    ></ldp-display>
+
+    <ldp-display 
+      id="search-results-projects" 
+      data-src="<?php echo $sdn; ?>/projects/"
+      data-fields="client, number, name" 
+      widget-client="ldp-display-client"
+      search-fields="number, name"
+      next="project"
+    ></ldp-display>
+
+    <ldp-display 
+      id="search-results-channels" 
+      data-src="<?php echo $sdn; ?>/channels/" 
+      data-fields="name, description" 
+      search-fields="name, description"
+      next="channel"
+    ></ldp-display>
   </div>
 </div>
diff --git a/src/js/hd-app.js b/src/js/hd-app.js
index 9d36a67..2eefc59 100644
--- a/src/js/hd-app.js
+++ b/src/js/hd-app.js
@@ -1,8 +1,9 @@
 document.addEventListener("DOMContentLoaded", function(event) {
   // Constants declaration
-  const navBar      = document.querySelector("#navbar");
-  const searchBar   = navBar.querySelector("#search-bar");
-  const searchView  = document.querySelector("#search-view");
+  const navBar        = document.querySelector("#navbar");
+  const searchBar     = navBar.querySelector("#search-bar");
+  const searchView    = document.querySelector("#search-view");
+  const searchInput   = searchBar.querySelector("#search-input");
 
 
   // Shortcuts
@@ -31,4 +32,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
     navBar.classList.remove("search-mode");
     searchView.classList.remove("search-mode");
   }
+
+
+  // Synchronizes the search input with the <ldp-form>s 
+  searchInput.addEventListener("keyup", (e) => {
+    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
+      el.value = searchInput.value;
+    });
+  });
 });
diff --git a/src/scss/_search.scss b/src/scss/_search.scss
index f8f52d7..1848c67 100644
--- a/src/scss/_search.scss
+++ b/src/scss/_search.scss
@@ -12,4 +12,12 @@
   &.search-mode {
     display:  block;
   }
+
+  .content {
+    background-color:   white;
+
+    ldp-form {
+      display:    none;
+    }
+  }
 }