diff options
Diffstat (limited to 'apps/settings/src/components/GroupListItem.vue')
| -rw-r--r-- | apps/settings/src/components/GroupListItem.vue | 213 |
1 files changed, 141 insertions, 72 deletions
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue index 12bdcedcd8f..69bb8a3f575 100644 --- a/apps/settings/src/components/GroupListItem.vue +++ b/apps/settings/src/components/GroupListItem.vue @@ -1,89 +1,141 @@ <!-- - - @copyright Copyright (c) 2021 Martin Jänel <spammemore@posteo.de> - - - - @author Martin Jänel <spammemore@posteo.de> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <NcAppNavigationItem :key="id" - :exact="true" - :title="title" - :to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }" - icon="icon-group" - :loading="loadingRenameGroup" - :menu-open="openGroupMenu" - @update:menuOpen="handleGroupMenuOpen"> - <template #counter> - <NcCounterBubble v-if="count"> - {{ count }} - </NcCounterBubble> - </template> - <template #actions> - <NcActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin" - ref="displayNameInput" - icon="icon-edit" - type="text" - :value="title" - @submit="renameGroup(id)"> - {{ t('settings', 'Rename group') }} - </NcActionInput> - <NcActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin" - icon="icon-delete" - @click="removeGroup(id)"> - {{ t('settings', 'Remove group') }} - </NcActionButton> - </template> - </NcAppNavigationItem> + <Fragment> + <NcModal v-if="showRemoveGroupModal" + @close="showRemoveGroupModal = false"> + <div class="modal__content"> + <h2 class="modal__header"> + {{ t('settings', 'Please confirm the group removal') }} + </h2> + <NcNoteCard type="warning" + show-alert> + {{ t('settings', 'You are about to delete the group "{group}". The accounts will NOT be deleted.', { group: name }) }} + </NcNoteCard> + <div class="modal__button-row"> + <NcButton type="secondary" + @click="showRemoveGroupModal = false"> + {{ t('settings', 'Cancel') }} + </NcButton> + <NcButton type="primary" + @click="removeGroup"> + {{ t('settings', 'Confirm') }} + </NcButton> + </div> + </div> + </NcModal> + + <NcAppNavigationItem :key="id" + ref="listItem" + :exact="true" + :name="name" + :to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }" + :loading="loadingRenameGroup" + :menu-open="openGroupMenu" + @update:menuOpen="handleGroupMenuOpen"> + <template #icon> + <AccountGroup :size="20" /> + </template> + <template #counter> + <NcCounterBubble v-if="count" + :type="active ? 'highlighted' : undefined"> + {{ count }} + </NcCounterBubble> + </template> + <template #actions> + <NcActionInput v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" + ref="displayNameInput" + :trailing-button-label="t('settings', 'Submit')" + type="text" + :value="name" + :label=" t('settings', 'Rename group')" + @submit="renameGroup(id)"> + <template #icon> + <Pencil :size="20" /> + </template> + </NcActionInput> + <NcActionButton v-if="id !== 'admin' && id !== 'disabled' && (settings.isAdmin || settings.isDelegatedAdmin)" + @click="showRemoveGroupModal = true"> + <template #icon> + <Delete :size="20" /> + </template> + {{ t('settings', 'Delete group') }} + </NcActionButton> + </template> + </NcAppNavigationItem> + </Fragment> </template> <script> -import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton' -import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble' -import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem' +import { Fragment } from 'vue-frag' + +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcActionInput from '@nextcloud/vue/components/NcActionInput' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' +import NcModal from '@nextcloud/vue/components/NcModal' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' + +import AccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue' +import Delete from 'vue-material-design-icons/DeleteOutline.vue' +import Pencil from 'vue-material-design-icons/PencilOutline.vue' + +import { showError } from '@nextcloud/dialogs' export default { name: 'GroupListItem', components: { - NcActionInput, + AccountGroup, + Delete, + Fragment, NcActionButton, - NcCounterBubble, + NcActionInput, NcAppNavigationItem, + NcButton, + NcCounterBubble, + NcModal, + NcNoteCard, + Pencil, }, props: { + /** + * If this group is currently selected + */ + active: { + type: Boolean, + required: true, + }, + /** + * Number of members within this group + */ + count: { + type: Number, + default: null, + }, + /** + * Identifier of this group + */ id: { type: String, required: true, }, - title: { + /** + * Name of this group + */ + name: { type: String, required: true, }, - count: { - type: Number, - required: false, - }, }, data() { return { loadingRenameGroup: false, openGroupMenu: false, + showRemoveGroupModal: false, } }, computed: { @@ -122,19 +174,36 @@ export default { this.loadingRenameGroup = false } }, - removeGroup(groupid) { - const self = this - // TODO migrate to a vue js confirm dialog component - OC.dialogs.confirm( - t('settings', 'You are about to remove the group {group}. The users will NOT be deleted.', { group: groupid }), - t('settings', 'Please confirm the group removal '), - function(success) { - if (success) { - self.$store.dispatch('removeGroup', groupid) - } - } - ) + async removeGroup() { + try { + await this.$store.dispatch('removeGroup', this.id) + this.showRemoveGroupModal = false + } catch (error) { + showError(t('settings', 'Failed to delete group "{group}"', { group: this.name })) + } }, }, } </script> + +<style lang="scss" scoped> +.modal { + &__header { + margin: 0; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + gap: 4px 0; + } + + &__button-row { + display: flex; + width: 100%; + justify-content: space-between; + } +} +</style> |