[FEATURE] Affiche tous les badges du PC (Pix-16352)

api/db/seeds/data/common/tooling/campaign-tooling.js

@@ -116,7 +116,6 @@ async function createAssessmentCampaign({
     targetProfileId,
   });
 
-  const badgeIds = await databaseBuilder.knex('badges').pluck('id').where({ targetProfileId });
   if (configCampaign) {
     if (configCampaign.anonymousParticipation) {
       _createAnonymousParticipation(databaseBuilder, realOrganizationId, realCampaignId, realCreatedAt);
@@ -157,7 +156,7 @@ async function createAssessmentCampaign({
         validatedSkillsCount,
         masteryRate,
         pixScore,
-        buildBadges,
+        buildBadgeIds,
         buildStageAcquisitions,
       } = await _getCompletionCampaignParticipationData(
         completionDistribution.shift(),
@@ -215,8 +214,8 @@ async function createAssessmentCampaign({
         );
       }
 
-      if (!isStarted && buildBadges) {
-        for (const badgeId of badgeIds) {
+      if (!isStarted && buildBadgeIds) {
+        for (const badgeId of buildBadgeIds) {
           databaseBuilder.factory.buildBadgeAcquisition({
             badgeId,
             userId,
@@ -657,10 +656,17 @@ async function _getCompletionCampaignParticipationData(
     computedScore,
     validatedSkillsCount = 0,
     masteryRate = 0,
-    buildBadges = false,
+    buildBadgeIds = [],
     pixScore = 0;
 
   const randomValidatedSkill = generic.pickOneRandomAmong(_.range(campaignSkills.length));
+  const allBadges = await databaseBuilder
+    .knex('badges')
+    .select('badges.id')
+    .max('threshold as threshold')
+    .join('badge-criteria', 'badgeId', 'badges.id')
+    .groupBy('badges.id')
+    .where({ targetProfileId });
 
   const stages = await databaseBuilder.knex('stages').where({ targetProfileId });
   const buildStageAcquisitions = stages.length > 0;
@@ -677,12 +683,11 @@ async function _getCompletionCampaignParticipationData(
     case 'SHARED':
       answersAndKnowledgeElements = await _getKnowledgeElementFromSkills(campaignSkills, randomValidatedSkill);
       status = CampaignParticipationStatuses.SHARED;
-      buildBadges = randomValidatedSkill > campaignSkills.length / 2;
-
       computedScore = _getCampaignParticipationResults(answersAndKnowledgeElements);
       validatedSkillsCount = computedScore.validatedSkillsCount;
       pixScore = computedScore.pixScore;
       masteryRate = computedScore.masteryRate;
+      buildBadgeIds = allBadges.flatMap(({ id, threshold }) => (masteryRate * 100 >= threshold ? [id] : []));
       break;
     case 'SHARED_ONE_VALIDATED_SKILL':
       answersAndKnowledgeElements = await _getKnowledgeElementFromSkills(campaignSkills, 1);
@@ -696,7 +701,7 @@ async function _getCompletionCampaignParticipationData(
     case 'SHARED_PERFECT':
       answersAndKnowledgeElements = await _getKnowledgeElementFromSkills(campaignSkills, campaignSkills.length);
       status = CampaignParticipationStatuses.SHARED;
-      buildBadges = true;
+      buildBadgeIds = allBadges.map(({ id }) => id);
 
       computedScore = _getCampaignParticipationResults(answersAndKnowledgeElements);
       validatedSkillsCount = computedScore.validatedSkillsCount;
@@ -711,7 +716,7 @@ async function _getCompletionCampaignParticipationData(
     validatedSkillsCount,
     masteryRate,
     pixScore,
-    buildBadges,
+    buildBadgeIds,
     buildStageAcquisitions,
   };
 }

api/db/seeds/data/team-prescription/build-target-profiles.js

@@ -2,6 +2,7 @@ import { SCO_MANAGING_ORGANIZATION_ID } from '../common/constants.js';
 import { createBadge, createStages, createTargetProfile } from '../common/tooling/target-profile-tooling.js';
 import {
   BADGES_CAMP_ID,
+  BADGES_CAMPAIGN_UNACQUIRED_ID,
   BADGES_TUBES_CAMP_ID,
   TARGET_PROFILE_BADGES_STAGES_ID,
   TARGET_PROFILE_NO_BADGES_NO_STAGES_ID,
@@ -42,18 +43,6 @@ async function _createTargetProfileWithBadgesStages(databaseBuilder) {
     ],
   };
 
-  const configBadge = {
-    criteria: [
-      {
-        scope: 'CappedTubes',
-        threshold: 60,
-      },
-      {
-        scope: 'CampaignParticipation',
-        threshold: 50,
-      },
-    ],
-  };
   const { targetProfileId, cappedTubesDTO } = await createTargetProfile({
     databaseBuilder,
     targetProfileId: TARGET_PROFILE_BADGES_STAGES_ID,
@@ -70,27 +59,67 @@ async function _createTargetProfileWithBadgesStages(databaseBuilder) {
     cappedTubesDTO,
     badgeId: BADGES_TUBES_CAMP_ID,
     altMessage: '1 RT double critère Campaign & Tubes',
-    imageUrl: 'https://images.pix.fr/badges/abcpix_je_navigue_sur_internet.svg',
-    message: '1 RT double critère Campaign & Tubes',
-    title: '1 RT double critère Campaign & Tubes',
+    imageUrl: 'https://images.pix.fr/badges/Badge_OLYMPIX.svg',
+    message: '1 RT double critère Campaign & Tubes 60/50',
+    title: '1 RT double critère Campaign & Tubes 60/50',
     key: `SOME_KEY_FOR_RT_${BADGES_TUBES_CAMP_ID}`,
     isCertifiable: false,
     isAlwaysVisible: true,
-    configBadge,
+    configBadge: {
+      criteria: [
+        {
+          scope: 'CappedTubes',
+          threshold: 60,
+        },
+        {
+          scope: 'CampaignParticipation',
+          threshold: 50,
+        },
+      ],
+    },
   });
+
   await createBadge({
     databaseBuilder,
     targetProfileId,
     cappedTubesDTO,
     badgeId: BADGES_CAMP_ID,
     altMessage: '1 RT simple critère Campaign',
-    imageUrl: 'https://images.pix.fr/badges/Badge_OLYMPIX.svg',
-    message: '1 RT simple critère Campaign',
-    title: '1 RT simple critère Campaign',
+    imageUrl: 'https://images.pix.fr/badges/Badge_Pixome%CC%80tre-Lune.svg',
+    message: '1 RT simple critère Campaign 20',
+    title: '1 RT simple critère Campaign 20',
     key: `SOME_KEY_FOR_RT_${BADGES_CAMP_ID}`,
     isCertifiable: false,
     isAlwaysVisible: true,
-    configBadge,
+    configBadge: {
+      criteria: [
+        {
+          scope: 'CampaignParticipation',
+          threshold: 20,
+        },
+      ],
+    },
+  });
+  await createBadge({
+    databaseBuilder,
+    targetProfileId,
+    cappedTubesDTO,
+    badgeId: BADGES_CAMPAIGN_UNACQUIRED_ID,
+    altMessage: 'Badge DadiCool',
+    imageUrl: 'https://images.pix.fr/badges/abcpix_je_navigue_sur_internet.svg',
+    message: '1 RT Campaign 100',
+    title: '1 RT Campaign 100',
+    key: `SOME_KEY_FOR_RT_${BADGES_CAMPAIGN_UNACQUIRED_ID}`,
+    isCertifiable: false,
+    isAlwaysVisible: true,
+    configBadge: {
+      criteria: [
+        {
+          scope: 'CampaignParticipation',
+          threshold: 100,
+        },
+      ],
+    },
   });
   await createStages({
     databaseBuilder,

api/db/seeds/data/team-prescription/constants.js

@@ -9,6 +9,7 @@ const TARGET_PROFILE_BADGES_STAGES_ID = TEAM_PRESCRIPTION_OFFSET_ID + 1;
 //BADGES
 const BADGES_TUBES_CAMP_ID = TEAM_PRESCRIPTION_OFFSET_ID;
 const BADGES_CAMP_ID = TEAM_PRESCRIPTION_OFFSET_ID + 1;
+const BADGES_CAMPAIGN_UNACQUIRED_ID = TEAM_PRESCRIPTION_OFFSET_ID + 2;
 
 // CAMPAIGNS
 
@@ -17,6 +18,7 @@ const CAMPAIGN_PROCOLMUL_ID = TEAM_PRESCRIPTION_OFFSET_ID + 1;
 
 export {
   BADGES_CAMP_ID,
+  BADGES_CAMPAIGN_UNACQUIRED_ID,
   BADGES_TUBES_CAMP_ID,
   CAMPAIGN_PROASSMUL_ID,
   CAMPAIGN_PROCOLMUL_ID,

orga/app/components/campaign/badges.gjs

@@ -1,18 +1,36 @@
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
+import { t } from 'ember-intl';
+
+const isAcquired = (badge, acquiredBadges = []) => {
+  let acquired = false;
+  acquiredBadges.forEach((acquiredBadge) => {
+    if (acquiredBadge.id === badge.id) {
+      acquired = true;
+    }
+  });
+  return acquired;
+};
 
 <template>
   {{#each @badges as |badge|}}
-    <PixTooltip @id="badge-tooltip-{{badge.id}}" @position="bottom" @isInline={{true}}>
+    <PixTooltip @id="badge-tooltip-{{badge.id}}">
       <:triggerElement>
         <img
           src={{badge.imageUrl}}
           alt={{badge.altMessage}}
           tabindex="0"
+          class={{unless (isAcquired badge @acquiredBadges) "badge--unacquired"}}
           aria-describedby="badge-tooltip-{{badge.id}}"
         />
       </:triggerElement>
       <:tooltip>
         {{badge.title}}
+        -
+        {{if
+          (isAcquired badge @acquiredBadges)
+          (t "pages.campaign-results.table.badge-tooltip.acquired")
+          (t "pages.campaign-results.table.badge-tooltip.unacquired")
+        }}
       </:tooltip>
     </PixTooltip>
   {{/each}}

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

@@ -4,7 +4,7 @@ import { t } from 'ember-intl';
 import getService from '../../../helpers/get-service.js';
 import TableHeader from '../../table/header';
 import CampaignParticipationFilters from '../filter/participation-filters';
-import CampaignAssessmentRow from '../results/assessment-row';
+import CampaignAssessmentRow from './assessment-row';
 import EvolutionHeader from './evolution-header';
 
 <template>
@@ -74,6 +74,7 @@ import EvolutionHeader from './evolution-header';
                 @participation={{participation}}
                 @campaignId={{@campaign.id}}
                 @stages={{@campaign.stages}}
+                @badges={{@campaign.badges}}
                 @onClickParticipant={{@onClickParticipant}}
                 @displayParticipationCount={{@campaign.multipleSendings}}
               />

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

@@ -44,7 +44,7 @@ import ParticipationEvolutionIcon from './participation-evolution-icon';
     {{/if}}
     {{#if @hasBadges}}
       <td class="participant-list__badges">
-        <CampaignBadges @badges={{@participation.badges}} />
+        <CampaignBadges @badges={{@badges}} @acquiredBadges={{@participation.badges}} />
       </td>
     {{/if}}
   </tr>

orga/app/models/badge.js

@@ -4,4 +4,5 @@ export default class Badge extends Model {
   @attr('string') title;
   @attr('string') imageUrl;
   @attr('string') altMessage;
+  @attr('boolean') acquired;
 }

orga/app/styles/pages/authenticated/campaigns/details/assessment-results.scss

@@ -1,9 +1,16 @@
 .assessment-results {
   &__list {
     padding: 0;
+
+    .badge--unacquired {
+      opacity: .8;
+      filter: grayscale(1);
+    }
   }
 
   &__charts {
     margin-bottom: 24px;
   }
+
+
 }

orga/tests/integration/components/campaign/badges-test.gjs

@@ -0,0 +1,51 @@
+import { render } from '@1024pix/ember-testing-library';
+import Badges from 'pix-orga/components/campaign/badges';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Campaign | Badges', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('should render badge images for each one', async function (assert) {
+    // given
+    const badges = [
+      { id: 1, title: 'badge1', imageUrl: 'img1.svg', altMessage: 'alt-img1' },
+      { id: 2, title: 'badge2', imageUrl: 'img2.svg', altMessage: 'alt-img2' },
+    ];
+    const acquiredBadges = [];
+    // when
+    const screen = await render(<template><Badges @badges={{badges}} @acquiredBadges={{acquiredBadges}} /></template>);
+    // then
+    const badgeImages = screen.getAllByRole('img');
+    assert.strictEqual(badgeImages.length, 2);
+    assert.strictEqual(badgeImages[0].getAttribute('src'), 'img1.svg');
+    assert.strictEqual(badgeImages[0].getAttribute('alt'), 'alt-img1');
+
+    assert.strictEqual(badgeImages[1].getAttribute('src'), 'img2.svg');
+    assert.strictEqual(badgeImages[1].getAttribute('alt'), 'alt-img2');
+  });
+
+  test('should render unacquired in the title', async function (assert) {
+    // given
+    const badges = [{ title: 'badge1', imageUrl: 'img1', altMessage: 'alt-img1' }];
+    const acquiredBadges = [];
+
+    // when
+    const screen = await render(<template><Badges @badges={{badges}} @acquiredBadges={{acquiredBadges}} /></template>);
+
+    // then
+    assert.ok(screen.getByText(/badge1 - Non acquis/i));
+  });
+  test('should render acquired in the title', async function (assert) {
+    // given
+    const badges = [{ title: 'badge1', imageUrl: 'img1', altMessage: 'alt-img1' }];
+    const acquiredBadges = [badges[0]];
+
+    // when
+    const screen = await render(<template><Badges @badges={{badges}} @acquiredBadges={{acquiredBadges}} /></template>);
+
+    // then
+    assert.ok(screen.getByText(/badge1 - Acquis/i));
+  });
+});