add search component

app/components/nav/topbar.hbs

@@ -4,10 +4,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent" >
-        <form class="d-flex">
-          <input class="form-control me-2" type="search" placeholder="Search for documents, tags..." aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
-        </form>
+        <Search />
         {{#if this.session.isAuthenticated}}
           <div class="dropdown">
             <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">

app/components/search/autocomplete_item.hbs

+<li>
+  <div class="icon {{@type}}"></div>
+  <div class="title">{{@title}}</div>
+  <div class="path text-muted">{{@path}}</div>
+</li>
\ No newline at end of file

app/components/search/index.hbs

+<form class="d-flex flex-column autocomplete-search">
+  <div class="d-flex">
+    <Input
+      @value={{this.query}}
+      {{on "input" this.doSearch}} />
+    <button class="btn btn-outline-success" type="submit">Search</button>
+  </div>
+  <ul class="autocomplete-items">
+    {{#each this.autocomplete_items as |item|}}
+      <Search::AutocompleteItem
+        @title={{item.title}}
+        @path={{item.path}}
+        @type={{item.type}} />
+    {{/each}}
+  </ul>
+</form>

app/components/search/index.js

+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { A } from '@ember/array';
+
+// https://discuss.emberjs.com/t/how-to-force-re-render-a-glimmer-component/18150
+export default class SearchComponent extends Component {
+  @service requests;
+  @tracked query;
+  autocomplete_items = A([]);
+  /*
+  @tracked autocomplete_items = A([
+    {
+      'title': 'invoice.pdf',
+      'type': 'document',
+      'path': 'Home / My Documents / Invoices'
+    },
+    {
+      'title': 'invoice2.pdf',
+      'type': 'document',
+      'path': 'Home / My Documents'
+    },
+    {
+      'title': 'invoice3.pdf',
+      'type': 'document',
+      'path': 'Home / My Documents / Invoices'
+    },
+    {
+      'title': 'invoice.pdf',
+      'type': 'document',
+      'path': 'Home'
+    },
+  ]);
+  */
+
+  @action
+  doSearch() {
+    let that = this;
+
+    this.requests.search(this.query).then(
+      resp => resp.json()
+    ).then(data => {
+
+      data.forEach(item => {
+        console.log(`pushing item ${item.title}`);
+        that.autocomplete_items.push(
+          {
+            'title': item.title,
+            'type': 'document',
+            'path': item.breadcrumb,
+          }
+        )
+      });
+    });
+
+    if (this.autocomplete_items) {
+      //pass
+    }
+  }
+}

app/components/viewer/index.js

@@ -79,7 +79,7 @@ export default class ViewerComponent extends Component {
       { reload: true }
     ).then((doc) => {
       last_version = doc.last_version;
-      
+
       //that._document_versions.push(last_version);
       //that.__document_versions__ = last_version;
 

app/services/requests.js

@@ -82,6 +82,17 @@ export default class Requests extends Service {
     });
   }
 
+  async search(query) {
+    let url;
+
+    url = `${base_url()}/search?q=${query}`;
+
+    return fetch(url, {
+      method: 'GET',
+      headers: this.headers
+    })
+  }
+
   @computed('session.{data.authenticated.token,isAuthenticated}')
   get headers() {
     let _headers = {},

app/styles/app.scss

@@ -6,6 +6,7 @@
 @import "./nav/topbar";
 @import "./login.scss";
 @import "./document_version.scss";
+@import "./search.scss";
 
 
 body {

app/styles/search.scss

+.autocomplete-search {
+  position: relative;
+  width: 80%;
+  z-index: 10000;
+  backround-color: #fff;
+
+  ul.autocomplete-items {
+    position: absolute;
+    width: 100%;
+    top: 3rem;
+    background-color: white;
+    padding: 0rem 1rem;
+
+    li:hover {
+      background-color: #e9e9e9;
+      cursor: pointer;
+    }
+
+    li {
+      background-color: #fff;
+      z-index: 1000;
+      margin-top: 0.5rem;
+      list-style: none;
+      display: flex;
+      align-items: center;
+
+      .path {
+        padding-left: 2rem;
+      }
+
+      .icon {
+        width: 3rem;
+        height: 2rem;
+      }
+
+      .icon.folder {
+        background-image: url("/assets/images/folder.svg");
+        background-size: 100% 88%;
+      }
+
+      .icon.document {
+        background-image: url("/assets/images/document.svg");
+        background-size: 100% 100%;
+      }
+    }
+  }
+}

config/environment.js

@@ -26,7 +26,8 @@ module.exports = function (environment) {
   };
 
   if (environment === 'development') {
-    ENV.APP.HOST = 'http://127.0.0.1:8000'
+    ENV.APP.HOST = 'http://127.0.0.1:8000';
+    ENV.APP.WS_HOST = 'ws://127.0.0.1:8000';
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;
     // ENV.APP.LOG_TRANSITIONS = true;
@@ -53,7 +54,7 @@ module.exports = function (environment) {
   if (environment === 'production') {
     // here you can enable a production-specific feature
     ENV.APP.HOST = 'http://papermerge.local';
-    ENV.APP.WS_HOST = 'ws://papermerge.local'
+    ENV.APP.WS_HOST = 'ws://papermerge.local';
   }
 
   return ENV;