feat(orga): add pix-navigation

1024pix · Dec 3, 2024 · a1ba6c7 · a1ba6c7
1 parent d645bce
commit a1ba6c7
Show file tree

Hide file tree

Showing 19 changed files with 135 additions and 264 deletions.
diff --git a/orga/app/components/layout/organization-places-or-credit-info.gjs b/orga/app/components/layout/organization-places-or-credit-info.gjs
@@ -23,11 +23,6 @@ export default class OrganizationPlacesOrCreditInfo extends Component {
         {{else}}
           <span>{{t "navigation.places.number" count=@placesCount}}</span>
         {{/if}}
-        {{#if this.currentUser.isAdminInOrganization}}
-          <LinkTo @route="authenticated.places" class="organization-places-or-credit-info__link">
-            {{t "navigation.places.link"}}
-          </LinkTo>
-        {{/if}}
       </div>
     {{else if this.canShowCredit}}
       <div class="organization-places-or-credit-info organization-places-or-credit-info--inline hide-on-mobile">

diff --git a/orga/app/components/layout/sidebar.hbs b/orga/app/components/layout/sidebar.hbs
@@ -1,85 +1,63 @@
-<aside class="sidebar">
-  <header class="sidebar__logo hide-on-mobile">
+<PixNavigation @variant="orga" @navigationAriaLabel={{t "navigation.main.aria-label"}} @menuLabel="Menu">
+  <:brand>
     <LinkTo @route={{this.redirectionRoute}}>
-      <img src="{{this.rootUrl}}/pix-orga.svg" alt="{{t 'common.home-page'}}" />
+      <img src="{{this.rootUrl}}/pix-orga.svg" class="pix-orga-logo" alt="{{t 'common.home-page'}}" />
     </LinkTo>
-  </header>
-
-  <nav class="sidebar-nav" aria-label={{t "navigation.main.aria-label"}}>
+  </:brand>
+  <:navElements>
+    <PixNavigationButton @route="login" @icon="home">{{t "navigation.main.home"}}</PixNavigationButton>
     {{#if this.shouldDisplayCampaignsEntry}}
-      <LinkTo @route="authenticated.campaigns" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="conversionPath" role="none" />
-        </span>
-        {{t "navigation.main.campaigns"}}
-      </LinkTo>
+      <PixNavigationButton @route={{this.redirectionRoute}} @icon="conversionPath">
+        {{t "navigation.main.campaigns"}}</PixNavigationButton>
     {{/if}}
-
     {{#if this.shouldDisplayCertificationsEntry}}
-      <LinkTo @route="authenticated.certifications" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="awards" role="none" />
-        </span>
-        {{t "navigation.main.certifications"}}
-      </LinkTo>
+      <PixNavigationButton @route="authenticated.certifications" @icon="awards">
+        {{t "navigation.main.certifications"}}</PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayAttestationsEntry}}
-      <LinkTo @route="authenticated.attestations" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="assignment" role="none" />
-        </span>
-        {{t "navigation.main.attestations"}}
-      </LinkTo>
+      <PixNavigationButton @route="authenticated.attestations" @icon="awards">
+        {{t "navigation.main.attestations"}}</PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayMissionsEntry}}
-      <LinkTo @route="authenticated.missions" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="conversionPath" role="none" />
-        </span>
+      <PixNavigationButton @route="authenticated.missions" @icon="conversionPath">
         {{t "navigation.main.missions"}}
-      </LinkTo>
+      </PixNavigationButton>
     {{/if}}
-    <LinkTo @route={{this.organizationLearnersList.route}} class="sidebar-nav__item">
-      <span class="sidebar-nav__item-icon">
-        <PixIcon @name="infoUser" role="none" />
-      </span>
+
+    <PixNavigationButton @route={{this.organizationLearnersList.route}} @icon="infoUser">
       {{t this.organizationLearnersList.label}}
-    </LinkTo>
-    <LinkTo @route="authenticated.team" class="sidebar-nav__item">
-      <span class="sidebar-nav__item-icon">
-        <PixIcon @name="users" role="none" />
-      </span>
+    </PixNavigationButton>
+
+    <PixNavigationButton @route="authenticated.team" @icon="users">
       {{t "navigation.main.team"}}
-    </LinkTo>
+    </PixNavigationButton>
+
     {{#if this.shouldDisplayPlacesEntry}}
-      <LinkTo @route="authenticated.places" class="sidebar-nav__item">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="seat" role="none" />
-        </span>
+      <PixNavigationButton @route="authenticated.places" @icon="seat">
         {{t "navigation.main.places"}}
-      </LinkTo>
+      </PixNavigationButton>
     {{/if}}
+
     {{#if this.documentationUrl}}
-      <a class="sidebar-nav__item" href={{this.documentationUrl}} target="_blank" rel="noopener noreferrer">
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="book" role="none" />
-        </span>
+      <PixNavigationButton href={{this.documentationUrl}} target="_blank" rel="noopener noreferrer" @icon="book">
         {{t "navigation.main.documentation"}}
-      </a>
+      </PixNavigationButton>
     {{/if}}
     {{#if this.shouldDisplayMissionsEntry}}
-      <a
+      <PixNavigationButton
         href="https://pix.fr/support/enseignement-scolaire/1er-degre"
         target="_blank"
-        class="sidebar-nav__item"
         rel="noopener noreferrer"
+        @icon="help"
       >
-        <span class="sidebar-nav__item-icon">
-          <PixIcon @name="help" role="none" />
-        </span>
         {{t "navigation.main.support"}}
-      </a>
+      </PixNavigationButton>
     {{/if}}
-
-  </nav>
-</aside>
+  </:navElements>
+  <:footer>
+    <Layout::OrganizationPlacesOrCreditInfo @placesCount={{@placesCount}} />
+    <Layout::SchoolSessionManagement />
+    <PixNavigationSeparator />
+    <Layout::UserLoggedMenu @onChangeOrganization={{@onChangeOrganization}} />
+  </:footer>
+</PixNavigation>
diff --git a/orga/app/components/layout/user-logged-menu.hbs b/orga/app/components/layout/user-logged-menu.hbs
@@ -1,4 +1,4 @@
-<button
+{{!-- <button
   type="button"
   {{on "click" this.toggleUserMenu}}
   aria-haspopup="listbox"
@@ -25,4 +25,21 @@
     <PixIcon @name="logout" class="user-logged-menu__icon" />
     {{t "navigation.user-logged-menu.logout"}}
   </Dropdown::ItemLink>
-</Dropdown::Content>
+</Dropdown::Content> --}}
+<p>
+  <strong>
+    {{this.currentUser.prescriber.firstName}}
+    {{this.currentUser.prescriber.lastName}}
+  </strong>
+  <br />
+  {{this.organizationNameAndExternalId}}
+</p>
+<PixStructureSwitcher
+  @value={{this.currentUser.organization.id}}
+  @structures={{this.eligibleOrganizations}}
+  @label={{t "navigation.user-logged-menu.button"}}
+  @onChange={{this.onOrganizationChange}}
+/>
+{{log this.eligibleOrganizations}}
+{{log this.currentUser.organization.id}}
+<PixButtonLink @variant="tertiary" class="" @route="logout">{{t "navigation.user-logged-menu.logout"}}</PixButtonLink>
diff --git a/orga/app/components/layout/user-logged-menu.js b/orga/app/components/layout/user-logged-menu.js
@@ -1,15 +1,12 @@
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 export default class UserLoggedMenu extends Component {
   @service currentUser;
   @service router;
   @service store;
 
-  @tracked isMenuOpen = false;
-
   get organizationNameAndExternalId() {
     const organization = this.currentUser.organization;
     if (organization.externalId) {
@@ -23,21 +20,14 @@ export default class UserLoggedMenu extends Component {
     if (!memberships) {
       return [];
     }
+    console.log(this.currentUser.organization.id);
     return memberships
       .slice()
-      .map((membership) => membership.organization)
-      .filter((organization) => organization.get('id') !== this.currentUser.organization.id)
-      .sort((a, b) => a.get('name').localeCompare(b.get('name')));
-  }
-
-  @action
-  toggleUserMenu() {
-    this.isMenuOpen = !this.isMenuOpen;
-  }
-
-  @action
-  closeMenu() {
-    this.isMenuOpen = false;
+      .map((membership) => ({
+        label: membership.organization.get('name'),
+        value: membership.organization.get('id'),
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
   }
 
   @action
@@ -46,7 +36,7 @@ export default class UserLoggedMenu extends Component {
     const userOrgaSettingsId = prescriber.userOrgaSettings.get('id');
 
     const userOrgaSettings = await this.store.peekRecord('user-orga-setting', userOrgaSettingsId);
-    const selectedOrganization = await this.store.peekRecord('organization', organization.get('id'));
+    const selectedOrganization = await this.store.peekRecord('organization', organization.value);
 
     userOrgaSettings.organization = selectedOrganization;
     await userOrgaSettings.save({ adapterOptions: { userId: prescriber.id } });
@@ -57,7 +47,5 @@ export default class UserLoggedMenu extends Component {
 
     await this.currentUser.load();
     this.args.onChangeOrganization();
-
-    this.closeMenu();
   }
 }
diff --git a/orga/app/styles/app.scss b/orga/app/styles/app.scss
@@ -10,7 +10,6 @@
 @import 'globals/errors';
 @import 'globals/forms';
 @import 'globals/icons';
-@import 'globals/pages';
 @import 'globals/panels';
 @import 'globals/pix-loader';
 @import 'globals/tables';

diff --git a/orga/app/styles/components/layout/organization-places-or-credit-info.scss b/orga/app/styles/components/layout/organization-places-or-credit-info.scss
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   padding: 0 30px;
-  color: var(--pix-neutral-900);
   font-weight: var(--pix-font-bold);
 
   &--inline {

diff --git a/orga/app/styles/globals/pages.scss b/orga/app/styles/globals/pages.scss
diff --git a/orga/app/styles/pages/authenticated.scss b/orga/app/styles/pages/authenticated.scss
@@ -1,34 +1,6 @@
-.app {
-  display: flex;
-  align-items: stretch;
-  min-height: 100vh;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-
-  // Minus 280px because it corresponds to the sidebar's width
-  width: calc(100% - 280px);
-  background-color: var(--pix-neutral-20);
-
-  &__body {
-    flex: 1 0 auto;
-  }
-}
-
 .sticker-banner {
   position: sticky;
   top: 0;
   z-index: 200;
 }
 
-@include device-is('mobile') {
-  .app {
-    flex-direction: column;
-  }
-
-  .main-content {
-    width: 100%;
-  }
-}
diff --git a/orga/app/templates/authenticated.hbs b/orga/app/templates/authenticated.hbs
@@ -1,18 +1,17 @@
-<div class="app">
-  <Layout::Sidebar />
-
-  <div class="main-content">
-    <header>
-      <Layout::Topbar @placesCount={{@model.available}} @onChangeOrganization={{this.onChangeOrganization}} />
-    </header>
-
-    <main class="main-content__body page">
-      <Banner::TopBanners />
-      {{outlet}}
-    </main>
+<PixAppLayout @variant="orga" class="app">
+  <Layout::Sidebar @placesCount={{@model.available}} @onChangeOrganization={{this.onChangeOrganization}} />
+  {{! <div class="main-content"> }}
+  {{! <header>
+      TODO: remove component and merge tests
+      <Layout::Topbar />
+    </header> }}
 
+  <main class="main-content__body page">
+    <Banner::TopBanners />
+    {{outlet}}
     <Layout::Footer />
-  </div>
+  </main>
 
-  <NotificationContainer @position="bottom-right" />
-</div>
+  {{! </div> }}
+</PixAppLayout>
+<NotificationContainer @position="bottom-right" />