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

Write Preview
Loading…
Cancel
Save