Merge pull request #246 from lblod/GN-4936

Add search to the snippet management page

.changeset/unlucky-seals-collect.md

@@ -0,0 +1,5 @@
+---
+"frontend-reglementaire-bijlage": minor
+---
+
+Add search field on snippet list page

app/controllers/snippet-management/index.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
@@ -17,6 +18,19 @@ export default class SnippetManagementIndexController extends Controller {
   @tracked isRemoveModalOpen = false;
   @tracked deletingSnippetList;
 
+  updateSearchFilterTask = restartableTask(
+    async (queryParamProperty, event) => {
+      await timeout(300);
+
+      this[queryParamProperty] = event.target.value.trim();
+      this.resetPagination();
+    },
+  );
+
+  resetPagination() {
+    this.page = 0;
+  }
+
   removeSnippetList = task(async () => {
     const snippets = await this.deletingSnippetList.snippets;
 

app/routes/snippet-management/index.js

@@ -6,6 +6,7 @@ export default class SnippetManagementIndexRoute extends Route {
   @service currentSession;
 
   queryParams = {
+    label: { refreshModel: true },
     page: { refreshModel: true },
     size: { refreshModel: true },
     sort: { refreshModel: true },
@@ -25,6 +26,10 @@ export default class SnippetManagementIndexRoute extends Route {
       },
     };
 
+    if (params.label) {
+      query.filter.label = params.label;
+    }
+
     return this.store.query('snippet-list', query);
   }
 }

app/templates/codelist-management/index.hbs

@@ -16,7 +16,7 @@
         </Group>
         <Group class="au-c-toolbar__group--center">
           {{! Copied from the AuDataTable::TextSearch component since that doesn't support calling actions on input}}
-          <div class="au-c-data-table__search codelist-label-search">
+          <div class="au-c-data-table__search">
             <input
               value={{this.label}}
               placeholder={{t "codelist.crud.label-filter"}}

app/templates/snippet-management/index.hbs

@@ -16,6 +16,18 @@
             </AuHeading>
           </Group>
           <Group>
+            <div class="au-c-data-table__search">
+              <input
+                value={{this.label}}
+                placeholder={{t "snippets.crud.label-filter"}}
+                aria-label={{t "snippets.crud.label-filter"}}
+                class="au-c-input au-c-input--block"
+                {{on "input" (perform this.updateSearchFilterTask "label")}}
+              />
+              <span class="au-c-data-table__search-icon">
+                <AuIcon @icon="search" @size="large" />
+              </span>
+            </div>
             <AuLink
               @skin="button"
               @route="snippet-management.new"

app/templates/template-management/index.hbs

@@ -17,7 +17,7 @@
           </AuHeading>
         </Group>
         <Group class="au-c-toolbar__group--center">
-          <div class="au-c-data-table__search codelist-label-search">
+          <div class="au-c-data-table__search ">
             <input
               aria-label={{t "template-management.crud.label-filter"}}
               value={{this.title}}

translations/en-us.yaml

@@ -146,6 +146,7 @@ snippets:
   add-new-snippet: Add new snippet
   saved: Saved
   crud:
+    label-filter: Label
     no-data: No snippet lists were found
     confirm-deletion: Confirm to delete snippet list <strong>{name}</strong>
     confirm-deletion-snippet: Confirm to delete snippet <strong>{name}</strong>

translations/nl-BE.yaml

@@ -146,6 +146,7 @@ snippets:
   add-new-snippet: Nieuw fragment toevoegen
   saved: Opgeslagen
   crud:
+    label-filter: Label
     no-data: Geen fragmenten gevonden
     confirm-deletion: Bevestig om fragmentenlijst <strong>{name}</strong> te verwijderen
     confirm-deletion-snippet: Bevestig om fragment <strong>{name}</strong> te verwijderen