Merge pull request #296 from lblod/bugfix/search-and-pagination

Bugfix/search and pagination
lblod · Jul 1, 2022 · abe274c · abe274c
2 parents db9a01c + 050facb
commit abe274c
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 12 deletions.
diff --git a/app/controllers/inbox/agendapoints.js b/app/controllers/inbox/agendapoints.js
@@ -1,19 +1,34 @@
 import Controller from '@ember/controller';
-import DefaultQueryParamsMixin from 'ember-data-table/mixins/default-query-params';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { restartableTask, timeout } from 'ember-concurrency';
+
+export default class InboxDraftDecisionsController extends Controller {
+  @tracked page = 0;
+  @tracked size = 10;
+  @tracked filter = '';
+  @tracked searchValue = this.filter;
+  @tracked debounceTime = 2000;
 
-export default class InboxDraftDecisionsController extends Controller.extend(
-  DefaultQueryParamsMixin
-) {
   @service currentSession;
   @service router;
   sort = '-current-version.updated-on';
 
+  @restartableTask
+  *updateFilter(event) {
+    const input = event.target.value;
+    this.searchValue = input;
+    yield timeout(this.debounceTime);
+    this.filter = this.searchValue;
+    this.page = 0;
+  }
+
   @action
   openNewDocument() {
     this.router.transitionTo('agendapoints.new');
   }
+
   get readOnly() {
     return !this.currentSession.canWrite && this.currentSession.canRead;
   }

diff --git a/app/controllers/inbox/irg-archive.js b/app/controllers/inbox/irg-archive.js
@@ -1,8 +1,20 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
+import { restartableTask, timeout } from 'ember-concurrency';
 
 export default class InboxIrgArchiveController extends Controller {
   @tracked page = 0;
   @tracked size = 10;
   @tracked filter = '';
+  @tracked searchValue = this.filter;
+  @tracked debounceTime = 2000;
+
+  @restartableTask
+  *updateFilter(event) {
+    const input = event.target.value;
+    this.searchValue = input;
+    yield timeout(this.debounceTime);
+    this.filter = this.searchValue;
+    this.page = 0;
+  }
 }
diff --git a/app/routes/inbox/agendapoints.js b/app/routes/inbox/agendapoints.js
@@ -8,7 +8,7 @@ export default class InboxAgendapointsRoute extends Route {
   queryParams = {
     page: { refreshModel: true },
     sort: { refreshModel: true },
-    title: { refreshModel: true },
+    filter: { refreshModel: true },
   };
 
   async model(params) {
@@ -22,8 +22,8 @@ export default class InboxAgendapointsRoute extends Route {
         number: params.page,
       },
     };
-    if (params.title) {
-      options['filter[current-version][title]'] = params.title;
+    if (params.filter) {
+      options['filter[current-version][title]'] = params.filter;
     }
     return this.store.query('document-container', options);
   }

diff --git a/app/routes/inbox/irg-archive.js b/app/routes/inbox/irg-archive.js
@@ -8,7 +8,7 @@ export default class InboxIrgArchiveRoute extends Route {
   queryParams = {
     page: { refreshModel: true },
     sort: { refreshModel: true },
-    title: { refreshModel: true },
+    filter: { refreshModel: true },
   };
 
   async model(params) {
@@ -20,8 +20,8 @@ export default class InboxIrgArchiveRoute extends Route {
         number: params.page,
       },
     };
-    if (params.title) {
-      options['filter[current-version][title]'] = params.title;
+    if (params.filter) {
+      options['filter[current-version][title]'] = params.filter;
     }
     return this.store.query('document-container', options);
   }

diff --git a/app/templates/inbox/agendapoints.hbs b/app/templates/inbox/agendapoints.hbs
@@ -11,7 +11,7 @@
           </AuHeading>
         </AuToolbarGroup>
         <AuToolbarGroup class="au-c-toolbar__group--center">
-          <AuDataTableTextSearch @wait={{2000}} @filter={{this.title}} @placeholder={{t 'inbox.agendapoints.searchPlaceholder'}} />
+          <AuInput @icon="search" @iconAlignment="right" @value={{this.searchValue}} placeholder={{t 'inbox.agendapoints.searchPlaceholder'}} {{on "input" (perform this.updateFilter)}}/>
           {{#unless this.readOnly}}
             <AuLink @route="inbox.agendapoints.new" @skin="button" @icon="add" @iconAlignment="left">{{t "inbox.agendapoints.new.title"}}</AuLink>
           {{/unless}}

diff --git a/app/templates/inbox/irg-archive.hbs b/app/templates/inbox/irg-archive.hbs
@@ -10,7 +10,7 @@
           </AuHeading>
         </Group>
         <Group class="au-c-toolbar__group--center">
-          <AuDataTableTextSearch @wait={{2000}} @filter={{this.title}} @placeholder={{t 'inbox.irgArchive.searchPlaceholder'}} />
+          <AuInput @icon="search" @iconAlignment="right" @width="block" @value={{this.searchValue}} placeholder={{t 'inbox.irgArchive.searchPlaceholder'}} {{on "input" (perform this.updateFilter)}}/>
         </Group>
       </AuToolbar>
     </menu.general>

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
+    "lint:errors": "eslint . --quiet",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",