feat(admin): add select button in users list page

1024pix · Nov 26, 2024 · eb8733a · eb8733a
1 parent bf9f97d
commit eb8733a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 2 deletions.
diff --git a/admin/app/controllers/authenticated/users/list.js b/admin/app/controllers/authenticated/users/list.js
@@ -3,11 +3,18 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 const DEFAULT_PAGE_NUMBER = 1;
+const DEFAULT_QUERY_TYPE = 'CONTAINS';
 
 export default class ListController extends Controller {
-  queryParams = ['pageNumber', 'pageSize', 'id', 'firstName', 'lastName', 'email', 'username'];
+  queryParams = ['pageNumber', 'pageSize', 'id', 'firstName', 'lastName', 'email', 'username', 'queryType'];
+
+  queryTypes = [
+    { value: 'CONTAINS', label: 'Contient' },
+    { value: 'EXACT_QUERY', label: 'Exacte' },
+  ];
 
   @tracked pageNumber = DEFAULT_PAGE_NUMBER;
+  @tracked queryType = DEFAULT_QUERY_TYPE;
   @tracked pageSize = 10;
   @tracked id = null;
   @tracked firstName = null;
@@ -20,6 +27,7 @@ export default class ListController extends Controller {
   @tracked lastNameForm = null;
   @tracked emailForm = null;
   @tracked usernameForm = null;
+  @tracked queryTypeForm = DEFAULT_QUERY_TYPE;
 
   @action
   async refreshModel(event) {
@@ -29,6 +37,7 @@ export default class ListController extends Controller {
     this.lastName = this.lastNameForm;
     this.email = this.emailForm;
     this.username = this.usernameForm;
+    this.queryType = this.queryTypeForm;
     this.pageNumber = DEFAULT_PAGE_NUMBER;
   }
 
@@ -56,6 +65,10 @@ export default class ListController extends Controller {
   onChangeUsername(event) {
     this.usernameForm = event.target.value;
   }
+  @action
+  onChangeQueryType(event) {
+    this.queryTypeForm = event;
+  }
 
   @action
   clearSearchFields() {
@@ -64,11 +77,13 @@ export default class ListController extends Controller {
     this.lastName = null;
     this.email = null;
     this.username = null;
+    this.queryType = DEFAULT_QUERY_TYPE;
 
     this.idForm = null;
     this.firstNameForm = null;
     this.lastNameForm = null;
     this.emailForm = null;
     this.usernameForm = null;
+    this.queryTypeForm = DEFAULT_QUERY_TYPE;
   }
 }
diff --git a/admin/app/routes/authenticated/users/list.js b/admin/app/routes/authenticated/users/list.js
@@ -7,6 +7,7 @@ export default class ListRoute extends Route {
   queryParams = {
     pageNumber: { refreshModel: true },
     pageSize: { refreshModel: true },
+    queryType: { refreshModel: true },
     id: { refreshModel: true },
     firstName: { refreshModel: true },
     lastName: { refreshModel: true },
@@ -30,6 +31,7 @@ export default class ListRoute extends Route {
           number: params.pageNumber,
           size: params.pageSize,
         },
+        queryType: params.queryType,
       });
       return users;
     } catch (error) {
@@ -46,6 +48,7 @@ export default class ListRoute extends Route {
       controller.lastName = null;
       controller.email = null;
       controller.username = null;
+      controller.queryType = 'CONTAINS';
     }
   }
 }
diff --git a/admin/app/styles/authenticated/users/list.scss b/admin/app/styles/authenticated/users/list.scss
@@ -1,11 +1,21 @@
+.pix-select {
+  min-width: 110px;
+  margin-right: 16px;
+}
+
+.pix-select .pix-icon {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
 .user-list-form {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 
   &__input--small {
-    max-width: 190px;
+    max-width: 150px;
   }
 
   &__actions {

diff --git a/admin/app/templates/authenticated/users/list.hbs b/admin/app/templates/authenticated/users/list.hbs
@@ -4,6 +4,14 @@
   <h1 class="page-title">Rechercher un(des) utilisateur(s)</h1>
   <div class="page-actions">
     <form class="user-list-form" {{on "submit" this.refreshModel}}>
+      <PixSelect
+        @id="query-type-selector"
+        @onChange={{this.onChangeQueryType}}
+        @value={{this.queryTypeForm}}
+        @options={{this.queryTypes}}
+      >
+        <:default>Contient</:default>
+      </PixSelect>
       <PixInput
         @id="userId"
         {{on "change" this.onChangeUserId}}

diff --git a/admin/tests/acceptance/authenticated/users/list-test.js b/admin/tests/acceptance/authenticated/users/list-test.js
@@ -182,6 +182,9 @@ module('Acceptance | authenticated/users | list', function (hooks) {
             identifiant: 'emma123',
           });
           const screen = await visit('/users/list');
+          await click(screen.getByRole('button', { name: 'Contient' }));
+          await screen.findByRole('listbox');
+          await click(screen.getByRole('option', { name: 'Exacte' }));
           await fillIn(screen.getByRole('textbox', { name: 'Nom' }), 'sardine');
           await fillIn(screen.getByRole('textbox', { name: 'Adresse e-mail' }), '[email protected]');
           await fillIn(screen.getByRole('textbox', { name: 'Identifiant' }), 'emma123');
@@ -194,6 +197,8 @@ module('Acceptance | authenticated/users | list', function (hooks) {
           assert.dom(screen.getByRole('textbox', { name: 'Nom' })).hasNoValue();
           assert.dom(screen.getByRole('textbox', { name: 'Adresse e-mail' })).hasNoValue();
           assert.dom(screen.getByRole('textbox', { name: 'Identifiant' })).hasNoValue();
+          assert.dom(screen.getByRole('button', { name: 'Contient' })).exists();
+          assert.dom(screen.queryByRole('button', { name: 'Exacte' })).doesNotExist();
         });
 
         test('should let empty fields on search', async function (assert) {

diff --git a/admin/tests/unit/routes/authenticated/users/list-test.js b/admin/tests/unit/routes/authenticated/users/list-test.js
@@ -23,6 +23,8 @@ module('Unit | Route | authenticated/users/list', function (hooks) {
         number: 'somePageNumber',
         size: 'somePageSize',
       };
+      params.queryType = 'CONTAINS';
+      expectedQueryArgs.queryType = 'CONTAINS';
     });
 
     module('when queryParams filters are falsy', function () {
@@ -36,6 +38,7 @@ module('Unit | Route | authenticated/users/list', function (hooks) {
           email: '',
           username: '',
         };
+        expectedQueryArgs.queryType = 'CONTAINS';
 
         // then
         sinon.assert.notCalled(route.store.query);
@@ -96,6 +99,7 @@ module('Unit | Route | authenticated/users/list', function (hooks) {
         lastName: 'someLastName',
         email: 'someEmail',
         username: 'someUsername',
+        queryType: 'EXACT_QUERY',
       };
     });
 
@@ -112,6 +116,7 @@ module('Unit | Route | authenticated/users/list', function (hooks) {
         assert.deepEqual(controller.lastName, null);
         assert.deepEqual(controller.email, null);
         assert.deepEqual(controller.username, null);
+        assert.deepEqual(controller.queryType, 'CONTAINS');
       });
     });
 
@@ -128,6 +133,7 @@ module('Unit | Route | authenticated/users/list', function (hooks) {
         assert.deepEqual(controller.lastName, 'someLastName');
         assert.deepEqual(controller.email, 'someEmail');
         assert.deepEqual(controller.username, 'someUsername');
+        assert.deepEqual(controller.queryType, 'EXACT_QUERY');
       });
     });
   });