84 lines
2.2 KiB
Svelte
84 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { Button } from './common'
|
|
import Popover from './meltComponents/Popover.svelte'
|
|
|
|
import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
|
|
import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
|
|
import { MailPlus } from 'lucide-svelte'
|
|
|
|
interface Props {
|
|
inviteUser: (email: string, selected: 'operator' | 'developer' | 'admin') => Promise<void>
|
|
}
|
|
|
|
const { inviteUser }: Props = $props()
|
|
|
|
let email: string = $state('')
|
|
|
|
function handleKeyUp(event: KeyboardEvent) {
|
|
const key = event.key
|
|
if (key === 'Enter') {
|
|
event.preventDefault()
|
|
inviteUser(email, selected)
|
|
email = ''
|
|
}
|
|
}
|
|
|
|
let selected: 'operator' | 'developer' | 'admin' = $state('developer')
|
|
</script>
|
|
|
|
<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
|
|
{#snippet trigger()}
|
|
<Button
|
|
variant="default"
|
|
unifiedSize="md"
|
|
nonCaptureEvent={true}
|
|
startIcon={{ icon: MailPlus }}
|
|
>
|
|
Invite
|
|
</Button>
|
|
{/snippet}
|
|
{#snippet content()}
|
|
<div class="flex flex-col gap-2 p-4">
|
|
<input
|
|
type="email"
|
|
onkeyup={handleKeyUp}
|
|
placeholder="email"
|
|
bind:value={email}
|
|
class="mr-4"
|
|
/>
|
|
<ToggleButtonGroup bind:selected>
|
|
{#snippet children({ item })}
|
|
<ToggleButton
|
|
value="operator"
|
|
label="Operator"
|
|
tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
|
|
{item}
|
|
/>
|
|
|
|
<ToggleButton
|
|
value="developer"
|
|
label="Developer"
|
|
tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
|
|
{item}
|
|
/>
|
|
|
|
<ToggleButton
|
|
value="admin"
|
|
label="Admin"
|
|
tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
|
|
{item}
|
|
/>
|
|
{/snippet}
|
|
</ToggleButtonGroup>
|
|
<Button
|
|
variant="accent"
|
|
unifiedSize="md"
|
|
on:click={() => inviteUser(email, selected)}
|
|
disabled={!email || email.trim() === ''}
|
|
>
|
|
Invite
|
|
</Button>
|
|
</div>
|
|
{/snippet}
|
|
</Popover>
|