now nodes listed with pagination

app/adapters/node.js

@@ -6,25 +6,50 @@ export default class NodeAdapter extends ApplicationAdapter {
 
   @service store;
 
-  async getChildren(node_id) {
-    let url, nodes, folders, docs;
+  async getChildren({node_id, page}) {
+    let url,
+      nodes,
+      folders,
+      docs,
+      pagination = {},
+      node_ids;
 
     url = this.buildURL('nodes', node_id);
-
+    if (page) {
+      url = `${url}?page[number]=${page}`
+    }
     nodes = await fetch(url, {
       method: 'GET',
-      headers: this.headers
+      headers: this.headers,
     }).then(response => response.json());
 
-    nodes.data.map(node => {
+    pagination = {
+      next: nodes.links.next, // url to next page
+      prev: nodes.links.prev, // url to prev page
+      first: nodes.links.first, // url to first page
+      last: nodes.links.last, // url to last page
+      page: nodes.meta.pagination.page, // current page number
+      pages: nodes.meta.pagination.pages, // total number of pages
+      count: nodes.meta.pagination.count, // total number of items
+    }
+
+    node_ids = nodes.data.map(node => {
       let normalized_node = this.store.normalize('node', node);
       this.store.push(normalized_node);
+      return node.id;
     });
 
-    folders = this.store.peekAll('folder').filter(folder => folder.parent.get('id') == node_id);
-    docs = this.store.peekAll('document').filter(folder => folder.parent.get('id') == node_id);
+    folders = this.store.peekAll('folder').filter(
+      folder => node_ids.includes(folder.id)
+    );
+    docs = this.store.peekAll('document').filter(
+      doc => node_ids.includes(doc.id)
+    );
 
-    return folders.concat(docs);
+    return {
+      children: folders.concat(docs),
+      pagination: pagination
+    };
   }
 
   async getFolder(node_id) {

app/components/commander/index.hbs

@@ -52,4 +52,9 @@
       {{/let}}
     {{/each}}
   </div>
+
+  <Pagination
+    @object={{@pagination}}
+    @node={{@node}}
+    @hint={{@hint}} />
 </div>

app/components/dual_link_to/index.hbs

 <LinkTo
   @route={{this.route}}
   @model={{this.model.id}}
-  @query={{this.query}}>
+  @query={{this.query}}
+  ...attributes >
     {{this.title}}
 </LinkTo>

app/components/dual_link_to/index.js

@@ -85,18 +85,23 @@ export default class DualLinkToComponent extends Component {
   }
 
   get title() {
-    return this.args.node.get('title');
+    return this.args.title || this.args.node.get('title');
   }
 
   get query() {
     let node,
       extranode,
-      hint;
+      hint,
+      result = {};
 
     node = this.args.node;
     extranode = this.args.extranode;
     hint = this.args.hint;
 
+    if (this.args.query) {
+      result = Object.assign(result, this.args.query);
+    }
+
     if ((hint === 'left') && extranode) {
       if (extranode.get('nodeType') === 'document') {
         return {
@@ -121,7 +126,7 @@ export default class DualLinkToComponent extends Component {
       }
     }
 
-    return {};
+    return result;
   } // end of query
 
 } // end of DualLinkToComponent

app/components/pagination/index.hbs

+<nav aria-label="Page navigation example">
+  <ul class="pagination">
+    {{#each this.pages as |page|}}
+      <li class="page-item {{if page.current 'active'}}">
+        <DualLinkTo
+          @node={{@node}}
+          @title={{page.number}}
+          @hint={{@hint}}
+          @query={{page.query}}
+           class="page-link">
+        </DualLinkTo>
+      </li>
+    {{/each}}
+  </ul>
+</nav>
\ No newline at end of file

app/components/pagination/index.js

+import Component from '@glimmer/component';
+
+
+export default class PaginationComponent extends Component {
+  get pages() {
+    let result = [];
+
+    for(let i=0; i < this.args.object.pages; i++) {
+
+      if (this.args.object.page === i + 1) {
+        result.push({
+          number: i + 1,
+          current: true,
+          query: { 'page': i + 1 }
+        });
+      } else {
+        result.push({
+          number: i + 1,
+          current: false,
+          query: {'page': i + 1}
+        });
+      }
+    }
+
+    return result;
+  }
+}

app/routes/authenticated/nodes.js

@@ -13,6 +13,9 @@ export default class FolderRoute extends Route {
     },
     extradoc_id: {
       refreshModel: true
+    },
+    page: {
+      refreshModel: true
     }
   };
 
@@ -24,7 +27,6 @@ export default class FolderRoute extends Route {
       current_node,
       pages_with_url,
       document_version,
-      children,
       home_folder;
 
     adapter = this.store.adapterFor('node');
@@ -54,11 +56,19 @@ export default class FolderRoute extends Route {
       });
     }
 
-    children = await adapter.getChildren(params.node_id);
+    const {children, pagination} = await adapter.getChildren({
+      node_id: params.node_id,
+      page: params.page
+    });
     home_folder = await this.currentUser.user.getHomeFolder();
     current_node = await adapter.getFolder(params.node_id);
 
-    return {current_node, home_folder, children};
+    return {
+      current_node,
+      home_folder,
+      children,
+      pagination
+    };
 
   }
 
@@ -82,5 +92,6 @@ export default class FolderRoute extends Route {
     _controller.set('mainnode', model.current_node);
     _auth_controller.set('home_folder', model.home_folder);
     _controller.set('children', model.children);
+    _controller.set('pagination', model.pagination);
   }
 }

app/templates/authenticated/nodes.hbs

@@ -3,6 +3,7 @@
     @node={{this.mainnode}}
     @extranode={{this.extranode}}
     @children={{this.children}}
+    @pagination={{this.pagination}}
     @onPanelToggle={{this.onPanelToggle}}
     @dualPanelMode={{this.dualpanel_mode}}
     @hint="left" />