Skip to content

Commit bcc8d99

Browse files
pix-service-auto-mergepix-service-auto-merge
authored
[TECH] Creer un composant modale de suppression générique (PIX-13284)
 #9452
2 parents b231c49 + 449d437 commit bcc8d99

File tree

12 files changed

+357
-188
lines changed

12 files changed

+357
-188
lines changed

‎orga/app/components/organization-participant/deletion-modal.hbs

-43
This file was deleted.

‎orga/app/components/organization-participant/deletion-modal.js

-37
This file was deleted.

‎orga/app/components/organization-participant/list.hbs

+34-3
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,43 @@
3030
@count={{selectedParticipants.length}}
3131
@openDeletionModal={{this.openDeletionModal}}
3232
/>
33-
<OrganizationParticipant::DeletionModal
33+
<Ui::DeletionModal
34+
@title={{t
35+
"pages.organization-participants.deletion-modal.title"
36+
count=selectedParticipants.length
37+
firstname=(get selectedParticipants "0.firstName")
38+
lastname=(get selectedParticipants "0.lastName")
39+
htmlSafe=true
40+
}}
3441
@showModal={{this.showDeletionModal}}
35-
@itemsToDelete={{selectedParticipants}}
42+
@count={{selectedParticipants.length}}
3643
@onTriggerAction={{fn this.deleteParticipants selectedParticipants reset}}
3744
@onCloseModal={{this.closeDeletionModal}}
38-
/>
45+
>
46+
<:content>
47+
<p>{{t "pages.organization-participants.deletion-modal.content.header" count=this.count}}</p>
48+
<p>{{t
49+
"pages.organization-participants.deletion-modal.content.main-participation-prevent"
50+
count=selectedParticipants.length
51+
}}</p>
52+
<p>{{t
53+
"pages.organization-participants.deletion-modal.content.main-campaign-prevent"
54+
count=selectedParticipants.length
55+
}}</p>
56+
<p>{{t
57+
"pages.organization-participants.deletion-modal.content.main-participation-access"
58+
count=selectedParticipants.length
59+
}}</p>
60+
<p>{{t
61+
"pages.organization-participants.deletion-modal.content.main-new-campaign-access"
62+
count=selectedParticipants.length
63+
}}</p>
64+
<p><strong>{{t
65+
"pages.organization-participants.deletion-modal.content.footer"
66+
count=selectedParticipants.length
67+
}}</strong></p>
68+
</:content>
69+
</Ui::DeletionModal>
3970
</InElement>
4071
{{/if}}
4172
<InElement @destinationId={{this.paginationId}} @waitForElement={{true}}>

‎orga/app/components/sup-organization-participant/list.hbs

+37-3
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,46 @@
2929
@count={{selectedStudents.length}}
3030
@openDeletionModal={{this.openDeletionModal}}
3131
/>
32-
<SupOrganizationParticipant::Modal::Deletion
32+
<Ui::DeletionModal
33+
@title={{t
34+
"pages.sup-organization-participants.deletion-modal.title"
35+
count=selectedStudents.length
36+
firstname=(get selectedStudents "0.firstName")
37+
lastname=(get selectedStudents "0.lastName")
38+
htmlSafe=true
39+
}}
3340
@showModal={{this.showDeletionModal}}
34-
@itemsToDelete={{selectedStudents}}
41+
@count={{selectedStudents.length}}
3542
@onTriggerAction={{fn this.deleteStudents selectedStudents reset}}
3643
@onCloseModal={{this.closeDeletionModal}}
37-
/>
44+
>
45+
<:content>
46+
<p>{{t
47+
"pages.sup-organization-participants.deletion-modal.content.header"
48+
count=selectedStudents.length
49+
}}</p>
50+
<p>{{t
51+
"pages.sup-organization-participants.deletion-modal.content.main-participation-prevent"
52+
count=selectedStudents.length
53+
}}</p>
54+
<p>{{t
55+
"pages.sup-organization-participants.deletion-modal.content.main-campaign-prevent"
56+
count=selectedStudents.length
57+
}}</p>
58+
<p>{{t
59+
"pages.sup-organization-participants.deletion-modal.content.main-participation-access"
60+
count=selectedStudents.length
61+
}}</p>
62+
<p>{{t
63+
"pages.sup-organization-participants.deletion-modal.content.main-new-campaign-access"
64+
count=selectedStudents.length
65+
}}</p>
66+
<p><strong>{{t
67+
"pages.sup-organization-participants.deletion-modal.content.footer"
68+
count=selectedStudents.length
69+
}}</strong></p>
70+
</:content>
71+
</Ui::DeletionModal>
3872
</InElement>
3973
{{/if}}
4074
<InElement @destinationId={{this.paginationId}} @waitForElement={{true}}>

