[FEATURE] Affiche le nom de l'élève sélectionné dans la page des missions (PIX-9087)

 #7282

Author: pix-service-auto-merge

1d/app/models/organization-learner.js

@@ -0,0 +1,9 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class OrganizationLearner extends Model {
+  @attr id;
+  @attr lastName;
+  @attr firstName;
+  @attr division;
+  @attr organizationId;
+}

1d/app/pods/assessment/results/template.hbs

@@ -35,7 +35,7 @@
         {{/if}}
       </ul>
 
-      <PixButtonLink @route="missions" @shape="rounded" class="details-action">
+      <PixButtonLink @route="identified.missions" @shape="rounded" class="details-action">
         <p>{{t "pages.missions.end-page.back-to-missions"}}</p>
         <FaIcon @icon="arrow-right" class="details-action__icon" />
       </PixButtonLink>

1d/app/pods/components/robot-dialog/robot-dialog.scss

@@ -30,7 +30,7 @@
       }
     }
 
-    a::after {
+    a:not(.internal-link)::after  {
       display: inline-block;
       width: 1rem;
       height: 1rem;

1d/app/pods/error/template.hbs

@@ -2,5 +2,7 @@
 <div class="error">
   <h1>{{t "pages.error.title"}}</h1>
   <p>{{t "pages.error.message"}}</p>
-  <LinkTo class="pix1d-button pix1d-button--small not-found__button" @route="home">{{t "pages.error.backHome"}}</LinkTo>
+  <LinkTo class="pix1d-button pix1d-button--small not-found__button" @route="identified.missions">{{t
+      "pages.error.backHome"
+    }}</LinkTo>
 </div>

1d/app/pods/identified/missions/list/controller.js

@@ -0,0 +1,10 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+
+export default class Students extends Controller {
+  @service currentLearner;
+
+  get learnerFirstName() {
+    return this.currentLearner.learner.firstName;
+  }
+}

1d/app/pods/missions/list/missions.scss 1d/app/pods/identified/missions/list/missions.scss

@@ -1,12 +1,14 @@
 {{page-title "Home"}}
 <div>
-  <RobotDialog @instruction={{t "pages.missions.start-page.list"}} />
+  <RobotDialog
+    @instruction={{t "pages.missions.start-page.list" prenom=this.learnerFirstName backUrl=@model.studentsUrl}}
+  />
   <div class="cards">
-    <LinkTo @route="missions.mission" @model="recExjO7RHeDI48HK">
+    <LinkTo @route="identified.missions.mission" @model="recExjO7RHeDI48HK">
       <MissionCard @title="Recherche sur internet" @colorClass="red" @imageName="internet-search" />
     </LinkTo>
 
-    <LinkTo @route="missions.mission" @model="recZtwymXXrtdXRrx">
+    <LinkTo @route="identified.missions.mission" @model="recZtwymXXrtdXRrx">
       <MissionCard @title="Données personnelles" @colorClass="blue" @imageName="personal-data" />
     </LinkTo>
   </div>

1d/app/pods/missions/list/template.hbs 1d/app/pods/identified/missions/list/template.hbs

@@ -1,13 +1,13 @@
 import { module, test } from 'qunit';
-import { setupTest } from '../../../../helpers/tests';
+import { setupTest } from '../../../../../helpers/tests';
 import sinon from 'sinon';
 
 module('Unit | Route | MissionResumeRoute', function (hooks) {
   setupTest(hooks);
 
   module('#model', function () {
     test('should call queryRecord method', async function (assert) {
-      const route = this.owner.lookup('route:missions.mission.resume');
+      const route = this.owner.lookup('route:identified.missions.mission.resume');
       const store = this.owner.lookup('service:store');
       const missionId = 23;
       const transition = { to: { parent: { params: { mission_id: missionId } } } };
@@ -21,7 +21,7 @@ module('Unit | Route | MissionResumeRoute', function (hooks) {
 
   module('#afterModel', function () {
     test('should redirect to assessment resume route', async function (assert) {
-      const route = this.owner.lookup('route:missions.mission.resume');
+      const route = this.owner.lookup('route:identified.missions.mission.resume');
       const assessment = Symbol('assessment');
       sinon.stub(route.router, 'replaceWith');
 

1d/app/pods/missions/mission/mission.scss 1d/app/pods/identified/missions/mission/mission.scss

@@ -8,7 +8,9 @@
     {{/if}}
 
     <div class="mission-page__details">
-      <LinkTo @route="missions" class="details-go-back">{{t "pages.missions.start-page.back-to-missions"}}</LinkTo>
+      <LinkTo @route="identified.missions" class="details-go-back">{{t
+          "pages.missions.start-page.back-to-missions"
+        }}</LinkTo>
       <p class="details-list__title details-list__title--big">{{t "pages.missions.start-page.purpose-title"}}</p>
       <ul class="details-list">
         <li class="details-list__item">
@@ -21,7 +23,7 @@
         </li>
       </ul>
 
-      <PixButtonLink @route="missions.mission.resume" @shape="rounded" class="details-action">
+      <PixButtonLink @route="identified.missions.mission.resume" @shape="rounded" class="details-action">
         <p>{{t "pages.missions.start-page.start-mission"}}</p>
         <FaIcon @icon="arrow-right" class="details-action__icon" />
       </PixButtonLink>

1d/app/pods/missions/mission/resume/route.js 1d/app/pods/identified/missions/mission/resume/route.js

@@ -0,0 +1,20 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class IdentifiedRoute extends Route {
+  @service router;
+  @service currentLearner;
+
+  async beforeModel() {
+    if (!this.currentLearner.learner) {
+      this.router.transitionTo('organization-code');
+    }
+  }
+
+  async model() {
+    const currentLearner = this.currentLearner.learner;
+    return {
+      studentsUrl: `${currentLearner.schoolUrl}/students?division=${currentLearner.division}`,
+    };
+  }
+}

1d/app/pods/missions/mission/resume/unit_test.js 1d/app/pods/identified/missions/mission/resume/unit_test.js

@@ -2,7 +2,7 @@
 <div class="error">
   <h1>{{t "pages.not-found.title"}}</h1>
   <p>{{t "pages.not-found.message"}}</p>
-  <LinkTo class="pix1d-button pix1d-button--small not-found__button" @route="home">{{t
+  <LinkTo class="pix1d-button pix1d-button--small not-found__button" @route="identified.missions">{{t
       "pages.not-found.backHome"
     }}</LinkTo>
 </div>

1d/app/pods/missions/mission/route.js 1d/app/pods/identified/missions/mission/route.js

@@ -17,7 +17,8 @@ export default class Home extends Controller {
   }
 
   @action
-  goToSchool() {
+  goToSchool(event) {
+    event.preventDefault();
     this.router.transitionTo('school', this.upperCaseCode);
   }
 }

1d/app/pods/missions/mission/template.hbs 1d/app/pods/identified/missions/mission/template.hbs

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class OrganizationCodeRoute extends Route {
+  @service currentLearner;
+
+  async beforeModel() {
+    this.currentLearner.remove();
+  }
+}

1d/app/pods/identified/route.js

@@ -1,6 +1,8 @@
 {{page-title "Home"}}
+
 <RobotDialog @instruction={{t "pages.home.code-instruction"}} />
-<div class="school-code">
+
+<form onSubmit={{this.goToSchool}} class="school-code">
   <PixInputCode
     @ariaLabel={{t "pages.home.field-description"}}
     @legend={{t "pages.home.code-description"}}
@@ -10,7 +12,7 @@
     class="school-code__input"
   />
 
-  <PixButton class="pix1d-button" @triggerAction={{this.goToSchool}} @shape="rounded">
+  <PixButton class="pix1d-button" @type="submit" @shape="rounded">
     {{t "pages.home.go-to-school"}}
   </PixButton>
-</div>
+</form>

1d/app/pods/not-found/template.hbs

@@ -3,11 +3,17 @@ import { service } from '@ember/service';
 
 export default class SchoolRoute extends Route {
   @service store;
+  @service currentLearner;
+
+  async beforeModel() {
+    this.currentLearner.remove();
+  }
 
   async model(params) {
     const school = await this.store.findRecord('school', params.code);
     const divisions = [...new Set(school.organizationLearners.map((learner) => learner.division))];
     return {
+      code: school.code,
       name: school.name,
       organizationLearners: school.organizationLearners,
       divisions: divisions.sort(),

1d/app/pods/home/controller.js 1d/app/pods/organization-code/controller.js

@@ -13,11 +13,22 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 150px;
+    min-width: 150px;
     height: 70px;
+    color: black;
+    font-size: 1.125rem;
     background: #FFFFFF;
-    border: 4px solid #FFFFFF;
     border-radius: 8px;
     box-shadow: 0 0 1px 0 #3D68FF, 8px 8px 32px -8px rgb(61 104 255 / 20%);
+
+    &:hover {
+      background-color: #EBEFFF;
+    }
+  }
+}
+
+.pix-button--background-blue.learners__item {
+  &:hover {
+    background-color: #EBEFFF;
   }
 }

1d/app/pods/home/home.scss 1d/app/pods/organization-code/home.scss

@@ -1,9 +1,20 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
 
 export default class Students extends Controller {
+  @service currentLearner;
+  @service router;
+
   queryParams = ['division'];
 
   uppercaseFirstLetter(name) {
     return name.charAt(0).toUpperCase() + name.slice(1);
   }
+
+  @action
+  identifyUser(learner) {
+    this.currentLearner.setLearner({ ...learner, schoolUrl: this.model.schoolUrl });
+    this.router.transitionTo('identified.missions');
+  }
 }

1d/app/pods/organization-code/route.js

@@ -1,15 +1,22 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+
 export default class StudentsRoute extends Route {
   @service router;
-  async model(_, transition) {
+
+  queryParams = {
+    division: '',
+  };
+
+  async model(params) {
     const school = await this.modelFor('school');
-    if (transition.to.queryParams.division) {
-      const division = transition.to.queryParams.division;
+    const division = params.division;
+    if (division) {
       const divisionLearners = school.organizationLearners.filter((learner) => learner.division === division);
       return {
         division,
         organizationLearners: divisionLearners,
+        schoolUrl: `/schools/${school.code}`,
       };
     } else {
       return this.router.replaceWith('school', school);

1d/app/pods/home/template.hbs 1d/app/pods/organization-code/template.hbs

@@ -1,9 +1,9 @@
-<RobotDialog @instruction={{t "pages.school.division.find-name" division=@model.division}} />
+<RobotDialog @instruction={{t "pages.school.division.find-name" division=@model.division backUrl=@model.schoolUrl}} />
 <div class="learners">
   {{#each @model.organizationLearners as |learner|}}
-    <LinkTo @route="missions" class="learners__item">
+    <PixButton @triggerAction={{fn this.identifyUser learner}} class="learners__item">
       <p>{{learner.firstName}}</p>
       <p>{{this.uppercaseFirstLetter learner.lastName}}</p>
-    </LinkTo>
+    </PixButton>
   {{/each}}
 </div>

1d/app/pods/school/route.js

@@ -17,15 +17,18 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('home', { path: '/' });
+  this.route('organization-code');
   this.route('school', { path: '/schools/:code' }, function () {
     this.route('divisions', { path: '/' });
     this.route('students');
   });
-  this.route('missions', function () {
-    this.route('list', { path: '/' });
-    this.route('mission', { path: '/:mission_id' }, function () {
-      this.route('resume');
+
+  this.route('identified', { path: '/' }, function () {
+    this.route('missions', { path: '/' }, function () {
+      this.route('list', { path: '/' });
+      this.route('mission', { path: 'missions/:mission_id' }, function () {
+        this.route('resume');
+      });
     });
   });
 

1d/app/pods/school/school.scss

@@ -0,0 +1,15 @@
+import Service from '@ember/service';
+
+export default class CurrentLearnerService extends Service {
+  get learner() {
+    return JSON.parse(localStorage.getItem('learner'));
+  }
+
+  async setLearner(learner) {
+    localStorage.setItem('learner', JSON.stringify(learner));
+  }
+
+  async remove() {
+    localStorage.removeItem('learner');
+  }
+}