118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import type { CourseCompletionStatus } from "@/types";
|
|
import * as log from "loglevel";
|
|
import type { Ref } from "vue";
|
|
import { computed, ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
log.debug("CompetencesMainView created");
|
|
|
|
interface MenuItem {
|
|
id: CourseCompletionStatus;
|
|
name: string;
|
|
iconName: string;
|
|
}
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
|
|
const shownCriteria = computed(() => {
|
|
return competenceStore.flatPerformanceCriteria().filter((criteria) => {
|
|
return criteria.completion_status === activeMenuItem.value.id;
|
|
});
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
|
|
const mobileMenuItems: MenuItem[] = [
|
|
{
|
|
id: "fail",
|
|
name: `«${t("selfEvaluation.no")}»`,
|
|
iconName: "it-icon-smiley-thinking",
|
|
},
|
|
{
|
|
id: "success",
|
|
name: `«${t("selfEvaluation.yes")}»`,
|
|
iconName: "it-icon-smiley-happy",
|
|
},
|
|
{
|
|
id: "unknown",
|
|
name: t("competences.notAssessed"),
|
|
iconName: "it-icon-smiley-neutral",
|
|
},
|
|
];
|
|
|
|
const activeMenuItem: Ref<MenuItem> = ref(mobileMenuItems[0]);
|
|
|
|
function updateActiveState(status: CourseCompletionStatus) {
|
|
activeMenuItem.value =
|
|
mobileMenuItems.find((item) => status === item.id) || mobileMenuItems[0];
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<nav class="py-4 lg:pb-8">
|
|
<router-link
|
|
class="btn-text inline-flex items-center pl-0"
|
|
:to="`${competenceStore.competenceProfilePage?.frontend_url}`"
|
|
>
|
|
<it-icon-arrow-left />
|
|
<span>zurück</span>
|
|
</router-link>
|
|
</nav>
|
|
<div class="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10">
|
|
<h1>Einschätzungen</h1>
|
|
<ItDropdownSelect
|
|
v-model="competenceStore.selectedCircle"
|
|
class="w-full lg:w-96 mt-4 lg:mt-0"
|
|
:items="competenceStore.availableCircles"
|
|
></ItDropdownSelect>
|
|
<div class="lg:hidden w-full">
|
|
<ItDropdownSelect
|
|
v-model="activeMenuItem"
|
|
class="w-full lg:w-96 mt-4 lg:mt-0"
|
|
:items="mobileMenuItems"
|
|
></ItDropdownSelect>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-8">
|
|
<div
|
|
class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block justify-between"
|
|
>
|
|
<button
|
|
v-for="item in mobileMenuItems"
|
|
:key="item.id"
|
|
:class="{
|
|
'bg-gray-200': activeMenuItem.id === item.id,
|
|
'mr-6': item.id !== 'unknown',
|
|
}"
|
|
class="py-4 px-2 mr-6 inline-block"
|
|
@click="updateActiveState(item.id)"
|
|
>
|
|
<div class="flex flex-row items-center">
|
|
<span class="inline-block mr-2">{{ item.name }}</span>
|
|
<component :is="item.iconName"></component>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<ul class="mb-6">
|
|
<li
|
|
v-for="criteria in shownCriteria"
|
|
:key="criteria.id"
|
|
class="mb-4 pb-4 border-b"
|
|
>
|
|
<PerformanceCriteriaRow
|
|
:criteria="criteria"
|
|
:show-state="true"
|
|
></PerformanceCriteriaRow>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|