flotilla/src/app/components/SpaceRoleMenu.svelte
2026-07-29 15:52:13 -07:00

74 lines
2 KiB
Svelte

<script lang="ts">
import {onMount} from "svelte"
import type {RelayRoleReader} from "@welshman/domain"
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
import Pen from "@assets/icons/pen.svg?dataurl"
import TrashBin from "@assets/icons/trash-bin-2.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Confirm from "@lib/components/Confirm.svelte"
import RoleEdit from "@app/components/RoleEdit.svelte"
import RoleAddMembers from "@app/components/RoleAddMembers.svelte"
import {relayManagement} from "@app/core"
import {pushModal} from "@app/modal"
import {pushToast} from "@app/toast"
type Props = {
url: string
role: RelayRoleReader
onClick: () => void
}
const {url, role, onClick}: Props = $props()
const back = () => history.back()
const editRole = () => pushModal(RoleEdit, {url, role})
const addMembers = () => pushModal(RoleAddMembers, {url, role})
const deleteRole = async () => {
const {error} = await $relayManagement.forUrl(url).deleteRole(role.identifier() ?? "")
if (error) {
pushToast({theme: "error", message: error})
} else {
pushToast({message: "Role deleted!"})
back()
}
}
const confirmDelete = () =>
pushModal(Confirm, {
title: "Delete Role",
message: `Delete the "${role.label()}" role? Members will keep their space membership.`,
confirm: deleteRole,
})
let ul: Element
onMount(() => {
ul.addEventListener("click", onClick)
})
</script>
<ul class="menu whitespace-nowrap rounded-2xl bg-surface p-2" bind:this={ul}>
<li>
<Button onclick={addMembers}>
<Icon icon={AddCircle} />
Add members
</Button>
</li>
<li>
<Button onclick={editRole}>
<Icon icon={Pen} />
Edit role
</Button>
</li>
<li>
<Button class="text-error" onclick={confirmDelete}>
<Icon icon={TrashBin} />
Delete role
</Button>
</li>
</ul>