83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import PerformanceCriteriaRow from "@/pages/competence-old/PerformanceCriteriaRow.vue";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import type { CompetencePage } from "@/types";
|
|
import log from "loglevel";
|
|
import { ref } from "vue";
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
|
|
interface Props {
|
|
competence: CompetencePage;
|
|
courseSlug: string;
|
|
showAssessAgain?: boolean;
|
|
isInline?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
showAssessAgain: true,
|
|
isInline: false,
|
|
});
|
|
|
|
log.debug("PerformanceCriteriaRow created", props);
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const togglePerformanceCriteria = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div :class="{ 'mb-4 border-b pb-8': isOpen }" class="-mx-8 px-8">
|
|
<div
|
|
class="flex flex-row items-center justify-between"
|
|
:class="props.isInline ? '' : 'mb-4'"
|
|
role="button"
|
|
aria-pressed="false"
|
|
@click="togglePerformanceCriteria()"
|
|
>
|
|
<h2 :class="props.isInline ? ['text-bold', 'w-2/5'] : 'text-large'">
|
|
{{ competence.competence_id }} {{ competence.title }}
|
|
</h2>
|
|
<ItProgress
|
|
v-if="isInline"
|
|
class="w-[330px]"
|
|
:status-count="
|
|
competenceStore.calcStatusCount(
|
|
competenceStore.criteriaByCompetence(competence)
|
|
)
|
|
"
|
|
></ItProgress>
|
|
<ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
|
|
</div>
|
|
<ItProgress
|
|
v-if="!isInline"
|
|
: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 border-b pb-4 last:border-0"
|
|
>
|
|
<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>
|