feat(orga): add PixTable on anaylis assessment page

1024pix · Feb 28, 2025 · 0a4b3e9 · 0a4b3e9
1 parent 1b6aff7
commit 0a4b3e9
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 119 deletions.
diff --git a/orga/app/components/campaign/results/assessment-list.gjs b/orga/app/components/campaign/results/assessment-list.gjs
@@ -1,14 +1,19 @@
 import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import PixTable from '@1024pix/pix-ui/components/pix-table';
+import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
+import { array, fn } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
 import { t } from 'ember-intl';
 
 import getService from '../../../helpers/get-service.js';
-import TableHeader from '../../table/header';
+import MasteryPercentageDisplay from '../../ui/mastery-percentage-display';
+import CampaignBadges from '../badges';
 import CampaignParticipationFilters from '../filter/participation-filters';
-import CampaignAssessmentRow from './assessment-row';
 import EvolutionHeader from './evolution-header';
+import ParticipationEvolutionIcon from './participation-evolution-icon';
 
 <template>
-  <section ...attributes>
+  <section>
     <h3 class="screen-reader-only">{{t "pages.campaign-results.table.title"}}</h3>
 
     <CampaignParticipationFilters
@@ -25,69 +30,104 @@ import EvolutionHeader from './evolution-header';
       @onFilter={{@onFilter}}
     />
 
