basic scaffolding

app/components/documents-list.hbs

-<h2>{{@title}}</h2>
-
-<ul>
-  {{#each @document as |doc|}}
-    <li>
-         <button type="button" {{on 'click' (fn this.showDocument doc)}}>{{doc}}</button>
-    </li>
-  {{/each}}
-</ul>
\ No newline at end of file

app/components/documents-list.js

-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export default class DocumentsListComponent extends Component {
-  @action
-  showDocument(doc) {
-    alert(`The person's name is ${doc}!`);
-  }
-}

app/components/documents.hbs

+<label>
+  <span>Search</span>
+  <Input @value={{this.query}} class="light" />
+</label>
+
+
+<div class="documents">
+  <ul class="results">
+    <Documents::Filter @docs={{@docs}} @query={{this.query}} as |results|>
+      {{#each results as |doc|}}
+        <li><Document @doc={{doc}} /></li>
+      {{/each}}
+    </Documents::Filter>
+  </ul>
+</div>
\ No newline at end of file

app/components/documents.js

+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DocumentsComponent extends Component {
+  @tracked query = '';
+}
\ No newline at end of file

app/components/documents/filter.hbs

+{{yield this.results}}
\ No newline at end of file

app/components/documents/filter.js

+import Component from '@glimmer/component';
+
+export default class documentssFilterComponent extends Component {
+  get results() {
+    let { docs, query } = this.args;
+
+    if (query) {
+      docs = docs.filter((doc) => doc.title.includes(query));
+    }
+
+    return docs;
+  }
+}
\ No newline at end of file

app/routes/documents.js

-import Route from '@ember/routing/route';
-
-export default class DocumentsRoute extends Route {
-  model() {
-    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
-  }
-}

app/templates/index.hbs

 <Jumbo>
   <h2>Welcome to Papermerge!</h2>
   <p>We hope you find exactly what you're looking for in a place to stay.</p>
-
   <LinkTo @route="about" class="button">About Us</LinkTo>
 </Jumbo>
 
-<div class="documents">
-  <ul class="results">
-    {{#each @model as |model|}}
-      <li><Document @doc={{model}} /></li>
-    {{/each}}
-  </ul>
-</div>
\ No newline at end of file
+
+<Documents @docs={{@model}} />
\ No newline at end of file

public/api/documents.json

@@ -15,7 +15,14 @@
                 "title": "Invoice 2.pdf",
                 "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
             }
+        },
+        {
+            "type": "document",
+            "id": 3,
+            "attributes": {
+                "title": "Some.pdf",
+                "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+            }
         }
-
     ]
 }
\ No newline at end of file