Skip to content

Commit ed23089

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[FEATURE] Ajouter PixTable dans le tableau rattachant un profil cible à une complémentaire sur Pix Admin (PIX-16681).
 #11470
2 parents 98104ef + 212f434 commit ed23089

File tree

10 files changed

+272
-300
lines changed

10 files changed

+272
-300
lines changed

‎admin/app/components/complementary-certifications/attach-badges/badges/content-header.gjs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import PixIcon from '@1024pix/pix-ui/components/pix-icon';
2+
import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
3+
4+
<template>
5+
<span class="attach-badges-header__content">
6+
{{yield}}
7+
{{#unless @isOptionnal}}
8+
<abbr title="obligatoire" class="mandatory-mark">*</abbr>
9+
{{/unless}}
10+
{{#if (has-block "tooltip")}}
11+
<PixTooltip role="tooltip" @isLight={{true}} @isWide={{true}} @position="bottom-left" class="content_tooltip">
12+
<:triggerElement>
13+
<PixIcon @name="info" @plainIcon={{true}} @ariaHidden={{true}} />
14+
</:triggerElement>
15+
<:tooltip>{{yield to="tooltip"}}</:tooltip>
16+
</PixTooltip>
17+
{{/if}}
18+
</span>
19+
</template>

‎admin/app/components/complementary-certifications/attach-badges/badges/header.gjs

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎admin/app/components/complementary-certifications/attach-badges/badges/list.gjs

Lines changed: 200 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
import PixInput from '@1024pix/pix-ui/components/pix-input';
12
import PixNotificationAlert from '@1024pix/pix-ui/components/pix-notification-alert';
3+
import PixTable from '@1024pix/pix-ui/components/pix-table';
4+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
5+
import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
6+
import { fn } from '@ember/helper';
7+
import { on } from '@ember/modifier';
28
import { action } from '@ember/object';
39
import Component from '@glimmer/component';
410
import { t } from 'ember-intl';
511

6-
import Header from './header';
7-
import Row from './row';
12+
import ContentHeader from './content-header';
813

914
export default class List extends Component {
1015
@action
@@ -37,78 +42,203 @@ export default class List extends Component {
3742
{{t "common.forms.mandatory-fields" htmlSafe=true}}
3843
</p>
3944

40-
<table aria-label="Liste des résultats thématiques">
41-
<thead>
42-
<tr>
43-
<Header>
44-
ID
45-
</Header>
46-
<Header>
47-
Nom
48-
</Header>
49-
<Header>
50-
<:default>Niveau</:default>
51-
<:tooltip>
52-
Renseignez un chiffre unique pour chaque RT, niveau minimum = 1 niveau maximum = nombre total de RT.
53-
</:tooltip>
54-
</Header>
55-
<Header @isOptionnal="true">
56-
<:default>Nombre de pix minimum</:default>
57-
</Header>
58-
<Header>
59-
<:default>Image svg certificat Pix App</:default>
60-
<:tooltip>
61-
Renseignez l’URL de l’image au format .svg (fournie par les devs) pour le certificat Pix App du
62-
candidat.
63-
</:tooltip>
64-
</Header>
65-
<Header>
66-
<:default>Label du certificat</:default>
67-
<:tooltip>
68-
Renseignez un label qui permet de distinguer chaque RT (exemples : Pix+ Droit Expert, CléA
69-
Numérique, Pix+ Edu 2nd degré Confirmé etc…)
70-
</:tooltip>
71-
</Header>
72-
<Header>
73-
<:default>Macaron de l'attestation PDF</:default>
74-
<:tooltip>
75-
Renseignez l’URL de l’image au format .pdf (fournie par les devs) pour l’attestation de
76-
certification PDF du candidat.
77-
</:tooltip>
78-
</Header>
79-
{{#if @hasExternalJury}}
80-
<Header>
81-
<:default>Message du certificat</:default>
45+
<PixTable @variant="primary" @data={{@options}} @caption="Liste des résultats thématiques">
46+
<:columns as |row option|>
47+
<PixTableColumn @context={{option}}>
48+
<:header>
49+
<ContentHeader>
50+
ID
51+
</ContentHeader>
52+
</:header>
53+
<:cell>
54+
{{row.id}}
55+
</:cell>
56+
</PixTableColumn>
57+
<PixTableColumn @context={{option}}>
58+
<:header>
59+
<ContentHeader>
60+
Nom
61+
</ContentHeader>
62+
</:header>
63+
<:cell>
64+
{{row.label}}
65+
</:cell>
66+
</PixTableColumn>
67+
<PixTableColumn @context={{option}}>
68+
<:header>
69+
<ContentHeader>
70+
<:default>Niveau</:default>
8271
<:tooltip>
83-
Renseignez le message définitif à afficher sur le certificat Pix App pour les certifications
84-
comportant plusieurs volets (exemple : Vous avez obtenu la certification Pix+ Edu niveau
85-
“Avancé”).
72+
Renseignez un chiffre unique pour chaque RT, niveau minimum = 1 niveau maximum = nombre total de
73+
RT.
8674
</:tooltip>
87-
</Header>
88-
<Header>
89-
<:default>Message temporaire certificat</:default>
75+
</ContentHeader>
76+
</:header>
77+
<:cell>
78+
<PixInput
79+
@id="{{row.id}}-level"
80+
name="level"
81+
placeholder="Exemple de niveau de RT : 1"
82+
required="true"
83+
aria-required="true"
84+
@screenReaderOnly={{true}}
85+
type="number"
86+
min="1"
87+
max="{{row.length}}"
88+
{{on "input" (fn this.onBadgeUpdated row.id)}}
89+
value="1"
90+
>
91+
<:label>{{row.id}} {{row.label}} Niveau</:label>
92+
</PixInput>
93+
</:cell>
94+
</PixTableColumn>
95+
<PixTableColumn @context={{option}}>
96+
<:header>
97+
<ContentHeader @isOptionnal="true">
98+
<:default>Nombre de pix minimum</:default>
99+
</ContentHeader>
100+
</:header>
101+
<:cell>
102+
<PixInput
103+
@id="{{row.id}}-minimum-earned-pix"
104+
name="minimum-earned-pix"
105+
placeholder="Ex : 150"
106+
@screenReaderOnly={{true}}
107+
type="number"
108+
{{on "input" (fn this.onBadgeUpdated row.id)}}
109+
>
110+
<:label>{{row.id}} {{row.label}} Nombre de pix minimum</:label>
111+
</PixInput>
112+
</:cell>
113+
</PixTableColumn>
114+
<PixTableColumn @context={{option}}>
115+
<:header>
116+
<ContentHeader>
117+
<:default>Image svg certificat Pix App</:default>
90118
<:tooltip>
91-
Renseignez le message temporaire à afficher sur le certificat Pix App en attendant la validation
92-
de tous les volets de la certification (exemple : Vous avez obtenu le niveau “Avancé” dans le
93-
cadre du volet 1 de la certification Pix+Édu. Votre niveau final sera déterminé à l’issue du volet
94-
2).
119+
Renseignez l’URL de l’image au format .svg (fournie par les devs) pour le certificat Pix App du
120+
candidat.
95121
</:tooltip>
96-
</Header>
97-
{{/if}}
98-
</tr>
99-
</thead>
100-
<tbody>
101-
{{#each @options as |option|}}
102-
<Row
103-
@badgeId={{option.id}}
104-
@badgeLabel={{option.label}}
105-
@badgeMaxLevel={{option.length}}
106-
@onFieldUpdate={{this.onBadgeUpdated}}
107-
@hasExternalJury={{@hasExternalJury}}
108-
/>
109-
{{/each}}
110-
</tbody>
111-
</table>
122+
</ContentHeader>
123+
</:header>
124+
<:cell>
125+
<PixInput
126+
@id="{{row.id}}-certificate-image"
127+
name="certificate-image"
128+
placeholder="Ex : https://images.pix.fr/..."
129+
required="true"
130+
aria-required="true"
131+
@screenReaderOnly={{true}}
132+
type="text"
133+
{{on "input" (fn this.onBadgeUpdated row.id)}}
134+
>
135+
<:label>{{row.id}} {{row.label}} Image svg certificat Pix App</:label>
136+
</PixInput>
137+
</:cell>
138+
</PixTableColumn>
139+
<PixTableColumn @context={{option}}>
140+
<:header>
141+
<ContentHeader>
142+
<:default>Label du certificat</:default>
143+
<:tooltip>
144+
Renseignez un label qui permet de distinguer chaque RT (exemples : Pix+ Droit Expert, CléA
145+
Numérique, Pix+ Edu 2nd degré Confirmé etc…)
146+
</:tooltip>
147+
</ContentHeader>
148+
</:header>
149+
<:cell>
150+
<PixTextarea
151+
@id="{{row.id}}-certificate-label"
152+
name="certificate-label"
153+
placeholder="Ex : Pix+ Édu 1er degré Initié (entrée dans le métier)"
154+
required="true"
155+
aria-required="true"
156+
@screenReaderOnly={{true}}
157+
rows="7"
158+
{{on "input" (fn this.onBadgeUpdated row.id)}}
159+
>
160+
<:label>{{row.id}} {{row.label}} Label du certificat</:label>
161+
</PixTextarea>
162+
</:cell>
163+
</PixTableColumn>
164+
<PixTableColumn @context={{option}}>
165+
<:header>
166+
<ContentHeader>
167+
<:default>Macaron de l'attestation PDF</:default>
168+
<:tooltip>
169+
Renseignez l’URL de l’image au format .pdf (fournie par les devs) pour l’attestation de
170+
certification PDF du candidat.
171+
</:tooltip>
172+
</ContentHeader>
173+
</:header>
174+
<:cell>
175+
<PixInput
176+
@id="{{row.id}}-certificate-sticker"
177+
name="certificate-sticker"
178+
placeholder="Ex : https://images.pix.fr/..."
179+
required="true"
180+
aria-required="true"
181+
@screenReaderOnly={{true}}
182+
type="text"
183+
{{on "input" (fn this.onBadgeUpdated row.id)}}
184+
>
185+
<:label>{{row.id}} {{row.label}} Macaron de l'attestation PDF</:label>
186+
</PixInput>
187+
</:cell>
188+
</PixTableColumn>
189+
{{#if @hasExternalJury}}
190+
<PixTableColumn @context={{option}}>
191+
<:header>
192+
<ContentHeader>
193+
<:default>Message du certificat</:default>
194+
<:tooltip>
195+
Renseignez le message définitif à afficher sur le certificat Pix App pour les certifications
196+
comportant plusieurs volets (exemple : Vous avez obtenu la certification Pix+ Edu niveau
197+
“Avancé”).
198+
</:tooltip>
199+
</ContentHeader>
200+
</:header>
201+
<:cell>
202+
<PixTextarea
203+
@id="{{row.id}}-certificate-message"
204+
@screenReaderOnly={{true}}
205+
name="certificate-message"
206+
placeholder="Ex : Vous avez obtenu la certification Pix+Édu niveau “Initié (entrée dans le métier)”"
207+
required="true"
208+
{{on "input" (fn this.onBadgeUpdated row.id)}}
209+
>
210+
<:label>{{row.id}} {{row.label}} Message du certificat</:label>
211+
</PixTextarea>
212+
</:cell>
213+
</PixTableColumn>
214+
<PixTableColumn @context={{option}}>
215+
<:header>
216+
<ContentHeader>
217+
<:default>Message temporaire certificat</:default>
218+
<:tooltip>
219+
Renseignez le message temporaire à afficher sur le certificat Pix App en attendant la validation
220+
de tous les volets de la certification (exemple : Vous avez obtenu le niveau “Avancé” dans le
221+
cadre du volet 1 de la certification Pix+Édu. Votre niveau final sera déterminé à l’issue du
222+
volet 2).
223+
</:tooltip>
224+
</ContentHeader>
225+
</:header>
226+
<:cell>
227+
<PixTextarea
228+
@id="{{row.id}}-certificate-temporary-message"
229+
@screenReaderOnly={{true}}
230+
name="certificate-temporary-message"
231+
placeholder="Ex : Vous avez obtenu la certification Pix+Édu niveau “Initié (entrée dans le métier)”"
232+
required="true"
233+
{{on "input" (fn this.onBadgeUpdated row.id)}}
234+
>
235+
<:label>{{row.id}} {{row.label}} Message temporaire certificat</:label>
236+
</PixTextarea>
237+
</:cell>
238+
</PixTableColumn>
239+
{{/if}}
240+
</:columns>
241+
</PixTable>
112242
</div>
113243
</section>
114244
</div>

0 commit comments

Comments
 (0)