|
|
@ -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="{ |
|
|
|
<!-- <!– Projects –> |
|
|
|
'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> |
|
|
|
|
|
|
|