Skip to content

Commit adef580

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[FEATURE] Pix Table sur Pix Admin épisode 9 : Utilisateurs (PIX-17141).
 #11782
2 parents 754ca4c + 6e1911c commit adef580

File tree

15 files changed

+526
-324
lines changed

15 files changed

+526
-324
lines changed

‎admin/app/components/users/campaign-participations.gjs

+93-57
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import PixButton from '@1024pix/pix-ui/components/pix-button';
2+
import PixTable from '@1024pix/pix-ui/components/pix-table';
3+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
24
import { fn } from '@ember/helper';
35
import { action } from '@ember/object';
46
import { LinkTo } from '@ember/routing';
57
import { service } from '@ember/service';
68
import Component from '@glimmer/component';
79
import { tracked } from '@glimmer/tracking';
810
import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
11+
import { t } from 'ember-intl';
912

1013
import ConfirmPopup from '../confirm-popup';
1114

@@ -38,69 +41,102 @@ export default class CampaignParticipation extends Component {
3841
Attention toute modification sur une participation nécessite un accord écrit du prescripteur et du prescrit.
3942
</p>
4043

41-
<div class="content-text content-text--small">
42-
<table class="table-admin">
43-
<thead>
44-
<tr>
45-
<th>Prescrit</th>
46-
<th>Campagne</th>
47-
<th>Identifiant externe</th>
48-
<th>Date de début</th>
49-
<th>Statut</th>
50-
<th>Date d'envoi</th>
51-
<th>Supprimé le</th>
52-
{{#if this.accessControl.hasAccessToUsersActionsScope}}
53-
<th>Actions</th>
54-
{{/if}}
55-
</tr>
56-
</thead>
57-
<tbody>
58-
{{#each @participations as |participation|}}
59-
<tr aria-label="Participation">
60-
<td>{{participation.organizationLearnerFullName}}</td>
61-
<td>
62-
<LinkTo @route="authenticated.campaigns.campaign" @model={{participation.campaignId}}>
63-
{{participation.campaignCode}}
64-
</LinkTo>
65-
</td>
44+
{{#if @participations}}
45+
<PixTable
46+
@variant="primary"
47+
@data={{@participations}}
48+
@caption={{t "components.users.campaign-participations.table.caption"}}
49+
>
50+
<:columns as |participation context|>
51+
<PixTableColumn @context={{context}} class="break-word">
52+
<:header>
53+
Prescrit
54+
</:header>
55+
<:cell>
56+
{{participation.organizationLearnerFullName}}
57+
</:cell>
58+
</PixTableColumn>
59+
<PixTableColumn @context={{context}} class="break-word">
60+
<:header>
61+
Campagne
62+
</:header>
63+
<:cell>
64+
<LinkTo @route="authenticated.campaigns.campaign" @model={{participation.campaignId}}>
65+
{{participation.campaignCode}}
66+
</LinkTo>
67+
</:cell>
68+
</PixTableColumn>
69+
<PixTableColumn @context={{context}} class="break-word">
70+
<:header>
71+
Identifiant externe
72+
</:header>
73+
<:cell>
6674
{{#if participation.participantExternalId}}
67-
<td>{{participation.participantExternalId}}</td>
75+
{{participation.participantExternalId}}
6876
{{else}}
69-
<td>-</td>
77+
-
7078
{{/if}}
71-
<td>{{dayjsFormat participation.createdAt "DD/MM/YYYY"}}</td>
72-
<td>{{participation.displayedStatus}}</td>
73-
<td>
74-
{{if participation.sharedAt (dayjsFormat participation.sharedAt "DD/MM/YYYY") "-"}}
75-
</td>
79+
</:cell>
80+
</PixTableColumn>
81+
<PixTableColumn @context={{context}}>
82+
<:header>
83+
Date de début
84+
</:header>
85+
<:cell>
86+
{{dayjsFormat participation.createdAt "DD/MM/YYYY"}}
87+
</:cell>
88+
</PixTableColumn>
89+
<PixTableColumn @context={{context}}>
90+
<:header>
91+
Statut
92+
</:header>
93+
<:cell>
94+
{{participation.displayedStatus}}
95+
</:cell>
96+
</PixTableColumn>
97+
<PixTableColumn @context={{context}}>
98+
<:header>
99+
Date d'envoi
100+
</:header>
101+
<:cell>
102+
{{if participation.sharedAt (dayjsFormat participation.sharedAt "DD/MM/YYYY") "-"}}
103+
</:cell>
104+
</PixTableColumn>
105+
<PixTableColumn @context={{context}}>
106+
<:header>
107+
Supprimé le
108+
</:header>
109+
<:cell>
76110
{{#if participation.deletedAt}}
77-
<td>
78-
{{dayjsFormat participation.deletedAt "DD/MM/YYYY"}}
79-
</td>
111+
{{dayjsFormat participation.deletedAt "DD/MM/YYYY"}}
80112
{{else}}
81-
<td>-</td>
113+
-
82114
{{/if}}
83-
{{#if this.accessControl.hasAccessToUsersActionsScope}}
84-
<td>
85-
{{#unless participation.deletedAt}}
86-
<PixButton
87-
@triggerAction={{fn this.toggleDisplayRemoveParticipationModal participation}}
88-
@size="small"
89-
@variant="error"
90-
>
91-
Supprimer
92-
</PixButton>
93-
{{/unless}}
94-
</td>
95-
{{/if}}
96-
</tr>
97-
{{/each}}
98-
</tbody>
99-
</table>
100-
{{#unless @participations}}
101-
<div class="table__empty">Aucune participation</div>
102-
{{/unless}}
103-
</div>
115+
</:cell>
116+
</PixTableColumn>
117+
{{#if this.accessControl.hasAccessToUsersActionsScope}}
118+
<PixTableColumn @context={{context}}>
119+
<:header>
120+
Actions
121+
</:header>
122+
<:cell>
123+
{{#unless participation.deletedAt}}
124+
<PixButton
125+
@triggerAction={{fn this.toggleDisplayRemoveParticipationModal participation}}
126+
@size="small"
127+
@variant="error"
128+
>
129+
Supprimer
130+
</PixButton>
131+
{{/unless}}
132+
</:cell>
133+
</PixTableColumn>
134+
{{/if}}
135+
</:columns>
136+
</PixTable>
137+
{{else}}
138+
<div class="table__empty">Aucune participation</div>
139+
{{/if}}
104140

105141
<ConfirmPopup
106142
@message="Vous êtes sur le point de supprimer la ou les participation(s) de {{this.participationToDelete.organizationLearnerFullName}} (y compris celles améliorées), celle-ci ne sera plus visible ni comprise dans les statistiques de la campagne de Pix Orga. Le participant pourra terminer son parcours mais ne pourra plus envoyer ses résultats. Il ne pourra pas non plus participer de nouveau à cette campagne."

‎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
}

0 commit comments

Comments
 (0)