68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import type { CompetencePage } from "@/types";
|
|
import { ref } from "vue";
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
|
|
interface Props {
|
|
competence: CompetencePage;
|
|
courseSlug: string;
|
|
showAssessAgain?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
showAssessAgain: true,
|
|
});
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const togglePerformanceCriteria = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
|
|
<div
|
|
class="mb-4 flex flex-row justify-between items-center"
|
|
role="button"
|
|
aria-pressed="false"
|
|
@click="togglePerformanceCriteria()"
|
|
>
|
|
<h2 class="text-large">
|
|
{{ competence.competence_id }} {{ competence.title }}
|
|
</h2>
|
|
<div class="transition-transform" :class="{ 'rotate-180': isOpen }">
|
|
<it-icon-arrow-down class="h-10 w-10" aria-hidden="true" />
|
|
</div>
|
|
</div>
|
|
<ItProgress
|
|
:status-count="
|
|
competenceStore.calcStatusCount(
|
|
competenceStore.criteriaByCompetence(competence)
|
|
)
|
|
"
|
|
></ItProgress>
|
|
</div>
|
|
<ul v-if="isOpen">
|
|
<li
|
|
v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
|
|
:key="performanceCriteria.id"
|
|
class="mb-4 pb-4 border-b"
|
|
>
|
|
<PerformanceCriteriaRow
|
|
:criteria="performanceCriteria"
|
|
:show-state="true"
|
|
:course-slug="props.courseSlug"
|
|
:show-assess-again="props.showAssessAgain"
|
|
></PerformanceCriteriaRow>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped></style>
|