Skip to content

Commit

Permalink
[FEATURE] Intégrer le nouvelle navigation sur PixOrga (PIX-15369)
Browse files Browse the repository at this point in the history
  • Loading branch information
pix-service-auto-merge authored Dec 5, 2024
2 parents 2546e2f + b861f5b commit 85be3aa
Show file tree
Hide file tree
Showing 26 changed files with 348 additions and 389 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
16 changes: 6 additions & 10 deletions orga/app/components/layout/organization-places-or-credit-info.gjs
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 @@ -10,30 +9,27 @@ export default class OrganizationPlacesOrCreditInfo extends Component {
@service currentUser;

get canShowCredit() {
return this.currentUser.isAdminInOrganization && this.currentUser.organization.credit > 0;
const canShow = this.currentUser.isAdminInOrganization && this.currentUser.organization.credit > 0;
this.args.onCanShowCredit?.(canShow);
return canShow;
}

<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}}>
<PixTooltip @id="credit-info-tooltip" @position="auto" @isWide={{true}} @isLight={{true}}>
<:triggerElement>
<PixIcon
@name="help"
Expand Down
115 changes: 50 additions & 65 deletions orga/app/components/layout/sidebar.hbs
Original file line number Diff line number Diff line change
@@ -1,92 +1,77 @@
<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 @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="assignment">
{{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.shouldDisplayStatisticsEntry}}
<PixNavigationButton @route="authenticated.statistics" @icon="monitoring">
{{t "navigation.main.statistics"}}
</PixNavigationButton>
{{/if}}

{{#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}}
{{#if this.shouldDisplayStatisticsEntry}}
<LinkTo @route="authenticated.statistics" class="sidebar-nav__item">
<span class="sidebar-nav__item-icon">
<PixIcon @name="monitoring" role="none" />
</span>
{{t "navigation.main.statistics"}}
</LinkTo>
</:navElements>
<:footer>
<Layout::OrganizationPlacesOrCreditInfo
@placesCount={{@placesCount}}
@onCanShowCredit={{this.handleCanShowCredit}}
/>
<Layout::SchoolSessionManagement />
{{#if this.shouldDisplaySeparator}}
<PixNavigationSeparator />
{{/if}}
</nav>
</aside>
<Layout::UserLoggedMenu @onChangeOrganization={{@onChangeOrganization}} />
</:footer>
</PixNavigation>
11 changes: 11 additions & 0 deletions orga/app/components/layout/sidebar.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { service } from '@ember/service';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class SidebarMenu extends Component {
@service currentUser;
@service url;

@tracked canShowCredit;

handleCanShowCredit = (value) => {
this.canShowCredit = value;
};

get redirectionRoute() {
if (this.shouldDisplayMissionsEntry) {
return 'authenticated.missions';
Expand Down Expand Up @@ -41,6 +48,10 @@ export default class SidebarMenu extends Component {
return this.currentUser.canAccessStatisticsPage;
}

get shouldDisplaySeparator() {
return this.shouldDisplayMissionsEntry || this.shouldDisplayPlacesEntry || this.canShowCredit;
}

get organizationLearnersList() {
if (this.currentUser.isSCOManagingStudents) {
return {
Expand Down
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: var(--pix-spacing-2x);
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-inline), 70%);
border-radius: 4px;
}

&__link {
Expand All @@ -24,11 +27,10 @@

.info-icon {
margin: 0 var(--pix-spacing-1x);
fill: var(--pix-neutral-100);
fill: var(--pix-neutral-0);
}

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

Loading

0 comments on commit 85be3aa

Please sign in to comment.