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

chore/gui-v2-user-management-icon-height-config-improved-and-integrated-user-management-and-api-token-to-tab-view

pull/2854/head
Muhammed Mustafa 2 years ago
parent
ab2520603f
commit
0652f14daa
7 changed files with 78 additions and 35 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. 4
      packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
  2. 40
      packages/nc-gui-v2/components/tabs/Auth.vue
  3. 14
      packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
  4. 14
      packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
  5. 0
      packages/nc-gui-v2/components/tabs/auth/user-management/FeedbackForm.vue
  6. 27
      packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
  7. 14
      packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue

4
packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue
Unescape View File

@ -4,8 +4,8 @@ import AuditTab from './AuditTab.vue'
import AppStore from './AppStore.vue' import AppStore from './AppStore.vue'
import Metadata from './Metadata.vue' import Metadata from './Metadata.vue'
import UIAcl from './UIAcl.vue' import UIAcl from './UIAcl.vue'
import UserManagement from './UserManagement.vue' import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
import ApiTokenManagement from './ApiTokenManagement.vue' import UserManagement from '~/components/tabs/auth/UserManagement.vue'
import StoreFrontOutline from '~icons/mdi/storefront-outline' import StoreFrontOutline from '~icons/mdi/storefront-outline'
import TeamFillIcon from '~icons/ri/team-fill' import TeamFillIcon from '~icons/ri/team-fill'
import MultipleTableIcon from '~icons/mdi/table-multiple' import MultipleTableIcon from '~icons/mdi/table-multiple'

40
packages/nc-gui-v2/components/tabs/Auth.vue
Unescape View File

@ -1,5 +1,43 @@
<script setup lang="ts">
import UserManagement from './auth/UserManagement.vue'
import ApiTokenManagement from './auth/ApiTokenManagement.vue'
interface TabGroup {
[key: string]: {
title: string
body: any
}
}
const tabsInfo: TabGroup = {
usersManagement: {
title: 'Users Management',
body: () => UserManagement,
},
apiTokenManagement: {
title: 'API Token Management',
body: () => ApiTokenManagement,
},
}
const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
const selectedTabKeys = $ref<string[]>([firstKeyOfObject(tabsInfo)])
const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]])
</script>
<template> <template>
<div> <div>
<h2 class="text-3xl mt-3">Team & Auth</h2> <a-menu v-model:selectedKeys="selectedTabKeys" :open-keys="[]" mode="horizontal">
<a-menu-item v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
<div class="text-xs pb-2.5">
{{ tab.title }}
</div>
</a-menu-item>
</a-menu>
<div class="mx-4 py-6 mt-2">
<component :is="selectedTab.body()" />
</div>
</div> </div>
</template> </template>

14
packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue → packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
Unescape View File

