vbv/client/src/pages/competence/SinglePerformanceCriteriaRo...

46 lines
1.3 KiB
Vue

<script setup lang="ts">
import type { PerformanceCriteria } from "@/types";
interface Props {
criterion: PerformanceCriteria;
courseSlug: string;
showState?: boolean;
showAssessAgain?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
showState: false,
showAssessAgain: true,
});
</script>
<template>
<div class="flex flex-col justify-between lg:flex-row lg:items-center">
<div class="flex flex-row items-center">
<div v-if="showState" class="mr-4 h-8 w-8">
<it-icon-smiley-happy
v-if="criterion.completion_status === 'SUCCESS'"
></it-icon-smiley-happy>
<it-icon-smiley-thinking
v-else-if="criterion.completion_status === 'FAIL'"
></it-icon-smiley-thinking>
<it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
</div>
<div class="mb-4 pr-4 lg:mb-0 lg:mr-8">
{{ criterion.title }}
</div>
</div>
<span class="lg:whitespace-nowrap">
<router-link
v-if="props.showAssessAgain && criterion.learning_unit?.evaluate_url"
class="link"
:to="criterion.learning_unit.evaluate_url"
>
{{ $t("competences.assessAgain", { x: criterion.circle.title }) }}
</router-link>
</span>
</div>
</template>
<style lang="scss" scoped></style>