ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reformat code

This commit is contained in:
Daniel Egger 2022-10-07 10:12:52 +02:00
parent 3fa0521623
commit 22e3fce59e
8 changed files with 554 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/components/competences/CompetenceDetail.vue
View File

@ -1,54 +1,52 @@
<script setup lang="ts"> <script setup lang="ts">
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue' import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue' import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
import {ref} from "vue"; import { ref } from "vue";
const props = defineProps<{ const props = defineProps<{
competence: object, competence: object;
userProgress: object userProgress: object;
}>() }>();
const isOpen = ref(false); const isOpen = ref(false);
const togglePerformanceCriteria = () => { const togglePerformanceCriteria = () => {
isOpen.value = !isOpen.value isOpen.value = !isOpen.value;
}; };
const userStateForCriteria = (id: string) => props.userProgress[id] ? props.userProgress[id] : 'open' const userStateForCriteria = (id: string) =>
props.userProgress[id] ? props.userProgress[id] : "open";
</script> </script>
<template> <template>
<div> <div>
<div :class="{'pb-8 border-b border-gray-500 mb-4': isOpen}" <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
class="-mx-8 px-8">
<div class="mb-4 flex flex-row justify-between items-center"> <div class="mb-4 flex flex-row justify-between items-center">
<h2 class="text-large">{{competence.description}}</h2> <h2 class="text-large">{{ competence.description }}</h2>
<button <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
class="transition-transform"
:class="{'rotate-180': isOpen}">
<it-icon-arrow-down <it-icon-arrow-down
@click="togglePerformanceCriteria()" @click="togglePerformanceCriteria()"
class="h-10 w-10" class="h-10 w-10"
aria-hidden="true"/></button> aria-hidden="true"
/>
</button>
</div> </div>
<ComptenceProgress <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
:total="7"
:done="3"
:open="2"
></ComptenceProgress>
</div> </div>
<ul v-if="isOpen"> <ul v-if="isOpen">
<li <li
v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description" v-for="performanceCriteria in competence.criteria"
class="mb-4 pb-4 border-b border-gray-500"> :key="performanceCriteria.description"
class="mb-4 pb-4 border-b border-gray-500"
>
<LeistungskriteriumRow <LeistungskriteriumRow
:state="userStateForCriteria(`${performanceCriteria.id}`)" :state="userStateForCriteria(`${performanceCriteria.id}`)"
:showState="true" :showState="true"
:unit-url="performanceCriteria.learning_unit.slug" :unit-url="performanceCriteria.learning_unit.slug"
:unit="performanceCriteria.pc_id" :unit="performanceCriteria.pc_id"
:title="performanceCriteria.title" :title="performanceCriteria.title"
:unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow> :unit-id="performanceCriteria.learning_unit.id"
></LeistungskriteriumRow>
</li> </li>
</ul> </ul>
</div> </div>

22
client/src/components/competences/CompetenceProgress.vue
View File

@ -1,25 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ const props = defineProps<{
total: number total: number;
done: number done: number;
open: number open: number;
}>() }>();
const done = 100 * props.done / props.total; const done = (100 * props.done) / props.total;
const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done; const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
</script> </script>
<template> <template>
<span class="relative w-full h-2 bg-gray-300 inline-block"> <span class="relative w-full h-2 bg-gray-300 inline-block">
<span v-if="notDone !== done" <span
v-if="notDone !== done"
class="absolute bg-orange-500 h-full" class="absolute bg-orange-500 h-full"
:style="{width: `${notDone}%`}" :style="{ width: `${notDone}%` }"
></span> ></span>
<span v-if="done > 0" <span
v-if="done > 0"
class="absolute bg-green-500 h-full" class="absolute bg-green-500 h-full"
:style="{width: `${done}%`}" :style="{ width: `${done}%` }"
></span> ></span>
</span> </span>
</template> </template>

38
client/src/components/competences/LeistungskriteriumRow.vue
View File

