feat(orga): display unaquired badges

Author: lionelB

Diff for: orga/app/components/campaign/badges.gjs

@@ -1,53 +1,37 @@
 import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
 import { t } from 'ember-intl';
-export default class BadgeList extends Component {
-  @service intl;
-  // computeTitle(badge, isAcquired) {
-  //   return `${badge.title} - ${isAcquired ? 'acquis' : 'non acquis'}`;
-  // }
 
-  get acquiredBadgeIds() {
-    return this.args.acquiredBadges.map(({ id }) => id);
-  }
+const isAcquired = (badge, acquiredBadges) => {
+  let acquired = false;
+  acquiredBadges.forEach((acquiredBadge) => {
+    if (acquiredBadge.id === badge.id) {
+      acquired = true;
+    }
+  });
+  return acquired;
+};
 
-  async isBadgeAcquired(badge) {
-    // const badges = await this.args.acquiredBadges;
-    // console.log({ badges, badge, acquiredBadges });
-
-    const value = this.acquiredBadgeIds.some(({ id }) => id === badge.id);
-    console.log(badge.id, value);
-    return value;
-  }
-
-  <template>
-    {{#each @badges as |badge|}}
-
-      {{log (this.isBadgeAcquired badge @acquiredBadges)}}
-      - -
-      {{(this.isBadgeAcquired badge @acquiredBadges)}}
-      {{!-- <PixTooltip @id="badge-tooltip-{{badge.id}}" @position="bottom" @isInline={{true}}>
+<template>
+  {{#each @badges as |badge|}}
+    <PixTooltip @id="badge-tooltip-{{badge.id}}" @position="bottom-left" @isInline={{true}}>
       <:triggerElement>
         <img
           src={{badge.imageUrl}}
           alt={{badge.altMessage}}
           tabindex="0"
-          class={{if (isUnAcquired badge @acquiredBadges) "badge--unacquired" "coucou"}}
+          class={{unless (isAcquired badge @acquiredBadges) "badge--unacquired"}}
           aria-describedby="badge-tooltip-{{badge.id}}"
         />
       </:triggerElement>
       <:tooltip>
         {{badge.title}}
         -
-        {{badge.id}}
-        {{#if (isUnAcquired badge @acquiredBadges)}}
-          pas acquis
-        {{else}}
-          acquis
-        {{/if}}
+        {{if
+          (isAcquired badge @acquiredBadges)
+          (t "pages.campaign-results.table.badge-tooltip.acquired")
+          (t "pages.campaign-results.table.badge-tooltip.unacquired")
+        }}
       </:tooltip>
-    </PixTooltip> --}}
-    {{/each}}
-  </template>
-}
+    </PixTooltip>
+  {{/each}}
+</template>

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 hey', 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 acquired 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 unacquired 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",