mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-04 09:56:50 +00:00
GUI code refactoring (#2051)
* refactor: update vue component filenames Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: update store and state variable names Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: variable name correction Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: store module name correction Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: variable name correction Signed-off-by: Pranav C <pranavxc@gmail.com>
This commit is contained in:
Pranav C
917
packages/nc-gui/components/auth/UserManagement.vue
Normal file
917
packages/nc-gui/components/auth/UserManagement.vue
Normal file
@@ -0,0 +1,917 @@
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<v-toolbar flat height="38" class="mt-5">
|
||||
<v-text-field
|
||||
v-model="query"
|
||||
style="max-width: 300px"
|
||||
dense
|
||||
flat
|
||||
solo
|
||||
class="search-field caption"
|
||||
hide-details
|
||||
placeholder="Filter by email"
|
||||
@keypress.enter="loadUsers"
|
||||
>
|
||||
<template #prepend-inner>
|
||||
<v-icon small class="mt-1">
|
||||
search
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<v-spacer />
|
||||
|
||||
<!-- tooltip="Reload roles" -->
|
||||
<x-btn
|
||||
v-ge="['roles', 'reload']"
|
||||
outlined
|
||||
:tooltip="$t('activity.reloadRoles')"
|
||||
color="primary"
|
||||
small
|
||||
:disabled="loading"
|
||||
@click="clickReload"
|
||||
@click.prevent
|
||||
>
|
||||
<v-icon small left>
|
||||
refresh
|
||||
</v-icon>
|
||||
<!-- Reload -->
|
||||
{{ $t("general.reload") }}
|
||||
</x-btn>
|
||||
<!-- tooltip="Add new role" -->
|
||||
<x-btn
|
||||
v-if="_isUIAllowed('newUser')"
|
||||
v-ge="['roles', 'add new']"
|
||||
class="nc-new-user"
|
||||
outlined
|
||||
:tooltip="$t('tooltip.addRole')"
|
||||
color="primary"
|
||||
small
|
||||
:disabled="loading"
|
||||
@click="addUser"
|
||||
>
|
||||
<v-icon small left>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
<!-- New User -->
|
||||
{{ $t("activity.newUser") }}
|
||||
</x-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card style="height: calc(100% - 38px)" class="elevation-0">
|
||||
<v-container style="height: 100%" fluid>
|
||||
<v-row style="height: 100%">
|
||||
<v-col cols="12" class="h-100">
|
||||
<v-card class="h-100 elevation-0">
|
||||
<v-row style="height: 100%">
|
||||
<v-col
|
||||
offset="2"
|
||||
:cols="8"
|
||||
class="h-100"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<v-data-table
|
||||
v-if="users"
|
||||
dense
|
||||
:headers="[{}, {}, {}, {}]"
|
||||
hide-default-header
|
||||
:hide-default-footer="count < limit"
|
||||
:options.sync="options"
|
||||
:items="users"
|
||||
:items-per-page.sync="limit"
|
||||
:server-items-length="count"
|
||||
>
|
||||
<template #header>
|
||||
<thead>
|
||||
<tr class="text-left">
|
||||
<!-- <th>#</th>-->
|
||||
<th class="font-weight-regular caption">
|
||||
<v-icon small>
|
||||
mdi-email-outline
|
||||
</v-icon>
|
||||
<!-- Email -->
|
||||
{{ $t("labels.email") }}
|
||||
</th>
|
||||
<th class="font-weight-regular caption">
|
||||
<v-icon small>
|
||||
mdi-drama-masks
|
||||
</v-icon>
|
||||
<!-- Roles -->
|
||||
{{ $t("objects.roles") }}
|
||||
</th>
|
||||
<th class="font-weight-regular caption">
|
||||
<!-- <v-icon small class="mt-n1">mdi-cursor-default-outline</v-icon>-->
|
||||
<!-- Actions -->
|
||||
{{ $t("labels.actions") }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</template>
|
||||
|
||||
<template #item="{ item }">
|
||||
<tr @click="selectedUser = item">
|
||||
<td>{{ item.email }}</td>
|
||||
<td>
|
||||
<!-- {{ item.roles }}-->
|
||||
|
||||
<v-chip
|
||||
v-if="item.roles"
|
||||
class="mr-1"
|
||||
:color="rolesColors[getRole(item.roles)]"
|
||||
>
|
||||
{{ getRole(item.roles) }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<!-- tooltip="Edit User" -->
|
||||
<x-icon
|
||||
v-if="item.project_id"
|
||||
:tooltip="$t('activity.editUser')"
|
||||
icon-class=""
|
||||
color="primary"
|
||||
small
|
||||
@click.prevent.stop="
|
||||
invite_token = null;
|
||||
selectedUser = item;
|
||||
userEditDialog = true;
|
||||
"
|
||||
>
|
||||
mdi-pencil-outline
|
||||
</x-icon>
|
||||
<span v-if="!item.project_id">
|
||||
<x-icon
|
||||
tooltip="Add user to project"
|
||||
color="primary"
|
||||
small
|
||||
@click="inviteUser(item)"
|
||||
>
|
||||
mdi-plus
|
||||
</x-icon>
|
||||
</span>
|
||||
<x-icon
|
||||
v-else
|
||||
:tooltip="$t('activity.deleteUser')"
|
||||
class="ml-2"
|
||||
color="error"
|
||||
small
|
||||
@click.prevent.stop="clickDeleteUser(item.id)"
|
||||
>
|
||||
mdi-delete-outline
|
||||
</x-icon>
|
||||
|
||||
<!-- tooltip="Resend invite email" -->
|
||||
<x-icon
|
||||
v-if="item.invite_token"
|
||||
:tooltip="$t('activity.resendInvite')"
|
||||
icon-class="mt-n1"
|
||||
color="primary"
|
||||
small
|
||||
@click.prevent.stop="resendInvite(item.id)"
|
||||
>
|
||||
mdi-email-send-outline
|
||||
</x-icon>
|
||||
|
||||
<!-- tooltip="Copy invite url" -->
|
||||
<x-icon
|
||||
v-if="item.invite_token"
|
||||
:tooltip="$t('activity.copyInviteURL')"
|
||||
icon-class=""
|
||||
color="primary"
|
||||
small
|
||||
@click.prevent.stop="
|
||||
clipboard(getInviteUrl(item.invite_token));
|
||||
$toast
|
||||
.success('Invite url copied to clipboard')
|
||||
.goAway(3000);
|
||||
"
|
||||
>
|
||||
mdi-content-copy
|
||||
</x-icon>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<!-- tooltip="Add new user" -->
|
||||
<!-- <div class="mt-10 text-center">
|
||||
<x-btn
|
||||
v-if="_isUIAllowed('newUser')"
|
||||
v-ge="['roles','add new']"
|
||||
outlined
|
||||
:tooltip="$t('msg.info.addUser')"
|
||||
color="primary"
|
||||
small
|
||||
:disabled="loading"
|
||||
@click="addUser"
|
||||
>
|
||||
<v-icon small left>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
<!– New User –>
|
||||
{{ $t('activity.newUser') }}
|
||||
</x-btn>
|
||||
</div>-->
|
||||
|
||||
<feedback-form class="mx-auto mt-6" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<table
|
||||
v-if="false"
|
||||
class="mx-auto users-table"
|
||||
style="min-width: 700px"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th>Email</th>
|
||||
<th>Roles</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.email">
|
||||
<td>
|
||||
<v-icon x-large>
|
||||
mdi-account-outline
|
||||
</v-icon>
|
||||
</td>
|
||||
<td class="px-1 py-1" align="top">
|
||||
<v-text-field
|
||||
solo
|
||||
class="elevation-0"
|
||||
disabled
|
||||
:value="user.email"
|
||||
hide-details
|
||||
dense
|
||||
/>
|
||||
</td>
|
||||
<td class="px-1 py-1">
|
||||
<set-list-checkbox-cell v-model="user.roles" :values="roles" />
|
||||
</td>
|
||||
<td align="middle">
|
||||
<v-icon large>
|
||||
mdi-close
|
||||
</v-icon>
|
||||
<v-icon large>
|
||||
mdi-save
|
||||
</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<v-icon x-large>
|
||||
mdi-account-outline
|
||||
</v-icon>
|
||||
</td>
|
||||
<td class="px-1 py-1" align="top">
|
||||
<v-text-field solo class="elevation-0" hide-details dense />
|
||||
</td>
|
||||
<td class="px-1 py-1">
|
||||
<set-list-checkbox-cell :values="roles" />
|
||||
</td>
|
||||
<td align="middle">
|
||||
<v-icon large>
|
||||
mdi-account-plus
|
||||
</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</v-container>
|
||||
</v-card>
|
||||
|
||||
<dlg-label-submit-cancel
|
||||
type="primary"
|
||||
:actions-mtd="confirmDelete"
|
||||
:heading="dialogMessage"
|
||||
:dialog-show="showConfirmDlg"
|
||||
/>
|
||||
|
||||
<!-- todo: move to a separate component-->
|
||||
<v-dialog
|
||||
v-model="userEditDialog"
|
||||
:width="invite_token ? 700 : 700"
|
||||
@close="invite_token = null"
|
||||
>
|
||||
<v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0">
|
||||
<v-card-title>
|
||||
{{ $t("activity.share") }} :
|
||||
{{ $store.getters["project/GtrProjectName"] }}
|
||||
|
||||
<div class="nc-header-border" />
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<div>
|
||||
<v-icon small>
|
||||
mdi-account-outline
|
||||
</v-icon>
|
||||
<template v-if="invite_token">
|
||||
Copy Invite Token
|
||||
</template>
|
||||
<template v-else-if="selectedUser.id">
|
||||
Edit User
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- Invite Team -->
|
||||
{{ $t("activity.inviteTeam") }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="pa-4 nc-invite-container">
|
||||
<div v-if="invite_token" class="mt-6 align-center">
|
||||
<v-alert
|
||||
v-ripple
|
||||
type="success"
|
||||
outlined
|
||||
class="pointer"
|
||||
@click="
|
||||
clipboard(inviteUrl);
|
||||
$toast.success('Copied invite url to clipboard').goAway(3000);
|
||||
"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon color="green" class="ml-2">
|
||||
mdi-content-copy
|
||||
</v-icon>
|
||||
</template>
|
||||
<div class="ellipsis d-100">
|
||||
{{ inviteUrl }}
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<p class="caption grey--text mt-3">
|
||||
<!-- Looks like you have not configured mailer yet! <br> Please copy above invite link and send it to -->
|
||||
<pre>{{ $t('msg.info.userInviteNoSMTP') }} {{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.</pre>
|
||||
</p>
|
||||
|
||||
<div class="text-right">
|
||||
<!--tooltip="Invite more users"-->
|
||||
<x-btn
|
||||
:tooltip="$t('tooltip.inviteMore')"
|
||||
small
|
||||
outlined
|
||||
btn.class="grey--text"
|
||||
@click="clickInviteMore"
|
||||
>
|
||||
<v-icon small color="grey" class="mr-1">
|
||||
mdi-account-multiple-plus-outline
|
||||
</v-icon>
|
||||
<!--Invite more-->
|
||||
{{ $t("activity.inviteMore") }}
|
||||
</x-btn>
|
||||
</div>
|
||||
|
||||
<!-- todo: show error message if failed-->
|
||||
</div>
|
||||
<template v-else>
|
||||
<v-form ref="form" v-model="valid" @submit.prevent="saveUser">
|
||||
<v-row class="my-0">
|
||||
<v-col cols="8" class="py-0">
|
||||
<!--hint="You can add multiple comma(,) separated emails"-->
|
||||
<v-text-field
|
||||
ref="email"
|
||||
v-model="selectedUser.email"
|
||||
:disabled="!!selectedUser.id"
|
||||
dense
|
||||
validate-on-blur
|
||||
outlined
|
||||
:rules="emailRules"
|
||||
class="caption"
|
||||
:hint="$t('msg.info.addMultipleUsers')"
|
||||
label="Email"
|
||||
@input="edited = true"
|
||||
>
|
||||
<template #label>
|
||||
<span class="caption">
|
||||
<!-- Email -->
|
||||
{{ $t("labels.email") }}
|
||||
</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="4" class="py-0">
|
||||
<!--label="Select User Role"-->
|
||||
<v-combobox
|
||||
v-model="selectedRoles"
|
||||
outlined
|
||||
:rules="roleRules"
|
||||
class="role-select caption"
|
||||
hide-details="auto"
|
||||
:items="roles"
|
||||
:label="$t('labels.selectUserRole')"
|
||||
dense
|
||||
deletable-chips
|
||||
@change="edited = true"
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<v-chip small :color="rolesColors[item]">
|
||||
{{ item }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template #item="{ item }">
|
||||
<div>
|
||||
<div>{{ item }}</div>
|
||||
<div class="mb-2 caption grey--text">
|
||||
{{ roleDescriptions[item] }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
<div class="text-center mt-0">
|
||||
<x-btn
|
||||
v-ge="['rows', 'save']"
|
||||
:tooltip="$t('tooltip.saveChanges')"
|
||||
color="primary"
|
||||
btn.class="nc-invite-or-save-btn"
|
||||
@click="saveUser"
|
||||
>
|
||||
<v-icon small left>
|
||||
{{ selectedUser.id ? "save" : "mdi-send" }}
|
||||
</v-icon>
|
||||
{{
|
||||
selectedUser.id ? $t("general.save") : $t("activity.invite")
|
||||
}}
|
||||
</x-btn>
|
||||
</div>
|
||||
</template>
|
||||
<!-- </v-card-actions>-->
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<share-base />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FeedbackForm from '~/components/FeedbackForm'
|
||||
import SetListCheckboxCell from '~/components/project/spreadsheet/components/editableCell/SetListCheckboxCell'
|
||||
import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
|
||||
import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
|
||||
import { isEmail } from '@/helpers'
|
||||
import ShareBase from '~/components/base/ShareBase'
|
||||
import XBtn from '~/components/global/XBtn'
|
||||
|
||||
export default {
|
||||
name: 'UserManagement',
|
||||
components: {
|
||||
XBtn,
|
||||
ShareBase,
|
||||
FeedbackForm,
|
||||
DlgLabelSubmitCancel,
|
||||
SetListCheckboxCell
|
||||
},
|
||||
data: () => ({
|
||||
validate: false,
|
||||
deleteItem: null,
|
||||
invite_token: null,
|
||||
userEditDialog: false,
|
||||
limit: 10,
|
||||
showConfirmDlg: false,
|
||||
users: null,
|
||||
count: 0,
|
||||
options: {},
|
||||
loading: false,
|
||||
selectedUser: null,
|
||||
roles: [],
|
||||
query: '',
|
||||
deleteId: null,
|
||||
edited: false,
|
||||
valid: null,
|
||||
emailRules: [
|
||||
v => !!v || 'E-mail is required',
|
||||
(v) => {
|
||||
const invalidEmails = (v || '')
|
||||
.split(/\s*,\s*/)
|
||||
.filter(e => !isEmail(e))
|
||||
return (
|
||||
!invalidEmails.length ||
|
||||
`"${invalidEmails.join(', ')}" - invalid email`
|
||||
)
|
||||
}
|
||||
],
|
||||
roleRules: [
|
||||
v => !!v || 'User Role is required',
|
||||
v =>
|
||||
['creator', 'editor', 'commenter', 'viewer'].includes(v) ||
|
||||
'invalid user role'
|
||||
],
|
||||
userList: [],
|
||||
roleDescriptions: {},
|
||||
deleteUserType: '' // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
|
||||
}),
|
||||
computed: {
|
||||
roleNames() {
|
||||
return this.roles.map(r => r.title)
|
||||
},
|
||||
inviteUrl() {
|
||||
return this.invite_token
|
||||
? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
|
||||
: null
|
||||
},
|
||||
rolesColors() {
|
||||
const colors = this.$store.state.settings.darkTheme
|
||||
? enumColor.dark
|
||||
: enumColor.light
|
||||
return ['owner'].concat(this.roles).reduce((o, r, i) => {
|
||||
o[r] = colors[i % colors.length]
|
||||
return o
|
||||
}, {})
|
||||
},
|
||||
selectedRoles: {
|
||||
get() {
|
||||
return (
|
||||
this.selectedUser && this.selectedUser.roles
|
||||
? this.selectedUser.roles.split(',')
|
||||
: []
|
||||
).sort(
|
||||
(a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
|
||||
)[0]
|
||||
},
|
||||
set(roles) {
|
||||
if (this.selectedUser) {
|
||||
this.selectedUser.roles = roles // .filter(Boolean).join(',')
|
||||
}
|
||||
}
|
||||
},
|
||||
selectedUserIndex: {
|
||||
get() {
|
||||
return this.users
|
||||
? this.users.findIndex(u => u.email === this.selectedUser.email)
|
||||
: -1
|
||||
},
|
||||
set(i) {
|
||||
this.selectedUser = this.users[i]
|
||||
}
|
||||
},
|
||||
dialogMessage() {
|
||||
let msg = 'Do you want to remove the user'
|
||||
if (this.deleteUserType === 'DELETE_FROM_PROJECT') {
|
||||
msg += ' from Project'
|
||||
} else if (this.deleteUserType === 'DELETE_FROM_NOCODB') {
|
||||
msg += ' from NocoDB'
|
||||
}
|
||||
msg += '?'
|
||||
return msg
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
async handler() {
|
||||
await this.loadUsers()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
userEditDialog(v) {
|
||||
// if (!v) { this.validate = false }
|
||||
if (v && this.selectedUser && !this.selectedUser.id) {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.email.$el.querySelector('input').focus()
|
||||
}, 100)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.$eventBus.$on('show-add-user', this.addUser)
|
||||
await this.loadUsers()
|
||||
await this.loadRoles()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$eventBus.$off('show-add-user', this.addUser)
|
||||
},
|
||||
methods: {
|
||||
clickReload() {
|
||||
this.loadUsers()
|
||||
this.$e('a:user:reload')
|
||||
},
|
||||
clickDeleteUser(id) {
|
||||
this.$e('c:user:delete')
|
||||
this.deleteId = id
|
||||
this.deleteItem = id
|
||||
this.showConfirmDlg = true
|
||||
this.deleteUserType = 'DELETE_FROM_PROJECT'
|
||||
},
|
||||
clickInviteMore() {
|
||||
this.$e('c:user:invite-more')
|
||||
this.invite_token = null
|
||||
this.selectedUser = { roles: 'editor' }
|
||||
},
|
||||
getRole(roles) {
|
||||
return (roles ? roles.split(',') : []).sort(
|
||||
(a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
|
||||
)[0]
|
||||
},
|
||||
simpleAnim() {
|
||||
const count = 30
|
||||
const defaults = {
|
||||
origin: { y: 0.7 },
|
||||
zIndex: 9999999
|
||||
}
|
||||
|
||||
function fire(particleRatio, opts) {
|
||||
window.confetti(
|
||||
Object.assign({}, defaults, opts, {
|
||||
particleCount: Math.floor(count * particleRatio)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
fire(0.25, {
|
||||
spread: 26,
|
||||
startVelocity: 55
|
||||
})
|
||||
fire(0.2, {
|
||||
spread: 60
|
||||
})
|
||||
fire(0.35, {
|
||||
spread: 100,
|
||||
decay: 0.91,
|
||||
scalar: 0.8
|
||||
})
|
||||
fire(0.1, {
|
||||
spread: 120,
|
||||
startVelocity: 25,
|
||||
decay: 0.92,
|
||||
scalar: 1.2
|
||||
})
|
||||
fire(0.1, {
|
||||
spread: 120,
|
||||
startVelocity: 45
|
||||
})
|
||||
},
|
||||
getInviteUrl(token) {
|
||||
return token
|
||||
? `${location.origin}${location.pathname}#/user/authentication/signup/${token}`
|
||||
: null
|
||||
},
|
||||
|
||||
clipboard(str) {
|
||||
const el = document.createElement('textarea')
|
||||
el.addEventListener('focusin', e => e.stopPropagation())
|
||||
el.value = str
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
|
||||
this.$e('c:user:copy-url')
|
||||
},
|
||||
async resendInvite(id) {
|
||||
try {
|
||||
await this.$api.auth.projectUserResendInvite(this.$route.params.project_id, id)
|
||||
this.$toast.success('Invite email sent successfully').goAway(3000)
|
||||
await this.loadUsers()
|
||||
} catch (e) {
|
||||
this.$toast.error(e.response.data.msg).goAway(3000)
|
||||
}
|
||||
|
||||
this.$e('a:user:resend-invite')
|
||||
},
|
||||
async loadUsers() {
|
||||
try {
|
||||
const { page = 1, itemsPerPage = 20 } = this.options
|
||||
// const data = (await this.$axios.get('/admin', {
|
||||
// headers: {
|
||||
// 'xc-auth': this.$store.state.users.token
|
||||
// },
|
||||
// params: {
|
||||
// limit: itemsPerPage,
|
||||
// offset: (page - 1) * itemsPerPage,
|
||||
// query: this.query,
|
||||
// project_id: this.$route.params.project_id
|
||||
// }
|
||||
// })).data
|
||||
|
||||
const userData = await this.$api.auth.projectUserList(
|
||||
this.$store.state.project.projectId,
|
||||
{
|
||||
query: {
|
||||
limit: itemsPerPage,
|
||||
offset: (page - 1) * itemsPerPage,
|
||||
query: this.query
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
this.count = userData.users.pageInfo.totalRows
|
||||
this.users = userData.users.list
|
||||
if (!this.selectedUser && this.users && this.users[0]) {
|
||||
this.selectedUserIndex = 0
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async loadRoles() {
|
||||
try {
|
||||
this.roles = ['creator', 'editor', 'commenter', 'viewer']
|
||||
|
||||
// todo:
|
||||
// (await this.$axios.get('/admin/roles', {
|
||||
// headers: {
|
||||
// 'xc-auth': this.$store.state.users.token
|
||||
// },
|
||||
// params: {
|
||||
// project_id: this.$route.params.project_id
|
||||
// }
|
||||
// })).data.map((role) => {
|
||||
// this.roleDescriptions[role.title] = role.description
|
||||
// return role.title
|
||||
// }).filter(role => role !== 'guest')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
async deleteUser(id, type) {
|
||||
try {
|
||||
await this.$api.auth.projectUserRemove(
|
||||
this.$route.params.project_id,
|
||||
id
|
||||
)
|
||||
this.$toast
|
||||
.success(
|
||||
`Successfully removed the user from ${
|
||||
type === 'DELETE_FROM_PROJECT' ? 'project' : 'NocoDB'
|
||||
}`
|
||||
)
|
||||
.goAway(3000)
|
||||
await this.loadUsers()
|
||||
} catch (e) {
|
||||
this.$toast.error(e.response.data.msg).goAway(3000)
|
||||
}
|
||||
},
|
||||
async confirmDelete(hideDialog) {
|
||||
if (hideDialog) {
|
||||
this.showConfirmDlg = false
|
||||
return
|
||||
}
|
||||
await this.deleteUser(this.deleteId, this.deleteUserType)
|
||||
this.showConfirmDlg = false
|
||||
|
||||
this.$e('a:user:delete')
|
||||
},
|
||||
addUser() {
|
||||
this.invite_token = null
|
||||
this.selectedUser = {
|
||||
roles: 'editor'
|
||||
}
|
||||
this.userEditDialog = true
|
||||
|
||||
this.$e('c:user:add')
|
||||
},
|
||||
async inviteUser(item) {
|
||||
try {
|
||||
await this.$api.auth.projectUserAdd(
|
||||
this.$route.params.project_id,
|
||||
item
|
||||
)
|
||||
this.$toast.success('Successfully added user to project').goAway(3000)
|
||||
await this.loadUsers()
|
||||
} catch (e) {
|
||||
this.$toast.error(e.response.data.msg).goAway(3000)
|
||||
}
|
||||
|
||||
this.$e('a:user:add')
|
||||
},
|
||||
async saveUser() {
|
||||
this.validate = true
|
||||
await this.$nextTick()
|
||||
if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
|
||||
return
|
||||
}
|
||||
this.$e('a:user:invite', { role: this.selectedUser.roles })
|
||||
|
||||
if (!this.edited) {
|
||||
this.userEditDialog = false
|
||||
}
|
||||
|
||||
try {
|
||||
let data
|
||||
if (this.selectedUser.id) {
|
||||
await this.$api.auth.projectUserUpdate(
|
||||
this.$route.params.project_id,
|
||||
this.selectedUser.id,
|
||||
{
|
||||
roles: this.selectedUser.roles,
|
||||
email: this.selectedUser.email,
|
||||
project_id: this.$route.params.project_id,
|
||||
projectName: this.$store.getters['project/GtrProjectName']
|
||||
}
|
||||
)
|
||||
} else {
|
||||
data = await this.$api.auth.projectUserAdd(
|
||||
this.$route.params.project_id,
|
||||
{
|
||||
...this.selectedUser,
|
||||
project_id: this.$route.params.project_id,
|
||||
projectName: this.$store.getters['project/GtrProjectName']
|
||||
}
|
||||
)
|
||||
}
|
||||
this.$toast
|
||||
.success('Successfully updated the user details')
|
||||
.goAway(3000)
|
||||
await this.loadUsers()
|
||||
if (data && data.invite_token) {
|
||||
this.invite_token = data
|
||||
this.simpleAnim()
|
||||
return
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast.error(e.response.data.msg).goAway(3000)
|
||||
}
|
||||
|
||||
await this.loadUsers()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-alert__wrapper > .v-icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.search-field.v-text-field > .v-input__control,
|
||||
.search-field.v-text-field > .v-input__control > .v-input__slot {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.role-select {
|
||||
.v-select__selections {
|
||||
//padding-bottom: 0 !important;
|
||||
min-height: auto !important;
|
||||
|
||||
.v-chip {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.users-table {
|
||||
td:first-child {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .nc-invite-container {
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--v-backgroundColor-base);
|
||||
background: var(--v-backgroundColor-base);
|
||||
|
||||
.v-input .v-input__slot {
|
||||
background: var(--v-backgroundColorDefault-base);
|
||||
}
|
||||
}
|
||||
|
||||
.nc-header-border {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid var(--v-backgroundColor-base);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
/**
|
||||
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
|
||||
*
|
||||
* @author Naveen MR <oof1lab@gmail.com>
|
||||
* @author Pranav C Balan <pranavxc@gmail.com>
|
||||
* @author Wing-Kam Wong <wingkwong.code@gmail.com>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
-->
|
||||
Reference in New Issue
Block a user