57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
|
|
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
|
|
import {ref} from "vue";
|
|
|
|
const props = defineProps<{
|
|
competence: object,
|
|
userProgress: object
|
|
}>()
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const togglePerformanceCriteria = () => {
|
|
isOpen.value = !isOpen.value
|
|
};
|
|
|
|
const userStateForCriteria = (id: string) => props.userProgress[id] ? props.userProgress[id] : 'open'
|
|
|
|
</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.description}}</h2>
|
|
<button
|
|
class="transition-transform"
|
|
:class="{'rotate-180': isOpen}">
|
|
<it-icon-arrow-down
|
|
@click="togglePerformanceCriteria()"
|
|
class="h-10 w-10"
|
|
aria-hidden="true"/></button>
|
|
</div>
|
|
<ComptenceProgress
|
|
:total="7"
|
|
:done="3"
|
|
:open="2"
|
|
></ComptenceProgress>
|
|
</div>
|
|
<ul v-if="isOpen">
|
|
<li
|
|
v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
|
|
class="mb-4 pb-4 border-b border-gray-500">
|
|
<LeistungskriteriumRow
|
|
:state="userStateForCriteria(`${performanceCriteria.id}`)"
|
|
:showState="true"
|
|
:unit-url="performanceCriteria.learning_unit.slug"
|
|
:unit="performanceCriteria.pc_id"
|
|
:title="performanceCriteria.title"
|
|
:unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped></style>
|