feat(admin): add autonomous courses list filters

1024pix · Jan 16, 2025 · b55c153 · b55c153
1 parent a257a19
commit b55c153
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 34 deletions.
diff --git a/admin/app/components/autonomous-courses/list/index.gjs b/admin/app/components/autonomous-courses/list/index.gjs
@@ -1,39 +1,76 @@
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import { fn } from '@ember/helper';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 
 import ListItem from './item';
 
-<template>
-  <div class="content-text content-text--small">
-    <div class="table-admin">
-      <table>
-        <caption class="screen-reader-only">{{t "components.autonomous-courses.list.title"}}</caption>
-        <thead>
-          <tr>
-            <th scope="col" class="table__column table__column--id">{{t
-                "components.autonomous-courses.list.headers.id"
-              }}</th>
-            <th scope="col">{{t "components.autonomous-courses.list.headers.name"}}</th>
-            <th scope="col" class="table__column table__medium">{{t
-                "components.autonomous-courses.list.headers.createdAt"
-              }}</th>
-            <th scope="col" class="table__column table__medium">{{t
-                "components.autonomous-courses.list.headers.status"
-              }}</th>
-          </tr>
-        </thead>
-
-        {{#if @items}}
-          <tbody>
-            {{#each @items as |autonomousCourseListItem|}}
-              <ListItem @item={{autonomousCourseListItem}} />
-            {{/each}}
-          </tbody>
-        {{/if}}
-      </table>
-
-      {{#unless @items}}
-        <div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
-      {{/unless}}
+export default class AutonomousCoursesList extends Component {
+  @tracked items;
+
+  get filteredItems() {
+    return this.items || this.args.items;
+  }
+
+  @action
+  triggerFiltering(key, event) {
+    const normalizeText = (text) =>
+      text
+        .toUpperCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .trim();
+
+    const valueToSearch = normalizeText(event.target.value);
+
+    this.items = this.args.items.filter((item) => !valueToSearch || normalizeText(item[key]).includes(valueToSearch));
+  }
+
+  <template>
+    <div class="content-text content-text--small">
+      <div class="table-admin">
+        <table>
+          <caption class="screen-reader-only">{{t "components.autonomous-courses.list.title"}}</caption>
+          <thead>
+            <tr>
+              <th scope="col" class="table__column table__column--id">{{t
+                  "components.autonomous-courses.list.headers.id"
+                }}</th>
+              <th scope="col">{{t "components.autonomous-courses.list.headers.name"}}</th>
+              <th scope="col" class="table__column table__medium">{{t
+                  "components.autonomous-courses.list.headers.createdAt"
+                }}</th>
+              <th scope="col" class="table__column table__medium">{{t
+                  "components.autonomous-courses.list.headers.status"
+                }}</th>
+            </tr>
+            <tr>
+              <td>
+                <PixInput type="text" oninput={{fn this.triggerFiltering "id"}} placeholder="Filtrer par ID" />
+              </td>
+              <td>
+                <PixInput type="text" oninput={{fn this.triggerFiltering "name"}} placeholder="Filtrer par nom" />
+              </td>
+              <td></td>
+              <td></td>
+            </tr>
+          </thead>
+
+          {{#if this.filteredItems}}
+            <tbody>
+              {{#each this.filteredItems as |autonomousCourseListItem|}}
+                <ListItem @item={{autonomousCourseListItem}} />
+              {{/each}}
+            </tbody>
+          {{/if}}
+        </table>
+
+        {{#unless @items}}
+          <div class="table__empty">{{t "components.autonomous-courses.list.no-result"}}</div>
+        {{/unless}}
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+}
diff --git a/admin/tests/integration/components/autonomous-courses/list/index-test.gjs b/admin/tests/integration/components/autonomous-courses/list/index-test.gjs
@@ -1,4 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
+import { fillIn } from '@ember/test-helpers';
 import List from 'pix-admin/components/autonomous-courses/list';
 import { module, test } from 'qunit';
 
@@ -59,4 +60,56 @@ module('Integration | Component | AutonomousCourses | List', function (hooks) {
     // then
     assert.dom(screen.getByText('Archivé')).exists();
   });
+
+  module('filterable columns', function () {
+    test('it should be possible to filter ID column', async function (assert) {
+      // given
+      const autonomousCoursesList = [
+        {
+          id: '1002',
+          name: 'Parcours autonome qui va être filtré',
+          createdAt: new Date('2023-01-01'),
+        },
+        {
+          id: '999',
+          name: 'Parcours autonome avec un 9 dedans',
+          createdAt: new Date('2023-01-01'),
+          archivedAt: new Date('2023-02-02'),
+        },
+      ];
+
+      // when
+      const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
+      await fillIn(screen.getByPlaceholderText('Filtrer par ID'), 9);
+
+      // then
+      assert.dom(screen.getByText('Parcours autonome avec un 9 dedans')).exists();
+      assert.dom(screen.queryByText('Parcours autonome qui va être filtré')).doesNotExist();
+    });
+
+    test('it should be possible to filter name column', async function (assert) {
+      // given
+      const autonomousCoursesList = [
+        {
+          id: '1002',
+          name: 'Parcours autonome qui va être filtré',
+          createdAt: new Date('2023-01-01'),
+        },
+        {
+          id: '999',
+          name: 'Parcours autonome avec un 9 dedans',
+          createdAt: new Date('2023-01-01'),
+          archivedAt: new Date('2023-02-02'),
+        },
+      ];
+
+      // when
+      const screen = await render(<template><List @items={{autonomousCoursesList}} /></template>);
+      await fillIn(screen.getByPlaceholderText('Filtrer par nom'), 'qui va être filtré');
+
+      // then
+      assert.dom(screen.getByText('Parcours autonome qui va être filtré')).exists();
+      assert.dom(screen.queryByText('Parcours autonome avec un 9 dedans')).doesNotExist();
+    });
+  });
 });