refactor(orga): use PixPagination when possible

orga/app/components/campaign/activity/participants-list.gjs

@@ -1,4 +1,5 @@
 import PixIconButton from '@1024pix/pix-ui/components/pix-icon-button';
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import { array, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
@@ -9,7 +10,6 @@ import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 
 import TableHeader from '../../table/header';
-import PaginationControl from '../../table/pagination-control';
 import ParticipationStatus from '../../ui/participation-status';
 import ParticipationFilters from '../filter/participation-filters';
 import DeleteParticipationModal from './delete-participation-modal';
@@ -23,10 +23,23 @@ export default class ParticipantsList extends Component {
   @tracked isModalOpen = false;
   @tracked participationToDelete;
 
+  get currentLocale() {
+    return this.intl.primaryLocale;
+  }
+
   get canDeleteParticipation() {
     return this.currentUser.isAdminInOrganization || this.args.campaign.ownerId == this.currentUser.prescriber?.id;
   }
 
+  get pageOptions() {
+    return [
+      { label: '10', value: 10 },
+      { label: '25', value: 25 },
+      { label: '50', value: 50 },
+      { label: '100', value: 100 },
+    ];
+  }
+
   @action
   openModal(participation, event) {
     event.stopPropagation();
@@ -165,7 +178,11 @@ export default class ParticipantsList extends Component {
       </div>
 
       {{#if @participations}}
-        <PaginationControl @pagination={{@participations.meta}} />
+        <PixPagination
+          @pagination={{@participations.meta}}
+          @locale={{this.getCurrentLocale}}
+          @pageOptions={{this.pageOptions}}
+        />
       {{/if}}
 
       <DeleteParticipationModal

orga/app/components/campaign/results/assessment-list.gjs

@@ -1,11 +1,21 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import { t } from 'ember-intl';
 
+import getService from '../../../helpers/get-service.js';
 import TableHeader from '../../table/header';
-import TablePaginationControl from '../../table/pagination-control';
 import CampaignParticipationFilters from '../filter/participation-filters';
 import CampaignAssessmentRow from '../results/assessment-row';
 import EvolutionHeader from './evolution-header';
 
+function pageOptions() {
+  return [
+    { label: '10', value: 10 },
+    { label: '25', value: 25 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ];
+}
+
 <template>
   <section ...attributes>
     <h3 class="screen-reader-only">{{t "pages.campaign-results.table.title"}}</h3>
@@ -87,7 +97,13 @@ import EvolutionHeader from './evolution-header';
     </div>
 
     {{#if @participations}}
-      <TablePaginationControl @pagination={{@participations.meta}} />
+      {{#let (getService "service:intl") as |intl|}}
+        <PixPagination
+          @pagination={{@participations.meta}}
+          @locale={{intl.primaryLocale}}
+          @pageOptions={{(pageOptions)}}
+        />
+      {{/let}}
     {{/if}}
   </section>
 </template>

orga/app/components/campaign/results/profile-list.gjs

@@ -1,3 +1,4 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import PixTag from '@1024pix/pix-ui/components/pix-tag';
 import { array, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -6,12 +7,21 @@ import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
 import { t } from 'ember-intl';
 import { gt } from 'ember-truth-helpers';
 
+import getService from '../../../helpers/get-service.js';
 import TableHeader from '../../table/header';
-import TablePaginationControl from '../../table/pagination-control';
 import CampaignParticipationFilters from '../filter/participation-filters';
 import EvolutionHeader from './evolution-header';
 import ParticipationEvolutionIcon from './participation-evolution-icon';
 
+function pageOptions() {
+  return [
+    { label: '10', value: 10 },
+    { label: '25', value: 25 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ];
+}
+
 <template>
   <section ...attributes>
     <h3 class="screen-reader-only">{{t "pages.profiles-list.table.title"}}</h3>
@@ -144,7 +154,9 @@ import ParticipationEvolutionIcon from './participation-evolution-icon';
     </div>
 
     {{#if (gt @profiles.length 0)}}
-      <TablePaginationControl @pagination={{@profiles.meta}} />
+      {{#let (getService "service:intl") as |intl|}}
+        <PixPagination @pagination={{@profiles.meta}} @locale={{intl.primaryLocale}} @pageOptions={{(pageOptions)}} />
+      {{/let}}
     {{/if}}
   </section>
 </template>

orga/app/components/mission/activity-table.gjs

@@ -1,9 +1,9 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import PixTag from '@1024pix/pix-ui/components/pix-tag';
 import { t } from 'ember-intl';
 
+import getService from '../../helpers/get-service.js';
 import Header from '../table/header';
-import PaginationControl from '../table/pagination-control';
-
 function statusColor(status) {
   return {
     'not-started': 'tertiary',
@@ -12,6 +12,15 @@ function statusColor(status) {
   }[status];
 }
 
+function pageOptions() {
+  return [
+    { label: '10', value: 10 },
+    { label: '25', value: 25 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ];
+}
+
 <template>
   {{#if @missionLearners}}
     <div class="panel">
@@ -51,7 +60,13 @@ function statusColor(status) {
         </tbody>
       </table>
     </div>
-    <PaginationControl @pagination={{@missionLearners.meta}} />
+    {{#let (getService "service:intl") as |intl|}}
+      <PixPagination
+        @pagination={{@missionLearners.meta}}
+        @locale={{intl.primaryLocale}}
+        @pageOptions={{(pageOptions)}}
+      />
+    {{/let}}
   {{else}}
     <div class="table__empty content-text">
       {{t "pages.missions.mission.table.activities.no-data"}}

orga/app/components/mission/result-table.gjs

@@ -1,10 +1,11 @@
 import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import PixTag from '@1024pix/pix-ui/components/pix-tag';
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { t } from 'ember-intl';
 
+import getService from '../../helpers/get-service.js';
 import Header from '../table/header';
-import PaginationControl from '../table/pagination-control';
 
 function indexNumber(index) {
   return { number: index + 1 };
@@ -25,6 +26,15 @@ function getMissionResultColor(result) {
   }[result];
 }
 
+function pageOptions() {
+  return [
+    { label: '10', value: 10 },
+    { label: '25', value: 25 },
+    { label: '50', value: 50 },
+    { label: '100', value: 100 },
+  ];
+}
+
 <template>
   {{#if @missionLearners}}
     <div class="panel">
@@ -98,7 +108,13 @@ function getMissionResultColor(result) {
         </tbody>
       </table>
     </div>
-    <PaginationControl @pagination={{@missionLearners.meta}} />
+    {{#let (getService "service:intl") as |intl|}}
+      <PixPagination
+        @pagination={{@missionLearners.meta}}
+        @locale={{intl.primaryLocale}}
+        @pageOptions={{(pageOptions)}}
+      />
+    {{/let}}
   {{else}}
     <div class="table__empty content-text">
       {{t "pages.missions.mission.table.result.no-data"}}

orga/app/components/statistics/index.gjs

@@ -14,9 +14,14 @@ import TagLevel from './tag-level';
 
 export default class Statistics extends Component {
   @service router;
+  @service intl;
 
   @tracked currentDomainFilter = null;
 
+  get currentLocale() {
+    return this.intl.primaryLocale;
+  }
+
   get analysisByTubes() {
     return this.args.model.data.sort(
       (a, b) => a.competence_code.localeCompare(b.competence_code) || a.sujet?.localeCompare(b.sujet),
@@ -74,6 +79,15 @@ export default class Statistics extends Component {
     };
   }
 
+  get pageOptions() {
+    return [
+      { label: '10', value: 10 },
+      { label: '25', value: 25 },
+      { label: '50', value: 50 },
+      { label: '100', value: 100 },
+    ];
+  }
+
   handleDomainFilter = (domain) => {
     this.currentDomainFilter = domain;
     this.router.replaceWith({ queryParams: { pageNumber: 1 } });
@@ -152,6 +166,6 @@ export default class Statistics extends Component {
       </table>
     </section>
 
-    <PixPagination @pagination={{this.pagination}} />
+    <PixPagination @pagination={{this.pagination}} @locale={{this.currentLocale}} @pageOptions={{this.pageOptions}} />
   </template>
 }

orga/app/components/team/members-list.hbs

@@ -36,5 +36,5 @@
 </div>
 
 {{#if @members}}
-  <Table::PaginationControl @pagination={{@members.meta}} />
+  <PixPagination @pagination={{@members.meta}} @locale={{this.currentLocale}} @pageOptions={{this.pageOptions}} />
 {{/if}}

orga/app/components/team/members-list.js

@@ -3,6 +3,11 @@ import Component from '@glimmer/component';
 
 export default class MembersList extends Component {
   @service currentUser;
+  @service intl;
+
+  get currentLocale() {
+    return this.intl.primaryLocale;
+  }
 
   get displayManagingColumn() {
     return this.currentUser.isAdminInOrganization;
@@ -11,4 +16,13 @@ export default class MembersList extends Component {
   get isMultipleAdminsAvailable() {
     return this.args.members?.filter((member) => member.isAdmin).length > 1;
   }
+
+  get pageOptions() {
+    return [
+      { label: '10', value: 10 },
+      { label: '25', value: 25 },
+      { label: '50', value: 50 },
+      { label: '100', value: 100 },
+    ];
+  }
 }

orga/app/styles/components/pagination-control.scss

@@ -1,7 +1,6 @@
 .pagination-control {
   display: flex;
   justify-content: space-between;
-  margin: 16px 0;
   color: var(--pix-neutral-500);
   font-size: 0.875rem;
   font-family: $font-roboto;

orga/app/styles/globals/panels.scss

@@ -1,6 +1,7 @@
 .panel {
   @extend %pix-shadow-xs;
 
+  margin-bottom: var(--pix-spacing-8x);
   background-color: var(--pix-neutral-0);
   border: none;
   border-radius: 4px;