Skip to content

Commit fd5da5e

Browse files
AndreiaPenaSteph0
AndreiaPena
authored and
Steph0
committed
🎨 admin: style certification center information
1 parent f9ddd45 commit fd5da5e

File tree

15 files changed

+319
-302
lines changed

15 files changed

+319
-302
lines changed

‎.husky/lint

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
set -e
44

5-
npx lint-staged --cwd 1d
5+
npx lint-staged --cwd junior
66
npx lint-staged --cwd admin
77
npx lint-staged --cwd certif
88
npx lint-staged --cwd mon-pix

‎admin/app/components/certification-centers/habilitation-tag/index.hbs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<li aria-label={{this.ariaLabel}}>
2+
<FaIcon class={{this.className}} @icon={{this.icon}} />
3+
{{@label}}
4+
</li>

‎admin/app/components/certification-centers/habilitation-tag/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Component from '@glimmer/component';
2+
3+
export default class HabilitationTag extends Component {
4+
get ariaLabel() {
5+
const { active, label } = this.args;
6+
7+
return `${active ? 'Habilité' : 'Non habilité'} pour ${label}`;
8+
}
9+
10+
get className() {
11+
const { active } = this.args;
12+
13+
return `${active ? '' : 'non-'}granted-habilitation-icon`;
14+
}
15+
16+
get icon() {
17+
const { active } = this.args;
18+
19+
return `circle-${active ? 'check' : 'xmark'}`;
20+
}
21+
}

‎admin/app/components/certification-centers/information-edit.hbs

+130-135
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,139 @@
1-
<h1>Modifier un centre de certification</h1>
2-
<div class="certification-center-information__edit-form">
3-
<form class="form" onsubmit={{this.updateCertificationCenter}}>
1+
<h2 class="certification-center-information__edit-title">Modifier un centre de certification</h2>
42

