[FEATURE] Ajouter les filtres par domaines sur la page statistiques (P…

…IX-15725)

 #10808

orga/app/components/attestations/sixth-grade.gjs

@@ -38,7 +38,7 @@ export default class AttestationsSixthGrade extends Component {
         @options={{@divisions}}
         @values={{this.selectedDivisions}}
         @onChange={{this.onSelectDivision}}
-        @placeholder={{t "pages.attestations.placeholder"}}
+        @placeholder={{t "common.filters.placeholder"}}
       >
         <:label>{{t "pages.attestations.select-label"}}</:label>
         <:default as |option|>{{option.label}}</:default>

orga/app/components/statistics/index.gjs

@@ -1,6 +1,9 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import dayjs from 'dayjs';
 import { t } from 'ember-intl';
 
@@ -11,12 +14,48 @@ import TagLevel from './tag-level';
 export default class Statistics extends Component {
   @service router;
 
+  @tracked currentDomainFilter = null;
+
   get analysisByTubes() {
     return this.args.model.data.sort(
       (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet.localeCompare(b.sujet),
     );
   }
 
+  get analysisByDomains() {
+    return this.analysisByTubes.reduce((acc, line) => {
+      const domain = line.domaine;
+      if (acc[domain]) {
+        acc[domain].push(line);
+      } else {
+        acc[domain] = [line];
+      }
+      return acc;
+    }, {});
+  }
+
+  get currentAnalysis() {
+    if (this.currentDomainFilter !== null) {
+      return this.analysisByDomains[this.currentDomainFilter];
+    }
+    return this.analysisByTubes;
+  }
+
+  get currentVisibleAnalysis() {
+    const start = this.pageSize * (this.page - 1);
+    const end = this.pageSize * this.page;
+    return this.currentAnalysis.slice(start, end);
+  }
+
+  get domainsName() {
+    return Object.keys(this.analysisByDomains).map((value) => {
+      return {
+        label: value,
+        value,
+      };
+    });
+  }
+
   get pageSize() {
     return Number(this.router.currentRoute?.queryParams?.pageSize) || 10;
   }
@@ -29,16 +68,20 @@ export default class Statistics extends Component {
     return {
       page: this.page,
       pageSize: this.pageSize,
-      rowCount: this.analysisByTubes.length,
-      pageCount: Math.ceil(this.analysisByTubes.length / this.pageSize),
+      rowCount: this.currentAnalysis.length,
+      pageCount: Math.ceil(this.currentAnalysis.length / this.pageSize),
     };
   }
 
-  get visibleAnalysisByTubes() {
-    const start = this.pageSize * (this.page - 1);
-    const end = this.pageSize * this.page;
-    return this.analysisByTubes.slice(start, end);
-  }
+  handleDomainFilter = (domain) => {
+    this.currentDomainFilter = domain;
+    this.router.replaceWith({ queryParams: { pageNumber: 1 } });
+  };
+
+  removeFilter = () => {
+    this.currentDomainFilter = null;
+    this.router.replaceWith({ queryParams: { pageNumber: 1 } });
+  };
 
   get extractedDate() {
     return dayjs(this.analysisByTubes[0]?.extraction_date).format('D MMM YYYY');
@@ -51,6 +94,21 @@ export default class Statistics extends Component {
         {{this.extractedDate}}</span>
     </div>
 
+    <section class="statistics-page__filter">
+      <PixSelect
+        @onChange={{this.handleDomainFilter}}
+        @value={{this.currentDomainFilter}}
+        @options={{this.domainsName}}
+        @placeholder={{t "common.filters.placeholder"}}
+        @hideDefaultOption={{true}}
+      >
+        <:label>{{t "pages.statistics.select-label"}}</:label>
+      </PixSelect>
+      <PixButton @size="small" @variant="tertiary" @triggerAction={{this.removeFilter}}>{{t
+          "common.filters.actions.clear"
+        }}</PixButton>
+    </section>
+
     <section class="statistics-page__section">
       <table class="panel">
         <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption>
@@ -67,7 +125,7 @@ export default class Statistics extends Component {
           </tr>
         </thead>
         <tbody>
-          {{#each this.visibleAnalysisByTubes as |line|}}
+          {{#each this.currentVisibleAnalysis as |line|}}
             <tr>
               <td>{{line.competence_code}} {{line.competence}}</td>
               <td>{{line.sujet}}</td>

orga/app/styles/components/statistics.scss

@@ -16,3 +16,10 @@
     }
   }
 }
+
+.statistics-page__filter {
+  display: flex;
+  gap: var(--pix-spacing-4x);
+  align-items: end;
+  margin-bottom: var(--pix-spacing-8x);
+}

orga/tests/integration/components/attestations/sixth-grade-test.gjs

@@ -21,7 +21,7 @@ module('Integration | Component | Attestations | Sixth-grade', function (hooks)
     assert.ok(screen.getByRole('heading', { name: t('pages.attestations.title') }));
     assert.ok(screen.getByText(t('pages.attestations.description')));
     assert.ok(screen.getByRole('textbox', { name: t('pages.attestations.select-label') }));
-    assert.ok(screen.getByPlaceholderText(t('pages.attestations.placeholder')));
+    assert.ok(screen.getByPlaceholderText(t('common.filters.placeholder')));
     assert.ok(screen.getByRole('button', { name: t('pages.attestations.download-attestations-button') }));
   });
 

orga/tests/integration/components/statistics/index-test.gjs

@@ -1,5 +1,6 @@
-import { render } from '@1024pix/ember-testing-library';
+import { clickByName, render } from '@1024pix/ember-testing-library';
 import Service from '@ember/service';
+import { click } from '@ember/test-helpers';
 import dayjs from 'dayjs';
 import { t } from 'ember-intl/test-support';
 import Statistics from 'pix-orga/components/statistics/index';
@@ -55,6 +56,7 @@ module('Integration | Component | Statistics | Index', function (hooks) {
     const model = {
       data: [
         {
+          domaine: '2. Communication et collaboration',
           competence_code: '2.1',
           competence: 'Interagir',
           sujet: 'Gérer ses contacts',
@@ -79,13 +81,15 @@ module('Integration | Component | Statistics | Index', function (hooks) {
       const model = {
         data: [
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Interagir',
             sujet: 'Gérer ses contacts',
             niveau_par_user: '1.30',
             niveau_par_sujet: '1.50',
           },
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Interagir',
             sujet: 'Gérer ses contacts',
@@ -117,13 +121,15 @@ module('Integration | Component | Statistics | Index', function (hooks) {
       const model = {
         data: [
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Interagir',
             sujet: 'Gérer ses contacts',
             niveau_par_user: '1.30',
             niveau_par_sujet: '1.50',
           },
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Interagir',
             sujet: 'Gérer ses contacts',
@@ -154,13 +160,15 @@ module('Integration | Component | Statistics | Index', function (hooks) {
       const model = {
         data: [
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Foo',
             sujet: 'Gérer ses contacts',
             niveau_par_user: '1.30',
             niveau_par_sujet: '1.50',
           },
           {
+            domaine: '2. Communication et collaboration',
             competence_code: '2.1',
             competence: 'Interagir',
             sujet: 'Gérer ses contacts',
@@ -187,4 +195,66 @@ module('Integration | Component | Statistics | Index', function (hooks) {
       assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
     });
   });
+
+  module('filter', function () {
+    test('should filtered analysis', async function (assert) {
+      //given
+      const model = {
+        data: [
+          {
+            domaine: '1. Information et données',
+            competence_code: '1.1 ',
+            competence: 'Mener une recherche et une veille d’information',
+            sujet: "Indices de qualité d'une page web",
+            niveau_par_user: '1.30',
+            niveau_par_sujet: '1.50',
+          },
+          {
+            domaine: '2. Communication et collaboration',
+            competence_code: '2.1',
+            competence: 'Interagir',
+            sujet: 'Gérer ses contacts',
+            niveau_par_user: '1.30',
+            niveau_par_sujet: '1.50',
+          },
+        ],
+      };
+      class Router extends Service {
+        currentRoute = {
+          queryParams: {
+            pageSize: 1,
+            pageNumber: 2,
+          },
+        };
+        replaceWith = ({ queryParams }) => {
+          this.currentRoute.queryParams.pageNumber = queryParams.pageNumber;
+        };
+      }
+      this.owner.register('service:router', Router);
+
+      //when
+      const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+      //then
+      assert.ok(screen.getByText(t('common.pagination.page-info', { start: 2, end: 2, total: 2 })));
+
+      // when
+      const select = screen.getByRole('button', { name: t('pages.statistics.select-label') });
+      await click(select);
+      const option = await screen.findByRole('option', { name: '2. Communication et collaboration' });
+      await click(option);
+
+      // then
+      assert.ok(screen.getByText(t('common.pagination.page-results', { total: 1 })));
+      assert.ok(screen.getByRole('cell', { name: '2.1 Interagir' }));
+      assert.ok(screen.getByRole('cell', { name: 'Gérer ses contacts' }));
+      assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
+
+      // when
+      await clickByName(t('common.filters.actions.clear'));
+
+      // then
+      assert.ok(screen.getByText(t('common.pagination.page-info', { start: 1, end: 1, total: 2 })));
+    });
+  });
 });

orga/translations/en.json

@@ -228,7 +228,8 @@
         "label": "Search by last name and first name",
         "placeholder": "Last name, first name"
       },
-      "loading": "Loading..."
+      "loading": "Loading...",
+      "placeholder": "-- Select --"
     },
     "form": {
       "mandatory-all-fields": "All fields are required.",
@@ -420,7 +421,6 @@
       "description": "Select the class for which you wish to export attestations in PDF format.",
       "download-attestations-button": "Download",
       "no-attestations": "No attestation available",
-      "placeholder": "-- Select --",
       "select-label": "Select one or more classes"
     },
     "campaign": {
@@ -1473,6 +1473,7 @@
         "independent": "independent",
         "novice": "novice"
       },
+      "select-label": "Domain",
       "table": {
         "caption": "This table displays the analysis of all participants' results by topic. For each line, it shows the skill, the topic, the coverage rate and the level achieved.",
         "headers": {

orga/translations/fr.json

@@ -228,7 +228,8 @@
         "label": "Recherche sur le nom et prénom",
         "placeholder": "Nom, prénom"
       },
-      "loading": "Chargement..."
+      "loading": "Chargement...",
+      "placeholder": "-- Sélectionner --"
     },
     "form": {
       "mandatory-all-fields": "Tous les champs sont obligatoires.",
@@ -426,7 +427,6 @@
       "description": "Sélectionnez la classe pour laquelle vous souhaitez exporter les attestations au format PDF.",
       "download-attestations-button": "Télécharger",
       "no-attestations": "Aucune attestation disponible pour votre sélection",
-      "placeholder": "-- Sélectionner --",
       "select-label": "Sélectionnez une ou plusieurs classes"
     },
     "campaign": {
@@ -1479,6 +1479,7 @@
         "independent": "indépendant",
         "novice": "novice"
       },
+      "select-label": "Domaine",
       "table": {
         "caption": "Ce tableau affiche l'analyse des résultats de tous les participants par sujets. Il indique pour chaque ligne la compétence, le sujet, le taux de couverture ainsi que le niveau atteint",
         "headers": {

orga/translations/nl.json

@@ -228,6 +228,7 @@
         "placeholder": "Achternaam, voornaam"
       },
       "loading": "Laden...",
+      "placeholder": "-- Selecteer --",
       "title": "Filters"
     },
     "form": {
@@ -420,7 +421,6 @@
       "title": "Certificaten",
       "description": "Selecteer de klas waarvoor je de attesten in PDF-formaat wilt exporteren.",
       "download-attestations-button": "Downloaden",
-      "placeholder": "-- Selecteer --",
       "select-label": "Selecteer een of meer klassen"
     },
     "campaign-activity": {
@@ -1462,6 +1462,7 @@
       "title": "{count, plural, =0 {Studenten} =1 {Studenten ({count})} other {studenten ({count})}}"
     },
     "statistics": {
+      "select-label": "Domein",
       "title": "Statistieken",
       "before-date": "op",
       "gauge": {