jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add users filter bar

Browse Source
This commit is contained in:
Johannes Zellner
2025-02-11 20:21:35 +01:00
parent a1f01d2def
commit 9c4baf9cad
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/UsersView.vue
+21 -5
View File
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted } from 'vue';
import { ref, onMounted, computed } from 'vue';
import { Button, ButtonGroup, TextInput, Dropdown, TableView } from 'pankow';
import { ROLES } from '../constants.js';
import Section from '../components/Section.vue';
@@ -16,7 +16,6 @@ const usersModel = UsersModel.create();
const groupsModel = GroupsModel.create();
const profileModel = ProfileModel.create();
const usersColumns = {
role: { width: '33.5px' },
user: { label: t('users.users.user'), sort: true },
@@ -32,6 +31,7 @@ const groupsColumns = {
// TODO maybe replace with app.provide and inject
const profile = ref({});
const busy = ref(true);
const filterOptions = ref([
{ id: 'all', name: 'All Users' },
{ id: 'active', name: 'Active Users' },
@@ -45,6 +45,20 @@ const groups = ref([]);
const groupsById = ref({});
const roles = ref([]);
const filteredUsers = computed(() => {
return users.value.filter(u => {
return u.username.indexOf(search.value) !== -1 || u.email.indexOf(search.value) !== -1 || u.displayName.indexOf(search.value) !== -1;
}).filter(u => {
if (filter.value === 'active') {
return u.active;
} else if (filter.value === 'inactive') {
return !u.active;
} else {
return true;
}
});
});
async function refreshUsers() {
const [error, result] = await usersModel.list();
if (error) return console.error(error);
@@ -112,6 +126,8 @@ onMounted(async () => {
{ id: 'admin', name: t('users.role.admin'), disabled: !profile.value.isAtLeastAdmin },
{ id: 'owner', name: t('users.role.owner'), disabled: !profile.value.isAtLeastOwner }
];
busy.value = false;
});
</script>
@@ -125,7 +141,7 @@ onMounted(async () => {
<Button icon="fa-solid fa-user-plus">{{ $t('users.newUserAction') }}</Button>
</template>
<TableView :columns="usersColumns" :model="users" style="max-height: 500px;">
<TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" style="max-height: 400px;">
<template #role="user">
<i class="fas fa-crown arrow" v-if="user.active && user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
<i class="fa fa-user-tie arrow" v-if="user.active && user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
@@ -148,8 +164,8 @@ onMounted(async () => {
<Button small tool secondary :disabled="!canEdit(user)" v-if="user.inviteAccepted && !user.source" @click="passwordReset.show(user)" v-tooltip="$t('users.users.resetPasswordTooltip')" icon="fa-solid fa-key" />
<Button small tool secondary :disabled="!canImpersonate(user)" @click="setGhost.show(user)" v-tooltip="$t('users.users.setGhostTooltip')" icon="fa-solid fa-user-secret" />
<Button small tool secondary :disabled="!canEdit(user)" @click="userEdit.show(user)" v-tooltip="$t('users.users.editUserTooltip')" icon="fa fa-pencil-alt" />
<Button small tool danger :disabled="!canEdit(user) || isMe(user)" @click="userRemove.show(user)" v-tooltip="$t('users.users.removeUserTooltip')" icon="far fa-trash-alt" />
</ButtonGroup>
<Button small tool danger :disabled="!canEdit(user) || isMe(user)" @click="userRemove.show(user)" v-tooltip="$t('users.users.removeUserTooltip')" icon="far fa-trash-alt" />
</div>
</template>
</TableView>
@@ -161,7 +177,7 @@ onMounted(async () => {
<Button icon="fa-solid fa-plus">{{ $t('users.groups.newGroupAction') }}</Button>
</template>
<TableView :columns="groupsColumns" :model="groups" style="max-height: 500px;">
<TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;">
<template #name="group">
{{ group.name }} &nbsp; <i ng-show="group.source" class="far fa-address-book" uib-tooltip="{{ 'users.groups.externalLdapTooltip' | tr }}"></i>
</template>