upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

enh(settings): Move confirm group removal dialog to vue

Browse source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2023-10-06 17:35:44 -07:00
parent 0fe1b402fa
commit ef9f1e631d
1 changed files with 107 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
apps/settings/src/components/GroupListItem.vue
View file

@ -21,56 +21,101 @@
-->
<template>
<NcAppNavigationItem :key="id"
: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"
ref="displayNameInput"
icon="icon-edit"
:trailing-button-label="t('settings', 'Submit')"
type="text"
:value="name"
:label=" t('settings', 'Rename group')"
@submit="renameGroup(id)" />
<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 remove the group "{group}". The users 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"
: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"
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"
@click="showRemoveGroupModal = true">
<template #icon>
<Delete :size="20" />
</template>
{{ t('settings', 'Remove group') }}
</NcActionButton>
</template>
</NcAppNavigationItem>
</Fragment>
</template>
<script>
import { Fragment } from 'vue-frag'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
import Delete from 'vue-material-design-icons/Delete.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import { showError } from '@nextcloud/dialogs'
export default {
name: 'GroupListItem',
components: {
AccountGroup,
Delete,
Fragment,
NcActionButton,
NcActionInput,
NcAppNavigationItem,
NcButton,
NcCounterBubble,
NcModal,
NcNoteCard,
Pencil,
},
props: {
/**
@ -106,6 +151,7 @@ export default {
return {
loadingRenameGroup: false,
openGroupMenu: false,
showRemoveGroupModal: false,
}
},
computed: {
@ -144,18 +190,36 @@ export default {
this.loadingRenameGroup = false
}
},
removeGroup(groupid) {
// 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 '),
(success) => {
if (success) {
this.$store.dispatch('removeGroup', groupid)
}
},
)
async removeGroup() {
try {
await this.$store.dispatch('removeGroup', this.id)
this.showRemoveGroupModal = false
} catch (error) {
showError(t('settings', 'Failed to remove 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>