Mike
82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<SettingsWorkspacesMembersTableHeader
|
|
search-placeholder="Search guests..."
|
|
:workspace-id="workspaceId"
|
|
:workspace="workspace"
|
|
/>
|
|
<LayoutTable
|
|
class="mt-6 md:mt-8"
|
|
:columns="[
|
|
{ id: 'name', header: 'Name', classes: 'col-span-3' },
|
|
{ id: 'company', header: 'Company', classes: 'col-span-3' },
|
|
{ id: 'verified', header: 'Status', classes: 'col-span-3' }
|
|
]"
|
|
:items="guests"
|
|
>
|
|
<template #name="{ item }">
|
|
<div class="flex items-center gap-2">
|
|
<UserAvatar :user="item" />
|
|
<span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
<template #company="{ item }">
|
|
<span class="text-body-xs text-foreground">
|
|
{{ item.company ? item.company : '-' }}
|
|
</span>
|
|
</template>
|
|
<template #verified="{ item }">
|
|
<span class="text-body-xs text-foreground-2">
|
|
{{ item.verified ? 'Verified' : 'Unverified' }}
|
|
</span>
|
|
</template>
|
|
</LayoutTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Todo: Enable searching once supported
|
|
import type { SettingsWorkspacesMembersMembersTable_WorkspaceFragment } from '~~/lib/common/generated/gql/graphql'
|
|
import { graphql } from '~/lib/common/generated/gql'
|
|
import { Roles } from '@speckle/shared'
|
|
|
|
graphql(`
|
|
fragment SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator on WorkspaceCollaborator {
|
|
id
|
|
role
|
|
user {
|
|
id
|
|
avatar
|
|
name
|
|
company
|
|
verified
|
|
}
|
|
}
|
|
`)
|
|
|
|
graphql(`
|
|
fragment SettingsWorkspacesMembersGuestsTable_Workspace on Workspace {
|
|
id
|
|
...SettingsWorkspacesMembersTableHeader_Workspace
|
|
team {
|
|
id
|
|
...SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator
|
|
}
|
|
}
|
|
`)
|
|
|
|
const props = defineProps<{
|
|
workspace?: SettingsWorkspacesMembersMembersTable_WorkspaceFragment
|
|
workspaceId: string
|
|
}>()
|
|
|
|
const guests = computed(() =>
|
|
(props.workspace?.team || [])
|
|
.filter(({ role }) => role === Roles.Workspace.Guest)
|
|
.map(({ user, ...rest }) => ({
|
|
...user,
|
|
...rest
|
|
}))
|
|
)
|
|
</script>
|