[FEATURE] Afficher l'évolution des participants sur la page des résul…

…tats à une campagne collecte de profils (PIX-14807) #10496
1024pix · Nov 8, 2024 · 97929f4 · 97929f4
2 parents bbdf039 + eb6d91e
commit 97929f4
Show file tree

Hide file tree

Showing 19 changed files with 376 additions and 57 deletions.
diff --git a/api/db/seeds/data/team-prescription/build-campaigns.js b/api/db/seeds/data/team-prescription/build-campaigns.js
@@ -10,6 +10,7 @@ import {
 import { createAssessmentCampaign, createProfilesCollectionCampaign } from '../common/tooling/campaign-tooling.js';
 import {
   CAMPAIGN_PROASSMUL_ID,
+  CAMPAIGN_PROCOLMUL_ID,
   TARGET_PROFILE_BADGES_STAGES_ID,
   TARGET_PROFILE_NO_BADGES_NO_STAGES_ID,
 } from './constants.js';
@@ -142,6 +143,7 @@ async function _createProGenericCampaigns(databaseBuilder) {
 
 async function _createProCampaigns(databaseBuilder) {
   await createProfilesCollectionCampaign({
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
     databaseBuilder,
     organizationId: PRO_ORGANIZATION_ID,
     ownerId: USER_ID_ADMIN_ORGANIZATION,

diff --git a/.../seeds/data/team-prescription/build-organization-learners-with-multiple-participations.js b/.../seeds/data/team-prescription/build-organization-learners-with-multiple-participations.js
@@ -1,7 +1,7 @@
 import { CampaignParticipationStatuses } from '../../../../src/prescription/shared/domain/constants.js';
 import { Assessment } from '../../../../src/shared/domain/models/Assessment.js';
 import { PRO_ORGANIZATION_ID } from '../common/constants.js';
-import { CAMPAIGN_PROASSMUL_ID } from './constants.js';
+import { CAMPAIGN_PROASSMUL_ID, CAMPAIGN_PROCOLMUL_ID } from './constants.js';
 
 async function _buildMultipleParticipationsForPROASSMULCampaign(databaseBuilder) {
   const firstUser = await databaseBuilder.factory.buildUser.withRawPassword({
@@ -201,6 +201,120 @@ async function _buildMultipleParticipationsForPROASSMULCampaign(databaseBuilder)
   });
 }
 
+async function _buildMultipleParticipationsForPROCOLMULCampaign(databaseBuilder) {
+  const firstUser = await databaseBuilder.factory.buildUser.withRawPassword({
+    firstName: 'Martin',
+    lastName: 'Sapin',
+    email: '[email protected]',
+    cgu: true,
+    lang: 'fr',
+  });
+
+  const firstOrganizationLearner = await databaseBuilder.factory.buildOrganizationLearner({
+    firstName: 'Martin',
+    lastName: 'Sapin',
+    userId: firstUser.id,
+    organizationId: PRO_ORGANIZATION_ID,
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    organizationLearnerId: firstOrganizationLearner.id,
+    userId: firstUser.id,
+    pixScore: 20,
+    isImproved: true,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2023-12-27T15:07:57.376Z',
+    sharedAt: '2024-01-04T15:07:57.376Z',
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    organizationLearnerId: firstOrganizationLearner.id,
+    userId: firstUser.id,
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    pixScore: 50,
+    isImproved: false,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2024-03-12T15:07:57.376Z',
+    sharedAt: '2024-03-24T15:07:57.376Z',
+  });
+
+  const secondUser = await databaseBuilder.factory.buildUser.withRawPassword({
+    firstName: 'José',
+    lastName: 'Lopez',
+    email: '[email protected]',
+    cgu: true,
+    lang: 'fr',
+  });
+
+  const secondOrganizationLearner = await databaseBuilder.factory.buildOrganizationLearner({
+    firstName: 'José',
+    lastName: 'Lopez',
+    userId: secondUser.id,
+    organizationId: PRO_ORGANIZATION_ID,
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    organizationLearnerId: secondOrganizationLearner.id,
+    userId: secondUser.id,
+    pixScore: 50,
+    isImproved: true,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2023-12-27T15:07:57.376Z',
+    sharedAt: '2024-01-04T15:07:57.376Z',
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    organizationLearnerId: secondOrganizationLearner.id,
+    userId: secondUser.id,
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    pixScore: 45,
+    isImproved: false,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2024-03-12T15:07:57.376Z',
+    sharedAt: '2024-03-24T15:07:57.376Z',
+  });
+
+  const thirdUser = await databaseBuilder.factory.buildUser.withRawPassword({
+    firstName: 'Pierre',
+    lastName: 'Quiroule',
+    email: '[email protected]',
+    cgu: true,
+    lang: 'fr',
+  });
+
+  const thirdOrganizationLearner = await databaseBuilder.factory.buildOrganizationLearner({
+    firstName: 'Pierre',
+    lastName: 'Quiroule',
+    userId: thirdUser.id,
+    organizationId: PRO_ORGANIZATION_ID,
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    organizationLearnerId: thirdOrganizationLearner.id,
+    userId: thirdUser.id,
+    pixScore: 20,
+    isImproved: true,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2023-12-27T15:07:57.376Z',
+    sharedAt: '2024-01-04T15:07:57.376Z',
+  });
+
+  await databaseBuilder.factory.buildCampaignParticipation({
+    organizationLearnerId: thirdOrganizationLearner.id,
+    userId: thirdUser.id,
+    campaignId: CAMPAIGN_PROCOLMUL_ID,
+    pixScore: 20,
+    isImproved: false,
+    status: CampaignParticipationStatuses.SHARED,
+    createdAt: '2024-03-12T15:07:57.376Z',
+    sharedAt: '2024-03-24T15:07:57.376Z',
+  });
+}
+
 export async function buildOrganizationLearnersWithMultipleParticipations(databaseBuilder) {
   await _buildMultipleParticipationsForPROASSMULCampaign(databaseBuilder);
+  await _buildMultipleParticipationsForPROCOLMULCampaign(databaseBuilder);
 }
diff --git a/api/db/seeds/data/team-prescription/constants.js b/api/db/seeds/data/team-prescription/constants.js
@@ -13,11 +13,13 @@ const BADGES_CAMP_ID = TEAM_PRESCRIPTION_OFFSET_ID + 1;
 // CAMPAIGNS
 
 const CAMPAIGN_PROASSMUL_ID = TEAM_PRESCRIPTION_OFFSET_ID;
+const CAMPAIGN_PROCOLMUL_ID = TEAM_PRESCRIPTION_OFFSET_ID + 1;
 
 export {
   BADGES_CAMP_ID,
   BADGES_TUBES_CAMP_ID,
   CAMPAIGN_PROASSMUL_ID,
+  CAMPAIGN_PROCOLMUL_ID,
   DEFAULT_PASSWORD,
   TARGET_PROFILE_BADGES_STAGES_ID,
   TARGET_PROFILE_NO_BADGES_NO_STAGES_ID,

diff --git a/orga/app/components/campaign/results/assessment-list.gjs b/orga/app/components/campaign/results/assessment-list.gjs
@@ -2,9 +2,9 @@ import { t } from 'ember-intl';
 
 import TableHeader from '../../table/header';
 import TablePaginationControl from '../../table/pagination-control';
-import TooltipWithIcon from '../../ui/tooltip-with-icon';
 import CampaignParticipationFilters from '../filter/participation-filters';
 import CampaignAssessmentRow from '../results/assessment-row';
+import EvolutionHeader from './evolution-header';
 
 <template>
   <section ...attributes>
@@ -33,6 +33,10 @@ import CampaignAssessmentRow from '../results/assessment-row';
             <col class="table__column--medium" />
           {{/if}}
           <col />
+          {{#if @campaign.multipleSendings}}
+            <col />
+            <col />
+          {{/if}}
           {{#if @campaign.hasBadges}}
             <col />
           {{/if}}
@@ -47,18 +51,7 @@ import CampaignAssessmentRow from '../results/assessment-row';
             <TableHeader>{{t "pages.campaign-results.table.column.results.label"}}</TableHeader>
             {{#if @campaign.multipleSendings}}
               <TableHeader>
-                <div class="assessment-list__evolution-header">
-                  {{t "pages.campaign-results.table.column.evolution"}}
-                  <TooltipWithIcon
-                    @iconName="help"
-                    @position="top"
-                    @isInline={{true}}
-                    @plainIcon={{true}}
-                    @content={{t "pages.campaign-results.table.evolution-tooltip.content"}}
-                    @ariaHiddenIcon={{true}}
-                  />
-                </div>
-
+                <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"}}

diff --git a/orga/app/components/campaign/results/evolution-header.gjs b/orga/app/components/campaign/results/evolution-header.gjs
@@ -0,0 +1,17 @@
+import { t } from 'ember-intl';
+
+import TooltipWithIcon from '../../ui/tooltip-with-icon';
+
+<template>
+  <span class="evolution-header">
+
+    {{t "pages.campaign-results.table.column.evolution"}}
+
+    <TooltipWithIcon
+      @iconName="help"
+      @content={{@tooltipContent}}
+      @ariaHiddenIcon={{true}}
+      class="tooltip-with-icon-small"
+    />
+  </span>
+</template>
diff --git a/orga/app/components/campaign/results/participation-evolution-icon.gjs b/orga/app/components/campaign/results/participation-evolution-icon.gjs
@@ -1,7 +1,6 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import { t } from 'ember-intl';
 
-import TooltipWithIcon from '../../ui/tooltip-with-icon';
-
 const EVOLUTION_INFOS = {
   increase: {
     iconName: 'trendingUp',
@@ -19,15 +18,15 @@ const EVOLUTION_INFOS = {
 
 const getIconName = (evolution) => EVOLUTION_INFOS[evolution].iconName;
 const getIconLabel = (evolution) => EVOLUTION_INFOS[evolution].label;
+const getIconClass = (evolution) => `participation-evolution-icon--${evolution}`;
 
 <template>
   {{#if @evolution}}
-    <TooltipWithIcon
-      @position="top"
-      @isInline={{true}}
-      @content={{t (getIconLabel @evolution)}}
-      @iconName={{getIconName @evolution}}
-      @iconClass="tooltip-with-icon__{{@evolution}}"
+    <PixIcon
+      @title={{t (getIconLabel @evolution)}}
+      @name={{getIconName @evolution}}
+      role="presentation"
+      class="participation-evolution-icon {{getIconClass @evolution}}"
     />
   {{else}}
     <p class="screen-reader-only">{{t "pages.campaign-results.table.evolution.unavailable"}}</p>

diff --git a/orga/app/components/campaign/results/profile-list.gjs b/orga/app/components/campaign/results/profile-list.gjs
@@ -9,6 +9,8 @@ import { gt } from 'ember-truth-helpers';
 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';
 
 <template>
   <section ...attributes>
@@ -28,6 +30,7 @@ import CampaignParticipationFilters from '../filter/participation-filters';
 
     <div class="panel">
       <table class="table content-text content-text--small">
+        <caption class="screen-reader-only">{{t "pages.profiles-list.table.caption"}}</caption>
         <colgroup class="table__column">
           <col />
           <col />
@@ -36,6 +39,9 @@ import CampaignParticipationFilters from '../filter/participation-filters';
           {{/if}}
           <col />
           <col />
+          {{#if @campaign.multipleSendings}}
+            <col />
+          {{/if}}
           <col class="hide-on-mobile" />
           <col class="hide-on-mobile" />
         </colgroup>
@@ -48,6 +54,13 @@ import CampaignParticipationFilters from '../filter/participation-filters';
             {{/if}}
             <TableHeader @align="center">{{t "pages.profiles-list.table.column.sending-date.label"}}</TableHeader>
             <TableHeader @align="center">{{t "pages.profiles-list.table.column.pix-score.label"}}</TableHeader>
+            {{#if @campaign.multipleSendings}}
+              <TableHeader @align="center">
+                <EvolutionHeader
+                  @tooltipContent={{t "pages.profiles-list.table.evolution-tooltip.content"}}
+                /></TableHeader>
+
+            {{/if}}
             <TableHeader @align="center" class="hide-on-mobile">{{t
                 "pages.profiles-list.table.column.certifiable"
               }}</TableHeader>
@@ -93,6 +106,8 @@ import CampaignParticipationFilters from '../filter/participation-filters';
                     </PixTag>
                   {{/if}}
                 </td>
+                <td class="table__column--center">
+                  <ParticipationEvolutionIcon @evolution={{profile.evolution}} /></td>
                 <td class="table__column--center hide-on-mobile">
                   {{#if profile.certifiable}}
                     <PixTag @color="green-light">{{t "pages.profiles-list.table.column.certifiable"}}</PixTag>

diff --git a/orga/app/components/ui/tooltip-with-icon.gjs b/orga/app/components/ui/tooltip-with-icon.gjs
@@ -2,19 +2,19 @@ import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { uniqueId } from '@ember/helper';
 
-const tooltipId = uniqueId;
+const tooltipId = uniqueId();
 
 <template>
-  <PixTooltip @id={{tooltipId}} @position={{@position}} @isInline={{@isInline}} class="tooltip-with-icon">
+  <PixTooltip @id={{tooltipId}} @isInline={{true}}>
     <:triggerElement>
 
       <PixIcon
         @name={{@iconName}}
-        @plainIcon={{@plainIcon}}
+        @plainIcon={{true}}
         aria-label={{@content}}
         aria-describedby={{tooltipId}}
         @ariaHidden={{@ariaHiddenIcon}}
-        class={{@iconClass}}
+        ...attributes
       />
 
     </:triggerElement>

diff --git a/orga/app/models/campaign-profiles-collection-participation-summary.js b/orga/app/models/campaign-profiles-collection-participation-summary.js
@@ -6,6 +6,7 @@ export default class CampaignProfilesCollectionParticipationSummary extends Mode
   @attr('string') participantExternalId;
   @attr('date') sharedAt;
   @attr('number') pixScore;
+  @attr('nullable-string') evolution;
   @attr('boolean') certifiable;
   @attr('number') certifiableCompetencesCount;
 }
diff --git a/orga/app/styles/components/campaign/index.scss b/orga/app/styles/components/campaign/index.scss
@@ -1,7 +1,8 @@
 @import 'activity/dashboard';
 @import 'analysis/competences';
 @import 'results/assessment-cards';
-@import 'results/assessment-list';
+@import 'results/evolution-header';
+@import 'results/participation-evolution-icon';
 @import 'analysis/recommendations';
 @import 'analysis/recommendation-indicator';
 @import 'analysis/tube-recommendation-row';

diff --git a/orga/app/styles/components/campaign/results/assessment-list.scss b/orga/app/styles/components/campaign/results/assessment-list.scss
diff --git a/orga/app/styles/components/campaign/results/evolution-header.scss b/orga/app/styles/components/campaign/results/evolution-header.scss
@@ -0,0 +1,6 @@
+.evolution-header {
+    display: inline-flex;
+    gap: var(--pix-spacing-1x);
+    align-items: center;
+  }
+
diff --git a/orga/app/styles/components/campaign/results/participation-evolution-icon.scss b/orga/app/styles/components/campaign/results/participation-evolution-icon.scss
@@ -0,0 +1,13 @@
+.participation-evolution-icon {
+  &--increase{
+    color: var(--pix-success-500);
+  }
+
+  &--decrease {
+    color: var(--pix-error-500);
+  }
+
+  &--stable {
+    color: var(--pix-warning-500);
+  }
+}
diff --git a/orga/app/styles/components/ui/tooltip-with-icon.scss b/orga/app/styles/components/ui/tooltip-with-icon.scss
@@ -1,23 +1,6 @@
-.tooltip-with-icon {
-  width: fit-content;
+.tooltip-with-icon-small {
+    width: 1rem;
+    height: 1rem;
 
-  // @TODO: Remove !important when PixTooltip wil be fixed
-  &__increase{
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    fill: var(--pix-success-500) !important;
-  }
-
-  &__decrease {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    fill: var(--pix-error-500) !important;
-  }
-
-  &__stable {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    fill: var(--pix-warning-500) !important;
-  }
 }