Skip to content

Commit 904fbc5

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[FEATURE] PixTable sur Pix Admin épisode 8 : Organisations (PIX-17091).
 #11761
2 parents 3ca6090 + 7e547fc commit 904fbc5

File tree

27 files changed

+613
-463
lines changed

27 files changed

+613
-463
lines changed

‎admin/app/components/actions-on-users-role-in-organization.gjs

+77-67
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import PixButton from '@1024pix/pix-ui/components/pix-button';
22
import PixIcon from '@1024pix/pix-ui/components/pix-icon';
33
import PixModal from '@1024pix/pix-ui/components/pix-modal';
44
import PixSelect from '@1024pix/pix-ui/components/pix-select';
5+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
56
import { action } from '@ember/object';
67
import { service } from '@ember/service';
78
import Component from '@glimmer/component';
@@ -77,85 +78,94 @@ export default class ActionsOnUsersRoleInOrganization extends Component {
7778
}
7879

7980
<template>
80-
<td>
81-
{{#if this.isEditionMode}}
82-
<PixSelect
83-
class="pix-select-in-table"
84-
@onChange={{this.setRoleSelection}}
85-
@value={{this.selectedNewRole}}
86-
@options={{this.organizationRoles}}
87-
@placeholder="- Rôle -"
88-
@screenReaderOnly={{true}}
89-
>
90-
<:label>Sélectionner un rôle</:label>
91-
<:default as |organizationRole|>{{organizationRole.label}}</:default>
92-
</PixSelect>
93-
{{else}}
94-
{{@organizationMembership.roleLabel}}
95-
{{/if}}
96-
</td>
81+
<PixTableColumn @context={{@context}}>
82+
<:header>
83+
Rôle
84+
</:header>
85+
<:cell>
86+
{{#if this.isEditionMode}}
87+
<PixSelect
88+
@onChange={{this.setRoleSelection}}
89+
@value={{this.selectedNewRole}}
90+
@options={{this.organizationRoles}}
91+
@placeholder="- Rôle -"
92+
@screenReaderOnly={{true}}
93+
>
94+
<:label>Sélectionner un rôle</:label>
95+
<:default as |organizationRole|>{{organizationRole.label}}</:default>
96+
</PixSelect>
97+
{{else}}
98+
{{@organizationMembership.roleLabel}}
99+
{{/if}}
100+
</:cell>
101+
</PixTableColumn>
97102

98103
{{#if this.accessControl.hasAccessToOrganizationActionsScope}}
99-
<td>
100-
<div class="member-item-actions">
101-
{{#if this.isEditionMode}}
102-
<div class="member-item-actions__modify">
103-
<PixButton @size="small" @triggerAction={{this.updateRoleOfMember}} class="member-item-actions__button">
104-
{{t "common.actions.save"}}
105-
</PixButton>
104+
<PixTableColumn @context={{@context}}>
105+
<:header>
106+
Actions
107+
</:header>
108+
<:cell>
109+
<div class="member-item-actions">
110+
{{#if this.isEditionMode}}
111+
<div class="member-item-actions__modify">
112+
<PixButton @size="small" @triggerAction={{this.updateRoleOfMember}} class="member-item-actions__button">
113+
{{t "common.actions.save"}}
114+
</PixButton>
115+
<PixButton
116+
@size="small"
117+
@variant="secondary"
118+
@triggerAction={{this.cancelUpdateRoleOfMember}}
119+
aria-label={{t "common.actions.cancel"}}
120+
class="member-item-actions__button"
121+
>
122+
<PixIcon @name="close" @ariaHidden={{true}} />
123+
</PixButton>
124+
</div>
125+
{{else}}
106126
<PixButton
127+
@isDisabled={{@organizationMembership.isSaving}}
107128
@size="small"
108-
@variant="secondary"
109-
@triggerAction={{this.cancelUpdateRoleOfMember}}
110-
aria-label={{t "common.actions.cancel"}}
111129
class="member-item-actions__button"
130+
aria-label="Modifier le rôle"
131+
@triggerAction={{this.editRoleOfMember}}
132+
@iconBefore="edit"
112133
>
113-
<PixIcon @name="close" @ariaHidden={{true}} />
134+
Modifier le rôle
114135
</PixButton>
115-
</div>
116-
{{else}}
136+
{{/if}}
117137
<PixButton
118-
@isDisabled={{@organizationMembership.isSaving}}
119138
@size="small"
139+
@variant="error"
140+
@isDisabled={{@organizationMembership.isSaving}}
120141
class="member-item-actions__button"
121-
aria-label="Modifier le rôle"
122-
@triggerAction={{this.editRoleOfMember}}
123-
@iconBefore="edit"
142+
aria-label="Désactiver l'agent"
143+
@triggerAction={{this.toggleDisplayConfirm}}
144+
@iconBefore="delete"
124145
>
125-
Modifier le rôle
146+
{{t "common.actions.deactivate"}}
126147
</PixButton>
127-
{{/if}}
128-
<PixButton
129-
@size="small"
130-
@variant="error"
131-
@isDisabled={{@organizationMembership.isSaving}}
132-
class="member-item-actions__button"
133-
aria-label="Désactiver l'agent"
134-
@triggerAction={{this.toggleDisplayConfirm}}
135-
@iconBefore="delete"
136-
>
137-
{{t "common.actions.deactivate"}}
138-
</PixButton>
139-
</div>
140-
141-
<PixModal
142-
@title="Désactivation d'un membre"
143-
@onCloseButtonClick={{this.toggleDisplayConfirm}}
144-
@showModal={{this.displayConfirm}}
145-
>
146-
<:content>
147-
<p>
148-
Etes-vous sûr de vouloir désactiver le membre de cette équipe ?
149-
</p>
150-
</:content>
151-
<:footer>
152-
<PixButton @variant="secondary" @triggerAction={{this.toggleDisplayConfirm}}>
153-
{{t "common.actions.cancel"}}
154-
</PixButton>
155-
<PixButton @triggerAction={{this.disableOrganizationMembership}}>Confirmer</PixButton>
156-
</:footer>
157-
</PixModal>
158-
</td>
148+
</div>
149+
</:cell>
150+
</PixTableColumn>
159151
{{/if}}
152+
153+
<PixModal
154+
@title="Désactivation d'un membre"
155+
@onCloseButtonClick={{this.toggleDisplayConfirm}}
156+
@showModal={{this.displayConfirm}}
157+
>
158+
<:content>
159+
<p>
160+
Etes-vous sûr de vouloir désactiver le membre de cette équipe ?
161+
</p>
162+
</:content>
163+
<:footer>
164+
<PixButton @variant="secondary" @triggerAction={{this.toggleDisplayConfirm}}>
165+
{{t "common.actions.cancel"}}
166+
</PixButton>
167+
<PixButton @triggerAction={{this.disableOrganizationMembership}}>Confirmer</PixButton>
168+
</:footer>
169+
</PixModal>
160170
</template>
161171
}

‎admin/app/components/certification-centers/member-item.scss

-12
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,3 @@
1919
margin-bottom: var(--pix-spacing-1x);
2020
}
2121
}
22-
23-
.disable-membership-button {
24-
margin-top: 5px;
25-
}
26-
27-
.pix-select-in-table {
28-
max-width: 100%;
29-
}
30-
31-
.member-information {
32-
overflow-wrap: break-word;
33-
}

‎admin/app/components/organizations/children/list-item.gjs

+25-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
1+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
12
import { LinkTo } from '@ember/routing';
3+
import { t } from 'ember-intl';
24

35
<template>
4-
<tr aria-label={{@organization.name}}>
5-
<td>
6+
<PixTableColumn @context={{@context}}>
7+
<:header>
8+
{{t "components.organizations.children-list.table-headers.id"}}
9+
</:header>
10+
<:cell>
611
<LinkTo @route="authenticated.organizations.get" @model={{@organization.id}}>
712
{{@organization.id}}
813
</LinkTo>
9-
</td>
10-
<td>{{@organization.name}}</td>
11-
<td>{{@organization.externalId}}</td>
12-
</tr>
14+
</:cell>
15+
</PixTableColumn>
16+
<PixTableColumn @context={{@context}} class="break-word">
17+
<:header>
18+
{{t "components.organizations.children-list.table-headers.name"}}
19+
</:header>
20+
<:cell>
21+
{{@organization.name}}
22+
</:cell>
23+
</PixTableColumn>
24+
<PixTableColumn @context={{@context}} class="break-word">
25+
<:header>
26+
{{t "components.organizations.children-list.table-headers.external-id"}}
27+
</:header>
28+
<:cell>
29+
{{@organization.externalId}}
30+
</:cell>
31+
</PixTableColumn>
1332
</template>

‎admin/app/components/organizations/children/list.gjs

+10-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1+
import PixTable from '@1024pix/pix-ui/components/pix-table';
12
import { t } from 'ember-intl';
23

34
import ListItem from './list-item';
45

56
<template>
6-
<table aria-label={{t "components.organizations.children-list.table-name"}}>
7-
<thead>
8-
<tr>
9-
<th>{{t "components.organizations.children-list.table-headers.id"}}</th>
10-
<th>{{t "components.organizations.children-list.table-headers.name"}}</th>
11-
<th>{{t "components.organizations.children-list.table-headers.external-id"}}</th>
12-
</tr>
13-
</thead>
14-
<tbody>
15-
{{#each @organizations as |organization|}}
16-
<ListItem @organization={{organization}} />
17-
{{/each}}
18-
</tbody>
19-
</table>
7+
<PixTable
8+
@variant="primary"
9+
@caption={{t "components.organizations.children-list.table-name"}}
10+
@data={{@organizations}}
11+
>
12+
<:columns as |organization context|>
13+
<ListItem @organization={{organization}} @context={{context}} />
14+
</:columns>
15+
</PixTable>
2016
</template>

‎admin/app/components/organizations/invitations.gjs

+75-55
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
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 { service } from '@ember/service';
46
import Component from '@glimmer/component';
@@ -18,61 +20,79 @@ export default class OrganizationInvitations extends Component {
1820
<header class="page-section__header">
1921
<h2 class="page-section__title">Invitations</h2>
2022
</header>
21-
<div class="content-text content-text--small">
22-
<div class="table-admin">
23-
{{#if this.sortedInvitations}}
24-
<table>
25-
<thead>
26-
<tr>
27-
<th>Adresse e-mail</th>
28-
<th>Rôle</th>
29-
<th>{{t "common.invitations.invitation-locale"}}</th>
30-
<th>Date de dernier envoi</th>
31-
{{#if this.accessControl.hasAccessToOrganizationActionsScope}}
32-
<th>Actions</th>
33-
{{/if}}
34-
</tr>
35-
</thead>
36-
<tbody>
37-
{{#each this.sortedInvitations as |invitation|}}
38-
<tr aria-label="Invitation en attente de {{invitation.email}}">
39-
<td>{{invitation.email}}</td>
40-
<td>{{invitation.roleInFrench}}</td>
41-
<td>{{invitation.lang}}</td>
42-
<td>{{dayjsFormat invitation.updatedAt "DD/MM/YYYY [-] HH:mm"}}</td>
43-
{{#if this.accessControl.hasAccessToOrganizationActionsScope}}
44-
<td>
45-
<div class="organization-invitations__actions-buttons">
46-
<PixButton
47-
@size="small"
48-
aria-label={{t "common.invitations.send-new-label" invitationEmail=invitation.email}}
49-
@triggerAction={{fn @onSendNewInvitation invitation}}
50-
@iconBefore="refresh"
51-
>
52-
{{t "common.invitations.send-new"}}
53-
</PixButton>
54-
<PixButton
55-
@size="small"
56-
@variant="error"
57-
aria-label="Annuler l’invitation de {{invitation.email}}"
58-
@triggerAction={{fn @onCancelOrganizationInvitation invitation}}
59-
@iconBefore="delete"
60-
>
61-
Annuler l’invitation
62-
</PixButton>
63-
</div>
64-
</td>
65-
{{/if}}
66-
</tr>
67-
{{/each}}
68-
</tbody>
69-
</table>
70-
{{/if}}
71-
{{#unless this.sortedInvitations}}
72-
<p class="organization-invitations__message">Aucune invitation en attente</p>
73-
{{/unless}}
74-
</div>
75-
</div>
23+
24+
{{#if this.sortedInvitations}}
25+
<PixTable
26+
@variant="primary"
27+
@caption={{t "components.organizations.invitations.table.caption"}}
28+
@data={{this.sortedInvitations}}
29+
>
30+
<:columns as |invitation context|>
31+
<PixTableColumn @context={{context}} class="break-word">
32+
<:header>
33+
Adresse e-mail
34+
</:header>
35+
<:cell>
36+
{{invitation.email}}
37+
</:cell>
38+
</PixTableColumn>
39+
<PixTableColumn @context={{context}}>
40+
<:header>
41+
Rôle
42+
</:header>
43+
<:cell>
44+
{{invitation.roleInFrench}}
45+
</:cell>
46+
</PixTableColumn>
47+
<PixTableColumn @context={{context}}>
48+
<:header>
49+
{{t "common.invitations.invitation-locale"}}
50+
</:header>
51+
<:cell>
52+
{{invitation.lang}}
53+
</:cell>
54+
</PixTableColumn>
55+
<PixTableColumn @context={{context}}>
56+
<:header>
57+
Date de dernier envoi
58+
</:header>
59+
<:cell>
60+
{{dayjsFormat invitation.updatedAt "DD/MM/YYYY [-] HH:mm"}}
61+
</:cell>
62+
</PixTableColumn>
63+
{{#if this.accessControl.hasAccessToOrganizationActionsScope}}
64+
<PixTableColumn @context={{context}}>
65+
<:header>
66+
Actions
67+
</:header>
68+
<:cell>
69+
<div class="organization-invitations__actions-buttons">
70+
<PixButton
71+
@size="small"
72+
aria-label={{t "common.invitations.send-new-label" invitationEmail=invitation.email}}
73+
@triggerAction={{fn @onSendNewInvitation invitation}}
74+
@iconBefore="refresh"
75+
>
76+
{{t "common.invitations.send-new"}}
77+
</PixButton>
78+
<PixButton
79+
@size="small"
80+
@variant="error"
81+
aria-label="Annuler l’invitation de {{invitation.email}}"
82+
@triggerAction={{fn @onCancelOrganizationInvitation invitation}}
83+
@iconBefore="delete"
84+
>
85+
Annuler l’invitation
86+
</PixButton>
87+
</div>
88+
</:cell>
89+
</PixTableColumn>
90+
{{/if}}
91+
</:columns>
92+
</PixTable>
93+
{{else}}
94+
<p class="table__empty">Aucune invitation en attente</p>
95+
{{/if}}
7696
</section>
7797
</template>
7898
}

0 commit comments

Comments
 (0)