🎨 feat(junior) show specific mission logo

Co-authored-by: rouxxi <[email protected]> Co-authored-by: Aurelie Crouillebois <[email protected]>
1024pix · Oct 8, 2024 · dd6ebfd · dd6ebfd
1 parent 8fad487
commit dd6ebfd
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 116 deletions.
diff --git a/api/src/school/domain/models/Mission.js b/api/src/school/domain/models/Mission.js
@@ -4,6 +4,7 @@ class Mission {
   constructor({
     id,
     name,
+    cardImageUrl,
     competenceId,
     competenceName,
     thematicId,
@@ -19,6 +20,7 @@ class Mission {
   } = {}) {
     this.id = id;
     this.name = name;
+    this.cardImageUrl = cardImageUrl;
     this.competenceId = competenceId;
     this.competenceName = competenceName;
     this.thematicId = thematicId;

diff --git a/api/src/school/infrastructure/repositories/mission-repository.js b/api/src/school/infrastructure/repositories/mission-repository.js
@@ -15,6 +15,7 @@ function _toDomain(data, locale) {
   return new Mission({
     id: data.id,
     name: translatedName,
+    cardImageUrl: data.cardImageUrl,
     competenceId: data.competenceId,
     thematicId: data.thematicId,
     learningObjectives: translatedLearningObjectives,

diff --git a/api/src/school/infrastructure/serializers/mission-serializer.js b/api/src/school/infrastructure/serializers/mission-serializer.js
@@ -4,6 +4,7 @@ const serialize = function (missions) {
   return new Serializer('missions', {
     attributes: [
       'name',
+      'cardImageUrl',
       'areaCode',
       'validatedObjectives',
       'learningObjectives',

diff --git a/api/tests/school/integration/infrastructure/repositories/mission-repository_test.js b/api/tests/school/integration/infrastructure/repositories/mission-repository_test.js
@@ -75,4 +75,85 @@ describe('Integration | Repository | mission-repository', function () {
       });
     });
   });
+
+  describe('#findAllActiveMissions', function () {
+    context('when there are active missions', function () {
+      it('should return all active mission', async function () {
+        // given
+        const expectedMission = new Mission({
+          id: 1,
+          name: 'nameThemaFR1',
+          competenceId: 'competenceId',
+          thematicId: 'thematicId',
+          cardImageUrl: 'super-url',
+          learningObjectives: 'learningObjectivesi18n',
+          validatedObjectives: 'validatedObjectivesi18n',
+          introductionMediaUrl: 'http://monimage.pix.fr',
+          introductionMediaType: 'image',
+          introductionMediaAlt: "Alt à l'image",
+          documentationUrl: 'http://madoc.pix.fr',
+          content: {
+            steps: [
+              {
+                name: 'step_name_1',
+              },
+            ],
+          },
+        });
+
+        mockLearningContent({
+          missions: [
+            {
+              id: 1,
+              status: 'VALIDATED',
+              name_i18n: { fr: 'nameThemaFR1' },
+              competenceId: 'competenceId',
+              thematicId: 'thematicId',
+              cardImageUrl: 'super-url',
+              learningObjectives_i18n: { fr: 'learningObjectivesi18n' },
+              validatedObjectives_i18n: { fr: 'validatedObjectivesi18n' },
+              introductionMediaUrl: 'http://monimage.pix.fr',
+              introductionMediaType: 'image',
+              introductionMediaAlt: "Alt à l'image",
+              documentationUrl: 'http://madoc.pix.fr',
+              content: {
+                steps: [
+                  {
+                    name_i18n: { fr: 'step_name_1' },
+                  },
+                ],
+              },
+            },
+            {
+              id: 2,
+              status: 'INACTIVE',
+              name_i18n: { fr: 'nameThemaFR1' },
+              competenceId: 'competenceId',
+              thematicId: 'thematicId',
+              cardImageUrl: 'super-url',
+              learningObjectives_i18n: { fr: 'learningObjectivesi18n' },
+              validatedObjectives_i18n: { fr: 'validatedObjectivesi18n' },
+              introductionMediaUrl: 'http://monimage.pix.fr',
+              introductionMediaType: 'image',
+              introductionMediaAlt: "Alt à l'image",
+              documentationUrl: 'http://madoc.pix.fr',
+              content: {
+                steps: [
+                  {
+                    name_i18n: { fr: 'step_name_1' },
+                  },
+                ],
+              },
+            },
+          ],
+        });
+
+        // when
+        const missions = await missionRepository.findAllActiveMissions();
+
+        // then
+        expect(missions).to.deep.equal([expectedMission]);
+      });
+    });
+  });
 });
diff --git a/junior/app/components/mission-card/completed-mission-card.gjs b/junior/app/components/mission-card/completed-mission-card.gjs
@@ -9,7 +9,7 @@ import Background from './mission-card-completed-background';
     {{/if}}
 
     <div class="mission-icon--completed">
-      <img src="/images/mission/icon/finished-icon.svg" alt="" />
+      <img src="/images/mission/icon/pix-junior-logo-white.svg" alt="" aria-hidden="true"/>
     </div>
     <Background @areaCode={{@areaCode}} />
     <div class="completed-mission-card-bottom">

diff --git a/junior/app/components/mission-card/mission-card.gjs b/junior/app/components/mission-card/mission-card.gjs
@@ -1,33 +1,47 @@
+import Component from '@glimmer/component';
+
 import MissionCardBackGround from './mission-card-background';
-<template>
-  <div class="mission-card__container">
-    {{#if @missionLabelStatus}}
-      <div class="status">
-        <p>{{@missionLabelStatus}}</p>
-      </div>
-    {{/if}}
-    {{#if @displayStartedIcon}}
-      <div class="started-icon">
-        <img src="/images/mission/icon/started-icon.svg" alt="" />
-      </div>
-    {{/if}}
 
-    <div class="mission-icon">
-      <img src="/images/mission/icon/area-code-{{@areaCode}}.svg" alt="" />
-    </div>
+export default class MissionCard extends Component {
+  get imageUrl() {
+    console.log(this.args.cardImageUrl);
+    return this.args.cardImageUrl ? this.args.cardImageUrl : '/images/mission/icon/pix-junior-logo-white.svg';
+  }
 
-    <MissionCardBackGround @class="area-code-{{@areaCode}}" @areaCode={{@areaCode}} />
+  get classIcon() {
+    console.log(this.args.cardImageUrl);
+    return this.args.cardImageUrl ? 'mission-icon' : 'mission-icon-default';
+  }
+  <template>
+    <div class="mission-card__container">
+      {{#if @missionLabelStatus}}
+        <div class="status">
+          <p>{{@missionLabelStatus}}</p>
+        </div>
+      {{/if}}
+      {{#if @displayStartedIcon}}
+        <div class="started-icon">
+          <img src="/images/mission/icon/started-icon.svg" alt="" aria-hidden="true" />
+        </div>
+      {{/if}}
 
-    <div class="area-code-{{@areaCode}} mission-card-bottom">
-      <div class="mission-name area-code-{{@areaCode}}">
-        <p> {{@title}}</p>
+      <div class={{this.classIcon}}>
+        <img src={{this.imageUrl}} aria-hidden="true" />
       </div>
 
-      {{#if @missionButtonLabel}}
-        <div class="fake-button">
-          <p>{{@missionButtonLabel}}</p>
+      <MissionCardBackGround @class="area-code-{{@areaCode}}" @areaCode={{@areaCode}} />
+
+      <div class="area-code-{{@areaCode}} mission-card-bottom">
+        <div class="mission-name area-code-{{@areaCode}}">
+          <p> {{@title}}</p>
         </div>
-      {{/if}}
+
+        {{#if @missionButtonLabel}}
+          <div class="fake-button">
+            <p>{{@missionButtonLabel}}</p>
+          </div>
+        {{/if}}
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+}
diff --git a/junior/app/models/mission.js b/junior/app/models/mission.js
@@ -8,4 +8,5 @@ export default class Mission extends Model {
   @attr('string') introductionMediaUrl;
   @attr('string') introductionMediaType;
   @attr('string') introductionMediaAlt;
+  @attr('string') cardImageUrl;
 }
diff --git a/junior/app/styles/components/mission-card/card.scss b/junior/app/styles/components/mission-card/card.scss
@@ -114,6 +114,12 @@
       right: 18%;
     }
 
+    .mission-icon-default {
+      position: absolute;
+      top: 100px;
+      right: 27%;
+    }
+
     .mission-icon--completed {
       position: absolute;
       top: 130px;

diff --git a/junior/app/templates/identified/missions/list.hbs b/junior/app/templates/identified/missions/list.hbs
@@ -27,6 +27,7 @@
             @missionButtonLabel={{this.getMissionButtonLabel mission.id}}
             @title={{mission.name}}
             @areaCode={{mission.areaCode}}
+            @cardImageUrl={{mission.cardImageUrl}}
             @displayStartedIcon={{this.isMissionStarted mission.id}}
           />
         {{/if}}

diff --git a/junior/app/templates/identified/missions/mission/index.hbs b/junior/app/templates/identified/missions/mission/index.hbs
@@ -5,7 +5,11 @@
   </RobotDialog>
   <div class="mission-page__body">
 
-    <MissionCard::MissionCard @title={{@model.name}} @areaCode={{@model.areaCode}} />
+    <MissionCard::MissionCard
+      @title={{@model.name}}
+      @cardImageUrl={{@model.cardImageUrl}}
+      @areaCode={{@model.areaCode}}
+    />
 
     <div class="mission-page__details">
       <LinkTo @route="identified.missions" class="details-go-back">{{t

diff --git a/junior/public/images/mission/icon/area-code-1.svg b/junior/public/images/mission/icon/area-code-1.svg
diff --git a/junior/public/images/mission/icon/area-code-2.svg b/junior/public/images/mission/icon/area-code-2.svg
diff --git a/junior/public/images/mission/icon/area-code-3.svg b/junior/public/images/mission/icon/area-code-3.svg