Skip to content

Commit

Permalink
feat(mon-pix): add trainings tab content
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeyffrey committed Aug 30, 2024
1 parent bd42834 commit c142ec7
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default class EvaluationResultsTabs extends Component {
</Panel>
{{#if this.showTrainingsTab}}
<Panel @index={{2}}>
<Trainings />
<Trainings @trainings={{@trainings}} @isParticipationShared={{@isParticipationShared}} />
</Panel>
{{/if}}
</:panels>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,38 @@
import PixButton from '@1024pix/pix-ui/components/pix-button';
import { t } from 'ember-intl';

import TrainingCard from '../../../../training/card';

<template>
<h2 class="evaluation-results-tab__title">{{t "pages.skill-review.tabs.trainings.title"}}</h2>
<p class="evaluation-results-tab__description">{{t "pages.skill-review.tabs.trainings.description"}}</p>
<div
class="evaluation-results-tab__trainings
{{unless @isParticipationShared 'evaluation-results-tab__trainings--with-modal'}}"
>
<div
class="evaluation-results-tab__trainings-content"
inert={{unless @isParticipationShared "true"}}
role={{unless @isParticipationShared "presentation"}}
>
<h2 class="evaluation-results-tab__title">{{t "pages.skill-review.tabs.trainings.title"}}</h2>
<p class="evaluation-results-tab__description">{{t "pages.skill-review.tabs.trainings.description"}}</p>

<ul class="evaluation-results-tab__trainings-list">
{{#each @trainings as |training|}}
<li class="evaluation-results-tab__training">
<TrainingCard @training={{training}} />
</li>
{{/each}}
</ul>
</div>

{{#unless @isParticipationShared}}
<div class="evaluation-results-tab__share-results-modal" role="dialog">
<div class="evaluation-results-tab-share-results-modal__content">
<p>Envoyez vos résultats pour permettre à l’organisateur du parcours de vous accompagner.<br />
Après avoir partagé, vous bénéficierez d'un accès à ces formations&nbsp;!</p>
<PixButton>J'envoie mes résultats</PixButton>
</div>
</div>
{{/unless}}
</div>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import EvaluationResultsTabs from '../../../campaigns/assessment/skill-review/ev
</header>
<EvaluationResultsTabs
@badges={{@model.campaignParticipationResult.campaignParticipationBadges}}
@isParticipationShared={{@model.campaignParticipationResult.isShared}}
@trainings={{@model.trainings}}
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
.evaluation-results-tab__trainings {
position: relative;

&--with-modal {
padding: 0 var(--pix-spacing-4x) var(--pix-spacing-4x);
}

&--with-modal .evaluation-results-tab__trainings-content {
filter: blur(2px);
}
}

.evaluation-results-tab__trainings-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: var(--pix-spacing-6x);
margin-top: var(--pix-spacing-8x);
}

.evaluation-results-tab__share-results-modal {
position: absolute;
inset: -1rem 0 0;
z-index: 1;

&::before {
position: absolute;
background-color: var(--pix-primary-900);
border-radius: 1rem;
opacity: 0.4;
content: '';
inset: 0;
}
}

.evaluation-results-tab-share-results-modal__content {
@extend %pix-body-m;

position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
gap: var(--pix-spacing-8x);
align-items: center;
max-width: 36rem;
padding: var(--pix-spacing-8x);
text-align: center;
background-color: var(--pix-neutral-0);
border: 1px solid var(--pix-neutral-100);
border-radius: 1rem;
transform: translate(-50%, -50%);
}
1 change: 1 addition & 0 deletions mon-pix/app/styles/components/campaigns/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import 'assessment/skill-review/share-badge-icons';
@import 'assessment/skill-review/evaluation-results-tabs/rewards';
@import 'assessment/skill-review/evaluation-results-tabs/trainings';
@import 'invited/learner-reconciliation';
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module('Integration | Components | Campaigns | Assessment | Skill Review | Evalu
const acquiredBadge = store.createRecord('badge', { isAcquired: true });
this.set('badges', [acquiredBadge]);

const training = store.createRecord('training');
const training = store.createRecord('training', { duration: { days: 2 } });
this.set('trainings', [training]);

// when
Expand Down Expand Up @@ -74,7 +74,7 @@ module('Integration | Components | Campaigns | Assessment | Skill Review | Evalu

this.set('badges', []);

const training = store.createRecord('training');
const training = store.createRecord('training', { duration: { days: 2 } });
this.set('trainings', [training]);

// when
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { render } from '@1024pix/ember-testing-library';
import { hbs } from 'ember-cli-htmlbars';
import { module, test } from 'qunit';

import setupIntlRenderingTest from '../../../../../../helpers/setup-intl-rendering';

module('Integration | Components | Campaigns | Assessment | Evaluation Results Tabs | Trainings', function (hooks) {
setupIntlRenderingTest(hooks);

test('it should display the trainings list', async function (assert) {
// given
const store = this.owner.lookup('service:store');
const training1 = store.createRecord('training', {
title: 'Mon super training',
link: 'https://exemple.net/',
duration: { days: 2 },
});
const training2 = store.createRecord('training', {
title: 'Mon autre super training',
link: 'https://exemple.net/',
duration: { days: 2 },
});

this.set('trainings', [training1, training2]);

// when
const screen = await render(
hbs`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @trainings={{this.trainings}} @isParticipationShared="true" />`,
);

// then
assert
.dom(screen.getByRole('heading', { name: this.intl.t('pages.skill-review.tabs.trainings.title') }))
.isVisible();
assert.dom(screen.getByText(this.intl.t('pages.skill-review.tabs.trainings.description'))).isVisible();

assert.strictEqual(screen.getAllByRole('link').length, 2);
assert.dom(screen.getByText('Mon super training')).isVisible();
assert.dom(screen.getByText('Mon autre super training')).isVisible();
});

module('when participation is not already shared', function (hooks) {
let screen;

hooks.beforeEach(async function () {
// given
this.set('isParticipationShared', false);

// when
screen = await render(
hbs`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @isParticipationShared={{this.isParticipationShared}} />`,
);
});

test('it should display a dialog with share results button', async function (assert) {
// then
assert.dom(screen.getByRole('dialog')).isVisible();
assert.dom(screen.getByText(/Envoyez vos résultats pour permettre/)).isVisible();
assert.dom(screen.getByRole('button', { name: /J'envoie mes résultats/ })).isVisible();
});

test('it should have an inert trainings list', async function (assert) {
// then
const trainingsListTitle = screen.getByRole('heading', {
name: this.intl.t('pages.skill-review.tabs.trainings.title'),
});
assert.dom(trainingsListTitle).isVisible();
assert.dom(trainingsListTitle.closest('[role="presentation"]')).hasAttribute('inert');
});
});

module('when participation is already shared', function () {
test('it should not display a dialog with share results button', async function (assert) {
// given
this.set('isParticipationShared', true);

// when
const screen = await render(
hbs`<Campaigns::Assessment::SkillReview::EvaluationResultsTabs::Trainings @trainings={{this.trainings}} @isParticipationShared={{this.isParticipationShared}} />`,
);

// then
assert.dom(screen.queryByRole('dialog')).doesNotExist();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ module('Integration | Components | Routes | Campaigns | Assessment | Evaluation

this.set('model', {
campaign,
campaignParticipationResult: { campaignParticipationBadges: [] },
trainings: [Symbol('training')],
campaignParticipationResult: { campaignParticipationBadges: [Symbol('badge')] },
trainings: [],
});

// when
Expand Down

0 comments on commit c142ec7

Please sign in to comment.