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

fix: resdesign user management

pull/6459/head
sreehari jayaraj 11 months ago
parent
1806ff9132
commit
c7866dcbf8
2 changed files with 151 additions and 153 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. 2
      packages/nc-gui/components.d.ts
  2. 302
      packages/nc-gui/components/account/UserList.vue

2
packages/nc-gui/components.d.ts vendored
Unescape View File

@ -91,6 +91,7 @@ declare module '@vue/runtime-core' {
MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default'] MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default'] MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default'] MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
MaterialSymbolsDeleteOutlineRounded: typeof import('~icons/material-symbols/delete-outline-rounded')['default']
MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default'] MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
MaterialSymbolsKeyboardArrowDownRounded: typeof import('~icons/material-symbols/keyboard-arrow-down-rounded')['default'] MaterialSymbolsKeyboardArrowDownRounded: typeof import('~icons/material-symbols/keyboard-arrow-down-rounded')['default']
MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default'] MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
@ -127,6 +128,7 @@ declare module '@vue/runtime-core' {
MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default'] MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
MdiDiscord: typeof import('~icons/mdi/discord')['default'] MdiDiscord: typeof import('~icons/mdi/discord')['default']
MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default'] MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
MdiEye: typeof import('~icons/mdi/eye')['default'] MdiEye: typeof import('~icons/mdi/eye')['default']
MdiFileDocumentMultipleOutline: typeof import('~icons/mdi/file-document-multiple-outline')['default'] MdiFileDocumentMultipleOutline: typeof import('~icons/mdi/file-document-multiple-outline')['default']
MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default'] MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']

302
packages/nc-gui/components/account/UserList.vue
Unescape View File

