68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
type Criterion,
|
|
getFeedbackEvaluationCaption,
|
|
} from "@/services/selfEvaluationFeedback";
|
|
import type { User } from "@/types";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
criteria: Criterion;
|
|
requester: User;
|
|
}>();
|
|
|
|
const emit = defineEmits(["evaluation"]);
|
|
|
|
const fullname = computed(
|
|
() => `${props.requester.first_name} ${props.requester.last_name}`
|
|
);
|
|
|
|
const description = computed(() => `«${props.criteria.title}»`);
|
|
const currentEvaluation = computed(() => props.criteria.feedback_assessment);
|
|
|
|
const onPassed = () => {
|
|
emit("evaluation", props.criteria, "SUCCESS");
|
|
};
|
|
|
|
const onFailed = () => {
|
|
emit("evaluation", props.criteria, "FAIL");
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-16 space-y-4 bg-gray-200 p-7">
|
|
<span>{{ $t("a.Leistungsziel") }}:</span>
|
|
<div class="text-bold text-xl">{{ description }}</div>
|
|
</div>
|
|
<div class="mt-16 flex flex-row items-center pb-4">
|
|
<span class="text-2xl font-bold">
|
|
{{ $t("a.Kann FULLNAME das?", { FULLNAME: fullname }) }}
|
|
</span>
|
|
<img class="ml-4 h-12 w-12 rounded" :src="requester.avatar_url" :alt="fullname" />
|
|
</div>
|
|
<div class="flex space-x-10">
|
|
<button
|
|
class="inline-flex flex-1 items-center border-2 p-4 text-left"
|
|
:class="currentEvaluation === 'SUCCESS' ? 'border-green-500' : 'border-gray-300'"
|
|
@click="onPassed"
|
|
>
|
|
<it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
|
|
<span class="text-lg font-bold">
|
|
{{ getFeedbackEvaluationCaption("SUCCESS", requester) }}
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="inline-flex flex-1 items-center border-2 p-4 text-left"
|
|
:class="currentEvaluation === 'FAIL' ? 'border-orange-500' : 'border-gray-300'"
|
|
@click="onFailed"
|
|
>
|
|
<it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
|
|
<span class="text-lg font-bold">
|
|
{{ getFeedbackEvaluationCaption("FAIL", requester) }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|