‎orga/app/components/sup-organization-participant/modal/deletion.hbs

-45
This file was deleted.

‎orga/app/components/sup-organization-participant/modal/deletion.js

-37
This file was deleted.

‎orga/app/components/ui/deletion-modal.gjs

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import PixButton from '@1024pix/pix-ui/components/pix-button';
2+
import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
3+
import PixModal from '@1024pix/pix-ui/components/pix-modal';
4+
import { on } from '@ember/modifier';
5+
import { action } from '@ember/object';
6+
import Component from '@glimmer/component';
7+
import { tracked } from '@glimmer/tracking';
8+
import { t } from 'ember-intl';
9+
import { not } from 'ember-truth-helpers';
10+
11+
export default class DeletionModal extends Component {
12+
@tracked allowDeletion = false;
13+
14+
get isMultipleDeletion() {
15+
return this.args.count > 1;
16+
}
17+
18+
get canDelete() {
19+
if (!this.isMultipleDeletion) {
20+
return true;
21+
}
22+
return this.allowDeletion;
23+
}
24+
25+
@action
26+
giveDeletionPermission() {
27+
this.allowDeletion = !this.allowDeletion;
28+
}
29+
<template>
30+
<PixModal @title={{@title}} @showModal={{@showModal}} @onCloseButtonClick={{@onCloseModal}}>
31+
<:content>
32+
{{yield to="content"}}
33+
{{#if this.isMultipleDeletion}}
34+
<PixCheckbox
35+
{{on "click" this.giveDeletionPermission}}
36+
@size="small"
37+
@checked={{this.allowDeletion}}
38+
@class="deletion-modal__permission-checkbox"
39+
>
40+
<:label>
41+
<strong>
42+
{{t "components.ui.deletion-modal.confirmation-checkbox" count=@count}}
43+
</strong>
44+
</:label>
45+
</PixCheckbox>
46+
{{/if}}
47+
</:content>
48+
<:footer>
49+
<PixButton @variant="secondary" @triggerAction={{@onCloseModal}}>
50+
{{t "common.actions.cancel"}}
51+
</PixButton>
52+
<PixButton @variant="error" @triggerAction={{@onTriggerAction}} @isDisabled={{not this.canDelete}}>
53+
{{t "components.ui.deletion-modal.confirm-deletion"}}
54+
</PixButton>
55+
</:footer>
56+
</PixModal>
57+
</template>
58+
}

‎orga/tests/integration/components/organization-participant/list_test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1108,7 +1108,7 @@ module('Integration | Component | OrganizationParticipant::List', function (hook
11081108
await screen.findByRole('dialog');
11091109

11101110
const confirmationButton = await screen.findByRole('button', {
1111-
name: this.intl.t('pages.organization-participants.deletion-modal.delete-button'),
1111+
name: this.intl.t('components.ui.deletion-modal.confirm-deletion'),
11121112
});
11131113

11141114
//then
@@ -1150,13 +1150,13 @@ module('Integration | Component | OrganizationParticipant::List', function (hook
11501150
await screen.findByRole('dialog');
11511151

11521152
const allowMultipleDeletionCheckbox = await screen.findByRole('checkbox', {
1153-
name: this.intl.t('pages.organization-participants.deletion-modal.confirmation-checkbox', { count: 2 }),
1153+
name: this.intl.t('components.ui.deletion-modal.confirmation-checkbox', { count: 2 }),
11541154
});
11551155

11561156
await click(allowMultipleDeletionCheckbox);
11571157

11581158
const confirmationButton = await screen.findByRole('button', {
1159-
name: this.intl.t('pages.organization-participants.deletion-modal.delete-button'),
1159+
name: this.intl.t('components.ui.deletion-modal.confirm-deletion'),
11601160
});
11611161
await click(confirmationButton);
11621162

@@ -1198,13 +1198,13 @@ module('Integration | Component | OrganizationParticipant::List', function (hook
11981198
await click(deleteButton);
11991199

12001200
const allowMultipleDeletionCheckbox = await screen.findByRole('checkbox', {
1201-
name: this.intl.t('pages.organization-participants.deletion-modal.confirmation-checkbox', { count: 2 }),
1201+
name: this.intl.t('components.ui.deletion-modal.confirmation-checkbox', { count: 2 }),
12021202
});
12031203

12041204
await click(allowMultipleDeletionCheckbox);
12051205

12061206
const confirmationButton = await screen.findByRole('button', {
1207-
name: this.intl.t('pages.organization-participants.deletion-modal.delete-button'),
1207+
name: this.intl.t('components.ui.deletion-modal.confirm-deletion'),
12081208
});
12091209
await click(confirmationButton);
12101210

0 commit comments

Comments
 (0)