@ -159,8 +159,8 @@ onMounted(() => {
</template> </template>
<a-button type="text" class="!rounded-md" @click="item.show = !item.show"> <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
<template #icon> <template #icon>
<VisibilityCloseIcon v-if="item.show" height="1.1rem" class="flex mx-auto" /> <VisibilityCloseIcon v-if="item.show" class="flex mx-auto h-[1.1rem]" />
<VisibilityOpenIcon v-else height="1rem" class="flex mx-auto" /> <VisibilityOpenIcon v-else class="flex mx-auto h-[1rem]" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -168,7 +168,7 @@ onMounted(() => {
<template #title> Copy token to clipboard </template> <template #title> Copy token to clipboard </template>
<a-button type="text" class="!rounded-md" @click="copyToken(item.token)"> <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
<template #icon> <template #icon>
<MdiContentCopyIcon height="1rem" class="flex mx-auto" /> <MdiContentCopyIcon class="flex mx-auto h-[1rem]" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -176,16 +176,16 @@ onMounted(() => {
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight"> <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<a-button type="text" class="!px-0"> <a-button type="text" class="!px-0">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center h-[1.2rem]">
<KebabIcon height="1.2rem" /> <KebabIcon />
</div> </div>
</a-button> </a-button>
</div> </div>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item> <a-menu-item>
<div class="flex flex-row items-center py-1" @click="openDeleteModal(item)"> <div class="flex flex-row items-center py-1 h-[1rem]" @click="openDeleteModal(item)">
<MdiDeleteOutlineIcon height="1rem" class="flex" /> <MdiDeleteOutlineIcon class="flex" />
<div class="text-xs pl-2">Remove API Token</div> <div class="text-xs pl-2">Remove API Token</div>
</div> </div>
</a-menu-item> </a-menu-item>

14
packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue → packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
Unescape View File

@ -220,7 +220,7 @@ watchDebounced(
</template> </template>
<a-button type="text" class="!rounded-md" @click="onEdit(user)"> <a-button type="text" class="!rounded-md" @click="onEdit(user)">
<template #icon> <template #icon>
<MdiEditIcon height="1rem" class="flex mx-auto" /> <MdiEditIcon class="flex mx-auto h-[1rem]" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -230,7 +230,7 @@ watchDebounced(
</template> </template>
<a-button type="text" class="!rounded-md " @click="inviteUser(user)"> <a-button type="text" class="!rounded-md " @click="inviteUser(user)">
<template #icon> <template #icon>
<MdiPlusIcon height="1.1rem" class="flex mx-auto" /> <MdiPlusIcon class="flex mx-auto h-[1.1rem]" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -241,7 +241,7 @@ watchDebounced(
</template> </template>
<a-button type="text" class="!rounded-md" @click="onDelete(user)"> <a-button type="text" class="!rounded-md" @click="onDelete(user)">
<template #icon> <template #icon>
<MdiDeleteOutlineIcon height="1.1rem" class="flex mx-auto" /> <MdiDeleteOutlineIcon class="flex mx-auto h-[1.1rem]" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -249,8 +249,8 @@ watchDebounced(
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight"> <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<a-button type="text" class="!px-0"> <a-button type="text" class="!px-0">
<div class="flex flex-row items-center "> <div class="flex flex-row items-center h-[1.2rem]">
<KebabIcon height="1.2rem" /> <KebabIcon />
</div> </div>
</a-button> </a-button>
</div> </div>
@ -258,7 +258,7 @@ watchDebounced(
<a-menu> <a-menu>
<a-menu-item> <a-menu-item>
<div class="flex flex-row items-center py-1" @click="resendInvite(user)"> <div class="flex flex-row items-center py-1" @click="resendInvite(user)">
<MdiEmailSendIcon height="1rem" class="flex" /> <MdiEmailSendIcon class="flex h-[1rem]" />
<div class="text-xs pl-2"> <div class="text-xs pl-2">
Resend invite email Resend invite email
</div> </div>
@ -266,7 +266,7 @@ watchDebounced(
</a-menu-item> </a-menu-item>
<a-menu-item> <a-menu-item>
<div class="flex flex-row items-center py-1" @click="copyInviteUrl(user)"> <div class="flex flex-row items-center py-1" @click="copyInviteUrl(user)">
<MdiContentCopyIcon height="1rem" class="flex" /> <MdiContentCopyIcon class="flex h-[1rem]" />
<div class="text-xs pl-2"> <div class="text-xs pl-2">
Copy invite URL Copy invite URL
</div> </div>

0
packages/nc-gui-v2/components/dashboard/settings/user-management/FeedbackForm.vue → packages/nc-gui-v2/components/tabs/auth/user-management/FeedbackForm.vue
Unescape View File

27
packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue → packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
Unescape View File

@ -134,8 +134,8 @@ onMounted(() => {
<template> <template>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="flex flex-row items-center space-x-0.5 pl-2"> <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
<OpenInNewIcon height="0.8rem" /> <OpenInNewIcon />
<div class="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 w-full justify-between"> <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">
@ -145,9 +145,9 @@ onMounted(() => {
<template #title> <template #title>
<span>Reload</span> <span>Reload</span>
</template> </template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="recreate"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="recreate">
<template #icon> <template #icon>
<MdiReload height="1rem" class="flex mx-auto text-gray-600" /> <MdiReload class="flex mx-auto text-gray-600" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -155,9 +155,9 @@ onMounted(() => {
<template #title> <template #title>
<span>Copy URL</span> <span>Copy URL</span>
</template> </template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="copyUrl"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="copyUrl">
<template #icon> <template #icon>
<ContentCopyIcon height="1rem" class="flex mx-auto text-gray-600" /> <ContentCopyIcon class="flex mx-auto text-gray-600" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -165,9 +165,9 @@ onMounted(() => {
<template #title> <template #title>
<span>Open new tab</span> <span>Open new tab</span>
</template> </template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="navigateToSharedBase"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
<template #icon> <template #icon>
<OpenInNewIcon height="1rem" class="flex mx-auto text-gray-600" /> <OpenInNewIcon class="flex mx-auto text-gray-600" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -175,9 +175,9 @@ onMounted(() => {
<template #title> <template #title>
<span>Copy embeddable HTML code</span> <span>Copy embeddable HTML code</span>
</template> </template>
<a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="generateEmbeddableIframe"> <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
<template #icon> <template #icon>
<MdiXmlIcon height="1rem" class="flex mx-auto text-gray-600" /> <MdiXmlIcon class="flex mx-auto text-gray-600" />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -190,7 +190,7 @@ onMounted(() => {
<div class="flex flex-row items-center space-x-2"> <div class="flex flex-row items-center space-x-2">
<div v-if="base?.uuid">Anyone with the link</div> <div v-if="base?.uuid">Anyone with the link</div>
<div v-else>Disable shared base</div> <div v-else>Disable shared base</div>
<DownIcon height="1rem" /> <DownIcon class="h-[1rem]" />
</div> </div>
</a-button> </a-button>
@ -205,6 +205,11 @@ onMounted(() => {
</a-dropdown> </a-dropdown>
<a-select v-if="base?.uuid" v-model:value="base.role" class="flex"> <a-select v-if="base?.uuid" v-model:value="base.role" class="flex">
<template #suffixIcon>
<div class="flex flex-row">
<DownIcon class="text-black -mt-0.5 h-[1rem]" />
</div>
</template>
<a-select-option <a-select-option
v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]" v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
:key="index" :key="index"

14
packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue → packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
Unescape View File

@ -137,8 +137,8 @@ const clickInviteMore = () => {
<div class="px-2 mt-1.5"> <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 pl-1.5 pb-1"> <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
<MidAccountIcon height="1.1rem" /> <MidAccountIcon />
<div class="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>
@ -150,7 +150,7 @@ const clickInviteMore = () => {
</div> </div>
<a-button type="text" class="!rounded-md mr-1" @click="copyUrl"> <a-button type="text" class="!rounded-md mr-1" @click="copyUrl">
<template #icon> <template #icon>
<ContentCopyIcon height="1rem" class="flex mx-auto text-green-700" /> <ContentCopyIcon class="flex mx-auto text-green-700 h-[1rem]" />
</template> </template>
</a-button> </a-button>
</div> </div>
@ -163,7 +163,7 @@ const clickInviteMore = () => {
<div class="flex flex-row justify-start mt-4 ml-2"> <div class="flex flex-row justify-start mt-4 ml-2">
<a-button size="small" outlined @click="clickInviteMore"> <a-button size="small" outlined @click="clickInviteMore">
<div class="flex flex-row justify-center items-center space-x-0.5"> <div class="flex flex-row justify-center items-center space-x-0.5">
<SendIcon height="0.8rem" class="flex mx-auto text-gray-600" /> <SendIcon class="flex mx-auto text-gray-600 h-[0.8rem]" />
<div class="text-xs text-gray-600">Invite more</div> <div class="text-xs text-gray-600">Invite more</div>
</div> </div>
</a-button> </a-button>
@ -171,8 +171,8 @@ 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 pb-1"> <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
<MidAccountIcon height="1rem" /> <MidAccountIcon />
<div class="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">
@ -219,7 +219,7 @@ const clickInviteMore = () => {
<a-button type="primary" html-type="submit"> <a-button type="primary" html-type="submit">
<div v-if="selectedUser">Save</div> <div v-if="selectedUser">Save</div>
<div v-else class="flex flex-row justify-center items-center space-x-1.5"> <div v-else class="flex flex-row justify-center items-center space-x-1.5">
<SendIcon height="0.8rem" class="flex" /> <SendIcon class="flex h-[0.8rem]" />
<div>Invite</div> <div>Invite</div>
</div> </div>
</a-button> </a-button>
Write Preview
Loading…
Cancel
Save