Add user edit/new dialog

This commit is contained in:
Johannes Zellner
2025-02-16 17:04:58 +01:00
parent 270d27be73
commit 740c88c506
4 changed files with 311 additions and 5 deletions

View File

@@ -8,6 +8,7 @@ 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 UserDialog from '../components/UserDialog.vue';
import GroupDialog from '../components/GroupDialog.vue';
import ImpersonateDialog from '../components/ImpersonateDialog.vue';
import PasswordResetDialog from '../components/PasswordResetDialog.vue';
@@ -49,6 +50,7 @@ const groupsById = ref({});
const roles = ref([]);
const inputDialog = useTemplateRef('inputDialog');
const userDialog = useTemplateRef('userDialog');
const groupDialog = useTemplateRef('groupDialog');
const impersonateDialog = useTemplateRef('impersonateDialog');
const passwordResetDialog = useTemplateRef('passwordResetDialog');
@@ -125,6 +127,10 @@ function onPasswordReset(user) {
passwordResetDialog.value.open(user);
}
function onEditOrAddUser(user = null) {
userDialog.value.open(user);
}
function onEditOrAddGroup(group = null) {
groupDialog.value.open(group);
}
@@ -188,6 +194,7 @@ onMounted(async () => {
<template>
<InputDialog ref="inputDialog" />
<UserDialog ref="userDialog" @success="refreshUsers()"/>
<GroupDialog ref="groupDialog" @success="refreshGroups()"/>
<ImpersonateDialog ref="impersonateDialog" />
<PasswordResetDialog ref="passwordResetDialog" />
@@ -197,10 +204,10 @@ onMounted(async () => {
<template #header-buttons>
<TextInput v-model="search" placeholder="Search ..." />
<Dropdown outline tool :options="filterOptions" option-key="id" option-label="name" v-model="filter"></Dropdown>
<Button icon="fa-solid fa-user-plus">{{ $t('users.newUserAction') }}</Button>
<Button icon="fa-solid fa-user-plus" @click="onEditOrAddUser()">{{ $t('users.newUserAction') }}</Button>
</template>
<TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" style="max-height: 400px;">
<TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" style="max-height: 400px;" @row-click="onEditOrAddUser">
<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>
@@ -222,7 +229,7 @@ onMounted(async () => {
<Button small tool secondary :disabled="!canEdit(user)" v-if="!user.inviteAccepted && !isMe(user) && !user.source" @click="invitation.show(user)" v-tooltip="$t('users.users.invitationTooltip')" icon="fa-solid fa-paper-plane" />
<Button small tool secondary :disabled="!canEdit(user)" v-if="user.inviteAccepted && !user.source" @click="onPasswordReset(user)" v-tooltip="$t('users.users.resetPasswordTooltip')" icon="fa-solid fa-key" />
<Button small tool secondary :disabled="!canImpersonate(user)" @click="onImpersonate(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 secondary :disabled="!canEdit(user)" @click="onEditOrAddUser(user)" v-tooltip="$t('users.users.editUserTooltip')" icon="fa fa-pencil-alt" />
</ButtonGroup>
<Button small tool danger :disabled="!canEdit(user) || isMe(user)" @click="onRemoveUser(user)" v-tooltip="$t('users.users.removeUserTooltip')" icon="far fa-trash-alt" />
</div>