enh(settings): Add groups accessibly

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 53 insertions, 46 deletions

diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index 9a32ca48168..13a7d46d256 100644
--- 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')"
@@ -36,18 +36,6 @@
 				</NcAppNavigationNew>
 
 				<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')"
@@ -61,6 +49,7 @@
 							</NcCounterBubble>
 						</template>
 					</NcAppNavigationItem>
+
 					<NcAppNavigationItem v-if="settings.isAdmin"
 						id="admin"
 						:exact="true"
@@ -92,7 +81,32 @@
 						</template>
 					</NcAppNavigationItem>
 
-					<NcAppNavigationCaption v-if="groupList.length > 0" :name="t('settings', 'Groups')" />
+					<NcAppNavigationCaption :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"
+								:value.sync="newGroupName"
+								:error="hasAddGroupError"
+								:helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''"
+								@submit="createGroup" />
+						</template>
+					</NcAppNavigationCaption>
+
 					<GroupListItem v-for="group in groupList"
 						:id="group.id"
 						:key="group.id"
@@ -127,15 +141,19 @@
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 import { Fragment } from 'vue-frag'
+import { translate as t } from '@nextcloud/l10n'
+import { showError } from '@nextcloud/dialogs'
 
+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'
@@ -158,14 +176,16 @@ export default {
 		Cog,
 		Fragment,
 		GroupListItem,
+		NcActionInput,
+		NcActionText,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
 		NcAppNavigationNew,
-		NcAppNavigationNewItem,
 		NcContent,
 		NcCounterBubble,
+		NcLoadingIcon,
 		Plus,
 		ShieldAccount,
 		UserList,
@@ -183,7 +203,10 @@ export default {
 		return {
 			// temporary value used for multiselect change
 			externalActions: [],
+			newGroupName: '',
+			isAddGroupOpen: false,
 			loadingAddGroup: false,
+			hasAddGroupError: false,
 			isDialogOpen: false,
 		}
 	},
@@ -261,6 +284,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		showNewUserMenu() {
 			this.$store.commit('setShowConfig', {
 				key: 'showNewUserForm',
@@ -287,43 +312,30 @@ export default {
 
 		/**
 		 * Create a new group
-		 *
-		 * @param {string} gid The group id
 		 */
-		async createGroup(gid) {
-			// group is not valid
-			if (gid.trim() === '') {
+		async createGroup() {
+			this.hasAddGroupError = false
+			const groupId = this.newGroupName.trim()
+			if (groupId === '') {
+				this.hasAddGroupError = true
 				return
 			}
 
+			this.isAddGroupOpen = false
+			this.loadingAddGroup = true
 			try {
-				this.loadingAddGroup = true
-				await this.$store.dispatch('addGroup', gid.trim())
-
-				this.hideAddGroupForm()
+				await this.$store.dispatch('addGroup', groupId)
 				await this.$router.push({
 					name: 'group',
 					params: {
-						selectedGroup: encodeURIComponent(gid.trim()),
+						selectedGroup: encodeURIComponent(groupId),
 					},
 				})
+				this.newGroupName = ''
 			} 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
 		},
 
 		/**
@@ -362,11 +374,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