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

@@ -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",