diff options
Diffstat (limited to 'apps/settings/src/views/UserManagementNavigation.vue')
| -rw-r--r-- | apps/settings/src/views/UserManagementNavigation.vue | 124 |
1 files changed, 26 insertions, 98 deletions
diff --git a/apps/settings/src/views/UserManagementNavigation.vue b/apps/settings/src/views/UserManagementNavigation.vue index b1322a7ffa8..95a12ac7c51 100644 --- a/apps/settings/src/views/UserManagementNavigation.vue +++ b/apps/settings/src/views/UserManagementNavigation.vue @@ -3,7 +3,8 @@ - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <NcAppNavigation :aria-label="t('settings', 'Account management')"> + <NcAppNavigation class="account-management__navigation" + :aria-label="t('settings', 'Account management')"> <NcAppNavigationNew button-id="new-user-button" :text="t('settings','New account')" @click="showNewUserMenu" @@ -21,7 +22,7 @@ :name="t('settings', 'All accounts')" :to="{ name: 'users' }"> <template #icon> - <NcIconSvgWrapper :path="mdiAccount" /> + <NcIconSvgWrapper :path="mdiAccountOutline" /> </template> <template #counter> <NcCounterBubble v-if="userCount" :type="!selectedGroupDecoded ? 'highlighted' : undefined"> @@ -36,7 +37,7 @@ :name="t('settings', 'Admins')" :to="{ name: 'group', params: { selectedGroup: 'admin' } }"> <template #icon> - <NcIconSvgWrapper :path="mdiShieldAccount" /> + <NcIconSvgWrapper :path="mdiShieldAccountOutline" /> </template> <template #counter> <NcCounterBubble v-if="adminGroup && adminGroup.count > 0" @@ -69,7 +70,7 @@ :name="t('settings', 'Disabled accounts')" :to="{ name: 'group', params: { selectedGroup: 'disabled' } }"> <template #icon> - <NcIconSvgWrapper :path="mdiAccountOff" /> + <NcIconSvgWrapper :path="mdiAccountOffOutline" /> </template> <template v-if="disabledGroup.usercount > 0" #counter> <NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined"> @@ -79,49 +80,14 @@ </NcAppNavigationItem> </NcAppNavigationList> - <NcAppNavigationCaption :name="t('settings', 'Groups')" - :disabled="loadingAddGroup" - :aria-label="loadingAddGroup ? t('settings', 'Creating group…') : t('settings', 'Create group')" - force-menu - is-heading - :open.sync="isAddGroupOpen"> - <template v-if="isAdminOrDelegatedAdmin" #actionsTriggerIcon> - <NcLoadingIcon v-if="loadingAddGroup" /> - <NcIconSvgWrapper v-else :path="mdiPlus" /> - </template> - <template v-if="isAdminOrDelegatedAdmin" #actions> - <NcActionText> - <template #icon> - <NcIconSvgWrapper :path="mdiAccountGroup" /> - </template> - {{ t('settings', 'Create group') }} - </NcActionText> - <NcActionInput :label="t('settings', 'Group name')" - data-cy-users-settings-new-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> - - <NcAppNavigationList class="account-management__group-list" data-cy-users-settings-navigation-groups="custom"> - <GroupListItem v-for="group in userGroups" - :id="group.id" - :key="group.id" - :active="selectedGroupDecoded === group.id" - :name="group.title" - :count="group.count" /> - </NcAppNavigationList> + <AppNavigationGroupList /> <template #footer> <NcButton class="account-management__settings-toggle" type="tertiary" @click="isDialogOpen = true"> <template #icon> - <NcIconSvgWrapper :path="mdiCog" /> + <NcIconSvgWrapper :path="mdiCogOutline" /> </template> {{ t('settings', 'Account management settings') }} </NcButton> @@ -131,31 +97,26 @@ </template> <script setup lang="ts"> -import { mdiAccount, mdiAccountGroup, mdiAccountOff, mdiCog, mdiPlus, mdiShieldAccount, mdiHistory } from '@mdi/js' -import { showError } from '@nextcloud/dialogs' +import { mdiAccountOutline, mdiAccountOffOutline, mdiCogOutline, mdiPlus, mdiShieldAccountOutline, mdiHistory } from '@mdi/js' import { translate as t } from '@nextcloud/l10n' import { computed, ref } from 'vue' -import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js' -import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.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 NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js' -import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' - -import GroupListItem from '../components/GroupListItem.vue' +import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation' +import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem' +import NcAppNavigationList from '@nextcloud/vue/components/NcAppNavigationList' +import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' + import UserSettingsDialog from '../components/Users/UserSettingsDialog.vue' +import AppNavigationGroupList from '../components/AppNavigationGroupList.vue' + import { useStore } from '../store' -import { useRoute, useRouter } from 'vue-router/composables' +import { useRoute } from 'vue-router/composables' import { useFormatGroups } from '../composables/useGroupsNavigation' const route = useRoute() -const router = useRouter() const store = useStore() /** State of the 'new-account' dialog */ @@ -170,51 +131,13 @@ const selectedGroupDecoded = computed(() => selectedGroup.value ? decodeURICompo const userCount = computed(() => store.getters.getUserCount) /** All available groups */ const groups = computed(() => store.getters.getSortedGroups) -const { adminGroup, recentGroup, disabledGroup, userGroups } = useFormatGroups(groups) +const { adminGroup, recentGroup, disabledGroup } = useFormatGroups(groups) /** Server settings for current user */ const settings = computed(() => store.getters.getServerData) /** True if the current user is a (delegated) admin */ const isAdminOrDelegatedAdmin = computed(() => settings.value.isAdmin || settings.value.isDelegatedAdmin) -/** True if the 'add-group' dialog is open - needed to be able to close it when the group is created */ -const isAddGroupOpen = ref(false) -/** True if the group creation is in progress to show loading spinner and disable adding another one */ -const loadingAddGroup = ref(false) -/** Error state for creating a new group */ -const hasAddGroupError = ref(false) -/** Name of the group to create (used in the group creation dialog) */ -const newGroupName = ref('') - -/** - * Create a new group - */ -async function createGroup() { - hasAddGroupError.value = false - const groupId = newGroupName.value.trim() - if (groupId === '') { - hasAddGroupError.value = true - return - } - - isAddGroupOpen.value = false - loadingAddGroup.value = true - - try { - await store.dispatch('addGroup', groupId) - await router.push({ - name: 'group', - params: { - selectedGroup: encodeURIComponent(groupId), - }, - }) - newGroupName.value = '' - } catch { - showError(t('settings', 'Failed to create group')) - } - loadingAddGroup.value = false -} - /** * Open the new-user form dialog */ @@ -227,7 +150,12 @@ function showNewUserMenu() { </script> <style scoped lang="scss"> -.account-management{ +.account-management { + &__navigation { + :deep(.app-navigation__body) { + will-change: scroll-position; + } + } &__system-list { height: auto !important; overflow: visible !important; |