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
Split 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">
import { useDebounce } from '@vueuse/core'
import KebabIcon from '~icons/ic/baseline-more-vert'
import UsersModal from './userManagement/UsersModal.vue'
import { projectRoleTagColors } from '~/utils/userUtils'
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 MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
import RolesIcon from '~icons/mdi/drama-masks'
import SendIcon from '~icons/material-symbols/send'
import { User } from '~~/lib/types'
import { useToast } from 'vue-toastification'
const toast = useToast()
@ -170,7 +170,7 @@ watch(
</a-button>
</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 w-4/6 space-x-1 items-center pl-1">
<EmailIcon class="flex text-gray-500 -mt-0.5" />
@ -192,36 +192,76 @@ watch(
{{ user.email }}
</div>
<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 }}
</div>
</div>
<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)">
<template #icon>
<MdiEditIcon height="1rem" class="flex mx-auto" />
<a-tooltip v-if="user.project_id" placement="bottom">
<template #title>
<span>Edit user</span>
</template>
</a-button>
<a-button type="text" v-if="!user.project_id" class="!rounded-md " @click="inviteUser(user)">
<template #icon>
<MdiPlusIcon height="1.1rem" class="flex mx-auto" />
<a-button type="text" class="!rounded-md" @click="onEdit(user)">
<template #icon>
<MdiEditIcon height="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>
</a-button>
<a-button v-else type="text" class="!rounded-md" @click="onDelete(user)">
<template #icon>
<MdiDeleteOutlineIcon height="1.1rem" class="flex mx-auto" />
</template>
</a-button>
<a-button type="text" class="!rounded-md" @click="resendInvite(user)">
<template #icon>
<MdiEmailSendIcon height="1.1rem" class="flex mx-auto" />
<a-button type="text" class="!rounded-md " @click="inviteUser(user)">
<template #icon>
<MdiPlusIcon height="1.1rem" class="flex mx-auto" />
</template>
</a-button>
</a-tooltip>
<a-tooltip v-else placement="bottom">
<template #title>
<span>Remove user from the project</span>
</template>
</a-button>
<a-button type="text" class="!rounded-md" @click="copyInviteUrl(user)">
<template #icon>
<MdiContentCopyIcon height="1.1rem" class="flex mx-auto" />
<a-button type="text" class="!rounded-md" @click="onDelete(user)">
<template #icon>
<MdiDeleteOutlineIcon 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>
</a-button>
</a-dropdown>
</div>
</div>
<a-pagination

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

@ -133,41 +133,57 @@ onMounted(() => {
</script>
<template>
<div class="flex flex-col">
<div class="flex flex-row items-center space-x-0.5 pl-1.5">
<OpenInNewIcon height="0.8rem" class="text-gray-500" />
<div class="text-gray-500 text-xs">Shared Base Link</div>
<div class="flex flex-col w-full">
<div class="flex flex-row items-center space-x-0.5 pl-2">
<OpenInNewIcon height="0.8rem" />
<div class="text-xs">Shared Base Link</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">
<span class="text-xs overflow-x-hidden overflow-ellipsis text-gray-700">{{ url }}</span>
<a-divider class="flex" type="vertical" />
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
<template #icon>
<MdiReload height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
<template #icon>
<ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
<template #icon>
<OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
<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>
</div>
<div class="flex text-xs text-gray-400 mt-2 justify-start ml-2">
This link can be used to signup by anyone under this project
<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="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2">{{ url }}</span>
<div class="flex border-l-1 pt-1 pl-1">
<a-tooltip placement="bottom">
<template #title>
<span>Reload</span>
</template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate">
<template #icon>
<MdiReload height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
<span>Copy URL</span>
</template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl">
<template #icon>
<ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" />
</template>
</a-button>
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
<span>Open new tab</span>
</template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase">
<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 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">
<a-dropdown v-model="showEditBaseDropdown" class="flex">
<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')">
<div class="flex flex-col">
<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')">
<template #icon>
<CloseIcon class="flex mx-auto" />
@ -129,12 +128,12 @@ const clickInviteMore = () => {
</a-button>
</div>
<div class="px-3">
<div class="px-2 mt-1.5">
<template v-if="usersData.invitationToken">
<div class="flex flex-col mt-1 border-b-1 pb-5">
<div class="flex flex-row items-center">
<MidAccountIcon height="1.1rem" class="text-gray-500" />
<div class="text-gray-500 text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
<div class="flex flex-row items-center pl-1.5 pb-1">
<MidAccountIcon height="1.1rem" />
<div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
</div>
<a-alert class="mt-1" type="success" show-icon>
@ -151,7 +150,7 @@ const clickInviteMore = () => {
</div>
</template>
</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
{{ usersData.invitationToken && usersData.emails }}.
</div>
@ -166,9 +165,9 @@ const clickInviteMore = () => {
</div>
</template>
<div v-else class="flex flex-col pb-4">
<div class="flex flex-row items-center pl-2">
<MidAccountIcon height="1rem" class="text-gray-500" />
<div class="text-gray-500 text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
<div class="flex flex-row items-center pl-2 pb-1">
<MidAccountIcon height="1rem" />
<div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
</div>
<div class="border-1 py-3 px-4 rounded-md mt-1">
<a-form ref="formRef" :model="usersData" @finish="saveUser">
@ -199,7 +198,7 @@ const clickInviteMore = () => {
</div>
</div>
<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>
</a-form>
</div>

Write Preview
Loading…
Cancel
Save