Mike
57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex flex-col-reverse md:justify-between md:flex-row md:gap-x-4">
|
|
<div class="relative w-full md:max-w-sm mt-6 md:mt-0">
|
|
<FormTextInput
|
|
name="search"
|
|
:custom-icon="MagnifyingGlassIcon"
|
|
color="foundation"
|
|
full-width
|
|
search
|
|
show-clear
|
|
:placeholder="searchPlaceholder"
|
|
class="rounded-md border border-outline-3"
|
|
v-bind="bind"
|
|
v-on="on"
|
|
/>
|
|
</div>
|
|
<FormButton
|
|
v-if="isWorkspaceAdmin"
|
|
@click="() => (isInviteDialogOpen = !isInviteDialogOpen)"
|
|
>
|
|
Invite
|
|
</FormButton>
|
|
<WorkspaceInviteDialog
|
|
v-model:open="isInviteDialogOpen"
|
|
:workspace-id="workspaceId"
|
|
:workspace="workspace"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
|
|
import { useDebouncedTextInput } from '@speckle/ui-components'
|
|
import type { SettingsWorkspacesMembersTableHeader_WorkspaceFragment } from '~/lib/common/generated/gql/graphql'
|
|
import { graphql } from '~/lib/common/generated/gql'
|
|
import { Roles } from '@speckle/shared'
|
|
|
|
graphql(`
|
|
fragment SettingsWorkspacesMembersTableHeader_Workspace on Workspace {
|
|
id
|
|
role
|
|
...WorkspaceInviteDialog_Workspace
|
|
}
|
|
`)
|
|
|
|
const props = defineProps<{
|
|
searchPlaceholder: string
|
|
workspaceId: string
|
|
workspace?: SettingsWorkspacesMembersTableHeader_WorkspaceFragment
|
|
}>()
|
|
|
|
const search = defineModel<string>('search')
|
|
const { on, bind } = useDebouncedTextInput({ model: search })
|
|
const isInviteDialogOpen = ref(false)
|
|
|
|
const isWorkspaceAdmin = computed(() => props.workspace?.role === Roles.Workspace.Admin)
|
|
</script>
|