mirror of https://github.com/nocodb/nocodb
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.
182 lines
6.9 KiB
182 lines
6.9 KiB
<script lang="ts" setup> |
|
import { OrderedWorkspaceRoles, WorkspaceUserRoles, parseStringDateTime, timeAgo } from 'nocodb-sdk' |
|
import { storeToRefs, useUserSorts, useWorkspace } from '#imports' |
|
|
|
const { workspaceRoles, loadRoles } = useRoles() |
|
|
|
const workspaceStore = useWorkspace() |
|
|
|
const { removeCollaborator, updateCollaborator: _updateCollaborator } = workspaceStore |
|
|
|
const { collaborators } = storeToRefs(workspaceStore) |
|
|
|
const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortedData } = useUserSorts('Workspace') |
|
|
|
const userSearchText = ref('') |
|
|
|
const filterCollaborators = computed(() => { |
|
if (!userSearchText.value) return collaborators.value ?? [] |
|
|
|
if (!collaborators.value) return [] |
|
|
|
return collaborators.value.filter((collab) => |
|
(collab.display_name || collab.email).toLowerCase().includes(userSearchText.value.toLowerCase()), |
|
) |
|
}) |
|
|
|
const sortedCollaborators = computed(() => { |
|
return handleGetSortedData(filterCollaborators.value, sorts.value) |
|
}) |
|
|
|
const updateCollaborator = async (collab: any, roles: WorkspaceUserRoles) => { |
|
try { |
|
await _updateCollaborator(collab.id, roles) |
|
message.success('Successfully updated user role') |
|
|
|
collaborators.value?.forEach((collaborator) => { |
|
if (collaborator.id === collab.id) { |
|
collaborator.roles = roles |
|
} |
|
}) |
|
} catch (e: any) { |
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
} |
|
} |
|
|
|
const accessibleRoles = computed<WorkspaceUserRoles[]>(() => { |
|
const currentRoleIndex = OrderedWorkspaceRoles.findIndex( |
|
(role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role), |
|
) |
|
if (currentRoleIndex === -1) return [] |
|
return OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r) |
|
}) |
|
|
|
onMounted(async () => { |
|
await loadRoles() |
|
loadSorts() |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="nc-collaborator-table-container mt-4 mx-6 h-[calc(100vh-12rem)]"> |
|
<div class="w-full flex justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2"> |
|
<div class="text-xl">Invite Members By Email</div> |
|
<a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search members"> |
|
<template #prefix> |
|
<PhMagnifyingGlassBold class="!h-3.5 text-gray-500" /> |
|
</template> |
|
</a-input> |
|
</div> |
|
<WorkspaceInviteSection v-if="workspaceRole !== WorkspaceUserRoles.VIEWER" /> |
|
<div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36"> |
|
<a-empty description="No members found" /> |
|
</div> |
|
<div v-else class="nc-collaborators-list mt-6 h-full"> |
|
<div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]"> |
|
<div class="flex flex-row bg-gray-50 min-h-12 items-center"> |
|
<div class="text-gray-700 users-email-grid w-3/8 ml-10 mr-3 flex items-center space-x-2"> |
|
<span> |
|
{{ $t('objects.users') }} |
|
</span> |
|
<LazyAccountUserMenu :direction="sortDirection.email" field="email" :handle-user-sort="saveOrUpdate" /> |
|
</div> |
|
<div class="text-gray-700 user-access-grid w-2/8 mr-3 flex items-center space-x-2"> |
|
<span> |
|
{{ $t('general.access') }} |
|
</span> |
|
<LazyAccountUserMenu :direction="sortDirection.roles" field="roles" :handle-user-sort="saveOrUpdate" /> |
|
</div> |
|
<div class="text-gray-700 date-joined-grid w-2/8 mr-3">{{ $t('title.dateJoined') }}</div> |
|
<div class="text-gray-700 user-access-grid w-1/8">Actions</div> |
|
</div> |
|
|
|
<div class="flex flex-col nc-scrollbar-md"> |
|
<div |
|
v-for="(collab, i) of sortedCollaborators" |
|
:key="i" |
|
class="flex flex-row border-b-1 py-1 min-h-14 items-center justify-around last" |
|
> |
|
<div class="flex gap-3 items-center users-email-grid w-3/8 ml-10"> |
|
<GeneralUserIcon size="base" :name="collab.email" :email="collab.email" /> |
|
<NcTooltip v-if="collab.display_name"> |
|
<template #title> |
|
{{ collab.email }} |
|
</template> |
|
<span class="truncate"> |
|
{{ collab.display_name }} |
|
</span> |
|
</NcTooltip> |
|
<span v-else class="truncate"> |
|
{{ collab.email }} |
|
</span> |
|
</div> |
|
<div class="user-access-grid w-2/8"> |
|
<template v-if="accessibleRoles.includes(collab.roles)"> |
|
<div class="w-[30px]"> |
|
<RolesSelector |
|
:role="collab.roles" |
|
:roles="accessibleRoles" |
|
:description="false" |
|
class="cursor-pointer" |
|
:on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)" |
|
/> |
|
</div> |
|
</template> |
|
<template v-else> |
|
<RolesBadge :role="collab.roles" class="cursor-default" /> |
|
</template> |
|
</div> |
|
<div class="date-joined-grid w-2/8 flex justify-start"> |
|
<NcTooltip class="max-w-full"> |
|
<template #title> |
|
{{ parseStringDateTime(collab.created_at) }} |
|
</template> |
|
<span> |
|
{{ timeAgo(collab.created_at) }} |
|
</span> |
|
</NcTooltip> |
|
</div> |
|
<div class="w-1/8 pl-6"> |
|
<NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :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> |
|
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)"> |
|
<MaterialSymbolsDeleteOutlineRounded /> |
|
Remove user |
|
</NcMenuItem> |
|
</NcMenu> |
|
</template> |
|
</NcDropdown> |
|
</div> |
|
</div> |
|
<div v-if="sortedCollaborators.length === 1" class="pt-12 pb-4 px-2 flex flex-col items-center gap-6 text-center"> |
|
<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> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.badge-text { |
|
@apply text-[14px] pt-1 text-center; |
|
} |
|
|
|
.nc-collaborators-list-table { |
|
@apply min-w-[700px] !w-full border-gray-100 mt-1; |
|
} |
|
|
|
.last:last-child { |
|
border-bottom: none; |
|
} |
|
</style>
|
|
|