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

Implement group dialog

Browse Source
This commit is contained in:
Johannes Zellner
2025-02-12 13:09:07 +01:00
parent 31599c5da9
commit fda0a918f0
3 changed files with 223 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
dashboard/src/views/UsersView.vue
View File

@@ -4,10 +4,11 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, computed } from 'vue';
import { Button, ButtonGroup, TextInput, Dropdown, TableView } from 'pankow';
import { ref, onMounted, computed, useTemplateRef } from 'vue';
import { Button, ButtonGroup, TextInput, Dropdown, TableView, InputDialog } from 'pankow';
import { ROLES } from '../constants.js';
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';
@@ -45,6 +46,9 @@ const groups = ref([]);
const groupsById = ref({});
const roles = ref([]);
const inputDialog = useTemplateRef('inputDialog');
const groupDialog = useTemplateRef('groupDialog');
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;
@@ -109,6 +113,27 @@ 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) {
groupDialog.value.open(group);
}
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.memberCount }),
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);
@@ -133,6 +158,9 @@ onMounted(async () => {
</script>
<template>
<InputDialog ref="inputDialog" />
<GroupDialog ref="groupDialog" @success="refreshGroups()"/>
<div class="content">
<Section :title="$t('main.navbar.users')">
<template #header-buttons>
@@ -169,25 +197,28 @@ onMounted(async () => {
</div>
</template>
</TableView>
<br/>
<div>{{ $t('users.users.count', { count: users.length }) }}</div>
</Section>
<Section :title="$t('users.groups.title')">
<template #header-buttons>
<Button icon="fa-solid fa-plus">{{ $t('users.groups.newGroupAction') }}</Button>
<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;">
<TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;" @row-click="onEditOrAddGroup">
<template #name="group">
{{ group.name }} &nbsp; <i ng-show="group.source" class="far fa-address-book" uib-tooltip="{{ 'users.groups.externalLdapTooltip' | tr }}"></i>
{{ 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 class="table-actions">
<Button tool small secondary @click="groupEdit.show(group)" v-tooltip="'Edit Group'" icon="fa fa-pencil-alt" />
<Button tool small danger @click="groupRemove.show(group)" v-tooltip="'Remove Group'" icon="far fa-trash-alt" />
<ButtonGroup>
<Button tool small secondary @click.stop="onEditOrAddGroup(group)" v-tooltip="'Edit Group'" icon="fa fa-pencil-alt" />
</ButtonGroup>
<Button tool small danger @click.stop="onRemoveGroup(group)" v-tooltip="'Remove Group'" icon="far fa-trash-alt" />
</div>
</template>
</TableView>