80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
type FeedbackRequest,
|
|
getFeedbackEvaluationCaption,
|
|
getSelfEvaluationCaption,
|
|
getSmiley,
|
|
} from "@/services/selfEvaluationFeedback";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
feedback: FeedbackRequest;
|
|
}>();
|
|
|
|
const feedbackRequesterAvatar = computed(() => {
|
|
return props.feedback.feedback_requester_user.avatar_url;
|
|
});
|
|
|
|
const feedbackRequesterName = computed(() => {
|
|
return `${props.feedback.feedback_requester_user.first_name} ${props.feedback.feedback_requester_user.last_name}`;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-for="(criteria, index) in props.feedback.criteria"
|
|
:key="criteria.course_completion_id"
|
|
class="pb-10"
|
|
>
|
|
<span class="text-gray-900">{{ criteria.title }}</span>
|
|
<div class="mt-3 grid grid-cols-2 border-2 border-gray-200">
|
|
<!-- Feedback requester assessment -->
|
|
<div class="flex h-12 items-center pl-4">
|
|
<b>
|
|
{{
|
|
$t("a.Selbsteinschätzung von FEEDBACK_REQUESTER_NAME", {
|
|
FEEDBACK_REQUESTER_NAME: feedbackRequesterName,
|
|
})
|
|
}}
|
|
</b>
|
|
<img class="ml-2 h-7 w-7 rounded-full" :src="feedbackRequesterAvatar" />
|
|
</div>
|
|
<div class="flex items-center justify-start space-x-2 bg-white">
|
|
<component :is="getSmiley(criteria.self_assessment)" class="h-6 w-6" />
|
|
<span>{{ getSelfEvaluationCaption(criteria.self_assessment) }}</span>
|
|
</div>
|
|
|
|
<!-- Feedback provider assessment -->
|
|
<div class="flex h-12 items-center bg-gray-200 pl-4">
|
|
<b>{{ $t("a.Deine Fremdeinschätzung") }}</b>
|
|
</div>
|
|
<div class="flex items-center justify-between bg-gray-200">
|
|
<div class="flex justify-start space-x-2">
|
|
<component :is="getSmiley(criteria.feedback_assessment)" class="h-6 w-6" />
|
|
<span>
|
|
{{
|
|
getFeedbackEvaluationCaption(
|
|
criteria.feedback_assessment,
|
|
feedback.feedback_requester_user
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
<router-link
|
|
v-if="!feedback.feedback_submitted"
|
|
:to="{
|
|
name: 'mentorSelfEvaluationFeedback',
|
|
params: { learningUnitId: feedback.learning_unit_id },
|
|
query: { step: index },
|
|
}"
|
|
class="mr-4 underline"
|
|
>
|
|
{{ $t("a.Bearbeiten") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|