55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
|
|
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import type { CompetencePage } from "@/types";
|
|
import { ref } from "vue";
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
|
|
const props = defineProps<{
|
|
competence: CompetencePage;
|
|
}>();
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const togglePerformanceCriteria = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
|
|
<div class="mb-4 flex flex-row justify-between items-center">
|
|
<h2 class="text-large">
|
|
{{ competence.competence_id }} {{ competence.title }}
|
|
</h2>
|
|
<button class="transition-transform" :class="{ 'rotate-180': isOpen }">
|
|
<it-icon-arrow-down
|
|
class="h-10 w-10"
|
|
aria-hidden="true"
|
|
@click="togglePerformanceCriteria()"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<ComptenceProgress
|
|
:status-count="competenceStore.calcStatusCount(competence.children)"
|
|
></ComptenceProgress>
|
|
</div>
|
|
<ul v-if="isOpen">
|
|
<li
|
|
v-for="performanceCriteria in competence.children"
|
|
:key="performanceCriteria.id"
|
|
class="mb-4 pb-4 border-b border-gray-500"
|
|
>
|
|
<PerformanceCriteriaRow
|
|
:criteria="performanceCriteria"
|
|
:show-state="true"
|
|
></PerformanceCriteriaRow>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped></style>
|