github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(prettier): Unexpected closing tag "p"

pull/2611/head
Wing-Kam Wong 2 years ago
parent
2232091557
commit
019c43a1ba
2 changed files with 257 additions and 401 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 181
      packages/nc-gui/components/auth/ShareOrInviteModal.vue
  2. 449
      packages/nc-gui/components/auth/UserManagement.vue

181
packages/nc-gui/components/auth/ShareOrInviteModal.vue
Unescape View File

@ -7,26 +7,20 @@
> >
<v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0"> <v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0">
<v-card-title> <v-card-title>
{{ $t("activity.share") }} : {{ $t('activity.share') }} :
{{ $store.getters["project/GtrProjectName"] }} {{ $store.getters['project/GtrProjectName'] }}
<div class="nc-header-border" /> <div class="nc-header-border" />
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<div> <div>
<v-icon small> <v-icon small> mdi-account-outline </v-icon>
mdi-account-outline <template v-if="invite_token"> Copy Invite Token </template>
</v-icon> <template v-else-if="selectedUser.id"> Edit User </template>
<template v-if="invite_token">
Copy Invite Token
</template>
<template v-else-if="selectedUser.id">
Edit User
</template>
<template v-else> <template v-else>
<!-- Invite Team --> <!-- Invite Team -->
{{ $t("activity.inviteTeam") }} {{ $t('activity.inviteTeam') }}
</template> </template>
</div> </div>
<div class="pa-4 nc-invite-container"> <div class="pa-4 nc-invite-container">
@ -42,9 +36,7 @@
" "
> >
<template #append> <template #append>
<v-icon color="green" class="ml-2"> <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
mdi-content-copy
</v-icon>
</template> </template>
<div class="ellipsis d-100"> <div class="ellipsis d-100">
{{ inviteUrl }} {{ inviteUrl }}
@ -53,23 +45,16 @@
<p class="caption grey--text mt-3"> <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 --> <!-- 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> {{ $t('msg.info.userInviteNoSMTP') }}
{{ invite_token && (invite_token.email || (invite_token.emails && invite_token.emails.join(', '))) }}.
</p> </p>
<div class="text-right"> <div class="text-right">
<!--tooltip="Invite more users"--> <!--tooltip="Invite more users"-->
<x-btn <x-btn :tooltip="$t('tooltip.inviteMore')" small outlined btn.class="grey--text" @click="clickInviteMore">
:tooltip="$t('tooltip.inviteMore')" <v-icon small color="grey" class="mr-1"> mdi-account-multiple-plus-outline </v-icon>
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--> <!--Invite more-->
{{ $t("activity.inviteMore") }} {{ $t('activity.inviteMore') }}
</x-btn> </x-btn>
</div> </div>
@ -96,7 +81,7 @@
<template #label> <template #label>
<span class="caption"> <span class="caption">
<!-- Email --> <!-- Email -->
{{ $t("labels.email") }} {{ $t('labels.email') }}
</span> </span>
</template> </template>
</v-text-field> </v-text-field>
@ -141,11 +126,9 @@
@click="saveUser" @click="saveUser"
> >
<v-icon small left> <v-icon small left>
{{ selectedUser.id ? "save" : "mdi-send" }} {{ selectedUser.id ? 'save' : 'mdi-send' }}
</v-icon> </v-icon>
{{ {{ selectedUser.id ? $t('general.save') : $t('activity.invite') }}
selectedUser.id ? $t("general.save") : $t("activity.invite")
}}
</x-btn> </x-btn>
</div> </div>
</template> </template>
@ -160,15 +143,15 @@
</template> </template>
<script> <script>
import { isEmail } from '~/helpers' import { isEmail } from '~/helpers';
import { enumColor } from '~/components/project/spreadsheet/helpers/colors' import { enumColor } from '~/components/project/spreadsheet/helpers/colors';
import ShareBase from '~/components/base/ShareBase' import ShareBase from '~/components/base/ShareBase';
export default { export default {
name: 'ShareOrInviteModal', name: 'ShareOrInviteModal',
components: { ShareBase }, components: { ShareBase },
props: { props: {
value: Boolean value: Boolean,
}, },
data: () => ({ data: () => ({
roles: ['creator', 'editor', 'commenter', 'viewer'], roles: ['creator', 'editor', 'commenter', 'viewer'],
@ -177,140 +160,116 @@ export default {
valid: null, valid: null,
emailRules: [ emailRules: [
v => !!v || 'E-mail is required', v => !!v || 'E-mail is required',
(v) => { v => {
const invalidEmails = (v || '') const invalidEmails = (v || '').split(/\s*,\s*/).filter(e => !isEmail(e));
.split(/\s*,\s*/) return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`;
.filter(e => !isEmail(e)) },
return (
!invalidEmails.length ||
`"${invalidEmails.join(', ')}" - invalid email`
)
}
], ],
roleRules: [ roleRules: [
v => !!v || 'User Role is required', v => !!v || 'User Role is required',
v => v => ['creator', 'editor', 'commenter', 'viewer'].includes(v) || 'invalid user role',
['creator', 'editor', 'commenter', 'viewer'].includes(v) ||
'invalid user role'
], ],
userList: [], userList: [],
roleDescriptions: {}, roleDescriptions: {},
deleteUserType: '' deleteUserType: '',
}), }),
computed: { computed: {
userEditDialog: { userEditDialog: {
get() { get() {
return this.value return this.value;
}, },
set(v) { set(v) {
this.$emit('input', v) this.$emit('input', v);
} },
}, },
inviteUrl() { inviteUrl() {
return this.invite_token return this.invite_token
? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}` ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
: null : null;
}, },
rolesColors() { rolesColors() {
const colors = this.$store.state.settings.darkTheme const colors = this.$store.state.settings.darkTheme ? enumColor.dark : enumColor.light;
? enumColor.dark
: enumColor.light
return ['owner'].concat(this.roles).reduce((o, r, i) => { return ['owner'].concat(this.roles).reduce((o, r, i) => {
o[r] = colors[i % colors.length] o[r] = colors[i % colors.length];
return o return o;
}, {}) }, {});
}, },
selectedRoles: { selectedRoles: {
get() { get() {
return ( return (this.selectedUser && this.selectedUser.roles ? this.selectedUser.roles.split(',') : []).sort(
this.selectedUser && this.selectedUser.roles
? this.selectedUser.roles.split(',')
: []
).sort(
(a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a) (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
)[0] )[0];
}, },
set(roles) { set(roles) {
if (this.selectedUser) { if (this.selectedUser) {
this.selectedUser.roles = roles // .filter(Boolean).join(',') this.selectedUser.roles = roles; // .filter(Boolean).join(',')
}
}
} }
}, },
},
},
methods: { methods: {
async saveUser() { async saveUser() {
this.validate = true this.validate = true;
await this.$nextTick() await this.$nextTick();
if (this.loading || !this.$refs.form.validate() || !this.selectedUser) { if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
return return;
} }
this.$e('a:user:invite', { role: this.selectedUser.roles }) this.$e('a:user:invite', { role: this.selectedUser.roles });
if (!this.edited) { if (!this.edited) {
this.userEditDialog = false this.userEditDialog = false;
} }
try { try {
let data let data;
if (this.selectedUser.id) { if (this.selectedUser.id) {
await this.$api.auth.projectUserUpdate( await this.$api.auth.projectUserUpdate(this.$route.params.project_id, this.selectedUser.id, {
this.$route.params.project_id,
this.selectedUser.id,
{
roles: this.selectedUser.roles, roles: this.selectedUser.roles,
email: this.selectedUser.email, email: this.selectedUser.email,
project_id: this.$route.params.project_id, project_id: this.$route.params.project_id,
projectName: this.$store.getters['project/GtrProjectName'] projectName: this.$store.getters['project/GtrProjectName'],
} });
)
} else { } else {
data = await this.$api.auth.projectUserAdd( data = await this.$api.auth.projectUserAdd(this.$route.params.project_id, {
this.$route.params.project_id,
{
...this.selectedUser, ...this.selectedUser,
project_id: this.$route.params.project_id, project_id: this.$route.params.project_id,
projectName: this.$store.getters['project/GtrProjectName'] projectName: this.$store.getters['project/GtrProjectName'],
});
} }
) this.$toast.success('Successfully updated the user details').goAway(3000);
} this.$emit('saved');
this.$toast
.success('Successfully updated the user details')
.goAway(3000)
this.$emit('saved')
if (data && data.invite_token) { if (data && data.invite_token) {
this.invite_token = data this.invite_token = data;
// todo: bring anim // todo: bring anim
// this.simpleAnim() // this.simpleAnim()
return return;
} }
} catch (e) { } catch (e) {
this.$toast this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000);
.error(await this._extractSdkResponseErrorMsg(e))
.goAway(3000)
} }
this.userEditDialog = false this.userEditDialog = false;
}, },
clickInviteMore() { clickInviteMore() {
this.$e('c:user:invite-more') this.$e('c:user:invite-more');
this.invite_token = null this.invite_token = null;
this.selectedUser = { roles: 'editor' } this.selectedUser = { roles: 'editor' };
}, },
clipboard(str) { clipboard(str) {
const el = document.createElement('textarea') const el = document.createElement('textarea');
el.addEventListener('focusin', e => e.stopPropagation()) el.addEventListener('focusin', e => e.stopPropagation());
el.value = str el.value = str;
document.body.appendChild(el) document.body.appendChild(el);
el.select() el.select();
document.execCommand('copy') document.execCommand('copy');
document.body.removeChild(el) document.body.removeChild(el);
this.$e('c:user:copy-url') this.$e('c:user:copy-url');
} },
} },
} };
</script> </script>
<style scoped></style> <style scoped></style>

449
packages/nc-gui/components/auth/UserManagement.vue
Unescape View File

@ -13,9 +13,7 @@
@keypress.enter="loadUsers" @keypress.enter="loadUsers"
> >
<template #prepend-inner> <template #prepend-inner>
<v-icon small class="mt-1"> <v-icon small class="mt-1"> search </v-icon>
search
</v-icon>
</template> </template>
</v-text-field> </v-text-field>
<v-spacer /> <v-spacer />
@ -31,11 +29,9 @@
@click="clickReload" @click="clickReload"
@click.prevent @click.prevent
> >
<v-icon small left> <v-icon small left> refresh </v-icon>
refresh
</v-icon>
<!-- Reload --> <!-- Reload -->
{{ $t("general.reload") }} {{ $t('general.reload') }}
</x-btn> </x-btn>
<!-- tooltip="Add new role" --> <!-- tooltip="Add new role" -->
<x-btn <x-btn
@ -49,11 +45,9 @@
:disabled="loading" :disabled="loading"
@click="addUser" @click="addUser"
> >
<v-icon small left> <v-icon small left> mdi-plus </v-icon>
mdi-plus
</v-icon>
<!-- New User --> <!-- New User -->
{{ $t("activity.newUser") }} {{ $t('activity.newUser') }}
</x-btn> </x-btn>
</v-toolbar> </v-toolbar>
@ -63,12 +57,7 @@
<v-col cols="12" class="h-100"> <v-col cols="12" class="h-100">
<v-card class="h-100 elevation-0"> <v-card class="h-100 elevation-0">
<v-row style="height: 100%"> <v-row style="height: 100%">
<v-col <v-col offset="2" :cols="8" class="h-100" style="overflow-y: auto">
offset="2"
:cols="8"
class="h-100"
style="overflow-y: auto"
>
<v-data-table <v-data-table
v-if="users" v-if="users"
dense dense
@ -85,23 +74,19 @@
<tr class="text-left"> <tr class="text-left">
<!-- <th>#</th>--> <!-- <th>#</th>-->
<th class="font-weight-regular caption"> <th class="font-weight-regular caption">
<v-icon small> <v-icon small> mdi-email-outline </v-icon>
mdi-email-outline
</v-icon>
<!-- Email --> <!-- Email -->
{{ $t("labels.email") }} {{ $t('labels.email') }}
</th> </th>
<th class="font-weight-regular caption"> <th class="font-weight-regular caption">
<v-icon small> <v-icon small> mdi-drama-masks </v-icon>
mdi-drama-masks
</v-icon>
<!-- Roles --> <!-- Roles -->
{{ $t("objects.roles") }} {{ $t('objects.roles') }}
</th> </th>
<th class="font-weight-regular caption"> <th class="font-weight-regular caption">
<!-- <v-icon small class="mt-n1">mdi-cursor-default-outline</v-icon>--> <!-- <v-icon small class="mt-n1">mdi-cursor-default-outline</v-icon>-->
<!-- Actions --> <!-- Actions -->
{{ $t("labels.actions") }} {{ $t('labels.actions') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -113,11 +98,7 @@
<td> <td>
<!-- {{ item.roles }}--> <!-- {{ item.roles }}-->
<v-chip <v-chip v-if="item.roles" class="mr-1" :color="rolesColors[getRole(item.roles)]">
v-if="item.roles"
class="mr-1"
:color="rolesColors[getRole(item.roles)]"
>
{{ getRole(item.roles) }} {{ getRole(item.roles) }}
</v-chip> </v-chip>
</td> </td>
@ -138,12 +119,7 @@
mdi-pencil-outline mdi-pencil-outline
</x-icon> </x-icon>
<span v-if="!item.project_id"> <span v-if="!item.project_id">
<x-icon <x-icon tooltip="Add user to project" color="primary" small @click="inviteUser(item)">
tooltip="Add user to project"
color="primary"
small
@click="inviteUser(item)"
>
mdi-plus mdi-plus
</x-icon> </x-icon>
</span> </span>
@ -179,9 +155,7 @@
small small
@click.prevent.stop=" @click.prevent.stop="
clipboard(getInviteUrl(item.invite_token)); clipboard(getInviteUrl(item.invite_token));
$toast $toast.success('Invite url copied to clipboard').goAway(3000);
.success('Invite url copied to clipboard')
.goAway(3000);
" "
> >
mdi-content-copy mdi-content-copy
@ -217,11 +191,7 @@
</v-col> </v-col>
</v-row> </v-row>
<table <table v-if="false" class="mx-auto users-table" style="min-width: 700px">
v-if="false"
class="mx-auto users-table"
style="min-width: 700px"
>
<thead> <thead>
<tr> <tr>
<th /> <th />
@ -233,37 +203,22 @@
<tbody> <tbody>
<tr v-for="user in users" :key="user.email"> <tr v-for="user in users" :key="user.email">
<td> <td>
<v-icon x-large> <v-icon x-large> mdi-account-outline </v-icon>
mdi-account-outline
</v-icon>
</td> </td>
<td class="px-1 py-1" align="top"> <td class="px-1 py-1" align="top">
<v-text-field <v-text-field solo class="elevation-0" disabled :value="user.email" hide-details dense />
solo
class="elevation-0"
disabled
:value="user.email"
hide-details
dense
/>
</td> </td>
<td class="px-1 py-1"> <td class="px-1 py-1">
<set-list-checkbox-cell v-model="user.roles" :values="roles" /> <set-list-checkbox-cell v-model="user.roles" :values="roles" />
</td> </td>
<td align="middle"> <td align="middle">
<v-icon large> <v-icon large> mdi-close </v-icon>
mdi-close <v-icon large> mdi-save </v-icon>
</v-icon>
<v-icon large>
mdi-save
</v-icon>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<v-icon x-large> <v-icon x-large> mdi-account-outline </v-icon>
mdi-account-outline
</v-icon>
</td> </td>
<td class="px-1 py-1" align="top"> <td class="px-1 py-1" align="top">
<v-text-field solo class="elevation-0" hide-details dense /> <v-text-field solo class="elevation-0" hide-details dense />
@ -272,9 +227,7 @@
<set-list-checkbox-cell :values="roles" /> <set-list-checkbox-cell :values="roles" />
</td> </td>
<td align="middle"> <td align="middle">
<v-icon large> <v-icon large> mdi-account-plus </v-icon>
mdi-account-plus
</v-icon>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -290,33 +243,23 @@
/> />
<!-- todo: move to a separate component--> <!-- todo: move to a separate component-->
<v-dialog <v-dialog v-model="userEditDialog" :width="invite_token ? 700 : 700" @close="invite_token = null">
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 v-if="selectedUser" style="min-height: 100%" class="elevation-0">
<v-card-title> <v-card-title>
{{ $t("activity.share") }} : {{ $t('activity.share') }} :
{{ $store.getters["project/GtrProjectName"] }} {{ $store.getters['project/GtrProjectName'] }}
<div class="nc-header-border" /> <div class="nc-header-border" />
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<div> <div>
<v-icon small> <v-icon small> mdi-account-outline </v-icon>
mdi-account-outline <template v-if="invite_token"> Copy Invite Token </template>
</v-icon> <template v-else-if="selectedUser.id"> Edit User </template>
<template v-if="invite_token">
Copy Invite Token
</template>
<template v-else-if="selectedUser.id">
Edit User
</template>
<template v-else> <template v-else>
<!-- Invite Team --> <!-- Invite Team -->
{{ $t("activity.inviteTeam") }} {{ $t('activity.inviteTeam') }}
</template> </template>
</div> </div>
<div class="pa-4 nc-invite-container"> <div class="pa-4 nc-invite-container">
@ -332,9 +275,7 @@
" "
> >
<template #append> <template #append>
<v-icon color="green" class="ml-2"> <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
mdi-content-copy
</v-icon>
</template> </template>
<div class="ellipsis d-100"> <div class="ellipsis d-100">
{{ inviteUrl }} {{ inviteUrl }}
@ -343,7 +284,8 @@
<p class="caption grey--text mt-3"> <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 --> <!-- 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> {{ $t('msg.info.userInviteNoSMTP') }}
{{ invite_token && (invite_token.email || (invite_token.emails && invite_token.emails.join(', '))) }}.
</p> </p>
<div class="text-right"> <div class="text-right">
@ -355,11 +297,9 @@
btn.class="grey--text" btn.class="grey--text"
@click="clickInviteMore" @click="clickInviteMore"
> >
<v-icon small color="grey" class="mr-1"> <v-icon small color="grey" class="mr-1"> mdi-account-multiple-plus-outline </v-icon>
mdi-account-multiple-plus-outline
</v-icon>
<!--Invite more--> <!--Invite more-->
{{ $t("activity.inviteMore") }} {{ $t('activity.inviteMore') }}
</x-btn> </x-btn>
</div> </div>
@ -386,7 +326,7 @@
<template #label> <template #label>
<span class="caption"> <span class="caption">
<!-- Email --> <!-- Email -->
{{ $t("labels.email") }} {{ $t('labels.email') }}
</span> </span>
</template> </template>
</v-text-field> </v-text-field>
@ -431,11 +371,9 @@
@click="saveUser" @click="saveUser"
> >
<v-icon small left> <v-icon small left>
{{ selectedUser.id ? "save" : "mdi-send" }} {{ selectedUser.id ? 'save' : 'mdi-send' }}
</v-icon> </v-icon>
{{ {{ selectedUser.id ? $t('general.save') : $t('activity.invite') }}
selectedUser.id ? $t("general.save") : $t("activity.invite")
}}
</x-btn> </x-btn>
</div> </div>
</template> </template>
@ -451,13 +389,13 @@
</template> </template>
<script> <script>
import FeedbackForm from '~/components/FeedbackForm' import FeedbackForm from '~/components/FeedbackForm';
import SetListCheckboxCell from '~/components/project/spreadsheet/components/editableCell/SetListCheckboxCell' import SetListCheckboxCell from '~/components/project/spreadsheet/components/editableCell/SetListCheckboxCell';
import { enumColor } from '@/components/project/spreadsheet/helpers/colors' import { enumColor } from '@/components/project/spreadsheet/helpers/colors';
import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel' import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel';
import { isEmail } from '@/helpers' import { isEmail } from '@/helpers';
import ShareBase from '~/components/base/ShareBase' import ShareBase from '~/components/base/ShareBase';
import XBtn from '~/components/global/XBtn' import XBtn from '~/components/global/XBtn';
export default { export default {
name: 'UserManagement', name: 'UserManagement',
@ -466,7 +404,7 @@ export default {
ShareBase, ShareBase,
FeedbackForm, FeedbackForm,
DlgLabelSubmitCancel, DlgLabelSubmitCancel,
SetListCheckboxCell SetListCheckboxCell,
}, },
data: () => ({ data: () => ({
validate: false, validate: false,
@ -487,198 +425,179 @@ export default {
valid: null, valid: null,
emailRules: [ emailRules: [
v => !!v || 'E-mail is required', v => !!v || 'E-mail is required',
(v) => { v => {
const invalidEmails = (v || '') const invalidEmails = (v || '').split(/\s*,\s*/).filter(e => !isEmail(e));
.split(/\s*,\s*/) return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`;
.filter(e => !isEmail(e)) },
return (
!invalidEmails.length ||
`"${invalidEmails.join(', ')}" - invalid email`
)
}
], ],
roleRules: [ roleRules: [
v => !!v || 'User Role is required', v => !!v || 'User Role is required',
v => v => ['creator', 'editor', 'commenter', 'viewer'].includes(v) || 'invalid user role',
['creator', 'editor', 'commenter', 'viewer'].includes(v) ||
'invalid user role'
], ],
userList: [], userList: [],
roleDescriptions: {}, roleDescriptions: {},
deleteUserType: '' // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB] deleteUserType: '', // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
}), }),
computed: { computed: {
roleNames() { roleNames() {
return this.roles.map(r => r.title) return this.roles.map(r => r.title);
}, },
inviteUrl() { inviteUrl() {
return this.invite_token return this.invite_token
? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}` ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
: null : null;
}, },
rolesColors() { rolesColors() {
const colors = this.$store.state.settings.darkTheme const colors = this.$store.state.settings.darkTheme ? enumColor.dark : enumColor.light;
? enumColor.dark
: enumColor.light
return ['owner'].concat(this.roles).reduce((o, r, i) => { return ['owner'].concat(this.roles).reduce((o, r, i) => {
o[r] = colors[i % colors.length] o[r] = colors[i % colors.length];
return o return o;
}, {}) }, {});
}, },
selectedRoles: { selectedRoles: {
get() { get() {
return ( return (this.selectedUser && this.selectedUser.roles ? this.selectedUser.roles.split(',') : []).sort(
this.selectedUser && this.selectedUser.roles
? this.selectedUser.roles.split(',')
: []
).sort(
(a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a) (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
)[0] )[0];
}, },
set(roles) { set(roles) {
if (this.selectedUser) { if (this.selectedUser) {
this.selectedUser.roles = roles // .filter(Boolean).join(',') this.selectedUser.roles = roles; // .filter(Boolean).join(',')
}
} }
}, },
},
selectedUserIndex: { selectedUserIndex: {
get() { get() {
return this.users return this.users ? this.users.findIndex(u => u.email === this.selectedUser.email) : -1;
? this.users.findIndex(u => u.email === this.selectedUser.email)
: -1
}, },
set(i) { set(i) {
this.selectedUser = this.users[i] this.selectedUser = this.users[i];
} },
}, },
dialogMessage() { dialogMessage() {
let msg = 'Do you want to remove the user' let msg = 'Do you want to remove the user';
if (this.deleteUserType === 'DELETE_FROM_PROJECT') { if (this.deleteUserType === 'DELETE_FROM_PROJECT') {
msg += ' from Project' msg += ' from Project';
} else if (this.deleteUserType === 'DELETE_FROM_NOCODB') { } else if (this.deleteUserType === 'DELETE_FROM_NOCODB') {
msg += ' from NocoDB' msg += ' from NocoDB';
}
msg += '?'
return msg
} }
msg += '?';
return msg;
},
}, },
watch: { watch: {
options: { options: {
async handler() { async handler() {
await this.loadUsers() await this.loadUsers();
}, },
deep: true deep: true,
}, },
userEditDialog(v) { userEditDialog(v) {
// if (!v) { this.validate = false } // if (!v) { this.validate = false }
if (v && this.selectedUser && !this.selectedUser.id) { if (v && this.selectedUser && !this.selectedUser.id) {
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { setTimeout(() => {
this.$refs.email.$el.querySelector('input').focus() this.$refs.email.$el.querySelector('input').focus();
}, 100) }, 100);
}) });
}
} }
}, },
},
async created() { async created() {
this.$eventBus.$on('show-add-user', this.addUser) this.$eventBus.$on('show-add-user', this.addUser);
await this.loadUsers() await this.loadUsers();
await this.loadRoles() await this.loadRoles();
}, },
beforeDestroy() { beforeDestroy() {
this.$eventBus.$off('show-add-user', this.addUser) this.$eventBus.$off('show-add-user', this.addUser);
}, },
methods: { methods: {
clickReload() { clickReload() {
this.loadUsers() this.loadUsers();
this.$e('a:user:reload') this.$e('a:user:reload');
}, },
clickDeleteUser(id) { clickDeleteUser(id) {
this.$e('c:user:delete') this.$e('c:user:delete');
this.deleteId = id this.deleteId = id;
this.deleteItem = id this.deleteItem = id;
this.showConfirmDlg = true this.showConfirmDlg = true;
this.deleteUserType = 'DELETE_FROM_PROJECT' this.deleteUserType = 'DELETE_FROM_PROJECT';
}, },
clickInviteMore() { clickInviteMore() {
this.$e('c:user:invite-more') this.$e('c:user:invite-more');
this.invite_token = null this.invite_token = null;
this.selectedUser = { roles: 'editor' } this.selectedUser = { roles: 'editor' };
}, },
getRole(roles) { getRole(roles) {
return (roles ? roles.split(',') : []).sort( return (roles ? roles.split(',') : []).sort((a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a))[0];
(a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
)[0]
}, },
simpleAnim() { simpleAnim() {
const count = 30 const count = 30;
const defaults = { const defaults = {
origin: { y: 0.7 }, origin: { y: 0.7 },
zIndex: 9999999 zIndex: 9999999,
} };
function fire(particleRatio, opts) { function fire(particleRatio, opts) {
window.confetti( window.confetti(
Object.assign({}, defaults, opts, { Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio) particleCount: Math.floor(count * particleRatio),
}) })
) );
} }
fire(0.25, { fire(0.25, {
spread: 26, spread: 26,
startVelocity: 55 startVelocity: 55,
}) });
fire(0.2, { fire(0.2, {
spread: 60 spread: 60,
}) });
fire(0.35, { fire(0.35, {
spread: 100, spread: 100,
decay: 0.91, decay: 0.91,
scalar: 0.8 scalar: 0.8,
}) });
fire(0.1, { fire(0.1, {
spread: 120, spread: 120,
startVelocity: 25, startVelocity: 25,
decay: 0.92, decay: 0.92,
scalar: 1.2 scalar: 1.2,
}) });
fire(0.1, { fire(0.1, {
spread: 120, spread: 120,
startVelocity: 45 startVelocity: 45,
}) });
}, },
getInviteUrl(token) { getInviteUrl(token) {
return token return token ? `${location.origin}${location.pathname}#/user/authentication/signup/${token}` : null;
? `${location.origin}${location.pathname}#/user/authentication/signup/${token}`
: null
}, },
clipboard(str) { clipboard(str) {
const el = document.createElement('textarea') const el = document.createElement('textarea');
el.addEventListener('focusin', e => e.stopPropagation()) el.addEventListener('focusin', e => e.stopPropagation());
el.value = str el.value = str;
document.body.appendChild(el) document.body.appendChild(el);
el.select() el.select();
document.execCommand('copy') document.execCommand('copy');
document.body.removeChild(el) document.body.removeChild(el);
this.$e('c:user:copy-url') this.$e('c:user:copy-url');
}, },
async resendInvite(id) { async resendInvite(id) {
try { try {
await this.$api.auth.projectUserResendInvite(this.$route.params.project_id, id) await this.$api.auth.projectUserResendInvite(this.$route.params.project_id, id);
this.$toast.success('Invite email sent successfully').goAway(3000) this.$toast.success('Invite email sent successfully').goAway(3000);
await this.loadUsers() await this.loadUsers();
} catch (e) { } catch (e) {
this.$toast.error(e.response.data.msg).goAway(3000) this.$toast.error(e.response.data.msg).goAway(3000);
} }
this.$e('a:user:resend-invite') this.$e('a:user:resend-invite');
}, },
async loadUsers() { async loadUsers() {
try { try {
const { page = 1, itemsPerPage = 20 } = this.options const { page = 1, itemsPerPage = 20 } = this.options;
// const data = (await this.$axios.get('/admin', { // const data = (await this.$axios.get('/admin', {
// headers: { // headers: {
// 'xc-auth': this.$store.state.users.token // 'xc-auth': this.$store.state.users.token
@ -691,29 +610,26 @@ export default {
// } // }
// })).data // })).data
const userData = await this.$api.auth.projectUserList( const userData = await this.$api.auth.projectUserList(this.$store.state.project.projectId, {
this.$store.state.project.projectId,
{
query: { query: {
limit: itemsPerPage, limit: itemsPerPage,
offset: (page - 1) * itemsPerPage, offset: (page - 1) * itemsPerPage,
query: this.query query: this.query,
} },
} });
)
this.count = userData.users.pageInfo.totalRows this.count = userData.users.pageInfo.totalRows;
this.users = userData.users.list this.users = userData.users.list;
if (!this.selectedUser && this.users && this.users[0]) { if (!this.selectedUser && this.users && this.users[0]) {
this.selectedUserIndex = 0 this.selectedUserIndex = 0;
} }
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} }
}, },
async loadRoles() { async loadRoles() {
try { try {
this.roles = ['creator', 'editor', 'commenter', 'viewer'] this.roles = ['creator', 'editor', 'commenter', 'viewer'];
// todo: // todo:
// (await this.$axios.get('/admin/roles', { // (await this.$axios.get('/admin/roles', {
@ -728,112 +644,93 @@ export default {
// return role.title // return role.title
// }).filter(role => role !== 'guest') // }).filter(role => role !== 'guest')
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} }
}, },
async deleteUser(id, type) { async deleteUser(id, type) {
try { try {
await this.$api.auth.projectUserRemove( await this.$api.auth.projectUserRemove(this.$route.params.project_id, id);
this.$route.params.project_id,
id
)
this.$toast this.$toast
.success( .success(`Successfully removed the user from ${type === 'DELETE_FROM_PROJECT' ? 'project' : 'NocoDB'}`)
`Successfully removed the user from ${ .goAway(3000);
type === 'DELETE_FROM_PROJECT' ? 'project' : 'NocoDB' await this.loadUsers();
}`
)
.goAway(3000)
await this.loadUsers()
} catch (e) { } catch (e) {
this.$toast.error(e.response.data.msg).goAway(3000) this.$toast.error(e.response.data.msg).goAway(3000);
} }
}, },
async confirmDelete(hideDialog) { async confirmDelete(hideDialog) {
if (hideDialog) { if (hideDialog) {
this.showConfirmDlg = false this.showConfirmDlg = false;
return return;
} }
await this.deleteUser(this.deleteId, this.deleteUserType) await this.deleteUser(this.deleteId, this.deleteUserType);
this.showConfirmDlg = false this.showConfirmDlg = false;
this.$e('a:user:delete') this.$e('a:user:delete');
}, },
addUser() { addUser() {
this.invite_token = null this.invite_token = null;
this.selectedUser = { this.selectedUser = {
roles: 'editor' roles: 'editor',
} };
this.userEditDialog = true this.userEditDialog = true;
this.$e('c:user:add') this.$e('c:user:add');
}, },
async inviteUser(item) { async inviteUser(item) {
try { try {
await this.$api.auth.projectUserAdd( await this.$api.auth.projectUserAdd(this.$route.params.project_id, item);
this.$route.params.project_id, this.$toast.success('Successfully added user to project').goAway(3000);
item await this.loadUsers();
)
this.$toast.success('Successfully added user to project').goAway(3000)
await this.loadUsers()
} catch (e) { } catch (e) {
this.$toast.error(e.response.data.msg).goAway(3000) this.$toast.error(e.response.data.msg).goAway(3000);
} }
this.$e('a:user:add') this.$e('a:user:add');
}, },
async saveUser() { async saveUser() {
this.validate = true this.validate = true;
await this.$nextTick() await this.$nextTick();
if (this.loading || !this.$refs.form.validate() || !this.selectedUser) { if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
return return;
} }
this.$e('a:user:invite', { role: this.selectedUser.roles }) this.$e('a:user:invite', { role: this.selectedUser.roles });
if (!this.edited) { if (!this.edited) {
this.userEditDialog = false this.userEditDialog = false;
} }
try { try {
let data let data;
if (this.selectedUser.id) { if (this.selectedUser.id) {
await this.$api.auth.projectUserUpdate( await this.$api.auth.projectUserUpdate(this.$route.params.project_id, this.selectedUser.id, {
this.$route.params.project_id,
this.selectedUser.id,
{
roles: this.selectedUser.roles, roles: this.selectedUser.roles,
email: this.selectedUser.email, email: this.selectedUser.email,
project_id: this.$route.params.project_id, project_id: this.$route.params.project_id,
projectName: this.$store.getters['project/GtrProjectName'] projectName: this.$store.getters['project/GtrProjectName'],
} });
)
} else { } else {
data = await this.$api.auth.projectUserAdd( data = await this.$api.auth.projectUserAdd(this.$route.params.project_id, {
this.$route.params.project_id,
{
...this.selectedUser, ...this.selectedUser,
project_id: this.$route.params.project_id, project_id: this.$route.params.project_id,
projectName: this.$store.getters['project/GtrProjectName'] projectName: this.$store.getters['project/GtrProjectName'],
} });
)
} }
this.$toast this.$toast.success('Successfully updated the user details').goAway(3000);
.success('Successfully updated the user details') await this.loadUsers();
.goAway(3000)
await this.loadUsers()
if (data && data.invite_token) { if (data && data.invite_token) {
this.invite_token = data this.invite_token = data;
this.simpleAnim() this.simpleAnim();
return return;
} }
} catch (e) { } catch (e) {
this.$toast.error(e.response.data.msg).goAway(3000) this.$toast.error(e.response.data.msg).goAway(3000);
} }
await this.loadUsers() await this.loadUsers();
} },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save