-    <div class="panel">
-      <table class="table content-text content-text--small">
-        <caption class="screen-reader-only">{{@caption}}</caption>
-        <colgroup class="table__column">
-          <col />
-          <col />
-          {{#if @campaign.externalIdLabel}}
-            <col class="table__column--medium" />
-          {{/if}}
-          <col />
-          {{#if @campaign.multipleSendings}}
-            <col />
-            <col />
-          {{/if}}
-          {{#if @campaign.hasBadges}}
-            <col />
-          {{/if}}
-        </colgroup>
-        <thead>
-          <tr>
-            <TableHeader>{{t "pages.campaign-results.table.column.last-name"}}</TableHeader>
-            <TableHeader>{{t "pages.campaign-results.table.column.first-name"}}</TableHeader>
-            {{#if @campaign.hasExternalId}}
-              <TableHeader>{{@campaign.externalIdLabel}}</TableHeader>
-            {{/if}}
-            <TableHeader>{{t "pages.campaign-results.table.column.results.label"}}</TableHeader>
-            {{#if @campaign.multipleSendings}}
-              <TableHeader>
-                <EvolutionHeader @tooltipContent={{t "pages.campaign-results.table.evolution-tooltip.content"}} />
-              </TableHeader>
-              <TableHeader aria-label={{t "pages.campaign-results.table.column.ariaSharedResultCount"}}>
-                {{t "pages.campaign-results.table.column.sharedResultCount"}}
-              </TableHeader>
-            {{/if}}
-            {{#if @campaign.hasBadges}}
-              <TableHeader>{{t "pages.campaign-results.table.column.badges"}}</TableHeader>
-            {{/if}}
-          </tr>
-        </thead>
+    <PixTable
+      @variant="orga"
+      @caption={{@caption}}
+      @data={{@participations}}
+      @onRowClick={{fn @onClickParticipant @campaign.id}}
+      class="table"
+    >
+      <:columns as |participation context|>
 
-        {{#if @participations}}
-          <tbody>
-            {{#each @participations as |participation|}}
-              <CampaignAssessmentRow
-                @hasStages={{@campaign.hasStages}}
-                @hasBadges={{@campaign.hasBadges}}
-                @hasExternalId={{@campaign.hasExternalId}}
-                @participation={{participation}}
-                @campaignId={{@campaign.id}}
-                @stages={{@campaign.stages}}
-                @badges={{@campaign.badges}}
-                @onClickParticipant={{@onClickParticipant}}
-                @displayParticipationCount={{@campaign.multipleSendings}}
-              />
-            {{/each}}
-          </tbody>
+        <PixTableColumn @context={{context}}>
+          <:header>
+            {{t "pages.campaign-results.table.column.last-name"}}
+          </:header>
+          <:cell>
+            <LinkTo
+              @route="authenticated.campaigns.participant-assessment"
+              @models={{array @campaign.id participation.id}}
+            >
+              {{participation.lastName}}
+            </LinkTo>
+          </:cell>
+        </PixTableColumn>
+
+        <PixTableColumn @context={{context}}>
+          <:header>
+            {{t "pages.campaign-results.table.column.first-name"}}
+          </:header>
+          <:cell>
+            {{participation.firstName}}
+          </:cell>
+        </PixTableColumn>
+
+        {{#if @campaign.externalIdLabel}}
+          <PixTableColumn @context={{context}}>
+            <:header>
+              {{@campaign.externalIdLabel}}
+            </:header>
+            <:cell>
+              {{participation.participantExternalId}}
+            </:cell>
+          </PixTableColumn>
+        {{/if}}
+
+        <PixTableColumn @context={{context}}>
+            <:header>
+              {{t "pages.campaign-results.table.column.results.label"}}
+            </:header>
+            <:cell>
+                <MasteryPercentageDisplay
+                  @masteryRate={{participation.masteryRate}}
+                  @hasStages={{@campaign.hasStages}}
+                  @reachedStage={{participation.reachedStage}}
+                  @totalStage={{participation.totalStage}}
+                  @prescriberTitle={{participation.prescriberTitle}}
+                  @prescriberDescription={{participation.prescriberDescription}}
+                  @isTableDisplay={{true}}
+                />
+              </:cell>
+          </PixTableColumn>
+
+        {{#if @campaign.multipleSendings}}
+          <PixTableColumn @context={{context}}>
+            <:header>
+              <EvolutionHeader @tooltipContent={{t "pages.campaign-results.table.evolution-tooltip.content"}} />
+            </:header>
+            <:cell>
+              <ParticipationEvolutionIcon @evolution={{participation.evolution}} />
+            </:cell>
+          </PixTableColumn>
+
+          <PixTableColumn @context={{context}}>
+            <:header>
+              {{t "pages.campaign-results.table.column.sharedResultCount"}}
+            </:header>
+            <:cell>
+              {{participation.sharedResultCount}}
+            </:cell>
+          </PixTableColumn>
+        {{/if}}
+
+        {{#if @campaign.hasBadges}}
+          <PixTableColumn @context={{context}}>
+            <:header>
+              {{t "pages.campaign-results.table.column.badges"}}
+            </:header>
+            <:cell>
+              <span class="participant-list__badges">
+                <CampaignBadges @badges={{@campaign.badges}} @acquiredBadges={{participation.badges}} />
+              </span>
+            </:cell>
+          </PixTableColumn>
         {{/if}}
-      </table>
+      </:columns>
+    </PixTable>
 
-      {{#unless @participations}}
-        <p class="table__empty content-text">{{t "pages.campaign-results.table.empty"}}</p>
-      {{/unless}}
-    </div>
+    {{#unless @participations}}
+      <p class="table__empty content-text">{{t "pages.campaign-results.table.empty"}}</p>
+    {{/unless}}
 
     {{#if @participations}}
       {{#let (getService "service:intl") as |intl|}}

diff --git a/orga/app/components/campaign/results/assessment-row.gjs b/orga/app/components/campaign/results/assessment-row.gjs
diff --git a/orga/app/controllers/authenticated/campaigns/campaign/assessment-results.js b/orga/app/controllers/authenticated/campaigns/campaign/assessment-results.js
@@ -21,10 +21,8 @@ export default class AssessmentResultsController extends Controller {
   }
 
   @action
-  goToAssessmentPage(campaignId, participantId, event) {
-    event.stopPropagation();
-    event.preventDefault();
-    this.router.transitionTo('authenticated.campaigns.participant-assessment', campaignId, participantId);
+  goToAssessmentPage(campaignId, participant) {
+    this.router.transitionTo('authenticated.campaigns.participant-assessment', campaignId, participant.id);
   }
 
   @action

diff --git a/orga/app/styles/globals/tables.scss b/orga/app/styles/globals/tables.scss
@@ -1,5 +1,6 @@
 .table {
   margin-bottom: var(--pix-spacing-4x);
+  overflow: unset;
 
   &__link-cell {
     display: flex;

diff --git a/orga/app/templates/authenticated/campaigns/campaign/assessment-results.hbs b/orga/app/templates/authenticated/campaigns/campaign/assessment-results.hbs
@@ -26,7 +26,6 @@
     @onClickParticipant={{this.goToAssessmentPage}}
     @onFilter={{this.triggerFiltering}}
     @onResetFilter={{this.resetFiltering}}
-    class="assessment-results__list"
   />
 {{else}}
   {{#if this.isGarAuthenticationMethod}}