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

Make Groups a separate view

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-09-16 12:53:43 +02:00
parent 405302e2f0
commit 496ada3647
14 changed files with 203 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/GroupsView.vue
+174
View File
@@ -0,0 +1,174 @@
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, inject } from 'vue';
import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import GroupDialog from '../components/GroupDialog.vue';
import UsersModel from '../models/UsersModel.js';
import GroupsModel from '../models/GroupsModel.js';
import ProfileModel from '../models/ProfileModel.js';
const usersModel = UsersModel.create();
const groupsModel = GroupsModel.create();
const profileModel = ProfileModel.create();
const actionMenuModel = ref([]);
const actionMenuElement = useTemplateRef('actionMenuElement');
const groupsColumns = {
name: {
label: t('users.groups.name'),
sort: true
},
users: {
label: t('users.groups.users'),
sort: true,
hideMobile: true,
},
actions: {}
};
function onGroupActionMenu(group, event) {
actionMenuModel.value = [{
icon: 'fa-solid fa-pencil-alt',
label: t('main.action.edit'),
action: onEditOrAddGroup.bind(null, group),
}, {
separator: true,
}, {
icon: 'fa-solid fa-trash-alt',
label: t('main.action.remove'),
action: onRemoveGroup.bind(null, group),
}];
actionMenuElement.value.open(event, event.currentTarget);
}
const profile = ref({});
const busy = ref(true);
const users = ref([]);
const usersById = ref({});
const groups = ref([]);
const groupsById = ref({});
const roles = ref([]);
const features = inject('features');
const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
const inputDialog = useTemplateRef('inputDialog');
const groupDialog = useTemplateRef('groupDialog');
async function refreshUsers() {
const [error, result] = await usersModel.list();
if (error) return console.error(error);
usersById.value = {};
users.value = result;
result.forEach(user => {
usersById.value[user.id] = user;
});
}
async function refreshGroups() {
const [error, result] = await groupsModel.list();
if (error) return console.error(error);
groupsById.value = {};
groups.value = result;
result.forEach(group => {
groupsById.value[group.id] = group;
});
}
function groupMembers(group) {
return group.userIds.filter(function (uid) { return !!usersById.value[uid]; }).map(function (uid) { return usersById.value[uid].username || usersById.value[uid].email; }).join(' ');
}
function onEditOrAddGroup(group = null) {
if (group || features.value.userGroups) groupDialog.value.open(group);
else subscriptionRequiredDialog.value.open();
}
async function onRemoveGroup(group) {
const yes = await inputDialog.value.confirm({
title: t('users.deleteGroupDialog.title', { name: group.name }),
message: t('users.deleteGroupDialog.description', { memberCount: group.userIds.length }),
confirmStyle: 'danger',
confirmLabel: t('users.deleteGroupDialog.deleteAction'),
rejectLabel: t('main.dialog.cancel')
});
if (!yes) return;
const [error] = await groupsModel.remove(group.id);
if (error) console.error(error);
await refreshGroups();
}
onMounted(async () => {
const [error, result] = await profileModel.get();
if (error) return console.error(error);
profile.value = result;
await refreshUsers();
await refreshGroups();
// Order matters for permissions used in canEdit
roles.value = [
{ id: 'user', name: t('users.role.user'), disabled: false },
{ id: 'usermanager', name: t('users.role.usermanager'), disabled: false },
{ id: 'mailmanager', name: t('users.role.mailmanager'), disabled: false },
{ 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>
<template>
<div class="content">
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<GroupDialog ref="groupDialog" @success="refreshGroups()"/>
<Section :title="$t('main.navbar.groups')" :title-badge="!features.userGroups ? 'Upgrade' : ''">
<template #header-title-extra>
<span style="font-weight: normal; font-size: 14px">({{ groups.length }})</span>
</template>
<template #header-buttons>
<Button icon="fa-solid fa-plus" @click="onEditOrAddGroup()">{{ $t('users.groups.newGroupAction') }}</Button>
</template>
<TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;" :placeholder="$t('users.groups.emptyPlaceholder')">
<template #name="group">
{{ group.name }} &nbsp; <i v-if="group.source" class="far fa-address-book" v-tooltip="$t('users.groups.externalLdapTooltip')"></i>
</template>
<template #users="group">
{{ groupMembers(group) }}
</template>
<template #actions="group">
<div style="text-align: right;">
<Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" />
</div>
</template>
</TableView>
</Section>
</div>
</template>
<style scoped>
.group-label {
padding: 0 5px;
}
</style>
dashboard/src/views/UsersView.vue
-80
View File
@@ -9,7 +9,6 @@ import { Button, Menu, TextInput, SingleSelect, TableView, InputDialog } from '@
import { ROLES } from '../constants.js';
import Section from '../components/Section.vue';
import UserDialog from '../components/UserDialog.vue';
import GroupDialog from '../components/GroupDialog.vue';
import ImpersonateDialog from '../components/ImpersonateDialog.vue';
import InvitationDialog from '../components/InvitationDialog.vue';
import PasswordResetDialog from '../components/PasswordResetDialog.vue';
@@ -76,35 +75,6 @@ function onUserActionMenu(user, event) {
actionMenuElement.value.open(event, event.currentTarget);
}
const groupsColumns = {
name: {
label: t('users.groups.name'),
sort: true
},
users: {
label: t('users.groups.users'),
sort: true,
hideMobile: true,
},
actions: {}
};
function onGroupActionMenu(group, event) {
actionMenuModel.value = [{
icon: 'fa-solid fa-pencil-alt',
label: t('main.action.edit'),
action: onEditOrAddGroup.bind(null, group),
}, {
separator: true,
}, {
icon: 'fa-solid fa-trash-alt',
label: t('main.action.remove'),
action: onRemoveGroup.bind(null, group),
}];
actionMenuElement.value.open(event, event.currentTarget);
}
const profile = ref({});
const busy = ref(true);
const filterOptions = ref([
@@ -125,7 +95,6 @@ const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
const inputDialog = useTemplateRef('inputDialog');
const userDialog = useTemplateRef('userDialog');
const groupDialog = useTemplateRef('groupDialog');
const impersonateDialog = useTemplateRef('impersonateDialog');
const passwordResetDialog = useTemplateRef('passwordResetDialog');
@@ -190,10 +159,6 @@ function isMe(user) {
return user.username === profile.value.username;
}
function groupMembers(group) {
return group.userIds.filter(function (uid) { return !!usersById.value[uid]; }).map(function (uid) { return usersById.value[uid].username || usersById.value[uid].email; }).join(' ');
}
function onImpersonate(user) {
impersonateDialog.value.open(user);
}
@@ -212,28 +177,6 @@ function onInvitation(user) {
invitationDialog.value.open(user);
}
function onEditOrAddGroup(group = null) {
if (group || features.value.userGroups) groupDialog.value.open(group);
else subscriptionRequiredDialog.value.open();
}
async function onRemoveGroup(group) {
const yes = await inputDialog.value.confirm({
title: t('users.deleteGroupDialog.title', { name: group.name }),
message: t('users.deleteGroupDialog.description', { memberCount: group.userIds.length }),
confirmStyle: 'danger',
confirmLabel: t('users.deleteGroupDialog.deleteAction'),
rejectLabel: t('main.dialog.cancel')
});
if (!yes) return;
const [error] = await groupsModel.remove(group.id);
if (error) console.error(error);
await refreshGroups();
}
async function onRemoveUser(user) {
const yes = await inputDialog.value.confirm({
title: t('users.deleteUserDialog.title', { username: (user.username || user.email) }),
@@ -279,7 +222,6 @@ onMounted(async () => {
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<UserDialog ref="userDialog" @success="refreshUsers()"/>
<GroupDialog ref="groupDialog" @success="refreshGroups()"/>
<ImpersonateDialog ref="impersonateDialog" />
<PasswordResetDialog ref="passwordResetDialog" />
<InvitationDialog ref="invitationDialog" @refresh-required="refreshUsers()" />
@@ -320,28 +262,6 @@ onMounted(async () => {
</template>
</TableView>
</Section>
<Section :title="$t('users.groups.title')" :title-badge="!features.userGroups ? 'Upgrade' : ''">
<template #header-buttons>
<Button icon="fa-solid fa-plus" @click="onEditOrAddGroup()">{{ $t('users.groups.newGroupAction') }}</Button>
</template>
<TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;" :placeholder="$t('users.groups.emptyPlaceholder')">
<template #name="group">
{{ group.name }} &nbsp; <i v-if="group.source" class="far fa-address-book" v-tooltip="$t('users.groups.externalLdapTooltip')"></i>
</template>
<template #users="group">
{{ groupMembers(group) }}
</template>
<template #actions="group">
<div style="text-align: right;">
<Button tool plain secondary @click.capture="onGroupActionMenu(group, $event)" icon="fa-solid fa-ellipsis" />
</div>
</template>
</TableView>
<br/>
<div>{{ $t('users.groups.count', { count: groups.length }) }}</div>
</Section>
</div>
</template>