[FEATURE] Ajouter de la pagination sur la page statistiques (PIX-15683)

 #10794

orga/app/components/statistics/index.gjs

@@ -1,47 +1,81 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
 import { t } from 'ember-intl';
 
 import Header from '../table/header';
 import CoverRateGauge from './cover-rate-gauge';
 import TagLevel from './tag-level';
 
-const analysisByTubes = (model) => {
-  return model.data.sort(
-    (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet.localeCompare(b.sujet),
-  );
-};
-
-<template>
-  <div class="statistics-page__header">
-    <h1 class="page-title">{{t "pages.statistics.title"}}</h1>
-  </div>
-
-  <section class="statistics-page__section">
-    <table class="panel">
-      <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption>
-      <thead>
-        <tr>
-          <Header @size="wide" scope="col">{{t "pages.statistics.table.headers.skills"}}</Header>
-          <Header @size="medium" scope="col">{{t "pages.statistics.table.headers.topics"}}</Header>
-          <Header @size="medium" @align="center" scope="col">{{t "pages.statistics.table.headers.positioning"}}</Header>
-          <Header @align="center" @size="medium" scope="col">{{t
-              "pages.statistics.table.headers.reached-level"
-            }}</Header>
-        </tr>
-      </thead>
-      <tbody>
-        {{#each (analysisByTubes @model) as |line|}}
+export default class Statistics extends Component {
+  @service router;
+
+  get analysisByTubes() {
+    return this.args.model.data.sort(
+      (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet.localeCompare(b.sujet),
+    );
+  }
+
+  get pageSize() {
+    return Number(this.router.currentRoute?.queryParams?.pageSize) || 10;
+  }
+
+  get page() {
+    return Number(this.router.currentRoute?.queryParams?.pageNumber) || 1;
+  }
+
+  get pagination() {
+    return {
+      page: this.page,
+      pageSize: this.pageSize,
+      rowCount: this.analysisByTubes.length,
+      pageCount: Math.ceil(this.analysisByTubes.length / this.pageSize),
+    };
+  }
+
+  get visibleAnalysisByTubes() {
+    const start = this.pageSize * (this.page - 1);
+    const end = this.pageSize * this.page;
+    return this.analysisByTubes.slice(start, end);
+  }
+
+  <template>
+    <div class="statistics-page__header">
+      <h1 class="page-title">{{t "pages.statistics.title"}}</h1>
+    </div>
+
+    <section class="statistics-page__section">
+      <table class="panel">
+        <caption class="screen-reader-only">{{t "pages.statistics.table.caption"}}</caption>
+        <thead>
           <tr>
-            <td>{{line.competence_code}} {{line.competence}}</td>
-            <td>{{line.sujet}}</td>
-            <td>
-              <CoverRateGauge @userLevel={{line.niveau_par_user}} @tubeLevel={{line.niveau_par_sujet}} />
-            </td>
-            <td class="table__column--center">
-              <TagLevel @level={{line.niveau_par_user}} />
-            </td>
+            <Header @size="wide" scope="col">{{t "pages.statistics.table.headers.skills"}}</Header>
+            <Header @size="medium" scope="col">{{t "pages.statistics.table.headers.topics"}}</Header>
+            <Header @size="medium" @align="center" scope="col">{{t
+                "pages.statistics.table.headers.positioning"
+              }}</Header>
+            <Header @align="center" @size="medium" scope="col">{{t
+                "pages.statistics.table.headers.reached-level"
+              }}</Header>
           </tr>
-        {{/each}}
-      </tbody>
-    </table>
-  </section>
-</template>
+        </thead>
+        <tbody>
+          {{#each this.visibleAnalysisByTubes as |line|}}
+            <tr>
+              <td>{{line.competence_code}} {{line.competence}}</td>
+              <td>{{line.sujet}}</td>
+              <td>
+                <CoverRateGauge @userLevel={{line.niveau_par_user}} @tubeLevel={{line.niveau_par_sujet}} />
+              </td>
+              <td class="table__column--center">
+                <TagLevel @level={{line.niveau_par_user}} />
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    </section>
+
+    <PixPagination @pagination={{this.pagination}} />
+  </template>
+}

orga/app/routes/authenticated/statistics.js

@@ -5,6 +5,10 @@ export default class AuthenticatedStatisticsRoute extends Route {
   @service currentUser;
   @service router;
   @service store;
+  queryParams = {
+    pageNumber: { refreshModel: false },
+    pageSize: { refreshModel: false },
+  };
 
   beforeModel() {
     if (!this.currentUser.canAccessStatisticsPage) {

orga/app/styles/components/statistics.scss

@@ -2,6 +2,7 @@
   display: flex;
   gap: var(--pix-spacing-2x);
   align-items: baseline;
+  margin-bottom: var(--pix-spacing-8x);
 }
 
 .statistics-page__section {

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

@@ -1,4 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
+import Service from '@ember/service';
 import { t } from 'ember-intl/test-support';
 import Statistics from 'pix-orga/components/statistics/index';
 import { module, test } from 'qunit';
@@ -59,4 +60,119 @@ module('Integration | Component | Statistics | Index', function (hooks) {
     assert.ok(screen.getByRole('cell', { name: 'Gérer ses contacts' }));
     assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
   });
+
+  module('pagination', function () {
+    test('should have pagination on page', async function (assert) {
+      //given
+      const model = {
+        data: [
+          {
+            competence_code: '2.1',
+            competence: 'Interagir',
+            sujet: 'Gérer ses contacts',
+            niveau_par_user: '1.30',
+            niveau_par_sujet: '1.50',
+          },
+          {
+            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,
+          },
+        };
+      }
+      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: 1, end: 1, total: 2 })));
+      assert.ok(screen.getByLabelText(t('common.pagination.action.select-page-size')));
+      assert.ok(screen.getByRole('button', { name: t('common.pagination.action.previous') }));
+      assert.ok(screen.getByRole('button', { name: t('common.pagination.action.next') }));
+    });
+
+    test('should show first page without pageNumber in query params', async function (assert) {
+      //given
+      const model = {
+        data: [
+          {
+            competence_code: '2.1',
+            competence: 'Interagir',
+            sujet: 'Gérer ses contacts',
+            niveau_par_user: '1.30',
+            niveau_par_sujet: '1.50',
+          },
+          {
+            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,
+          },
+        };
+      }
+      this.owner.register('service:router', Router);
+
+      //when
+      const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+      //then
+      assert.ok(screen.getByRole('cell', { name: '2.1 Interagir' }));
+      assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
+    });
+
+    test('should show specific page when pageNumber is set', async function (assert) {
+      //given
+      const model = {
+        data: [
+          {
+            competence_code: '2.1',
+            competence: 'Foo',
+            sujet: 'Gérer ses contacts',
+            niveau_par_user: '1.30',
+            niveau_par_sujet: '1.50',
+          },
+          {
+            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,
+          },
+        };
+      }
+      this.owner.register('service:router', Router);
+
+      //when
+      const screen = await render(<template><Statistics @model={{model}} /></template>);
+
+      //then
+      assert.ok(screen.getByRole('cell', { name: '2.1 Interagir' }));
+      assert.ok(screen.getByRole('cell', { name: t('pages.statistics.level.novice') }));
+    });
+  });
 });