Add new component for the group list items.

Signed-off-by: Martin Jänel <spammemore@posteo.de>
Signed-off-by: Louis Chemineau <louis@chmn.me>

3 files changed, 152 insertions, 62 deletions

diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
new file mode 100644
index 00000000000..f5c3726d5bf
--- /dev/null
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -0,0 +1,143 @@
+<!--
+  - @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"
+		:menuOpen="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 f09df7fb8b5..b38c282965c 100644
--- a/apps/settings/src/store/users.js
+++ b/apps/settings/src/store/users.js
@@ -96,12 +96,12 @@ const mutations = {
 			console.error('Can\'t create group', e)
 		}
 	},
-	renameGroup(state, { gid, displayname }) {
+	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[groupIndex] = updatedGroup
+			updatedGroup.name = displayName
+			state.groups.splice(groupIndex, 1, updatedGroup)
 			state.groups = orderGroups(state.groups, state.orderBy)
 		}
 	},
@@ -362,7 +362,7 @@ const actions = {
 		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: displayName })
+					context.commit('renameGroup', { gid: groupid, displayName })
 					return { groupid, displayName }
 				})
 				.catch((error) => { throw error })
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index a606600b6ca..c3d3d9f3c72 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -72,31 +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 #actions>
-						<ActionInput v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
-							ref="displayNameInput"
-							icon="icon-edit"
-							type="text"
-							:value="group.title"
-							@submit="renameGroup(group.id)">
-							{{ t('settings', 'Rename group') }}
-						</ActionInput>
-						<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>
@@ -162,8 +142,6 @@
 </template>
 
 <script>
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-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'
@@ -178,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)
@@ -185,8 +164,6 @@ Vue.use(VueLocalStorage)
 export default {
 	name: 'Users',
 	components: {
-		ActionInput,
-		ActionButton,
 		AppContent,
 		AppNavigation,
 		AppNavigationCaption,
@@ -195,6 +172,7 @@ export default {
 		AppNavigationNew,
 		AppNavigationSettings,
 		Content,
+		GroupListItem,
 		Multiselect,
 		UserList,
 	},
@@ -376,37 +354,6 @@ export default {
 			this.$localStorage.set(key, status)
 			return status
 		},
-		async renameGroup(gid) {
-			// check if group id is valid
-			if (gid.trim() === '') {
-				return
-			}
-
-			const displayName = this.$refs.displayNameInput[0].$el.querySelector('input[type="text"]').value
-
-			// check if group name is valid
-			if (displayName.trim() === '') {
-				return
-			}
-
-			try {
-				await this.$store.dispatch('renameGroup', { groupid: gid.trim(), displayName: displayName.trim() })
-			} catch {
-			}
-		},
-		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