Skip to content

Commit

Permalink
feat(orga): added pix navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
alicegoarnisson authored and xav-car committed Dec 3, 2024
1 parent 7bc62e6 commit d5e7862
Show file tree
Hide file tree
Showing 22 changed files with 277 additions and 379 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ When(`je me déconnecte`, () => {
});

When(`je me déconnecte de Pix Orga`, () => {
cy.get('[aria-label="Ouvrir le menu utilisateur"]').click();
cy.contains("Se déconnecter").click();
});

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import PixIcon from '@1024pix/pix-ui/components/pix-icon';
import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
import { LinkTo } from '@ember/routing';
import { service } from '@ember/service';
import Component from '@glimmer/component';
import { t } from 'ember-intl';
Expand All @@ -15,22 +14,17 @@ export default class OrganizationPlacesOrCreditInfo extends Component {

<template>
{{#if this.currentUser.prescriber.placesManagement}}
<div class="organization-places-or-credit-info hide-on-mobile">
<div class="organization-places-or-credit-info">
{{#if (eq @placesCount 0)}}
<span class="organization-places-or-credit-info__warning">
<PixIcon @name="warning" @plainIcon={{true}} class="warning-icon" />
{{t "navigation.places.number" count=@placesCount}}</span>
{{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">
<div class="organization-places-or-credit-info">
<span>{{t "navigation.credits.number" count=this.currentUser.organization.credit}}</span>

<PixTooltip @id="credit-info-tooltip" @position="bottom-left" @isWide={{true}} @isLight={{true}}>
Expand Down
102 changes: 42 additions & 60 deletions orga/app/components/layout/sidebar.hbs
Original file line number Diff line number Diff line change
@@ -1,85 +1,67 @@
<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>
{{#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
target="_blank"
rel="noopener noreferrer"
@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"
@target="_blank"
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>
45 changes: 17 additions & 28 deletions orga/app/components/layout/user-logged-menu.hbs
Original file line number Diff line number Diff line change
@@ -1,28 +1,17 @@
<button
type="button"
{{on "click" this.toggleUserMenu}}
aria-haspopup="listbox"
aria-expanded="{{this.isMenuOpen}}"
aria-label={{t "navigation.user-logged-menu.button"}}
class="user-logged-button"
...attributes
>
<span class="user-logged-button__text">
<span>{{this.currentUser.prescriber.firstName}} {{this.currentUser.prescriber.lastName}}</span>
<span>{{this.organizationNameAndExternalId}}</span>
</span>
<PixIcon @name={{if this.isMenuOpen "chevronTop" "chevronBottom"}} />
</button>

<Dropdown::Content @display={{this.isMenuOpen}} @close={{this.closeMenu}} class="user-logged-menu">
{{#each this.eligibleOrganizations as |organization|}}
<Dropdown::Item @onClick={{fn this.onOrganizationChange organization}}>
{{organization.name}}
{{#if organization.externalId}}({{organization.externalId}}){{/if}}
</Dropdown::Item>
{{/each}}
<Dropdown::ItemLink @linkTo="logout">
<PixIcon @name="logout" class="user-logged-menu__icon" />
{{t "navigation.user-logged-menu.logout"}}
</Dropdown::ItemLink>
</Dropdown::Content>
<p>
<strong>
{{this.currentUser.prescriber.firstName}}
{{this.currentUser.prescriber.lastName}}
</strong>
<br />
{{this.organizationNameAndExternalId}}
</p>
{{#if this.belongsToSeveralOrganizations}}
<PixStructureSwitcher
@value={{this.currentUser.organization.id}}
@structures={{this.eligibleOrganizations}}
@label={{t "navigation.user-logged-menu.button"}}
@onChange={{this.onOrganizationChange}}
/>
{{/if}}
<PixButtonLink @variant="tertiary" class="" @route="logout">{{t "navigation.user-logged-menu.logout"}}</PixButtonLink>
25 changes: 8 additions & 17 deletions orga/app/components/layout/user-logged-menu.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -25,19 +22,15 @@ export default class UserLoggedMenu extends Component {
}
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;
.map((membership) => ({
label: `${membership.organization.get('name')} (${membership.organization.get('externalId')})`,
value: membership.organization.get('id'),
}))
.sort((a, b) => a.label.localeCompare(b.label));
}

@action
closeMenu() {
this.isMenuOpen = false;
get belongsToSeveralOrganizations() {
return this.eligibleOrganizations.length > 1;
}

@action
Expand All @@ -46,7 +39,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 } });
Expand All @@ -57,7 +50,5 @@ export default class UserLoggedMenu extends Component {

await this.currentUser.load();
this.args.onChangeOrganization();

this.closeMenu();
}
}
1 change: 0 additions & 1 deletion orga/app/styles/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@
@extend %pix-body-s;

display: flex;
flex-direction: column;
padding: 0 30px;
color: var(--pix-neutral-900);
justify-content: center;
padding: 0 var(--pix-spacing-4x);
font-weight: var(--pix-font-bold);

&--inline {
flex-direction: row;
}

&__warning {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
color: var(--pix-error-700);
font-weight: var(--pix-font-medium);
font-weight: 500;
background-color: rgb(var(--pix-neutral-0) / 70%);
border-radius: var(--radius-xs, 4px);
}

&__link {
Expand All @@ -28,7 +31,6 @@
}

.warning-icon {
margin: 0 var(--pix-spacing-1x);
fill: var(--pix-error-700);
}
}
6 changes: 6 additions & 0 deletions orga/app/styles/components/layout/sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,9 @@
height: auto;
}
}

.pix-tooltip__trigger-element {
.pix-icon {
fill: var(--pix-neutral-0);
}
}
15 changes: 0 additions & 15 deletions orga/app/styles/globals/pages.scss

This file was deleted.

28 changes: 0 additions & 28 deletions orga/app/styles/pages/authenticated.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
Loading

0 comments on commit d5e7862

Please sign in to comment.