Skip to content

Commit b01ce16

Browse files
AndreiaPenaAndreiaPena
committed
✨ admin: pix table on certif memberships list
1 parent ef4ecfb commit b01ce16

File tree

5 files changed

+83
-67
lines changed

5 files changed

+83
-67
lines changed

‎admin/app/components/users/certification-centers/membership-item.gjs

+55-14
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
12
import { fn } from '@ember/helper';
23
import { action } from '@ember/object';
34
import { LinkTo } from '@ember/routing';
45
import { service } from '@ember/service';
56
import Component from '@glimmer/component';
67
import { tracked } from '@glimmer/tracking';
8+
import { t } from 'ember-intl';
79

810
import MembershipItemActions from './membership-item-actions';
911
import MembershipItemRole from './membership-item-role';
@@ -41,31 +43,70 @@ export default class UsersCertificationCentersMembershipItemComponent extends Co
4143
}
4244

4345
<template>
44-
<tr
45-
aria-label="Informations du Centre de certification {{@certificationCenterMembership.certificationCenter.name}}"
46-
>
47-
<td>{{@certificationCenterMembership.id}}</td>
48-
<td class="table__column table__column--id">
46+
<PixTableColumn @context={{@context}}>
47+
<:header>
48+
{{t "components.users.certification-centers.memberships.table-headers.member-id"}}
49+
</:header>
50+
<:cell>
51+
{{@certificationCenterMembership.id}}
52+
</:cell>
53+
</PixTableColumn>
54+
<PixTableColumn @context={{@context}}>
55+
<:header>
56+
{{t "components.users.certification-centers.memberships.table-headers.center-id"}}
57+
</:header>
58+
<:cell>
4959
<LinkTo
5060
@route="authenticated.certification-centers.get"
5161
@model={{@certificationCenterMembership.certificationCenter.id}}
5262
>
5363
{{@certificationCenterMembership.certificationCenter.id}}
5464
</LinkTo>
55-
</td>
56-
<td>{{@certificationCenterMembership.certificationCenter.name}}</td>
57-
<td>{{@certificationCenterMembership.certificationCenter.type}}</td>
58-
<td>{{@certificationCenterMembership.certificationCenter.externalId}}</td>
59-
<td>
65+
</:cell>
66+
</PixTableColumn>
67+
<PixTableColumn @context={{@context}} class="break-word">
68+
<:header>
69+
{{t "components.users.certification-centers.memberships.table-headers.center-name"}}
70+
</:header>
71+
<:cell>
72+
{{@certificationCenterMembership.certificationCenter.name}}
73+
</:cell>
74+
</PixTableColumn>
75+
<PixTableColumn @context={{@context}}>
76+
<:header>
77+
{{t "components.users.certification-centers.memberships.table-headers.center-type"}}
78+
</:header>
79+
<:cell>
80+
{{@certificationCenterMembership.certificationCenter.type}}
81+
</:cell>
82+
</PixTableColumn>
83+
<PixTableColumn @context={{@context}} class="break-word">
84+
<:header>
85+
{{t "components.users.certification-centers.memberships.table-headers.center-external-id"}}
86+
</:header>
87+
<:cell>
88+
{{@certificationCenterMembership.certificationCenter.externalId}}
89+
</:cell>
90+
</PixTableColumn>
91+
<PixTableColumn @context={{@context}}>
92+
<:header>
93+
{{t "components.users.certification-centers.memberships.table-headers.role-label"}}
94+
</:header>
95+
<:cell>
6096
<MembershipItemRole
6197
@isEditionMode={{this.isEditionMode}}
6298
@certificationCenterRoles={{this.certificationCenterRoles}}
6399
@role={{@certificationCenterMembership.role}}
64100
@roleLabelKey={{@certificationCenterMembership.roleLabelKey}}
65101
@onRoleSelected={{this.onRoleSelected}}
66102
/>
67-
</td>
68-
<td>
103+
</:cell>
104+
</PixTableColumn>
105+
<PixTableColumn @context={{@context}}>
106+
<:header>
107+
{{t "components.users.certification-centers.memberships.table-headers.actions-label"}}
108+
</:header>
109+
<:cell>
69110
<MembershipItemActions
70111
@isEditionMode={{this.isEditionMode}}
71112
@onDeactivateMembershipButtonClicked={{fn
@@ -76,7 +117,7 @@ export default class UsersCertificationCentersMembershipItemComponent extends Co
76117
@onSaveRoleButtonClicked={{this.saveMembershipRole}}
77118
@onCancelButtonClicked={{this.cancelMembershipRoleEditing}}
78119
/>
79-
</td>
80-
</tr>
120+
</:cell>
121+
</PixTableColumn>
81122
</template>
82123
}

‎admin/app/components/users/certification-centers/memberships.gjs

+19-34
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PixTable from '@1024pix/pix-ui/components/pix-table';
12
import Component from '@glimmer/component';
23
import { t } from 'ember-intl';
34

@@ -12,40 +13,24 @@ export default class Memberships extends Component {
1213
<header class="page-section__header">
1314
<h2 class="page-section__title">{{t "components.users.certification-centers.memberships.section-title"}}</h2>
1415
</header>
15-
<div class="content-text content-text--small">
16-
<div class="table-admin">
17-
<table>
18-
<thead>
19-
<tr>
20-
<th class="table__column table__column--id">{{t
21-
"components.users.certification-centers.memberships.table-headers.member-id"
22-
}}</th>
23-
<th>{{t "components.users.certification-centers.memberships.table-headers.center-id"}}</th>
24-
<th>{{t "components.users.certification-centers.memberships.table-headers.center-name"}}</th>
25-
<th>{{t "components.users.certification-centers.memberships.table-headers.center-type"}}</th>
26-
<th>{{t "components.users.certification-centers.memberships.table-headers.center-external-id"}}</th>
27-
<th>{{t "components.users.certification-centers.memberships.table-headers.role-label"}}</th>
28-
<th>{{t "components.users.certification-centers.memberships.table-headers.actions-label"}}</th>
29-
</tr>
30-
</thead>
3116

32-
{{#if this.orderedCertificationCenterMemberships}}
33-
<tbody>
34-
{{#each this.orderedCertificationCenterMemberships as |certificationCenterMembership|}}
35-
<MembershipItem
36-
@certificationCenterMembership={{certificationCenterMembership}}
37-
@onCertificationCenterMembershipRoleChange={{@onCertificationCenterMembershipRoleChange}}
38-
@disableCertificationCenterMembership={{@disableCertificationCenterMembership}}
39-
/>
40-
{{/each}}
41-
</tbody>
42-
{{/if}}
43-
</table>
44-
45-
</div>
46-
{{#unless this.orderedCertificationCenterMemberships}}
47-
<div class="table__empty">{{t "components.users.certification-centers.memberships.empty-table"}}</div>
48-
{{/unless}}
49-
</div>
17+
{{#if this.orderedCertificationCenterMemberships}}
18+
<PixTable
19+
@variant="primary"
20+
@data={{this.orderedCertificationCenterMemberships}}
21+
@caption={{t "components.users.certification-centers.memberships.caption"}}
22+
>
23+
<:columns as |certificationCenterMembership context|>
24+
<MembershipItem
25+
@certificationCenterMembership={{certificationCenterMembership}}
26+
@context={{context}}
27+
@onCertificationCenterMembershipRoleChange={{@onCertificationCenterMembershipRoleChange}}
28+
@disableCertificationCenterMembership={{@disableCertificationCenterMembership}}
29+
/>
30+
</:columns>
31+
</PixTable>
32+
{{else}}
33+
<div class="table__empty">{{t "components.users.certification-centers.memberships.empty-table"}}</div>
34+
{{/if}}
5035
</template>
5136
}

‎admin/tests/integration/components/users/certification-centers/membership-item-test.gjs

+7-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { clickByName, render as renderScreen } from '@1024pix/ember-testing-library';
1+
import { clickByName, render as renderScreen, within } from '@1024pix/ember-testing-library';
22
import { click } from '@ember/test-helpers';
33
import MembershipItem from 'pix-admin/components/users/certification-centers/membership-item';
44
import { module, test } from 'qunit';
@@ -48,24 +48,12 @@ module('Integration | Component | users | certification-centers | membership-ite
4848
);
4949

5050
// then
51-
assert
52-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
53-
.containsText(certificationCenterMembership.id);
54-
assert
55-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
56-
.containsText(certificationCenter.id);
57-
assert
58-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
59-
.containsText(certificationCenter.name);
60-
assert
61-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
62-
.containsText(certificationCenter.type);
63-
assert
64-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
65-
.containsText(certificationCenter.externalId);
66-
assert
67-
.dom(screen.getByLabelText('Informations du Centre de certification Centre Jean-Bonboeur'))
68-
.containsText('Membre');
51+
assert.dom(screen.getByRole('cell', { name: certificationCenterMembership.id })).exists();
52+
assert.dom(screen.getByRole('cell', { name: certificationCenter.id })).exists();
53+
assert.dom(screen.getByRole('cell', { name: certificationCenter.name })).exists();
54+
assert.dom(screen.getByRole('cell', { name: certificationCenter.type })).exists();
55+
assert.dom(screen.getByRole('cell', { name: certificationCenter.externalId })).exists();
56+
assert.dom(screen.getByRole('cell', { name: 'Membre' })).exists();
6957
assert
7058
.dom(screen.getByRole('button', { name: 'Modifier le rôle du membre de ce centre de certification' }))
7159
.exists();

‎admin/translations/en.json

+1
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,7 @@
464464
},
465465
"certification-centers": {
466466
"memberships": {
467+
"caption": "Liste des centres de certification dont l'utilisateur est membre. Contient l'identifiant en tant que membre, l'identifiant, le nom, l'identifiant externe et le type du centre, et enfin le rôle du membre. Plusieurs actions permettent de changer le rôle du membre et de le désactiver du centre.",
467468
"empty-table": "There is no certification center",
468469
"items": {
469470
"actions": {

‎admin/translations/fr.json

+1
Original file line numberDiff line numberDiff line change
@@ -472,6 +472,7 @@
472472
},
473473
"certification-centers": {
474474
"memberships": {
475+
"caption": "Liste des centres de certification dont l'utilisateur est membre. Contient l'identifiant en tant que membre, l'identifiant, le nom, l'identifiant externe et le type du centre, et enfin le rôle du membre. Plusieurs actions permettent de changer le rôle du membre et de le désactiver du centre.",
475476
"empty-table": "Aucun centre de certification",
476477
"items": {
477478
"actions": {

0 commit comments

Comments
 (0)