feat(orga): use pix table on organization participant (generic)

1024pix · Feb 28, 2025 · 4be01a8 · 4be01a8
1 parent 0c6126b
commit 4be01a8
Show file tree

Hide file tree

Showing 9 changed files with 406 additions and 746 deletions.
diff --git a/orga/app/components/organization-participant/action-bar.gjs b/orga/app/components/organization-participant/action-bar.gjs
diff --git a/orga/app/components/organization-participant/list.gjs b/orga/app/components/organization-participant/list.gjs
diff --git a/orga/app/components/organization-participant/table-headers.gjs b/orga/app/components/organization-participant/table-headers.gjs
diff --git a/orga/app/components/organization-participant/table-row.gjs b/orga/app/components/organization-participant/table-row.gjs
diff --git a/orga/app/components/ui/is-certifiable.gjs b/orga/app/components/ui/is-certifiable.gjs
@@ -10,7 +10,7 @@ import { eq } from 'ember-truth-helpers';
       {{t "pages.sco-organization-participants.table.column.is-certifiable.eligible"}}
     </PixTag>
   {{else}}
-    <PixTag @color="yellow-light organization-participant-list-page__tag">
+    <PixTag @color="yellow-light organization-participant__tag">
       {{t "pages.sco-organization-participants.table.column.is-certifiable.non-eligible"}}
     </PixTag>
   {{/if}}

diff --git a/orga/app/controllers/authenticated/organization-participants/list.js b/orga/app/controllers/authenticated/organization-participants/list.js
@@ -47,24 +47,30 @@ export default class ListController extends Controller {
   }
 
   @action
-  sortByParticipationCount(value) {
-    this.participationCountOrder = value || null;
+  sortByParticipationCount() {
+    if (!this.participationCountOrder) this.participationCountOrder = 'asc';
+    else this.participationCountOrder = this.participationCountOrder === 'asc' ? 'desc' : 'asc';
+
     this.pageNumber = null;
     this.latestParticipationOrder = null;
     this.lastnameSort = null;
   }
 
   @action
-  sortByLatestParticipation(value) {
-    this.latestParticipationOrder = value || null;
+  sortByLatestParticipation() {
+    if (!this.latestParticipationOrder) this.latestParticipationOrder = 'asc';
+    else this.latestParticipationOrder = this.latestParticipationOrder === 'asc' ? 'desc' : 'asc';
+
     this.pageNumber = null;
     this.participationCountOrder = null;
     this.lastnameSort = null;
   }
 
   @action
-  sortByLastname(value) {
-    this.lastnameSort = value || null;
+  sortByLastname() {
+    if (!this.lastnameSort) this.lastnameSort = 'asc';
+    else this.lastnameSort = this.lastnameSort === 'asc' ? 'desc' : 'asc';
+
     this.pageNumber = null;
     this.participationCountOrder = null;
     this.latestParticipationOrder = null;
@@ -79,10 +85,9 @@ export default class ListController extends Controller {
   }
 
   @action
-  goToLearnerPage(learnerId, event) {
+  goToLearnerPage(learner) {
     if (this.hasOrganizationParticipantPage) {
-      event.preventDefault();
-      this.router.transitionTo('authenticated.organization-participants.organization-participant', learnerId);
+      this.router.transitionTo('authenticated.organization-participants.organization-participant', learner.id);
     }
   }
 

diff --git a/orga/app/styles/components/certificability/tooltip.scss b/orga/app/styles/components/certificability/tooltip.scss
@@ -3,7 +3,6 @@
 .certificability-tooltip {
   margin-top: auto;
   margin-bottom: auto;
-  padding-left: 6px;
   fill: var(--pix-neutral-500);
 
   [role='tooltip'] {

diff --git a/orga/app/styles/pages/authenticated/organization-participants/list.scss b/orga/app/styles/pages/authenticated/organization-participants/list.scss
@@ -2,42 +2,21 @@
 
 $margin-right: 32px;
 
-.organization-participant-list-page {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  width: 100%;
-
+.organization-participant {
   &__last-participation {
     display: flex;
     gap: var(--pix-spacing-2x);
     justify-content: center;
   }
 
-  &__certificability-header {
+  &__align-element {
     display: flex;
+    gap:var(--pix-spacing-2x);
     justify-content: center;
-  }
-
-  &__header-with-tooltip {
-    display: flex;
-
-    .pix-tooltip {
-      margin-left: 5px;
 
-      &__trigger-element {
-        display: flex;
-      }
-    }
-  }
-
-  &__actions-header {
-    width: 10%;
-
-    @include breakpoints.device-is('tablet') {
-      padding-right: 12px;
-      padding-left: 0;
-      text-align: right;
+    &--column {
+      flex-direction:column;
+      align-items: center;
     }
   }