diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2024-06-19 09:50:49 +0200 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2024-06-19 10:45:48 +0200 |
commit | ecc2335f1fc1c0e589d19ac0c21ae59bae16205d (patch) | |
tree | 843977017f26f0af9a9182e56815dd1714e65211 /src | |
parent | c6071c3730424b2f7e55e16a6a2b13c3d7dfe0b3 (diff) |
feat(conversation): add confirmation dialog when removing participant
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/RightSidebar/Participants/Participant.spec.js | 12 | ||||
-rw-r--r-- | src/components/RightSidebar/Participants/Participant.vue | 44 |
2 files changed, 53 insertions, 3 deletions
diff --git a/src/components/RightSidebar/Participants/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js index 735a387ef..6dc3eaf88 100644 --- a/src/components/RightSidebar/Participants/Participant.spec.js +++ b/src/components/RightSidebar/Participants/Participant.spec.js @@ -13,13 +13,15 @@ import VideoIcon from 'vue-material-design-icons/Video.vue' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' import Participant from './Participant.vue' import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue' import { ATTENDEE, PARTICIPANT } from '../../../constants.js' import storeConfig from '../../../store/storeConfig.js' -import { findNcActionButton } from '../../../test-helpers.js' +import { findNcActionButton, findNcButton } from '../../../test-helpers.js' describe('Participant.vue', () => { let conversation @@ -104,6 +106,8 @@ describe('Participant.vue', () => { }, stubs: { NcActionButton, + NcButton, + NcDialog, }, directives: { tooltip: tooltipMock, @@ -626,6 +630,12 @@ describe('Participant.vue', () => { await actionButton.find('button').trigger('click') + const dialog = wrapper.findComponent(NcDialog) + expect(dialog.exists()).toBeTruthy() + + const button = findNcButton(dialog, 'Remove') + await button.find('button').trigger('click') + expect(removeAction).toHaveBeenCalledWith(expect.anything(), { token: 'current-token', attendeeId: 'alice-attendee-id', diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue index adf889807..3d344ee2e 100644 --- a/src/components/RightSidebar/Participants/Participant.vue +++ b/src/components/RightSidebar/Participants/Participant.vue @@ -284,14 +284,15 @@ </template> {{ t('spreed', 'Edit permissions') }} </NcActionButton> + <NcActionSeparator /> </template> <!-- Remove --> - <NcActionSeparator v-if="canBeModerated && showPermissionsOptions" /> <NcActionButton v-if="canBeModerated" key="remove-participant" + class="critical" close-after-click - @click="removeParticipant"> + @click="isRemoveDialogOpen = true"> <template #icon> <Delete :size="20" /> </template> @@ -306,6 +307,22 @@ :token="token" @close="hidePermissionsEditor" /> + <!-- Confirmation required to remove participant --> + <NcDialog v-if="isRemoveDialogOpen" + :open.sync="isRemoveDialogOpen" + :name="removeParticipantLabel" + :container="container"> + <p> {{ removeDialogMessage }} </p> + <template #actions> + <NcButton type="tertiary" @click="isRemoveDialogOpen = false"> + {{ t('spreed', 'Dismiss') }} + </NcButton> + <NcButton type="error" @click="removeParticipant"> + {{ t('spreed', 'Remove') }} + </NcButton> + </template> + </NcDialog> + <!-- Checkmark in case the current participant is selected --> <div v-if="isSelected" class="icon-checkmark participant-row__utils utils__checkmark" /> </component> @@ -346,6 +363,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue' @@ -378,6 +396,7 @@ export default { NcActionText, NcActionSeparator, NcButton, + NcDialog, ParticipantPermissionsEditor, // Icons Account, @@ -450,6 +469,7 @@ export default { isUserNameTooltipVisible: false, isStatusTooltipVisible: false, permissionsEditor: false, + isRemoveDialogOpen: false, disabled: false, } }, @@ -775,6 +795,21 @@ export default { } }, + removeDialogMessage() { + switch (this.participant.actorType) { + case ATTENDEE.ACTOR_TYPE.GROUPS: + return t('spreed', 'Do you really want to remove group "{displayName}" and its members from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + case ATTENDEE.ACTOR_TYPE.CIRCLES: + return t('spreed', 'Do you really want to remove team "{displayName}" and its members from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + case ATTENDEE.ACTOR_TYPE.USERS: + default: + return t('spreed', 'Do you really want to remove {displayName} from this conversation?', + this.participant, undefined, { escape: false, sanitize: false }) + } + }, + showModeratorLabel() { return this.isModerator && ![CONVERSATION.TYPE.ONE_TO_ONE, CONVERSATION.TYPE.ONE_TO_ONE_FORMER, CONVERSATION.TYPE.CHANGELOG].includes(this.conversation.type) @@ -943,6 +978,7 @@ export default { token: this.token, attendeeId: this.attendeeId, }) + this.isRemoveDialogOpen = false }, grantAllPermissions() { @@ -1201,4 +1237,8 @@ export default { } } +.critical > :deep(.action-button) { + color: var(--color-error); +} + </style> |