@ -1,25 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
title: string title: string;
unit: string unit: string;
unitUrl: string unitUrl: string;
unitId: number unitId: number;
state?: string // maybe enum state?: string; // maybe enum
showState?: boolean showState?: boolean;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
title: '', title: "",
unit: '', unit: "",
unitUrl: '', unitUrl: "",
unitId: -1, unitId: -1,
state: 'open', state: "open",
showState: false showState: false,
}) });
</script> </script>
<template> <template>
@ -27,12 +23,16 @@ const props = withDefaults(defineProps<Props>(), {
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div v-if="showState" class="h-8 w-8 mr-4"> <div v-if="showState" class="h-8 w-8 mr-4">
<it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy> <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
<it-icon-smiley-thinking v-else-if="state === 'notDone'"></it-icon-smiley-thinking> <it-icon-smiley-thinking
v-else-if="state === 'notDone'"
></it-icon-smiley-thinking>
<it-icon-smiley-neutral v-else></it-icon-smiley-neutral> <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
</div> </div>
<div class="pr-5 lg:mr-10 mb-4 lg:mb-0"> <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
<h4 class="text-bold mb-2">{{title}}</h4> <h4 class="text-bold mb-2">{{ title }}</h4>
<p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p> <p>
Lerneinheit: <a :href="unitUrl">{{ unit }}</a>
</p>
</div> </div>
</div> </div>
<span class="whitespace-nowrap">Sich nochmals einschätzen</span> <span class="whitespace-nowrap">Sich nochmals einschätzen</span>

169
client/src/pages/CompetencePerfomanceCriteriaView.vue
View File

@ -1,99 +1,103 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel' import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue' import * as log from "loglevel";
import {computed, Ref, ref} from "vue"; import { computed, Ref, ref } from "vue";
log.debug('CompetencesMainView created') log.debug("CompetencesMainView created");
enum UserCriteriaState { enum UserCriteriaState {
Open = 'open', Open = "open",
Done = 'done', Done = "done",
Nok = 'notDone' Nok = "notDone",
} }
const data = { const data = {
"id": 340, id: 340,
"title": "Kompetenzprofil", title: "Kompetenzprofil",
"slug": "versicherungsvermittlerin-competence", slug: "versicherungsvermittlerin-competence",
"type": "competence.CompetenceProfilePage", type: "competence.CompetenceProfilePage",
"translation_key": "a3adb9ac-606d-42fd-b115-842af3706926", translation_key: "a3adb9ac-606d-42fd-b115-842af3706926",
"course": { course: {
"id": -1, id: -1,
"title": "Versicherungsvermittler/in", title: "Versicherungsvermittler/in",
"category_name": "Handlungsfeld" category_name: "Handlungsfeld",
}, },
"children": [ children: [
{ {
"id": 341, id: 341,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
"translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569", type: "competence.PerformanceCriteria",
"pc_id": "B1.3 Fahrzeug", translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
"learning_unit": { pc_id: "B1.3 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 342, id: 342,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
"translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae", type: "competence.PerformanceCriteria",
"pc_id": "B2.1 Fahrzeug", translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
"learning_unit": { pc_id: "B2.1 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 343, id: 343,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
"translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc", type: "competence.PerformanceCriteria",
"pc_id": "B2.2 Fahrzeug", translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
"learning_unit": { pc_id: "B2.2 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
} },
] ],
} };
const userProgress = { const userProgress = {
341: 'open', 341: "open",
342: 'notDone', 342: "notDone",
343: 'done' 343: "done",
} };
const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok) const activeState: Ref<UserCriteriaState> = ref(UserCriteriaState.Nok);
const shownCriteria = computed(() => { const shownCriteria = computed(() => {
return data.children.filter(criteria => userProgress[`${criteria.id}`] === activeState.value) return data.children.filter(
}) (criteria) => userProgress[`${criteria.id}`] === activeState.value
);
});
</script> </script>
<template> <template>
<div class="mx-auto max-w-5xl"> <div class="mx-auto max-w-5xl">
<nav> <nav>
<a <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
class="block mb-8 cursor-pointer flex items-center" ><it-icon-arrow-left /><span>zurück</span></a
@click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a> >
</nav> </nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-10"> <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
<h1>Einschätzungen</h1> <h1>Einschätzungen</h1>
@ -102,25 +106,30 @@ const shownCriteria = computed(() => {
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>--> <!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div> </div>
<div class="bg-white p-8"> <div class="bg-white p-8">
<div class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"> <div
class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
>
<button <button
@click="activeState = UserCriteriaState.Nok" @click="activeState = UserCriteriaState.Nok"
:class="{'bg-gray-200': activeState === UserCriteriaState.Nok}" :class="{ 'bg-gray-200': activeState === UserCriteriaState.Nok }"
class="flex flex-row items-center py-4 px-2 mr-6"> class="flex flex-row items-center py-4 px-2 mr-6"
>
<span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span> <span class="inline-block mr-2">«Das muss ich nochmals anschauen»</span>
<span><it-icon-smiley-thinking></it-icon-smiley-thinking></span> <span><it-icon-smiley-thinking></it-icon-smiley-thinking></span>
</button> </button>
<button <button
@click="activeState = UserCriteriaState.Done" @click="activeState = UserCriteriaState.Done"
:class="{'bg-gray-200': activeState === UserCriteriaState.Done}" :class="{ 'bg-gray-200': activeState === UserCriteriaState.Done }"
class="flex flex-row items-center py-4 px-2 mr-6"> class="flex flex-row items-center py-4 px-2 mr-6"
>
<span class="inline-block mr-2">«Ja, ich kann das»</span> <span class="inline-block mr-2">«Ja, ich kann das»</span>
<span><it-icon-smiley-happy></it-icon-smiley-happy></span> <span><it-icon-smiley-happy></it-icon-smiley-happy></span>
</button> </button>
<button <button
@click="activeState = UserCriteriaState.Open" @click="activeState = UserCriteriaState.Open"
:class="{'bg-gray-200': activeState === UserCriteriaState.Open}" :class="{ 'bg-gray-200': activeState === UserCriteriaState.Open }"
class="flex flex-row items-center py-4 px-2"> class="flex flex-row items-center py-4 px-2"
>
<span class="inline-block mr-2">Nicht eingeschätzt</span> <span class="inline-block mr-2">Nicht eingeschätzt</span>
<span><it-icon-smiley-neutral></it-icon-smiley-neutral></span> <span><it-icon-smiley-neutral></it-icon-smiley-neutral></span>
</button> </button>
@ -129,12 +138,14 @@ const shownCriteria = computed(() => {
<li <li
v-for="criteria in shownCriteria" v-for="criteria in shownCriteria"
:key="criteria.title" :key="criteria.title"
class="mb-4 pb-4 border-b border-gray-500"> class="mb-4 pb-4 border-b border-gray-500"
>
<LeistungskriteriumRow <LeistungskriteriumRow
:unit-url="criteria.learning_unit.slug" :unit-url="criteria.learning_unit.slug"
:unit="criteria.pc_id" :unit="criteria.pc_id"
:title="criteria.title" :title="criteria.title"
:unit-id="criteria.learning_unit.id"></LeistungskriteriumRow> :unit-id="criteria.learning_unit.id"
></LeistungskriteriumRow>
</li> </li>
</ul> </ul>
</div> </div>

294
client/src/pages/CompetencesDetailView.vue
View File

@ -1,188 +1,196 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel' import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
import CompetenceDetail from '@/components/competences/CompetenceDetail.vue' import * as log from "loglevel";
log.debug('CompetencesMainView created') log.debug("CompetencesMainView created");
const competences = [ const competences = [
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
id: 1, id: 1,
criteria: [ criteria: [
{ {
"id": 341, id: 341,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
"translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569", type: "competence.PerformanceCriteria",
"pc_id": "B1.3 Fahrzeug", translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
"learning_unit": { pc_id: "B1.3 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 342, id: 342,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
"translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae", type: "competence.PerformanceCriteria",
"pc_id": "B2.1 Fahrzeug", translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
"learning_unit": { pc_id: "B2.1 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 343, id: 343,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
"translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc", type: "competence.PerformanceCriteria",
"pc_id": "B2.2 Fahrzeug", translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
"learning_unit": { pc_id: "B2.2 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
} },
] ],
}, },
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
id: 2, id: 2,
criteria: [ criteria: [
{ {
"id": 341, id: 341,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
"translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569", type: "competence.PerformanceCriteria",
"pc_id": "B1.3 Fahrzeug", translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
"learning_unit": { pc_id: "B1.3 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 342, id: 342,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
"translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae", type: "competence.PerformanceCriteria",
"pc_id": "B2.1 Fahrzeug", translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
"learning_unit": { pc_id: "B2.1 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 343, id: 343,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
"translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc", type: "competence.PerformanceCriteria",
"pc_id": "B2.2 Fahrzeug", translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
"learning_unit": { pc_id: "B2.2 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
} },
] ],
}, },
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
id: 3, id: 3,
criteria: [ criteria: [
{ {
"id": 341, id: 341,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
"translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569", type: "competence.PerformanceCriteria",
"pc_id": "B1.3 Fahrzeug", translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
"learning_unit": { pc_id: "B1.3 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 342, id: 342,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
"translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae", type: "competence.PerformanceCriteria",
"pc_id": "B2.1 Fahrzeug", translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
"learning_unit": { pc_id: "B2.1 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 343, id: 343,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
"translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc", type: "competence.PerformanceCriteria",
"pc_id": "B2.2 Fahrzeug", translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
"learning_unit": { pc_id: "B2.2 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
},
circle: "Analyse",
},
],
}, },
"circle": "Analyse"
}
]
}
]; ];
const userProgress = { const userProgress = {
341: 'open', 341: "open",
342: 'notDone', 342: "notDone",
343: 'done' 343: "done",
} };
</script> </script>
<template> <template>
<div class="mx-auto max-w-5xl"> <div class="mx-auto max-w-5xl">
<nav> <nav>
<a <a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
class="block mb-8 cursor-pointer flex items-center" ><it-icon-arrow-left /><span>zurück</span></a
@click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a> >
</nav> </nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-10"> <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
<h1>Kompetenzen</h1> <h1>Kompetenzen</h1>
@ -191,11 +199,15 @@ const userProgress = {
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>--> <!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div> </div>
<ul> <ul>
<li v-for="competence in competences" :key="competence.id" <li
class="bg-white p-8 mb-8"> v-for="competence in competences"
:key="competence.id"
class="bg-white p-8 mb-8"
>
<CompetenceDetail <CompetenceDetail
:competence="competence" :competence="competence"
:user-progress="userProgress"></CompetenceDetail> :user-progress="userProgress"
></CompetenceDetail>
</li> </li>
</ul> </ul>
</div> </div>

305
client/src/pages/CompetencesMainView.vue
View File

@ -1,175 +1,192 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel' import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue' import LeistungskriteriumRow from "@/components/competences/LeistungskriteriumRow.vue";
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue' import * as log from "loglevel";
log.debug('CompetencesMainView created') log.debug("CompetencesMainView created");
const lastCompetences = [ const lastCompetences = [
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
criteria: [ criteria: [
{ {
description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
unit: 'Fahrzeug', state: "done",
url: 'https://www.iterativ.ch' unit: "Fahrzeug",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'notDone', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "notDone",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "done",
url: 'https://www.iterativ.ch' unit: "Reisen",
} url: "https://www.iterativ.ch",
] },
],
}, },
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
criteria: [ criteria: [
{ {
description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
unit: 'Fahrzeug', state: "done",
url: 'https://www.iterativ.ch' unit: "Fahrzeug",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'notDone', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "notDone",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "done",
url: 'https://www.iterativ.ch' unit: "Reisen",
} url: "https://www.iterativ.ch",
] },
],
}, },
{ {
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen', description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
criteria: [ criteria: [
{ {
description: "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
unit: 'Fahrzeug', state: "done",
url: 'https://www.iterativ.ch' unit: "Fahrzeug",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'notDone', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "notDone",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'open', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "open",
url: 'https://www.iterativ.ch' unit: "Reisen",
url: "https://www.iterativ.ch",
}, },
{ {
description: "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.", description:
state: 'done', "Innerhalb des Handlungsfelds «Reisen» bin ich fähig, dem Kunden die Vorschläge verständlich zu erläutern und die entsprechenden Informationspflichten zu erfüllen.",
unit: 'Reisen', state: "done",
url: 'https://www.iterativ.ch' unit: "Reisen",
} url: "https://www.iterativ.ch",
] },
} ],
},
]; ];
const summary = { const summary = {
ok: 325, ok: 325,
nok: 32, nok: 32,
open: 28 open: 28,
}; };
const nokCriteria = [ const nokCriteria = [
{ {
"id": 341, id: 341,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
"translation_key": "e4aeeb81-0730-44f5-9c70-cec84d162569", type: "competence.PerformanceCriteria",
"pc_id": "B1.3 Fahrzeug", translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
"learning_unit": { pc_id: "B1.3 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 342, id: 342,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
"translation_key": "25d56b74-4151-49bd-ac1f-5e706a660aae", type: "competence.PerformanceCriteria",
"pc_id": "B2.1 Fahrzeug", translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
"learning_unit": { pc_id: "B2.1 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
}, },
{ {
"id": 343, id: 343,
"title": "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.", title:
"slug": "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen", "Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
"type": "competence.PerformanceCriteria", slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
"translation_key": "71bfb708-70c7-4e50-a424-104fe10ab7bc", type: "competence.PerformanceCriteria",
"pc_id": "B2.2 Fahrzeug", translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
"learning_unit": { pc_id: "B2.2 Fahrzeug",
"id": 123, learning_unit: {
"title": "Auto verkaufen", id: 123,
"slug": "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug", title: "Auto verkaufen",
"type": "learnpath.LearningUnit", slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
"translation_key": "c4797663-90c3-493f-9f21-e95ad0a37eb2" type: "learnpath.LearningUnit",
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
}, },
"circle": "Analyse" circle: "Analyse",
} },
] ];
</script> </script>
<template> <template>
@ -185,20 +202,17 @@ const nokCriteria = [
<h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3> <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
<ul> <ul>
<li <li
v-for="competence in lastCompetences" :key="competence.description" v-for="competence in lastCompetences"
class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"> :key="competence.description"
<p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">{{competence.description}}</p> class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
<ComptenceProgress >
:total="7" <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
:done="3" {{ competence.description }}
:open="2" </p>
></ComptenceProgress> <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
</li> </li>
</ul> </ul>
<router-link <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
to="/mediacenter/handlungsfeldlist"
class="flex items-center"
>
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
@ -207,32 +221,33 @@ const nokCriteria = [
<div class="bg-white p-8 mb-8"> <div class="bg-white p-8 mb-8">
<h3 class="mb-4">Einschätzungen</h3> <h3 class="mb-4">Einschätzungen</h3>
<ul class="flex flex-col lg:flex-row lg:items-center mb-6"> <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
<li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"> <li
class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
>
<h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5> <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
<p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p> <p class="text-7xl font-bold inline-block ml-4">{{ summary.nok }}</p>
</div> </div>
</li> </li>
<li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"> <li
class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500"
>
<h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5> <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy> <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
<p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p> <p class="text-7xl font-bold inline-block ml-4">{{ summary.ok }}</p>
</div> </div>
</li> </li>
<li> <li>
<h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5> <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
<div class="flex flex-row items-center border-r"> <div class="flex flex-row items-center border-r">
<it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral> <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
<p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p> <p class="text-7xl font-bold inline-block ml-4">{{ summary.open }}</p>
</div> </div>
</li> </li>
</ul> </ul>
<router-link <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
to="/mediacenter/handlungsfeldlist"
class="flex items-center"
>
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
@ -244,19 +259,19 @@ const nokCriteria = [
</div> </div>
<ul class="mb-6"> <ul class="mb-6">
<li <li
v-for="criteria in nokCriteria" :key="criteria.title" v-for="criteria in nokCriteria"
class="mb-4 pb-4 border-b border-gray-500"> :key="criteria.title"
class="mb-4 pb-4 border-b border-gray-500"
>
<LeistungskriteriumRow <LeistungskriteriumRow
:unit-url="criteria.learning_unit.slug" :unit-url="criteria.learning_unit.slug"
:unit="criteria.pc_id" :unit="criteria.pc_id"
:title="criteria.title" :title="criteria.title"
:unit-id="criteria.learning_unit.id"></LeistungskriteriumRow> :unit-id="criteria.learning_unit.id"
></LeistungskriteriumRow>
</li> </li>
</ul> </ul>
<router-link <router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
to="/mediacenter/handlungsfeldlist"
class="flex items-center"
>
<span>Alle anschauen</span> <span>Alle anschauen</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>

16
client/src/pages/ComptencesView.vue
View File

@ -1,18 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel' import * as log from "loglevel";
import { onMounted } from 'vue' import { onMounted } from "vue";
log.debug('CometencesView created') log.debug("CometencesView created");
const props = defineProps<{ const props = defineProps<{
competencesPageSlug: string competencesPageSlug: string;
}>() }>();
onMounted(async () => { onMounted(async () => {
log.debug('CompetencesView mounted', props.competencesPageSlug) log.debug("CompetencesView mounted", props.competencesPageSlug);
});
})
</script> </script>
<template> <template>

16
client/src/router/index.ts
View File

@ -53,21 +53,21 @@ const router = createRouter({
], ],
}, },
{ {
path: '/competences/:competencesPageSlug', path: "/competences/:competencesPageSlug",
props: true, props: true,
component: () => import('@/views/ComptencesView.vue'), component: () => import("@/pages/ComptencesView.vue"),
children: [ children: [
{ {
path: 'overview', path: "overview",
component: () => import('@/views/CompetencesMainView.vue'), component: () => import("@/pages/CompetencesMainView.vue"),
}, },
{ {
path: 'detail', path: "detail",
component: () => import('@/views/CompetencesDetailView.vue'), component: () => import("@/pages/CompetencesDetailView.vue"),
}, },
{ {
path: 'performancecriteria', path: "performancecriteria",
component: () => import('@/views/CompetencePerfomanceCriteriaView.vue'), component: () => import("@/pages/CompetencePerfomanceCriteriaView.vue"),
}, },
], ],
}, },