feat(orga): display unacquired badges

Author: lionelB

Diff for: 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}}

Diff for: 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}}
               />

Diff for: 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>

Diff for: 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;
 }

Diff for: 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;
   }
+
+
 }

Diff for: 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));
+  });
+});

Diff for: orga/tests/integration/components/campaign/badges-test.js

@@ -62,6 +62,7 @@ module('Integration | Component | Campaign::Results::AssessmentList', function (
         id: '1',
         name: 'campagne 1',
         participationsCount: 1,
+        badges: [],
       });
       this.set('campaign', campaign);
     });
@@ -149,7 +150,7 @@ module('Integration | Component | Campaign::Results::AssessmentList', function (
 
     test('it should display badge and tooltip', async function (assert) {
       // given
-      const badge = store.createRecord('badge', { id: '1', imageUrl: 'url-badge', title: 'je suis un badge' });
+      const badge = store.createRecord('badge', { id: 1, imageUrl: 'url-badge', title: 'je suis un badge' });
       const campaign = store.createRecord('campaign', {
         targetProfileThematicResultCount: 1,
         badges: [badge],
@@ -176,7 +177,7 @@ module('Integration | Component | Campaign::Results::AssessmentList', function (
       );
 
       // then
-      assert.ok(screen.getByRole('img', { src: 'url-badge', description: 'je suis un badge' }));
+      assert.ok(screen.getByRole('img', { src: 'url-badge', description: /je suis un badge/ }));
     });
 
     module('campaign has multiple sending enabled', function () {
@@ -469,7 +470,7 @@ module('Integration | Component | Campaign::Results::AssessmentList', function (
         badges: [badge],
       });
 
-      const participations = [{}];
+      const participations = [];
       participations.meta = { rowCount: 1 };
 
       this.set('campaign', campaign);

Diff for: orga/tests/integration/components/campaign/results/assessment-list-test.js

@@ -634,6 +634,10 @@
       },
       "result": "Result",
       "table": {
+        "badge-tooltip": {
+          "acquired": "Acquired",
+          "unacquired": "Unacquired"
+        },
         "caption": "This table lists the participants who have shared their results. For each participant, it shows their surname, first name and elements of results.",
         "column": {
           "ariaSharedResultCount": "Number of sent results",

Diff for: orga/translations/en.json

@@ -640,6 +640,10 @@
       },
       "result": "Résultat",
       "table": {
+        "badge-tooltip": {
+          "acquired": "Acquis",
+          "unacquired": "Non acquis"
+        },
         "caption": "Ce tableau comporte la liste des participants ayant partagé leurs résultats. Il indique pour chaque participant leur nom, prénom et des éléments de résultats.",
         "column": {
           "ariaSharedResultCount": "Nombre de résultats envoyés",

Diff for: orga/translations/fr.json

@@ -598,6 +598,10 @@
       },
       "result": "Resultaat",
       "table": {
+        "badge-tooltip": {
+          "acquired": "Verworven",
+          "unacquired": "Niet verworven"
+        },
         "caption": "In deze tabel staan de deelnemers die hun resultaten hebben gedeeld. Voor elke deelnemer worden de achternaam, voornaam en resultaten weergegeven.",
         "column": {
           "ariaSharedResultCount": "Aantal verzonden resultaten",