多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

396 lines
14 KiB

<script lang="ts" setup>
import { OrgUserRoles } from 'nocodb-sdk'
import type { OrgUserReqType, RequestParams, UserType } from 'nocodb-sdk'
import type { User } from '#imports'
import {
extractSdkResponseErrorMsg,
iconMap,
useApi,
useCopy,
useDashboard,
useDebounceFn,
useNuxtApp,
useUserSorts,
} from '#imports'
const { api, isLoading } = useApi()
// for loading screen
isLoading.value = true
const { $e } = useNuxtApp()
const { t } = useI18n()
const { dashboardUrl } = useDashboard()
const { user: loggedInUser } = useGlobal()
const { copy } = useCopy()
const { sorts, loadSorts, handleGetSortedData, toggleSort } = useUserSorts('Org')
const users = ref<UserType[]>([])
const sortedUsers = computed(() => {
return handleGetSortedData(users.value, sorts.value) as UserType[]
})
const currentPage = ref(1)
const currentLimit = ref(10)
const showUserModal = ref(false)
const userMadalKey = ref(0)
const isOpen = ref(false)
const searchText = ref<string>('')
const pagination = reactive({
total: 0,
pageSize: 10,
position: ['bottomCenter'],
})
const loadUsers = useDebounceFn(async (page = currentPage.value, limit = currentLimit.value) => {
currentPage.value = page
try {
const response: any = await api.orgUsers.list({
query: {
limit,
offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
query: searchText.value,
},
} as RequestParams)
if (!response) return
pagination.total = response.pageInfo.totalRows ?? 0
pagination.pageSize = 10
users.value = response.list as UserType[]
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}, 500)
onMounted(() => {
loadUsers()
loadSorts()
})
const updateRole = async (userId: string, roles: string) => {
try {
await api.orgUsers.update(userId, {
roles,
} as OrgUserReqType)
message.success(t('msg.success.roleUpdated'))
users.value.forEach((user) => {
if (user.id === userId) {
user.roles = roles
}
})
$e('a:org-user:role-updated', { role: roles })
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
const deleteModalInfo = ref<UserType | null>(null)
const deleteUser = async () => {
try {
await api.orgUsers.delete(deleteModalInfo.value?.id as string)
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
}
}
const resendInvite = async (user: UserType) => {
try {
await api.orgUsers.resendInvite(user.id)
// Invite email sent successfully
message.success(t('msg.success.inviteEmailSent'))
await loadUsers()
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
$e('a:org-user:resend-invite')
}
const copyInviteUrl = async (user: User) => {
if (!user.invite_token) return
try {
await copy(`${dashboardUrl.value}#/signup/${user.invite_token}`)
// Invite URL copied to clipboard
message.success(t('msg.success.inviteURLCopied'))
} catch (e: any) {
message.error(e.message)
}
$e('c:user:copy-url')
}
const copyPasswordResetUrl = async (user: UserType) => {
try {
const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)
await copy(reset_password_url!)
// Invite URL copied to clipboard
message.success(t('msg.success.passwordResetURLCopied'))
$e('c:user:copy-url')
} catch (e: any) {
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" class="h-full">
<div class="max-w-195 mx-auto h-full">
<div class="text-2xl text-left font-weight-bold mb-4" data-rec="true">{{ $t('title.userMgmt') }}</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" data-rec="true">
<component :is="iconMap.plus" />
{{ $t('activity.inviteUser') }}
</div>
</NcButton>
</div>
</div>
<div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5">
<div class="flex w-full bg-gray-50 border-1 rounded-t-md">
<LazyAccountHeaderWithSorter
class="py-3.5 text-gray-500 font-medium text-3.5 w-2/3 text-start pl-6"
:header="$t('objects.users')"
:active-sort="sorts"
field="email"
:toggle-sort="toggleSort"
/>
<LazyAccountHeaderWithSorter
class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start"
:header="$t('general.access')"
:active-sort="sorts"
field="roles"
:toggle-sort="toggleSort"
/>
<div class="flex py-3.5 text-gray-500 font-medium text-3.5 w-28 justify-end mr-4" data-rec="true">
{{ $t('labels.action') }}
</div>
</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-full">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
</div>
<section v-else class="tbody h-[calc(100%-4rem)] nc-scrollbar-md border-t-0 !overflow-auto">
<div
v-for="el of sortedUsers"
:key="el.id"
data-testid="nc-token-list"
class="user flex py-3 justify-around px-1 border-b-1 border-l-1 border-r-1"
:class="{
'py-4': el.roles?.includes('super'),
}"
>
<div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
<NcTooltip v-if="el.display_name">
<template #title>
{{ el.email }}
</template>
<GeneralTruncateText :length="29">
{{ el.display_name }}
</GeneralTruncateText>
</NcTooltip>
<GeneralTruncateText v-else :length="29">
{{ el.email }}
</GeneralTruncateText>
</div>
<div class="text-3.5 text-start w-1/3">
<div v-if="el?.roles?.includes('super')" class="font-weight-bold" data-rec="true">
{{ $t('labels.superAdmin') }}
</div>
<NcSelect
v-else-if="el.id !== loggedInUser?.id"
v-model:value="el.roles"
class="w-55 nc-user-roles"
:dropdown-match-select-width="false"
dropdown-class-name="max-w-64"
@change="updateRole(el.id, el.roles as string)"
>
<a-select-option
class="nc-users-list-role-option"
:value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)"
>
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<GeneralIcon
v-if="el?.roles === OrgUserRoles.CREATOR"
id="nc-selected-item-icon"
icon="check"
class="w-4 h-4 text-primary"
/>
</div>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgCreator') }}
</div>
</a-select-option>
<a-select-option
class="nc-users-list-role-option"
:value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)"
>
<div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<GeneralIcon
v-if="el.roles === OrgUserRoles.VIEWER"
id="nc-selected-item-icon"
icon="check"
class="w-4 h-4 text-primary"
/>
</div>
<div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgViewer') }}
</div>
</a-select-option>
</NcSelect>
<div v-else class="font-weight-bold" data-rec="true">
{{ $t(`objects.roleType.orgLevelCreator`) }}
</div>
</div>
<span class="w-26 flex items-center justify-end mr-4">
<div
class="flex items-center gap-2"
:class="{
'opacity-0 pointer-events-none': el.roles?.includes('super'),
}"
>
<NcDropdown :trigger="['click']">
<NcButton size="xsmall" type="ghost">
<MdiDotsVertical
class="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)"
/>
</NcButton>
<template #overlay>
<NcMenu>
<template v-if="!el.roles?.includes('super')">
<!-- Resend invite Email -->
<NcMenuItem @click="resendInvite(el)">
<component :is="iconMap.email" class="flex text-gray-600" />
<div data-rec="true">{{ $t('activity.resendInvite') }}</div>
</NcMenuItem>
<NcMenuItem @click="copyInviteUrl(el)">
<component :is="iconMap.copy" class="flex text-gray-600" />
<div data-rec="true">{{ $t('activity.copyInviteURL') }}</div>
</NcMenuItem>
<NcMenuItem @click="copyPasswordResetUrl(el)">
<component :is="iconMap.copy" class="flex text-gray-600" />
<div>{{ $t('activity.copyPasswordResetURL') }}</div>
</NcMenuItem>
</template>
<template v-if="el.id !== loggedInUser?.id">
<NcDivider v-if="!el.roles?.includes('super')" />
<NcMenuItem data-rec="true" class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)">
<MaterialSymbolsDeleteOutlineRounded />
{{ $t('general.remove') }} {{ $t('objects.user') }}
</NcMenuItem>
</template>
</NcMenu>
</template>
</NcDropdown>
</div>
</span>
</div>
<div
v-if="sortedUsers.length === 1"
class="user pt-12 pb-4 px-2 flex flex-col items-center gap-6 text-center border-b-1 border-l-1 border-r-1"
>
<div class="text-2xl text-gray-800 font-bold">
{{ $t('placeholder.inviteYourTeam') }}
</div>
<div class="text-sm text-gray-700">
{{ $t('placeholder.inviteYourTeamLabel') }}
</div>
<img src="~assets/img/placeholder/invite-team.png" class="!w-[30rem] flex-none" />
</div>
</section>
</div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
<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="text-ellipsis overflow-hidden select-none w-full pl-1.75"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
>
{{ deleteModalInfo?.email }}
</div>
</div>
</span>
</template>
</GeneralDeleteModal>
<LazyAccountUsersModal :key="userMadalKey" :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" />
</div>
</div>
</template>
<style scoped>
.user:last-child {
@apply rounded-b-md;
}
</style>