aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/views/UserManagementNavigation.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/settings/src/views/UserManagementNavigation.vue')
-rw-r--r--apps/settings/src/views/UserManagementNavigation.vue150
1 files changed, 48 insertions, 102 deletions
diff --git a/apps/settings/src/views/UserManagementNavigation.vue b/apps/settings/src/views/UserManagementNavigation.vue
index 0c98784135b..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"
@@ -18,10 +19,10 @@
data-cy-users-settings-navigation-groups="system">
<NcAppNavigationItem id="everyone"
:exact="true"
- :name="t('settings', 'Active accounts')"
+ :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">
@@ -30,13 +31,13 @@
</template>
</NcAppNavigationItem>
- <NcAppNavigationItem v-if="isAdmin"
+ <NcAppNavigationItem v-if="settings.isAdmin"
id="admin"
:exact="true"
: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"
@@ -46,6 +47,22 @@
</template>
</NcAppNavigationItem>
+ <NcAppNavigationItem v-if="isAdminOrDelegatedAdmin"
+ id="recent"
+ :exact="true"
+ :name="t('settings', 'Recently active')"
+ :to="{ name: 'group', params: { selectedGroup: '__nc_internal_recent' } }">
+ <template #icon>
+ <NcIconSvgWrapper :path="mdiHistory" />
+ </template>
+ <template #counter>
+ <NcCounterBubble v-if="recentGroup?.usercount"
+ :type="selectedGroupDecoded === '__nc_internal_recent' ? 'highlighted' : undefined">
+ {{ recentGroup.usercount }}
+ </NcCounterBubble>
+ </template>
+ </NcAppNavigationItem>
+
<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
<NcAppNavigationItem v-if="disabledGroup && (disabledGroup.usercount > 0 || disabledGroup.usercount === -1)"
id="disabled"
@@ -53,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">
@@ -63,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 #actionsTriggerIcon>
- <NcLoadingIcon v-if="loadingAddGroup" />
- <NcIconSvgWrapper v-else :path="mdiPlus" />
- </template>
- <template #actions>
- <NcActionText>
- <template #icon>
- <AccountGroup :size="20" />
- </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>
@@ -115,31 +97,26 @@
</template>
<script setup lang="ts">
-import { mdiAccount, mdiAccountOff, mdiCog, mdiPlus, mdiShieldAccount } 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 */
@@ -154,48 +131,12 @@ const selectedGroupDecoded = computed(() => selectedGroup.value ? decodeURICompo
const userCount = computed(() => store.getters.getUserCount)
/** All available groups */
const groups = computed(() => store.getters.getSortedGroups)
-const { adminGroup, disabledGroup, userGroups } = useFormatGroups(groups)
-
-/** True if the current user is an administrator */
-const isAdmin = computed(() => store.getters.getServerData.isAdmin)
+const { adminGroup, recentGroup, disabledGroup } = useFormatGroups(groups)
-/** 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
-}
+/** 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)
/**
* Open the new-user form dialog
@@ -209,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;
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 05:00:07 +0000