enh(settings): Add groups accessibly

Signed-off-by: Christopher Ng <[email protected]>
nextcloud · Aug 31, 2023 · 847f038 · 847f038
1 parent 2b71f09
commit 847f038
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 45 deletions.
diff --git a/apps/settings/src/store/users.js b/apps/settings/src/store/users.js
@@ -101,7 +101,7 @@ const mutations = {
 				id: gid,
 				name: displayName,
 			})
-			state.groups.push(group)
+			state.groups.unshift(group)
 			state.groups = orderGroups(state.groups, state.orderBy)
 		} catch (e) {
 			console.error('Can\'t create group', e)

diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<Fragment>
-		<NcContent app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
+		<NcContent app-name="settings">
 			<NcAppNavigation>
 				<NcAppNavigationNew button-id="new-user-button"
 					:text="t('settings','New user')"
@@ -32,18 +32,6 @@
 					@keyup.space="showNewUserMenu" />
 
 				<template #list>
-					<NcAppNavigationNewItem id="addgroup"
-						ref="addGroup"
-						:edit-placeholder="t('settings', 'Enter group name')"
-						:editable="true"
-						:loading="loadingAddGroup"
-						:name="t('settings', 'Add group')"
-						@click="showAddGroupForm"
-						@new-item="createGroup">
-						<template #icon>
-							<Plus :size="20" />
-						</template>
-					</NcAppNavigationNewItem>
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
 						:name="t('settings', 'Active users')"
@@ -57,6 +45,7 @@
 							</NcCounterBubble>
 						</template>
 					</NcAppNavigationItem>
+
 					<NcAppNavigationItem v-if="settings.isAdmin"
 						id="admin"
 						:exact="true"
@@ -88,7 +77,30 @@
 						</template>
 					</NcAppNavigationItem>
 
-					<NcAppNavigationCaption v-if="groupList.length > 0" :name="t('settings', 'Groups')" />
+					<NcAppNavigationCaption ref="navigationCaption"
+						:name="t('settings', 'Groups')"
+						:disabled="loadingAddGroup"
+						:aria-label="loadingAddGroup ? t('settings', 'Creating group…') : t('settings', 'Create group')"
+						force-menu
+						:open.sync="isAddGroupOpen">
+						<template #actionsTriggerIcon>
+							<NcLoadingIcon v-if="loadingAddGroup" />
+							<Plus v-else :size="20" />
+						</template>
+						<template #actions>
+							<NcActionText>
+								<template #icon>
+									<AccountGroup :size="20" />
+								</template>
+								{{ t('settings', 'Create group') }}
+							</NcActionText>
+							<NcActionInput :label="t('settings', 'Group name')"
+								:label-outside="false"
+								:disabled="loadingAddGroup"
+								@submit="createGroup" />
+						</template>
+					</NcAppNavigationCaption>
+
 					<GroupListItem v-for="group in groupList"
 						:id="group.id"
 						:key="group.id"
@@ -124,14 +136,16 @@ import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 import { Fragment } from 'vue-frag'
 
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
-import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
 import AccountOff from 'vue-material-design-icons/AccountOff.vue'
@@ -142,6 +156,7 @@ import ShieldAccount from 'vue-material-design-icons/ShieldAccount.vue'
 import GroupListItem from '../components/GroupListItem.vue'
 import UserList from '../components/UserList.vue'
 import UserSettingsDialog from '../components/Users/UserSettingsDialog.vue'
+import { showError } from '@nextcloud/dialogs'
 
 Vue.use(VueLocalStorage)
 
@@ -154,14 +169,16 @@ export default {
 		Cog,
 		Fragment,
 		GroupListItem,
+		NcActionInput,
+		NcActionText,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
 		NcAppNavigationNew,
-		NcAppNavigationNewItem,
 		NcContent,
 		NcCounterBubble,
+		NcLoadingIcon,
 		Plus,
 		ShieldAccount,
 		UserList,
@@ -179,6 +196,7 @@ export default {
 		return {
 			// temporary value used for multiselect change
 			externalActions: [],
+			isAddGroupOpen: false,
 			loadingAddGroup: false,
 			isDialogOpen: false,
 		}
@@ -284,42 +302,31 @@ export default {
 		/**
 		 * Create a new group
 		 *
-		 * @param {string} gid The group id
+		 * @param {SubmitEvent} event The event
 		 */
-		async createGroup(gid) {
-			// group is not valid
-			if (gid.trim() === '') {
+		async createGroup(event) {
+			this.isAddGroupOpen = false
+			const input = event.target[0]
+			const groupId = input.value.trim()
+			if (!groupId) {
+				showError(t('settings', 'Please enter a valid group name'))
 				return
 			}
 
+			this.loadingAddGroup = true
 			try {
-				this.loadingAddGroup = true
-				await this.$store.dispatch('addGroup', gid.trim())
+				await this.$store.dispatch('addGroup', groupId)
 
-				this.hideAddGroupForm()
 				await this.$router.push({
 					name: 'group',
 					params: {
-						selectedGroup: encodeURIComponent(gid.trim()),
+						selectedGroup: encodeURIComponent(groupId),
 					},
 				})
 			} catch {
-				this.showAddGroupForm()
-			} finally {
-				this.loadingAddGroup = false
+				showError(t('settings', 'Failed to create group'))
 			}
-		},
-
-		showAddGroupForm() {
-			this.$refs.addGroup.newItemActive = true
-			this.$nextTick(() => {
-				this.$refs.addGroup.$refs.newItemInput.focusInput()
-			})
-		},
-
-		hideAddGroupForm() {
-			this.$refs.addGroup.newItemActive = false
-			this.$refs.addGroup.newItemValue = ''
+			this.loadingAddGroup = false
 		},
 
 		/**
@@ -358,11 +365,6 @@ export default {
 	max-height: 100%;
 }
 
-// force hiding the editing action for the add group entry
-.app-navigation__list #addgroup::v-deep .app-navigation-entry__utils {
-	display: none;
-}
-
 .app-navigation-entry__settings {
 	height: auto !important;
 	// Prevent shrinking or growing