5-
<div class="form-field">
6-
<label for="name" class="field__label">Nom du centre</label>
7-
{{#if (v-get this.form "name" "isInvalid")}}
8-
<div class="form-field__error" aria-label="Message d'erreur du champ nom">
9-
{{v-get this.form "name" "message"}}
10-
</div>
11-
{{/if}}
12-
<Input
13-
id="name"
14-
@type="text"
15-
class={{if (v-get this.form "name" "isInvalid") "form-control is-invalid" "form-control"}}
16-
@value={{this.form.name}}
17-
required={{true}}
18-
/>
19-
</div>
3+
<form class="form certification-center-information__edit-form" onsubmit={{this.updateCertificationCenter}}>
204

21-
<div class="form-field">
22-
<PixSelect
23-
@options={{this.certificationCenterTypes}}
24-
@placeholder="-- Choisissez --"
25-
@value={{this.form.type}}
26-
@onChange={{this.selectCertificationCenterType}}
27-
@errorMessage={{v-get this.form "type" "message"}}
28-
>
29-
<:label>Type</:label>
30-
<:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
31-
</PixSelect>
32-
</div>
5+
<label class="field-label">
6+
<abbr title="obligatoire" class="mandatory-mark">*</abbr>
7+
Nom du centre
8+
<Input
9+
id="name"
10+
@type="text"
11+
class={{if (v-get this.form "name" "isInvalid") "form-control is-invalid" "form-control"}}
12+
@value={{this.form.name}}
13+
required={{true}}
14+
/>
15+
</label>
3316

34-
<div class="form-field">
35-
<label for="external-id" class="field__label">Identifiant externe</label>
36-
{{#if (v-get this.form "externalId" "isInvalid")}}
37-
<div class="form-field__error" aria-label="Message d'erreur du champ ID externe">
38-
{{v-get this.form "externalId" "message"}}
39-
</div>
40-
{{/if}}
41-
<Input
42-
id="external-id"
43-
@type="text"
44-
class={{if (v-get this.form "externalId" "isInvalid") "form-control is-invalid" "form-control"}}
45-
@value={{this.form.externalId}}
46-
/>
47-
</div>
17+
{{#if (v-get this.form "name" "isInvalid")}}
18+
<span class="error" aria-label="Message d'erreur du champ nom">
19+
{{v-get this.form "name" "message"}}
20+
</span>
21+
{{/if}}
4822

49-
<div class="form-field">
50-
<label for="data-protection-officer-first-name" class="field__label">Prénom du
51-
<abbr title="Délégué à la protection des données">DPO</abbr></label>
52-
{{#if (v-get this.form "dataProtectionOfficerFirstName" "isInvalid")}}
53-
<div class="form-field__error" aria-label="Message d'erreur du champ Prénom du DPO">
54-
{{v-get this.form "dataProtectionOfficerFirstName" "message"}}
55-
</div>
56-
{{/if}}
57-
<Input
58-
id="data-protection-officer-first-name"
59-
@type="text"
60-
class={{if
61-
(v-get this.form "dataProtectionOfficerFirstName" "isInvalid")
62-
"form-control is-invalid"
63-
"form-control"
64-
}}
65-
@value={{this.form.dataProtectionOfficerFirstName}}
66-
/>
67-
</div>
23+
<PixSelect
24+
@options={{this.certificationCenterTypes}}
25+
@placeholder="-- Choisissez --"
26+
@value={{this.form.type}}
27+
@onChange={{this.selectCertificationCenterType}}
28+
@errorMessage={{v-get this.form "type" "message"}}
29+
>
30+
<:label>Type</:label>
31+
<:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
32+
</PixSelect>
6833

69-
<div class="form-field">
70-
<label for="data-protection-officer-last-name" class="field__label">Nom du
71-
<abbr title="Délégué à la protection des données">DPO</abbr></label>
72-
{{#if (v-get this.form "dataProtectionOfficerLastName" "isInvalid")}}
73-
<div class="form-field__error" aria-label="Message d'erreur du champ Nom du DPO">
74-
{{v-get this.form "dataProtectionOfficerLastName" "message"}}
75-
</div>
76-
{{/if}}
77-
<Input
78-
id="data-protection-officer-last-name"
79-
@type="text"
80-
class={{if
81-
(v-get this.form "dataProtectionOfficerLastName" "isInvalid")
82-
"form-control is-invalid"
83-
"form-control"
84-
}}
85-
@value={{this.form.dataProtectionOfficerLastName}}
86-
/>
87-
</div>
34+
<label class="field-label">
35+
Identifiant externe
36+
<Input
37+
id="external-id"
38+
@type="text"
39+
class={{if (v-get this.form "externalId" "isInvalid") "form-control is-invalid" "form-control"}}
40+
@value={{this.form.externalId}}
41+
/>
42+
</label>
8843

89-
<div class="form-field">
90-
<label for="data-protection-officer-email" class="field__label">Adresse e-mail du
91-
<abbr title="Délégué à la protection des données">DPO</abbr></label>
92-
{{#if (v-get this.form "dataProtectionOfficerEmail" "isInvalid")}}
93-
<div class="form-field__error" aria-label="Message d'erreur du champ Adresse e-mail du DPO">
94-
{{v-get this.form "dataProtectionOfficerEmail" "message"}}
95-
</div>
96-
{{/if}}
97-
<Input
98-
id="data-protection-officer-email"
99-
@type="text"
100-
class={{if (v-get this.form "dataProtectionOfficerEmail" "isInvalid") "form-control is-invalid" "form-control"}}
101-
@value={{this.form.dataProtectionOfficerEmail}}
102-
/>
103-
</div>
44+
{{#if (v-get this.form "externalId" "isInvalid")}}
45+
<span class="error" aria-label="Message d'erreur du champ ID externe">
46+
{{v-get this.form "externalId" "message"}}
47+
</span>
48+
{{/if}}
10449

105-
<div class="form-field">
106-
<PixCheckbox
107-
@id="isV3Pilot"
108-
@size="small"
109-
onChange={{this.updateIsV3Pilot}}
110-
@checked={{this.form.isV3Pilot}}
111-
class="form-field certification-center-information__edit-form__is-v3-pilot-checkbox"
112-
>
113-
<:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
114-
</PixCheckbox>
115-
</div>
50+
<label class="field-label">
51+
Prénom du
52+
<abbr title="Délégué à la protection des données">DPO</abbr>
53+
<Input
54+
@type="text"
55+
class={{if
56+
(v-get this.form "dataProtectionOfficerFirstName" "isInvalid")
57+
"form-control is-invalid"
58+
"form-control"
59+
}}
60+
@value={{this.form.dataProtectionOfficerFirstName}}
61+
/>
62+
</label>
11663

117-
<h2 class="field__label">Habilitations aux certifications complémentaires</h2>
118-
<ul class="form-field certification-center-information__edit-form__habilitations-checkbox-list">
119-
{{#each this.availableHabilitations as |habilitation|}}
120-
<li class="habilitation-entry">
121-
<Input
122-
id="habilitation-checkbox__{{habilitation.id}}"
123-
@type="checkbox"
124-
@checked={{contains habilitation @certificationCenter.habilitations}}
125-
{{on "input" (fn this.updateGrantedHabilitation habilitation)}}
126-
/>
127-
<label class="field__label" for="habilitation-checkbox__{{habilitation.id}}">
128-
{{habilitation.label}}
129-
</label>
130-
</li>
131-
{{/each}}
132-
</ul>
64+
{{#if (v-get this.form "dataProtectionOfficerFirstName" "isInvalid")}}
65+
<span class="error" aria-label="Message d'erreur du champ Prénom du DPO">
66+
{{v-get this.form "dataProtectionOfficerFirstName" "message"}}
67+
</span>
68+
{{/if}}
13369

134-
<div class="form-actions">
135-
<PixButton
136-
@size="small"
137-
@backgroundColor="transparent-light"
138-
@isBorderVisible={{false}}
139-
@triggerAction={{@toggleEditMode}}
140-
>Annuler</PixButton>
141-
<PixButton @type="submit" @size="small" @backgroundColor="primary">Enregistrer</PixButton>
142-
</div>
143-
</form>
144-
</div>
70+
<label class="field-label">
71+
Nom du
72+
<abbr title="Délégué à la protection des données">DPO</abbr>
73+
<Input
74+
id="data-protection-officer-last-name"
75+
@type="text"
76+
class={{if
77+
(v-get this.form "dataProtectionOfficerLastName" "isInvalid")
78+
"form-control is-invalid"
79+
"form-control"
80+
}}
81+
@value={{this.form.dataProtectionOfficerLastName}}
82+
/>
83+
</label>
84+
85+
{{#if (v-get this.form "dataProtectionOfficerLastName" "isInvalid")}}
86+
<span class="error" aria-label="Message d'erreur du champ Nom du DPO">
87+
{{v-get this.form "dataProtectionOfficerLastName" "message"}}
88+
</span>
89+
{{/if}}
90+
91+
<label class="field-label">
92+
Adresse e-mail du
93+
<abbr title="Délégué à la protection des données">DPO</abbr>
94+
<Input
95+
@type="text"
96+
class={{if (v-get this.form "dataProtectionOfficerEmail" "isInvalid") "form-control is-invalid" "form-control"}}
97+
@value={{this.form.dataProtectionOfficerEmail}}
98+
/>
99+
</label>
100+
101+
{{#if (v-get this.form "dataProtectionOfficerEmail" "isInvalid")}}
102+
<span class="error" aria-label="Message d'erreur du champ Adresse e-mail du DPO">
103+
{{v-get this.form "dataProtectionOfficerEmail" "message"}}
104+
</span>
105+
{{/if}}
106+
107+
<PixCheckbox @id="isV3Pilot" @size="small" onChange={{this.updateIsV3Pilot}} @checked={{this.form.isV3Pilot}}>
108+
<:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
109+
</PixCheckbox>
110+
111+
<span class="field-label">Habilitations aux certifications complémentaires</span>
112+
<ul class="form-field certification-center-information__edit-form__habilitations-checkbox-list">
113+
{{#each this.availableHabilitations as |habilitation|}}
114+
<li class="habilitation-entry">
115+
<Input
116+
id="habilitation-checkbox__{{habilitation.id}}"
117+
@type="checkbox"
118+
@checked={{contains habilitation @certificationCenter.habilitations}}
119+
{{on "input" (fn this.updateGrantedHabilitation habilitation)}}
120+
/>
121+
<label class="field-label" for="habilitation-checkbox__{{habilitation.id}}">
122+
{{habilitation.label}}
123+
</label>
124+
</li>
125+
{{/each}}
126+
</ul>
127+
128+
<div class="certification-center-information__action-buttons">
129+
<PixButton
130+
@size="small"
131+
@backgroundColor="transparent-light"
132+
@isBorderVisible={{true}}
133+
@triggerAction={{@toggleEditMode}}
134+
>
135+
Annuler
136+
</PixButton>
137+
<PixButton @type="submit" @size="small" @backgroundColor="primary">Enregistrer</PixButton>
138+
</div>
139+
</form>

0 commit comments

Comments
 (0)