45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { useCompetenceStore } from "@/stores/competence";
|
|
import * as log from "loglevel";
|
|
|
|
log.debug("CompetencesMainView created");
|
|
|
|
const competenceStore = useCompetenceStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-large">
|
|
<nav class="py-4 lg:pb-8">
|
|
<router-link
|
|
v-if="competenceStore.competenceProfilePage"
|
|
class="btn-text inline-flex items-center pl-0"
|
|
:to="competenceStore.competenceProfilePage?.frontend_url"
|
|
>
|
|
<it-icon-arrow-left />
|
|
<span>{{ $t("general.back") }}</span>
|
|
</router-link>
|
|
</nav>
|
|
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
|
|
<h1>Kompetenzen</h1>
|
|
<ItDropdownSelect
|
|
v-model="competenceStore.selectedCircle"
|
|
class="w-full lg:w-96 mt-4 lg:mt-0"
|
|
:items="competenceStore.availableCircles"
|
|
></ItDropdownSelect>
|
|
</div>
|
|
<ul v-if="competenceStore.competenceProfilePage">
|
|
<li
|
|
v-for="competence in competenceStore.competences"
|
|
:key="competence.id"
|
|
class="bg-white p-8 mb-8"
|
|
>
|
|
<CompetenceDetail :competence="competence"></CompetenceDetail>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|