@ -1,14 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { OrgUserRoles } from 'nocodb-sdk' import { OrgUserRoles } from 'nocodb-sdk'
import type { OrgUserReqType, RequestParams, UserType } from 'nocodb-sdk' import type { OrgUserReqType, RequestParams, Roles, UserType } from 'nocodb-sdk'
import type { User } from '#imports' import type { User } from '#imports'
import { extractSdkResponseErrorMsg, iconMap, useApi, useCopy, useDashboard, useDebounceFn, useNuxtApp } from '#imports' import { extractSdkResponseErrorMsg, iconMap, useApi, useCopy, useDashboard, useNuxtApp } from '#imports'
const { api, isLoading } = useApi() const { api, isLoading } = useApi()
// for loading screen
isLoading.value = true
const { $e } = useNuxtApp() const { $e } = useNuxtApp()
const { t } = useI18n() const { t } = useI18n()
@ -37,7 +34,7 @@ const pagination = reactive({
position: ['bottomCenter'], position: ['bottomCenter'],
}) })
const loadUsers = useDebounceFn(async (page = currentPage.value, limit = currentLimit.value) => { const loadUsers = async (page = currentPage.value, limit = currentLimit.value) => {
currentPage.value = page currentPage.value = page
try { try {
const response: any = await api.orgUsers.list({ const response: any = await api.orgUsers.list({
@ -58,13 +55,11 @@ const loadUsers = useDebounceFn(async (page = currentPage.value, limit = current
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} }
}, 500) }
onMounted(() => { loadUsers()
loadUsers()
})
const updateRole = async (userId: string, roles: string) => { const updateRole = async (userId: string, roles: Roles) => {
try { try {
await api.orgUsers.update(userId, { await api.orgUsers.update(userId, {
roles, roles,
@ -77,30 +72,20 @@ const updateRole = async (userId: string, roles: string) => {
} }
} }
const deleteModalInfo = ref<UserType | null>(null) const deleteUser = async (userId: string) => {
const deleteUser = async () => {
try { try {
await api.orgUsers.delete(deleteModalInfo.value?.id as string) await api.orgUsers.delete(userId)
message.success(t('msg.success.userDeleted')) message.success(t('msg.success.userDeleted'))
await loadUsers() await loadUsers()
if (!users.value.length && currentPage.value !== 1) {
currentPage.value--
loadUsers(currentPage.value)
}
$e('a:org-user:user-deleted') $e('a:org-user:user-deleted')
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} finally {
// closing the modal
isOpen.value = false
deleteModalInfo.value = null
} }
// closing the modal
isOpen.value = false
} }
const resendInvite = async (user: UserType) => { const resendInvite = async (user: User) => {
try { try {
await api.orgUsers.resendInvite(user.id) await api.orgUsers.resendInvite(user.id)
@ -127,7 +112,7 @@ const copyInviteUrl = async (user: User) => {
$e('c:user:copy-url') $e('c:user:copy-url')
} }
const copyPasswordResetUrl = async (user: UserType) => { const copyPasswordResetUrl = async (user: User) => {
try { try {
const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id) const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)
@ -140,72 +125,74 @@ const copyPasswordResetUrl = async (user: UserType) => {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} }
} }
const openInviteModal = () => {
showUserModal.value = true
userMadalKey.value++
}
const openDeleteModal = (user: UserType) => {
deleteModalInfo.value = user
isOpen.value = true
}
</script> </script>
<template> <template>
<div data-testid="nc-super-user-list"> <div data-testid="nc-super-user-list">
<div class="max-w-195 mx-auto"> <div class="max-w-[900px] mx-auto">
<div class="text-2xl my-4 text-left font-weight-bold">User Management</div> <div class="text-xl my-4 text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
<div class="py-2 flex gap-4 items-center justify-between"> <div class="py-2 flex gap-4 items-center">
<a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()"> <a-input-search
<template #prefix> v-model:value="searchText"
<PhMagnifyingGlassBold class="!h-3.5 text-gray-500" /> size="middle"
</template> class="max-w-[300px]"
</a-input> :placeholder="$t('labels.searchUsers')"
<div class="flex gap-3 items-center justify-center"> @blur="loadUsers"
<component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers(currentPage, currentLimit)" /> @keydown.enter="loadUsers"
<NcButton data-testid="nc-super-user-invite" size="small" type="primary" @click="openInviteModal"> >
<div class="flex items-center gap-1"> </a-input-search>
<component :is="iconMap.plus" /> <div class="flex-grow"></div>
Invite new user <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers" />
</div> <a-button
</NcButton> data-testid="nc-super-user-invite"
</div> size="middle"
class="!rounded-md"
type="primary"
@click="
() => {
showUserModal = true
userMadalKey++
}
"
>
<div class="flex items-center gap-1">
<component :is="iconMap.plus" />
{{ $t('activity.inviteUser') }}
</div>
</a-button>
</div> </div>
<div class="w-[780px] mt-5 border-1 rounded-md h-[613px]"> <a-table
<div class="flex w-full bg-gray-50 border-b-1"> :row-key="(record) => record.id"
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span> :data-source="users"
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span> :pagination="pagination"
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">Actions</span> :loading="isLoading"
</div> size="small"
<div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]"> @change="loadUsers($event.current)"
<GeneralLoader size="xlarge" /> >
</div> <template #emptyText>
<!-- if users are empty -->
<div v-else-if="!users.length" class="flex items-center justify-center text-center h-128.25">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
</div> </template>
<section v-else class="tbody">
<div <!-- Email -->
v-for="el of users" <a-table-column key="email" :title="$t('labels.email')" data-index="email">
:key="el.id" <template #default="{ text }">
data-testid="nc-token-list" <div>
class="flex py-3 justify-around px-5 border-b-1" {{ text }}
:class="{ </div>
'py-4': el.roles?.includes('super'), </template>
}" </a-table-column>
>
<span class="text-3.5 text-start w-1/3 pl-5"> <!-- Role -->
{{ el.email }} <a-table-column key="roles" :title="$t('objects.role')" data-index="roles">
</span> <template #default="{ record }">
<span class="text-3.5 text-start w-1/3 pl-18"> <div>
<div v-if="el?.roles?.includes('super')" class="font-weight-bold">Super Admin</div> <div v-if="record.roles.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
<a-select <a-select
v-else v-else
v-model:value="el.roles" v-model:value="record.roles"
class="w-55 nc-user-roles" class="w-[220px] nc-user-roles"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
@change="updateRole(el.id, el.roles as string)" @change="updateRole(record.id, record.roles)"
> >
<a-select-option <a-select-option
class="nc-users-list-role-option" class="nc-users-list-role-option"
@ -229,79 +216,88 @@ const openDeleteModal = (user: UserType) => {
</span> </span>
</a-select-option> </a-select-option>
</a-select> </a-select>
</span> </div>
<span class="w-1/3 pl-43"> </template>
<div </a-table-column>
class="flex items-center gap-2"
:class="{ <!-- &lt;!&ndash; Projects &ndash;&gt;
'opacity-0': el.roles?.includes('super'), <a-table-column key="projectsCount" :title="$t('objects.projects')" data-index="projectsCount">
}" <template #default="{ text }">
> <div>
<NcDropdown :trigger="['click']"> {{ text }}
<MdiDotsVertical </div>
class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)" </template>
/> </a-table-column> -->
<template #overlay>
<NcMenu> <!-- Actions -->
<template v-if="!el.roles?.includes('super')">
<a-table-column key="id" :title="$t('labels.actions')" data-index="id">
<template #default="{ text, record }">
<div v-if="!record.roles.includes('super')" class="flex items-center gap-2">
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt">
<div class="flex flex-row items-center">
<a-button type="text" class="!px-0">
<div class="flex flex-row items-center h-[1.2rem]">
<component :is="iconMap.threeDotHorizontal" class="nc-user-row-action" />
</div>
</a-button>
</div>
<template #overlay>
<a-menu>
<template v-if="record.invite_token">
<a-menu-item>
<!-- Resend invite Email --> <!-- Resend invite Email -->
<NcMenuItem @click="resendInvite(el)"> <div class="flex flex-row items-center py-3" @click="resendInvite(record)">
<component :is="iconMap.email" class="flex text-gray-500" /> <component :is="iconMap.email" class="flex h-[1rem] text-gray-500" />
<div>{{ $t('activity.resendInvite') }}</div> <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
</NcMenuItem> </div>
<NcMenuItem @click="copyInviteUrl(el)"> </a-menu-item>
<component :is="iconMap.copy" class="flex text-gray-500" /> <a-menu-item>
<div>{{ $t('activity.copyInviteURL') }}</div> <div class="flex flex-row items-center py-3" @click="copyInviteUrl(record)">
</NcMenuItem> <component :is="iconMap.copy" class="flex h-[1rem] text-gray-500" />
<NcMenuItem @click="copyPasswordResetUrl(el)"> <div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div>
<component :is="iconMap.copy" class="flex text-gray-500" /> </div>
<div>{{ $t('activity.copyPasswordResetURL') }}</div> </a-menu-item>
</NcMenuItem> </template>
</template> <a-menu-item>
<NcDivider v-if="!el.roles?.includes('super')" /> <div class="flex flex-row items-center py-3" @click="copyPasswordResetUrl(record)">
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)"> <component :is="iconMap.copy" class="flex h-[1rem] text-gray-500" />
<MaterialSymbolsDeleteOutlineRounded /> <div class="text-xs pl-2">{{ $t('activity.copyPasswordResetURL') }}</div>
Remove user </div>
</NcMenuItem> </a-menu-item>
</NcMenu> <a-menu-item>
</template> <div class="flex flex-row items-center py-3" @click="isOpen = true">
</NcDropdown> <!-- Delete user modal -->
</div> <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser(text)">
</span> <template #entity-preview>
</div> <span>
</section> <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
</div> <GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-7"> <div
<a-pagination class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
v-model:current="currentPage" :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
:total="pagination.total" >
show-less-items {{ record.email }}
@change="loadUsers(currentPage, currentLimit)" </div>
/> </div>
</div> </span>
<GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()"> </template>
<template #entity-preview> </GeneralDeleteModal>
<span> <component :is="iconMap.delete" data-testid="nc-super-user-delete" class="flex h-[1rem] text-gray-500" />
<div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4"> <div class="text-xs pl-2">{{ $t('general.delete') }}</div>
<GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon> </div>
<div </a-menu-item>
class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75" </a-menu>
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" </template>
> </a-dropdown>
{{ deleteModalInfo?.email }}
</div>
</div> </div>
</span> <span v-else></span>
</template> </template>
</GeneralDeleteModal> </a-table-column>
</a-table>
<LazyAccountUsersModal :key="userMadalKey" :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" /> <LazyAccountUsersModal :key="userMadalKey" :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" />
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.tbody div:nth-child(10) {
border-bottom: none;
}
</style>

Write Preview
Loading…
Cancel
Save