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

refactor(gui): improve share base modal 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/769/head
Pranav C 3 years ago
parent
76a91a92cd
commit
8abc4a6cc5
3 changed files with 213 additions and 236 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 351
      packages/nc-gui/components/auth/userManagement.vue
  2. 95
      packages/nc-gui/components/base/shareBase.vue
  3. 3
      packages/nc-gui/components/templates/categories.vue

351
packages/nc-gui/components/auth/userManagement.vue
Unescape View File

@ -221,68 +221,7 @@
</div>
<feedback-form class="mx-auto mt-6" />
<!-- </v-card>-->
</v-col>
<!-- <v-col cols="5" v-if="selectedUser && _isUIAllowed('editUser')" style="height:100%; overflow: auto">
<v-card class="px-4 py-2" style="min-height: 100%">
<h4 class="text-center text-capitalize mt-2 d-100 grey&#45;&#45;text text-darken-1">User Info</h4>
<v-toolbar flat height="38" class="toolbar-border-bottom">
<v-spacer></v-spacer>
<x-btn outlined tooltip="Save Changes"
color="primary"
small
@click="saveUser"
:disabled="loading || !edited || !valid"
btn.class="text-capitalize"
v-ge="['rows','save']"
>
<v-icon small left>save</v-icon>
Save<span v-if="!selectedUser.id"> & Invite</span>
</x-btn>
</v-toolbar>
<v-form v-model="valid">
<v-row class="mt-3">
&lt;!&ndash; <v-col cols="12" class="edit-header">&ndash;&gt;
&lt;!&ndash; </v-col>&ndash;&gt;
<v-col cols="12">
<v-text-field
:disabled="!!selectedUser.id"
auto
dense
v-model="selectedUser.email"
:rules="emailRules"
@input="edited=true"
outlined label="Email"></v-text-field>
</v-col>
<v-col cols="12">
<v-combobox
class="role-select"
outlined
hide-details
v-model="selectedRoles"
:items="roles"
@change="edited = true"
label="Select User roles"
multiple
chips
dense
deletable-chips
color="warning"
></v-combobox>
</v-col>
</v-row>
</v-form>
</v-card>
</v-col>-->
</v-row>
</v-card>
</v-col>
@ -316,19 +255,6 @@
</td>
<td class="px-1 py-1">
<set-list-checkbox-cell v-model="user.roles" :values="roles" />
<!-- <v-text-field outlined hide-details dense></v-text-field>-->
<!-- <v-combobox
solo
:value="user.roles.split(',')"
class="elevation-0"
:items="roles"
hide-selected
multiple
small-chips
hide-details
dense
>
</v-combobox>-->
</td>
<td align="middle">
<v-icon large>
@ -356,20 +282,6 @@
</td>
<td class="px-1 py-1">
<set-list-checkbox-cell :values="roles" />
<!-- <v-text-field outlined hide-details dense></v-text-field>-->
<!-- <v-combobox
solo
class="elevation-0"
:items="roles"
hide-selected
multiple
small-chips
hide-details
dense
>
</v-combobox>-->
</td>
<td align="middle">
<v-icon large>
@ -389,119 +301,144 @@
: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" class="px-15 py-5 " style="min-height: 100%">
<h4 class="text-center text-capitalize mt-2 d-100 display-1">
<template v-if="invite_token">
Copy Invite Token
</template>
<template v-else-if="selectedUser.id">
Edit User
</template>
<template v-else>
Invite
</template>
</h4>
<div v-if="invite_token" class="mt-6 align-center">
<!-- <div class="d-flex">
<v-alert
type="success"
outlined
>
<div class="ellipsis d-100">
{{ inviteUrl }}
</div>
</v-alert>
<x-icon icon.class="ml-3 mt-n3"
@click="clipboard(inviteUrl); $toast.success('Copied invite url to clipboard').goAway(3000)">
mdi-content-copy
</x-icon>
</div>-->
<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>
<v-card v-if="selectedUser" style="min-height: 100%">
<v-card-title>
Share : {{ $store.getters['project/GtrProjectName'] }}
<!--
<h4 class="text-center text-capitalize mt-2 d-100 display-1">
<template v-if="invite_token">
Copy Invite Token
</template>
<template v-else-if="selectedUser.id">
Edit User
</template>
<div class="ellipsis d-100">
{{ inviteUrl }}
<template v-else>
Invite
</template>
</h4>-->
<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
</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
{{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.
</p>
<div class="text-right">
<x-btn tooltip="Invite more users" small outlined btn.class="grey--text" @click="invite_token = null, selectedUser = {}">
<v-icon small color="grey" class="mr-1">
mdi-account-multiple-plus-outline
</v-icon> Invite more
</x-btn>
</div>
<!-- todo: show error message if failed-->
</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
{{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.
</p>
<!-- todo: show error message if failed-->
</div>
<template v-else>
<v-form ref="form" v-model="valid" @submit.prevent="saveUser">
<v-row class="mt-4">
<v-col cols="12">
<v-text-field
ref="email"
v-model="selectedUser.email"
:disabled="!!selectedUser.id"
filled
dense
:rules="emailRules"
validate-on-blur
hint="You can add multiple comma(,) separated emails"
label="Email"
@input="edited=true"
/>
</v-col>
<v-col cols="12">
<v-combobox
v-model="selectedRoles"
filled
class="role-select"
hide-details
:items="roles"
label="Select User roles"
multiple
dense
deletable-chips
@change="edited = true"
<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">
<v-text-field
ref="email"
v-model="selectedUser.email"
:disabled="!!selectedUser.id"
dense
validate-on-blur
outlined
:rules="emailRules"
class="caption"
hint="You can add multiple comma(,) separated emails"
label="Email"
@input="edited=true"
>
<template #label>
<span class="caption">Email</span>
</template>
</v-text-field>
</v-col>
<v-col cols="4" class="py-0">
<v-combobox
v-model="selectedRoles"
outlined
class="role-select caption"
hide-details="auto"
:items="roles"
label="Select User roles"
multiple
dense
deletable-chips
@change="edited = true"
>
<template #selection="{item}">
<v-chip small :color="rolesColors[item]">
{{ item }}
</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
</v-form>
<!-- </v-card-text>
<v-card-actions class="justify-center">-->
<div class="text-center mt-0">
<x-btn
v-ge="['rows','save']"
tooltip="Save Changes"
color="primary"
btn.class="nc-invite-or-save-btn"
@click="saveUser"
>
<template #selection="{item}">
<v-chip :color="rolesColors[item]">
{{ item }}
</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
</v-form>
<v-card-actions class="justify-center">
<x-btn
v-ge="['rows','save']"
tooltip="Save Changes"
color="primary"
btn.class="mt-5 mb-3 pr-5 nc-invite-or-save-btn"
@click="saveUser"
>
<v-icon small left>
{{ selectedUser.id ? 'save' : 'mdi-send' }}
</v-icon>
{{ selectedUser.id ? 'Save' : 'Invite' }}
</x-btn>
</v-card-actions>
</template>
<v-icon small left>
{{ selectedUser.id ? 'save' : 'mdi-send' }}
</v-icon>
{{ selectedUser.id ? 'Save' : 'Invite' }}
</x-btn>
</div>
</template>
<!-- </v-card-actions>-->
</div>
</v-card-text>
<v-card-text>
<share-base />
</v-card-text>
@ -517,10 +454,11 @@ 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: { ShareBase, FeedbackForm, DlgLabelSubmitCancel, SetListCheckboxCell },
components: { XBtn, ShareBase, FeedbackForm, DlgLabelSubmitCancel, SetListCheckboxCell },
data: () => ({
deleteItem: null,
invite_token: null,
@ -844,6 +782,23 @@ export default {
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>
<!--
/**

95
packages/nc-gui/components/base/shareBase.vue
Unescape View File

@ -1,42 +1,60 @@
<template>
<div class="nc-container">
<v-menu>
<template #activator="{on}">
<div class="my-2" v-on="on">
<template v-if="base.enabled">
Anyone with following link can view base in a readonly mode
</template>
<template v-else>
Generate publicly shareable readonly base
</template>
<div>
<v-icon color="grey" small>
mdi-open-in-new
</v-icon> <span class="grey--text caption">Shared base link</span>
<div class="nc-container">
<v-menu>
<template #activator="{on}">
<div class="my-2" v-on="on">
<template v-if="base.enabled">
Anyone with following link can view base in a readonly mode
</template>
<template v-else>
Generate publicly shareable readonly base
</template>
<v-icon small>
mdi-menu-down-outline
<v-icon small>
mdi-menu-down-outline
</v-icon>
</div>
</template>
<v-list dense>
<v-list-item dense @click="createSharedBase">
<v-list-item-title>
<v-icon small class="mr-1">
mdi-link-variant
</v-icon>
<span class="caption">Readonly link</span>
</v-list-item-title>
</v-list-item>
<v-list-item dense @click="disableSharedBase">
<v-list-item-title>
<v-icon small class="mr-1">
mdi-link-variant-off
</v-icon>
<span class="caption">Disable shared base</span>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-chip v-if="base.enabled" :color="colors[4]">
<div class="nc-url-wrapper d-flex mx-1 align-center d-100">
<span class="nc-url flex-grow-1">{{ url }}</span>
<v-divider vertical />
<v-icon @click="recreate">
mdi-reload
</v-icon>
<v-icon @click="copyUrl">
mdi-content-copy
</v-icon>
<v-icon @click="navigateToSharedBase">
mdi-open-in-new
</v-icon>
</div>
</template>
<v-list dense>
<v-list-item dense @click="disableSharedBase">
<v-list-item-title>Disable shared base</v-list-item-title>
</v-list-item>
<v-list-item dense @click="createSharedBase">
<v-list-item-title>Readonly link</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-chip v-if="base.enabled" :color="colors[2]">
<div class="nc-url-wrapper d-flex mx-1 align-center d-100">
<span class="nc-url">{{ url }}</span>
<v-icon @click="recreate">
mdi-reload
</v-icon>
<v-icon @click="copyUrl">
mdi-content-copy
</v-icon>
<v-icon>mdi-xml</v-icon>
</div>
</v-chip>
</v-chip>
</div>
</div>
</template>
@ -97,6 +115,9 @@ export default {
copyUrl() {
copyTextToClipboard(this.url)
this.$toast.success('Copied shareable base url to clipboard!').goAway(3000)
},
navigateToSharedBase() {
window.open(this.url, '_blank')
}
}
@ -105,7 +126,8 @@ export default {
<style scoped>
.nc-url-wrapper {
column-gap: 5px;
column-gap: 15px;
width:100%
}
.nc-url {
@ -117,6 +139,7 @@ export default {
.nc-container {
border-radius: 4px;
border: 2px solid var(--v-backgroundColor-base);
background: var(--v-backgroundColor-base);
padding: 20px 20px;
}
</style>

3
packages/nc-gui/components/templates/categories.vue
Unescape View File

@ -53,9 +53,8 @@
<span class="caption">Create templates from multiple Excel files</span>
</v-tooltip>
<!-- v-if="$store.state.templateE > 3"-->
<v-text-field
v-if="$store.state.templateE > 3"
v-model="t"
autocomplete="new-password"
name="nc"

Write Preview
Loading…
Cancel
Save