feat(orga): upgrade ux on schoolSessionManagment component

1024pix · Dec 19, 2024 · 9f14849 · 9f14849
1 parent 56a84a6
commit 9f14849
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 26 deletions.
diff --git a/orga/app/components/layout/school-session-management.gjs b/orga/app/components/layout/school-session-management.gjs
@@ -7,6 +7,8 @@ import Component from '@glimmer/component';
 import dayjs from 'dayjs';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import { t } from 'ember-intl';
+
+import CopyPasteButton from '../copy-paste-button';
 dayjs.extend(LocalizedFormat);
 
 export default class SchoolSessionManagement extends Component {
@@ -18,6 +20,9 @@ export default class SchoolSessionManagement extends Component {
   get canManageSession() {
     return this.currentUser.canAccessMissionsPage;
   }
+  get activateSessionButtonClass() {
+    return this.sessionIsActive ? 'secondary' : 'primary';
+  }
 
   get sessionIsActive() {
     return this.currentUser.organization.sessionExpirationDate > new Date();
@@ -40,6 +45,9 @@ export default class SchoolSessionManagement extends Component {
       ? this.intl.t('navigation.school-sessions.extend-button')
       : this.intl.t('navigation.school-sessions.activate-button');
   }
+  get organizationCode() {
+    return this.currentUser.organization.schoolCode ?? '';
+  }
 
   @action
   async activateSession() {
@@ -52,35 +60,48 @@ export default class SchoolSessionManagement extends Component {
   }
 
   <template>
-    {{#if this.canManageSession}}
-      <p class="school-session__status">
-        {{#if this.sessionIsActive}}
-          {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}
-        {{else}}
-          {{t "navigation.school-sessions.status.inactive-label"}}
-        {{/if}}
-      </p>
-      <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
-        <:triggerElement>
-          <PixIcon
-            @name="help"
-            @plainIcon={{true}}
-            tabindex="0"
-            aria-label={{t "navigation.school-sessions.status.aria-label"}}
-            aria-describedby="school-session-info-tooltip"
-          />
-        </:triggerElement>
+    <div class="school-code-container">
+      <h2>{{t "navigation.school-sessions.status.code-label"}}</h2>
+      <span class="school-code"><strong>{{this.organizationCode}}</strong>
+        <CopyPasteButton
+          @clipBoardtext={{this.organizationCode}}
+          @successMessage="{{t 'pages.missions.list.banner.copypaste-container.button.success'}}"
+          @defaultMessage="{{t 'pages.missions.list.banner.copypaste-container.button.tooltip'}}"
+        />
+      </span>
 
-        <:tooltip>
-          {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
-        </:tooltip>
-      </PixTooltip>
+    </div>
 
+    {{#if this.canManageSession}}
       <PixButton
         class="school-session__button"
-        @variant="secondary"
+        @variant={{this.activateSessionButtonClass}}
         @triggerAction={{this.activateSession}}
       >{{this.buttonLabel}}</PixButton>
+      <div class="school-session__status">
+
+        {{#if this.sessionIsActive}}
+          <span class="message-status">
+            {{t "navigation.school-sessions.status.active-label" this.expirationDateParameter}}</span>
+        {{else}}
+          <span class="message-status">{{t "navigation.school-sessions.status.inactive-label"}}</span>
+        {{/if}}
+        <PixTooltip @id="school-session-info-tooltip" @position="bottom" @isWide="true">
+          <:triggerElement>
+            <PixIcon
+              @name="help"
+              @plainIcon={{true}}
+              tabindex="0"
+              aria-label={{t "navigation.school-sessions.status.aria-label"}}
+              aria-describedby="school-session-info-tooltip"
+            />
+          </:triggerElement>
+
+          <:tooltip>
+            {{t "navigation.school-sessions.status.info-text" htmlSafe=true}}
+          </:tooltip>
+        </PixTooltip>
+      </div>
     {{/if}}
   </template>
 }
diff --git a/orga/app/styles/components/layout/sidebar.scss b/orga/app/styles/components/layout/sidebar.scss
@@ -58,6 +58,46 @@
   }
 }
 
+.school-code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h2 {
+    margin-bottom: var(--pix-spacing-2x);
+    font-size: 1.1rem;
+  }
+
+  .school-code {
+    display: flex;
+    margin-left: var(--pix-spacing-3x);
+  }
+
+  .pix-icon-button {
+    color: var(--pix-primary-10);
+  }
+
+  .pix-icon-button:hover {
+    color: var(--pix-info-700);
+  }
+}
+
+.school-session {
+  &__status {
+    @extend %pix-body-s;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--pix-font-bold);
+
+    .message-status {
+      margin-right: var(--pix-spacing-2x);
+      text-wrap: nowrap
+    }
+  }
+}
+
 @include device-is('mobile') {
   .sidebar {
     position: relative;

diff --git a/orga/translations/en.json b/orga/translations/en.json
@@ -376,6 +376,7 @@
         "title": "Session status",
         "active-label": "Active session until {sessionExpirationDate}",
         "aria-label": "How does the session work ?",
+        "code-label": "School code",
         "inactive-label": "Inactive session",
         "info-text": "Students can only access missions when the session is active.'<br>'At the end of the session, students who are in the middle of a mission will not be disconnected."
       }
@@ -940,7 +941,7 @@
               "hint": "You can save this bookmark on your computers."
             }
           },
-          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button above. <b>You should do this before each session with your pupils</b>.",
+          "step3": "Step 3 : <b> Activate the Pix Junior session </b> using the button in the sideBar. <b>You should do this before each session with your pupils</b>.",
           "welcome": "Starting to use Pix Junior :"
         },
         "caption": "List of missions",

diff --git a/orga/translations/fr.json b/orga/translations/fr.json
@@ -382,6 +382,7 @@
         "title": "Statut de la session",
         "active-label": "Session active jusqu'à {sessionExpirationDate}",
         "aria-label": "Explication sur la session",
+        "code-label": "Code école",
         "inactive-label": "Session inactive",
         "info-text": "Les missions sont accessibles par les élèves uniquement lorsque la session est active.'<br>' À la fin de la session, les élèves en cours de mission ne seront pas déconnectés."
       }
@@ -946,7 +947,7 @@
               "hint": "Vous pouvez enregistrer ce favori sur les ordinateurs."
             }
           },
-          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre de navigation. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
+          "step3": "Étape 3 : <b>Activez la session Pix Junior</b> via le bouton dans la barre latérale. <b>Cette action est à réaliser avant chaque séance avec vos élèves</b>.",
           "welcome": "Pour commencer à utiliser Pix Junior :"
         },
         "caption": "Liste des missions",

diff --git a/orga/translations/nl.json b/orga/translations/nl.json
@@ -373,6 +373,7 @@
       "activate-button": "De sessie activeren",
       "extend-button": "De sessie verlengen",
       "status": {
+        "code-label": "Schoolcode",
         "active-label": "Sessie actief tot {sessionExpirationDate}",
         "aria-label": "Uitleg over de sessie",
         "inactive-label": "Sessie inactief",
@@ -936,7 +937,7 @@
             },
             "title": "Stap 2: Om leerlingen toegang te geven tot de Pix Junior-ruimte van je school, kun je :"
           },
-          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> via de knop hierboven. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
+          "step3": "Stap 3: <b>Activeer de Pix Junior sessie</b> met de knop in de sideBar. <b>Deze actie moet voor elke sessie met je leerlingen worden uitgevoerd</b>.",
           "welcome": "Hallo en welkom bij Pix Orga!"
         },
         "caption": "Lijst van opdrachten",