127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
|
<UModal v-model:open="open" title="Mitglied einladen" description="Laden Sie ein Mitglied zu Ihrer Organisation ein">
|
|
<UButton
|
|
v-if="canInviteMembers"
|
|
icon="i-lucide-mail-plus"
|
|
variant="outline"
|
|
size="sm"
|
|
@click="open = true"
|
|
>
|
|
Mitglied einladen
|
|
</UButton>
|
|
|
|
<template #body>
|
|
<UForm :state="form" class="space-y-4" @submit="handleSubmit">
|
|
<UFormField label="E-Mail" name="email">
|
|
<UInput v-model="form.email" type="email" placeholder="E-Mail" class="w-full" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Rolle" name="role">
|
|
<USelect
|
|
v-model="form.role"
|
|
:items="availableRoles"
|
|
placeholder="Rolle auswählen"
|
|
value-key="value"
|
|
class="w-full"
|
|
>
|
|
<template #option="{ option }">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon :name="option.icon" :class="`text-${option.color}-500`" />
|
|
<div>
|
|
<div class="font-medium">{{ option.label }}</div>
|
|
<div class="text-xs text-gray-500">{{ option.description }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
</UFormField>
|
|
|
|
<div class="flex justify-end">
|
|
<UButton type="submit" :loading="loading">
|
|
{{ loading ? 'Einladen...' : 'Einladen' }}
|
|
</UButton>
|
|
</div>
|
|
</UForm>
|
|
</template>
|
|
</UModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ROLES, type LegalRole } from '~/server/utils/permissions'
|
|
|
|
const { canInviteMembers } = usePermissions()
|
|
const { inviteMember } = useBetterAuth()
|
|
|
|
const open = ref(false)
|
|
const loading = ref(false)
|
|
|
|
const form = ref({
|
|
email: '',
|
|
role: ROLES.EMPLOYEE as LegalRole
|
|
})
|
|
|
|
const availableRoles = computed(() => {
|
|
return Object.values(ROLES).map(role => {
|
|
const roleInfo = getRoleInfo(role)
|
|
return {
|
|
label: roleInfo.name,
|
|
value: role,
|
|
description: roleInfo.description,
|
|
color: roleInfo.color,
|
|
icon: roleInfo.icon
|
|
}
|
|
})
|
|
})
|
|
|
|
function getRoleInfo(role: LegalRole) {
|
|
const roleInfo = {
|
|
[ROLES.EMPLOYER]: {
|
|
name: 'Arbeitgeber',
|
|
description: 'Kann Anträge genehmigen und Vereinbarungen unterzeichnen',
|
|
color: 'blue',
|
|
icon: 'i-lucide-briefcase'
|
|
},
|
|
[ROLES.EMPLOYEE]: {
|
|
name: 'Arbeitnehmer',
|
|
description: 'Kann eigene Anträge einsehen und kommentieren',
|
|
color: 'green',
|
|
icon: 'i-lucide-user'
|
|
},
|
|
[ROLES.WORKS_COUNCIL_MEMBER]: {
|
|
name: 'Betriebsrat',
|
|
description: 'Kann Anträge prüfen und Vereinbarungen unterzeichnen',
|
|
color: 'purple',
|
|
icon: 'i-lucide-users'
|
|
},
|
|
[ROLES.ADMIN]: {
|
|
name: 'Administrator',
|
|
description: 'Vollzugriff auf Organisationsverwaltung',
|
|
color: 'red',
|
|
icon: 'i-lucide-settings'
|
|
}
|
|
}
|
|
|
|
return roleInfo[role] || { name: role, description: '', color: 'gray', icon: 'i-lucide-circle' }
|
|
}
|
|
|
|
watch(open, (val: boolean) => {
|
|
if (val) {
|
|
form.value = {
|
|
email: '',
|
|
role: ROLES.EMPLOYEE
|
|
}
|
|
}
|
|
})
|
|
|
|
async function handleSubmit() {
|
|
loading.value = true
|
|
try {
|
|
await inviteMember(form.value.email, form.value.role)
|
|
open.value = false
|
|
useToast().add({ title: 'Einladung gesendet', color: 'success' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|