Skip to content

Commit

Permalink
♻️ admin: Add PixIcon in certified profiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcampourcy
mcampourcy committed Nov 7, 2024
1 parent b4ef9c7 commit e1b4e8e
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 115 deletions.
132 changes: 78 additions & 54 deletions admin/app/components/certifications/certified-profile.gjs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import PixIcon from '@1024pix/pix-ui/components/pix-icon';
import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
import { concat } from '@ember/helper';
import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { pageTitle } from 'ember-page-title';
import partition from 'lodash/partition';
import ENV from 'pix-admin/config/environment';

Expand Down Expand Up @@ -70,62 +71,85 @@ export default class CertifiedProfile extends Component {
}

<template>
{{#each this.certifiedCompetenceList as |certifiedCompetence|}}
<section class="page-section competence">
<span class="competence__border competence__border--{{certifiedCompetence.certifiedArea.color}}"></span>
{{pageTitle "Certif " @certifiedProfile.id " Profil | Pix Admin" replace=true}}
<div class="profile">
<section class="page-section profile__header">
<div>
<header class="competence__header">
<h2 class="competence__title">{{certifiedCompetence.name}}</h2>
<sub class="competence__subtitle">{{certifiedCompetence.certifiedArea.name}}</sub>
</header>
<table class="table-admin">
<thead>
<tr>
<th class="table__column table__column--wide">Sujet</th>
{{#each this.difficultyLevels as |difficultyLevel|}}
<th class="table__column table__column--small table__column--center">Niveau {{difficultyLevel}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each certifiedCompetence.certifiedTubes as |certifiedTube|}}
<p>ID du compte Pix du candidat: {{@certifiedProfile.userId}}</p>
<p>ID de la certification du candidat: {{@certifiedProfile.id}}</p>
</div>
<div class="legend">
<p>
<PixIcon @name="doneAll" class="skill-icon skill-icon--tested-in-certif" />
Acquis proposé en certification
</p>
<p>
<PixIcon @name="check" class="skill-icon skill-icon--check" />
Acquis validé en direct ou par inférence en positionnement au moment du test de certification
</p>
</div>
</section>
{{#each this.certifiedCompetenceList as |certifiedCompetence|}}
<section class="page-section competence">
<span class="competence__border competence__border--{{certifiedCompetence.certifiedArea.color}}"></span>
<div>
<div class="competence__header">
<h2 class="competence__title">{{certifiedCompetence.name}}</h2>
<sub class="competence__subtitle">{{certifiedCompetence.certifiedArea.name}}</sub>
</div>
<table class="table-admin">
<thead>
<tr>
<td>{{certifiedTube.name}}</td>
{{#each certifiedTube.certifiedSkills as |certifiedSkill|}}
<td class="table__column--center skill-column">
{{#if certifiedSkill.hasBeenAskedInCertif}}
<PixTooltip @position="bottom">
<:triggerElement>
<FaIcon
@icon="check-double"
class="skill-column--tested-in-certif"
aria-label={{certifiedSkill.name}}
/>
</:triggerElement>
<:tooltip>{{concat certifiedSkill.id " " certifiedSkill.name}}</:tooltip>
</PixTooltip>
{{else if certifiedSkill}}
<PixTooltip @position="bottom">
<:triggerElement>
<FaIcon @icon="check" class="skill-column--check" aria-label={{certifiedSkill.name}} />
</:triggerElement>
<:tooltip>{{concat certifiedSkill.id " " certifiedSkill.name}}</:tooltip>
</PixTooltip>
{{else}}
<FaIcon @icon="xmark" class="skill-column--uncheck" />
{{/if}}
</td>
<th class="table__column table__column--wide">Sujet</th>
{{#each this.difficultyLevels as |difficultyLevel|}}
<th class="table__column table__column--small table__column--center">Niveau {{difficultyLevel}}</th>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</section>
{{else}}
<section class="page-section">
<div class="table__empty">Profil certifié vide.</div>
</section>
{{/each}}
</thead>
<tbody>
{{#each certifiedCompetence.certifiedTubes as |certifiedTube|}}
<tr>
<td>{{certifiedTube.name}}</td>
{{#each certifiedTube.certifiedSkills as |certifiedSkill|}}
<td class="table__column--center skill-column">
{{#if certifiedSkill.hasBeenAskedInCertif}}
<PixTooltip @position="bottom">
<:triggerElement>
<PixIcon
@name="doneAll"
class="skill-icon skill-icon--tested-in-certif"
aria-label={{certifiedSkill.name}}
/>
</:triggerElement>
<:tooltip>{{concat certifiedSkill.id " " certifiedSkill.name}}</:tooltip>
</PixTooltip>
{{else if certifiedSkill}}
<PixTooltip @position="bottom">
<:triggerElement>
<PixIcon
@name="check"
class="skill-icon skill-icon--check"
aria-label={{certifiedSkill.name}}
/>
</:triggerElement>
<:tooltip>{{concat certifiedSkill.id " " certifiedSkill.name}}</:tooltip>
</PixTooltip>
{{else}}
<PixIcon @name="close" class="skill-icon skill-icon--uncheck" />
{{/if}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</section>
{{else}}
<section class="page-section">
<div class="table__empty">Profil certifié vide.</div>
</section>
{{/each}}
</div>
</template>
}
1 change: 0 additions & 1 deletion admin/app/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
@import 'components/organizations/places';
@import 'components/organizations/places-lot-creation-form';
@import 'components/participation-row';
@import 'components/profile';
@import 'components/publish-session-button';
@import 'components/sessions/jury-comment';
@import 'components/sessions/list-items';
Expand Down
48 changes: 42 additions & 6 deletions admin/app/styles/components/certified-profile.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,43 @@
/* stylelint-disable no-invalid-double-slash-comments, selector-class-pattern */
// For more style details about this component,
// see admin/app/styles/components/target-profiles/details.scss
.skill-column--tested-in-certif {
color: var(--pix-information-light);
font-size: 1.7rem;
.profile {
&__header {
display: flex;
justify-content: space-between;
width: 100%;
padding: 32px;
border-radius: 5px;

.legend {
padding: 12px;
background-color: rgb(0 0 0 / 3%);
border: 1px solid var(--pix-neutral-100);
border-radius: 8px;

> p {
display: flex;
gap: var(--pix-spacing-3x);
align-items: center;
}
}
}

.skill-icon {
width: 2rem;
height: 2rem;

&--tested-in-certif {
fill: var(--pix-information-light);
}

&--check {
fill: var(--pix-success-700);
}

&--uncheck {
fill: var(--pix-neutral-20);
}
}

.skill-column {
overflow: visible;
}
}
17 changes: 0 additions & 17 deletions admin/app/styles/components/profile.scss
View file

This file was deleted.

14 changes: 0 additions & 14 deletions admin/app/styles/components/target-profiles/details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,3 @@
}
}
}

.skill-column {
overflow: visible;

&--check {
color: var(--pix-success-700);
font-size: 1.7rem;
}

&--uncheck {
color: var(--pix-neutral-20);
font-size: 1.7rem;
}
}
19 changes: 0 additions & 19 deletions admin/app/templates/authenticated/certifications/certification/profile.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1 @@
{{page-title "Certif " @model.id " Profil | Pix Admin" replace=true}}

<section class="profile__header">
<div>
<p>ID du compte Pix du candidat: {{@model.userId}}</p>
<p>ID de la certification du candidat: {{@model.id}}</p>
</div>
<div class="legend">
<p>
<FaIcon @icon="check-double" class="skill-column--tested-in-certif" />
Acquis proposé en certification
</p>
<p>
<FaIcon @icon="check" class="skill-column--check" />
Acquis validé en direct ou par inférence en positionnement au moment du test de certification
</p>
</div>
</section>

<Certifications::CertifiedProfile @certifiedProfile={{@model}} />
9 changes: 5 additions & 4 deletions admin/tests/integration/components/certifications/certified-profile-test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,11 @@ module('Integration | Component | certifications/certified-profile', function (h

// then
assert.dom(screen.getByText('tube1')).exists();
const iconSkill1 = screen.getByLabelText('skill1').getAttribute('data-icon');
const iconSkill2 = screen.getByLabelText('skill2').getAttribute('data-icon');
assert.strictEqual(iconSkill1, 'check-double');
assert.strictEqual(iconSkill2, 'check');
const iconSkill1 = screen.getByLabelText('skill1');
const iconSkill2 = screen.getByLabelText('skill2');

assert.ok(iconSkill1.classList.contains('skill-icon--tested-in-certif'));
assert.ok(iconSkill2.classList.contains('skill-icon--check'));
});

test('it should display non Pix competences first', async function (assert) {
Expand Down

0 comments on commit e1b4e8e

Please sign in to comment.