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

refactor/gui-v2-user-management-tooltip-added and ui improvemnts

pull/2854/head
Muhammed Mustafa 2 years ago
parent
161b080ca9
commit
c9dc180f44
3 changed files with 123 additions and 68 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. 88
      packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
  2. 82
      packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
  3. 21
      packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue

88
packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
Unescape View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDebounce } from '@vueuse/core' import { useDebounce } from '@vueuse/core'
import KebabIcon from '~icons/ic/baseline-more-vert'
import UsersModal from './userManagement/UsersModal.vue' import UsersModal from './userManagement/UsersModal.vue'
import { projectRoleTagColors } from '~/utils/userUtils' import { projectRoleTagColors } from '~/utils/userUtils'
import MidAccountIcon from '~icons/mdi/account-outline' import MidAccountIcon from '~icons/mdi/account-outline'
@ -13,7 +14,6 @@ import MdiPlusIcon from '~icons/mdi/plus'
import MdiContentCopyIcon from '~icons/mdi/content-copy' import MdiContentCopyIcon from '~icons/mdi/content-copy'
import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline' import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
import RolesIcon from '~icons/mdi/drama-masks' import RolesIcon from '~icons/mdi/drama-masks'
import SendIcon from '~icons/material-symbols/send'
import { User } from '~~/lib/types' import { User } from '~~/lib/types'
import { useToast } from 'vue-toastification' import { useToast } from 'vue-toastification'
const toast = useToast() const toast = useToast()
@ -170,7 +170,7 @@ watch(
</a-button> </a-button>
</div> </div>
</div> </div>
<div class="px-6"> <div class="px-5">
<div class="flex flex-row border-b-1 pb-2 px-2"> <div class="flex flex-row border-b-1 pb-2 px-2">
<div class="flex flex-row w-4/6 space-x-1 items-center pl-1"> <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
<EmailIcon class="flex text-gray-500 -mt-0.5" /> <EmailIcon class="flex text-gray-500 -mt-0.5" />
@ -192,36 +192,76 @@ watch(
{{ user.email }} {{ user.email }}
</div> </div>
<div class="flex w-1/6 justify-center flex-wrap ml-4"> <div class="flex w-1/6 justify-center flex-wrap ml-4">
<div :class="`rounded-full px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`"> <div :class="`rounded-full px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`">
{{ user.roles }} {{ user.roles }}
</div> </div>
</div> </div>
<div class="flex w-1/6 flex-wrap justify-end"> <div class="flex w-1/6 flex-wrap justify-end">
<a-button v-if="user.project_id" type="text" class="!rounded-md" @click="onEdit(user)"> <a-tooltip v-if="user.project_id" placement="bottom">
<template #icon> <template #title>
<MdiEditIcon height="1rem" class="flex mx-auto" /> <span>Edit user</span>
</template> </template>
</a-button> <a-button type="text" class="!rounded-md" @click="onEdit(user)">
<a-button type="text" v-if="!user.project_id" class="!rounded-md " @click="inviteUser(user)"> <template #icon>
<template #icon> <MdiEditIcon height="1rem" class="flex mx-auto" />
<MdiPlusIcon height="1.1rem" class="flex mx-auto" /> </template>
</a-button>
</a-tooltip>
<a-tooltip v-if="!user.project_id" placement="bottom">
<template #title>
<span>Add user to the project</span>
</template> </template>
</a-button> <a-button type="text" class="!rounded-md " @click="inviteUser(user)">
<a-button v-else type="text" class="!rounded-md" @click="onDelete(user)"> <template #icon>
<template #icon> <MdiPlusIcon height="1.1rem" class="flex mx-auto" />
<MdiDeleteOutlineIcon height="1.1rem" class="flex mx-auto" /> </template>
</template> </a-button>
</a-button> </a-tooltip>
<a-button type="text" class="!rounded-md" @click="resendInvite(user)">
<template #icon> <a-tooltip v-else placement="bottom">
<MdiEmailSendIcon height="1.1rem" class="flex mx-auto" /> <template #title>
<span>Remove user from the project</span>
</template> </template>
</a-button> <a-button type="text" class="!rounded-md" @click="onDelete(user)">
<a-button type="text" class="!rounded-md" @click="copyInviteUrl(user)"> <template #icon>
<template #icon> <MdiDeleteOutlineIcon height="1.1rem" class="flex mx-auto" />
<MdiContentCopyIcon height="1.1rem" class="flex mx-auto" /> </template>
</a-button>
</a-tooltip>
<a-dropdown :trigger="['click']" class="flex">
<div class="flex flex-row items-center">
<a-button type="text" class="!px-0">
<div class="flex flex-row items-center ">
<KebabIcon height="1.2rem" />
</div>
</a-button>
</div>
<template #overlay>
<a-menu>
<a-menu-item>
<a-button type="text" @click="resendInvite(user)">
<div class="flex flex-row items-center">
<MdiEmailSendIcon height="1rem" class="flex" />
<div class="text-xs pl-2">
Resend invite email
</div>
</div>
</a-button>
</a-menu-item>
<a-menu-item>
<a-button class="w-full" type="text" @click="copyInviteUrl(user)">
<div class="flex flex-row items-center">
<MdiContentCopyIcon height="1rem" class="flex" />
<div class="text-xs pl-2">
Copy invite URL
</div>
</div>
</a-button>
</a-menu-item>
</a-menu>
</template> </template>
</a-button> </a-dropdown>
</div> </div>
</div> </div>
<a-pagination <a-pagination

82
packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue
Unescape View File

@ -133,41 +133,57 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col w-full">
<div class="flex flex-row items-center space-x-0.5 pl-1.5"> <div class="flex flex-row items-center space-x-0.5 pl-2">
<OpenInNewIcon height="0.8rem" class="text-gray-500" /> <OpenInNewIcon height="0.8rem" />
<div class="text-gray-500 text-xs">Shared Base Link</div> <div class="text-xs">Shared Base Link</div>
</div> </div>
<div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm"> <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
<span class="text-xs overflow-x-hidden overflow-ellipsis text-gray-700">{{ url }}</span> <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2">{{ url }}</span>
<a-divider class="flex" type="vertical" /> <div class="flex border-l-1 pt-1 pl-1">
<a-tooltip placement="bottom">
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate"> <template #title>
<template #icon> <span>Reload</span>
<MdiReload height="1rem" class="flex mx-auto text-gray-600" /> </template>
</template> <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
</a-button> <template #icon>
<MdiReload height="1rem" class="flex mx-auto text-gray-600" />
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl"> </template>
<template #icon> </a-button>
<ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" /> </a-tooltip>
</template> <a-tooltip placement="bottom">
</a-button> <template #title>
<span>Copy URL</span>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase"> </template>
<template #icon> <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
<OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" /> <template #icon>
</template> <ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
</a-button> </template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe"> </a-button>
<template #icon> </a-tooltip>
<MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" /> <a-tooltip placement="bottom">
</template> <template #title>
</a-button> <span>Open new tab</span>
</div> </template>
<div class="flex text-xs text-gray-400 mt-2 justify-start ml-2"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
This link can be used to signup by anyone under this project <template #icon>
<OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
<span>Copy embeddable HTML code</span>
</template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe">
<template #icon>
<MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
</a-tooltip>
</div>
</div> </div>
<div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">Generate publicly shareable readonly base</div>
<div class="mt-4 flex flex-row justify-between mx-1"> <div class="mt-4 flex flex-row justify-between mx-1">
<a-dropdown v-model="showEditBaseDropdown" class="flex"> <a-dropdown v-model="showEditBaseDropdown" class="flex">
<a-button> <a-button>

21
packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue
Unescape View File

@ -120,8 +120,7 @@ const clickInviteMore = () => {
<a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emits('closed')"> <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emits('closed')">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full"> <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
<a-typography-title class="select-none" type="secondary" :level="5"> Share: {{ project.title }} </a-typography-title> <a-typography-title class="select-none" :level="4"> Share: {{ project.title }} </a-typography-title>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emits('closed')"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emits('closed')">
<template #icon> <template #icon>
<CloseIcon class="flex mx-auto" /> <CloseIcon class="flex mx-auto" />
@ -129,12 +128,12 @@ const clickInviteMore = () => {
</a-button> </a-button>
</div> </div>
<div class="px-3"> <div class="px-2 mt-1.5">
<template v-if="usersData.invitationToken"> <template v-if="usersData.invitationToken">
<div class="flex flex-col mt-1 border-b-1 pb-5"> <div class="flex flex-col mt-1 border-b-1 pb-5">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center pl-1.5 pb-1">
<MidAccountIcon height="1.1rem" class="text-gray-500" /> <MidAccountIcon height="1.1rem" />
<div class="text-gray-500 text-xs ml-0.5 mt-0.5">Copy Invite Token</div> <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
</div> </div>
<a-alert class="mt-1" type="success" show-icon> <a-alert class="mt-1" type="success" show-icon>
@ -151,7 +150,7 @@ const clickInviteMore = () => {
</div> </div>
</template> </template>
</a-alert> </a-alert>
<div class="flex text-xs text-gray-400 mt-2 justify-start ml-2"> <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">
Looks like you have not configured mailer yet! Please copy above invite link and send it to Looks like you have not configured mailer yet! Please copy above invite link and send it to
{{ usersData.invitationToken && usersData.emails }}. {{ usersData.invitationToken && usersData.emails }}.
</div> </div>
@ -166,9 +165,9 @@ const clickInviteMore = () => {
</div> </div>
</template> </template>
<div v-else class="flex flex-col pb-4"> <div v-else class="flex flex-col pb-4">
<div class="flex flex-row items-center pl-2"> <div class="flex flex-row items-center pl-2 pb-1">
<MidAccountIcon height="1rem" class="text-gray-500" /> <MidAccountIcon height="1rem" />
<div class="text-gray-500 text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div> <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
</div> </div>
<div class="border-1 py-3 px-4 rounded-md mt-1"> <div class="border-1 py-3 px-4 rounded-md mt-1">
<a-form ref="formRef" :model="usersData" @finish="saveUser"> <a-form ref="formRef" :model="usersData" @finish="saveUser">
@ -199,7 +198,7 @@ const clickInviteMore = () => {
</div> </div>
</div> </div>
<div class="flex flex-row justify-center"> <div class="flex flex-row justify-center">
<a-button type="primary" html-type="submit">Submit</a-button> <a-button type="primary" html-type="submit">Invite</a-button>
</div> </div>
</a-form> </a-form>
</div> </div>

Write Preview
Loading…
Cancel
Save