mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
316 lines
9.5 KiB
316 lines
9.5 KiB
<template> |
|
<v-dialog |
|
v-model="userEditDialog" |
|
:width="invite_token ? 700 : 700" |
|
transition="dialog-top-transition" |
|
@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> |
|
</template> |
|
|
|
<script> |
|
import { isEmail } from '~/helpers' |
|
import { enumColor } from '~/components/project/spreadsheet/helpers/colors' |
|
import ShareBase from '~/components/base/ShareBase' |
|
|
|
export default { |
|
name: 'ShareOrInviteModal', |
|
components: { ShareBase }, |
|
props: { |
|
value: Boolean |
|
}, |
|
data: () => ({ |
|
roles: ['creator', 'editor', 'commenter', 'viewer'], |
|
selectedUser: {}, |
|
invite_token: null, |
|
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: '' |
|
}), |
|
computed: { |
|
userEditDialog: { |
|
get() { |
|
return this.value |
|
}, |
|
set(v) { |
|
this.$emit('input', v) |
|
} |
|
}, |
|
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(',') |
|
} |
|
} |
|
} |
|
}, |
|
methods: { |
|
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) |
|
this.$emit('saved') |
|
if (data && data.invite_token) { |
|
this.invite_token = data |
|
// todo: bring anim |
|
// this.simpleAnim() |
|
return |
|
} |
|
} catch (e) { |
|
this.$toast |
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
.goAway(3000) |
|
} |
|
|
|
this.userEditDialog = false |
|
}, |
|
|
|
clickInviteMore() { |
|
this.$e('c:user:invite-more') |
|
this.invite_token = null |
|
this.selectedUser = { roles: 'editor' } |
|
}, |
|
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') |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped></style>
|
|
|