75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
|
|
import log from "loglevel";
|
|
import { ref, watch } from "vue";
|
|
import SinglePerformanceCriteriaRow from "@/pages/competence/SinglePerformanceCriteriaRow.vue";
|
|
import type { ActionCompetence } from "@/types";
|
|
|
|
interface Props {
|
|
competence: ActionCompetence;
|
|
courseSlug: string;
|
|
showAssessAgain?: boolean;
|
|
isInline?: boolean;
|
|
allOpen?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
showAssessAgain: true,
|
|
isInline: false,
|
|
allOpen: false,
|
|
});
|
|
|
|
log.debug("PerformanceCriteriaRow created", props);
|
|
|
|
const isOpen = ref(false);
|
|
|
|
watch(
|
|
() => props.allOpen,
|
|
(newValue) => {
|
|
isOpen.value = newValue;
|
|
}
|
|
);
|
|
|
|
const togglePerformanceCriteria = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="-mx-8 border-b 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.title }} ({{ competence.competence_id }})
|
|
</h2>
|
|
<ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
|
|
</div>
|
|
</div>
|
|
<ul v-if="isOpen">
|
|
<li class="my-4 border-b pb-4 font-bold">
|
|
{{ $t("a.Leistungsziele") }}
|
|
</li>
|
|
|
|
<li
|
|
v-for="performanceCriteria in competence.performance_criteria"
|
|
:key="performanceCriteria.id"
|
|
class="my-4 border-b pb-4 last:border-0"
|
|
>
|
|
<SinglePerformanceCriteriaRow
|
|
:criterion="performanceCriteria"
|
|
:show-state="false"
|
|
:course-slug="props.courseSlug"
|
|
:show-assess-again="props.showAssessAgain"
|
|
></SinglePerformanceCriteriaRow>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped></style>
|