Merge pull request #30043 from ArcticFall/master

Add ability to rename Groups in the frontend

3 files changed, 178 insertions, 30 deletions

diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
new file mode 100644
index 00000000000..173d3a45f5b
--- /dev/null
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -0,0 +1,140 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<template>
+	<AppNavigationItem :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>
+			<CounterBubble v-if="count">
+				{{ count }}
+			</CounterBubble>
+		</template>
+		<template #actions>
+			<ActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+				ref="displayNameInput"
+				icon="icon-edit"
+				type="text"
+				:value="title"
+				@submit="renameGroup(id)">
+				{{ t('settings', 'Rename group') }}
+			</ActionInput>
+			<ActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+				icon="icon-delete"
+				@click="removeGroup(id)">
+				{{ t('settings', 'Remove group') }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
+</template>
+
+<script>
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+
+export default {
+	name: 'GroupListItem',
+	components: {
+		ActionInput,
+		ActionButton,
+		CounterBubble,
+		AppNavigationItem,
+	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		count: {
+			type: Number,
+			required: false,
+		},
+	},
+	data() {
+		return {
+			loadingRenameGroup: false,
+			openGroupMenu: false,
+		}
+	},
+	computed: {
+		settings() {
+			return this.$store.getters.getServerData
+		},
+	},
+	methods: {
+		handleGroupMenuOpen() {
+			this.openGroupMenu = true
+		},
+		async renameGroup(gid) {
+			// check if group id is valid
+			if (gid.trim() === '') {
+				return
+			}
+
+			const displayName = this.$refs.displayNameInput.$el.querySelector('input[type="text"]').value
+
+			// check if group name is valid
+			if (displayName.trim() === '') {
+				return
+			}
+
+			try {
+				this.openGroupMenu = false
+				this.loadingRenameGroup = true
+				await this.$store.dispatch('renameGroup', {
+					groupid: gid.trim(),
+					displayName: displayName.trim(),
+				})
+
+				this.loadingRenameGroup = false
+			} catch {
+				this.openGroupMenu = true
+				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)
+					}
+				}
+			)
+		},
+	},
+}
+</script>
diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js
index 054380c8245..77b02fb0682 100644
--- a/apps/settings/src/store/users.js
+++ b/apps/settings/src/store/users.js
@@ -96,6 +96,15 @@ const mutations = {
 			console.error('Can\'t create group', e)
 		}
 	},
+	renameGroup(state, { gid, displayName }) {
+		const groupIndex = state.groups.findIndex(groupSearch => groupSearch.id === gid)
+		if (groupIndex >= 0) {
+			const updatedGroup = state.groups[groupIndex]
+			updatedGroup.name = displayName
+			state.groups.splice(groupIndex, 1, updatedGroup)
+			state.groups = orderGroups(state.groups, state.orderBy)
+		}
+	},
 	removeGroup(state, gid) {
 		const groupIndex = state.groups.findIndex(groupSearch => groupSearch.id === gid)
 		if (groupIndex >= 0) {
@@ -342,6 +351,30 @@ const actions = {
 	},
 
 	/**
+	 * Rename group
+	 *
+	 * @param {Object} context store context
+	 * @param {string} groupid Group id
+	 * @param {string} displayName Group display name
+	 * @return {Promise}
+	 */
+	renameGroup(context, { groupid, displayName }) {
+		return api.requireAdmin().then((response) => {
+			return api.put(generateOcsUrl('cloud/groups/{groupId}', { groupId: encodeURIComponent(groupid) }), { key: 'displayname', value: displayName })
+				.then((response) => {
+					context.commit('renameGroup', { gid: groupid, displayName })
+					return { groupid, displayName }
+				})
+				.catch((error) => { throw error })
+		}).catch((error) => {
+			context.commit('API_FAILURE', { groupid, error })
+			// let's throw one more time to prevent the view
+			// from renaming the group
+			throw error
+		})
+	},
+
+	/**
 	 * Remove group
 	 *
 	 * @param {object} context store context
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index 02f55a0d3cb..c3d3d9f3c72 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -72,23 +72,11 @@
 				</AppNavigationItem>
 
 				<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
-				<AppNavigationItem v-for="group in groupList"
+				<GroupListItem v-for="group in groupList"
+					:id="group.id"
 					:key="group.id"
-					:exact="true"
 					:title="group.title"
-					:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(group.id) } }"
-					icon="icon-group">
-					<AppNavigationCounter v-if="group.count" slot="counter">
-						{{ group.count }}
-					</AppNavigationCounter>
-					<template slot="actions">
-						<ActionButton v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
-							icon="icon-delete"
-							@click="removeGroup(group.id)">
-							{{ t('settings', 'Remove group') }}
-						</ActionButton>
-					</template>
-				</AppNavigationItem>
+					:count="group.count" />
 			</template>
 			<template #footer>
 				<AppNavigationSettings>
@@ -154,7 +142,6 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
@@ -169,6 +156,7 @@ import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
+import GroupListItem from '../components/GroupListItem'
 import UserList from '../components/UserList'
 
 Vue.use(VueLocalStorage)
@@ -176,7 +164,6 @@ Vue.use(VueLocalStorage)
 export default {
 	name: 'Users',
 	components: {
-		ActionButton,
 		AppContent,
 		AppNavigation,
 		AppNavigationCaption,
@@ -185,6 +172,7 @@ export default {
 		AppNavigationNew,
 		AppNavigationSettings,
 		Content,
+		GroupListItem,
 		Multiselect,
 		UserList,
 	},
@@ -366,19 +354,6 @@ export default {
 			this.$localStorage.set(key, status)
 			return status
 		},
-		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)
-					}
-				}
-			)
-		},
 
 		/**
 		 * Dispatch default quota set request