54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const emit = defineEmits(['select']);
|
|
|
|
const props = defineProps({
|
|
mainRoles: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
selectedDepartment: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const departmentMainRoles = computed(() => {
|
|
return props.mainRoles.filter(role =>
|
|
role.department && role.department.id === props.selectedDepartment.id
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold mb-2">
|
|
{{ $t('mainRole.inDepartment', { department: selectedDepartment.name }) }}
|
|
</h2>
|
|
<p class="text-gray-600">{{ $t('mainRole.select.description') }}</p>
|
|
</div>
|
|
|
|
<div v-if="departmentMainRoles.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<button
|
|
v-for="mainRole in departmentMainRoles"
|
|
:key="mainRole.id"
|
|
@click="$emit('select', mainRole)"
|
|
class="group p-6 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all duration-200 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
|
>
|
|
<h3 class="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
|
|
{{ mainRole.name }}
|
|
</h3>
|
|
<p class="text-gray-600 text-sm">
|
|
{{ mainRole.description}}
|
|
</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-12">
|
|
<p class="text-gray-500 text-lg">{{ $t('mainRole.noRolesInDepartment') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|