122 lines
3.3 KiB
Vue
122 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 } = useOrganizationStore()
|
|
|
|
const open = ref(false)
|
|
const loading = ref(false)
|
|
|
|
const form = ref({
|
|
email: '',
|
|
role: ROLES.EMPLOYEE as LegalRole
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
|
|
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: t('roles.employer'),
|
|
description: 'Kann Anträge genehmigen und Vereinbarungen unterzeichnen',
|
|
color: 'blue',
|
|
icon: 'i-lucide-briefcase'
|
|
},
|
|
[ROLES.EMPLOYEE]: {
|
|
name: t('roles.employee'),
|
|
description: 'Kann eigene Anträge einsehen und kommentieren',
|
|
color: 'green',
|
|
icon: 'i-lucide-user'
|
|
},
|
|
[ROLES.WORKS_COUNCIL_MEMBER]: {
|
|
name: t('roles.worksCouncilMember'),
|
|
description: 'Kann Anträge prüfen und Vereinbarungen unterzeichnen',
|
|
color: 'purple',
|
|
icon: 'i-lucide-users'
|
|
},
|
|
[ROLES.ADMIN]: {
|
|
name: t('roles.admin'),
|
|
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
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|