Add backend data to competence profile main page
This commit is contained in:
Daniel Egger
parent
46ad6cab36
commit
999a916427
|
|
@ -1,196 +1,37 @@
|
|||
<script setup lang="ts">
|
||||
import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
|
||||
import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
|
||||
import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
|
||||
import { useCompetenceStore } from "@/stores/competence";
|
||||
import _ from "lodash";
|
||||
import * as log from "loglevel";
|
||||
import { computed } from "vue";
|
||||
|
||||
log.debug("CompetencesMainView created");
|
||||
|
||||
const lastCompetences = [
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
criteria: [
|
||||
{
|
||||
description:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
|
||||
state: "done",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "notDone",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "done",
|
||||
unit: "Reisen",
|
||||
url: "https://www.iterativ.ch",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
criteria: [
|
||||
{
|
||||
description:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
|
||||
state: "done",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "notDone",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "done",
|
||||
unit: "Reisen",
|
||||
url: "https://www.iterativ.ch",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
criteria: [
|
||||
{
|
||||
description:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
|
||||
state: "done",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "notDone",
|
||||
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.",
|
||||
state: "open",
|
||||
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.",
|
||||
state: "done",
|
||||
unit: "Reisen",
|
||||
url: "https://www.iterativ.ch",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const competenceStore = useCompetenceStore();
|
||||
|
||||
const summary = {
|
||||
ok: 325,
|
||||
nok: 32,
|
||||
open: 28,
|
||||
};
|
||||
const failedCriteria = computed(() => {
|
||||
return competenceStore.flatPerformanceCriteria
|
||||
.filter((criteria) => {
|
||||
return criteria.completion_status === "fail";
|
||||
})
|
||||
.slice(0, 3);
|
||||
});
|
||||
|
||||
const nokCriteria = [
|
||||
{
|
||||
id: 341,
|
||||
title:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).",
|
||||
slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ziele-und-pläne-des-kunden-zu-ergründen-soll",
|
||||
type: "competence.PerformanceCriteria",
|
||||
translation_key: "e4aeeb81-0730-44f5-9c70-cec84d162569",
|
||||
pc_id: "B1.3 Fahrzeug",
|
||||
learning_unit: {
|
||||
id: 123,
|
||||
title: "Auto verkaufen",
|
||||
slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
|
||||
type: "learnpath.LearningUnit",
|
||||
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
|
||||
},
|
||||
circle: "Analyse",
|
||||
},
|
||||
{
|
||||
id: 342,
|
||||
title:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.",
|
||||
slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-ist-situation-des-kunden-mit-der-geeigneten-gesprächs-fragetechnik-zu-erfassen",
|
||||
type: "competence.PerformanceCriteria",
|
||||
translation_key: "25d56b74-4151-49bd-ac1f-5e706a660aae",
|
||||
pc_id: "B2.1 Fahrzeug",
|
||||
learning_unit: {
|
||||
id: 123,
|
||||
title: "Auto verkaufen",
|
||||
slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
|
||||
type: "learnpath.LearningUnit",
|
||||
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
|
||||
},
|
||||
circle: "Analyse",
|
||||
},
|
||||
{
|
||||
id: 343,
|
||||
title:
|
||||
"Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Risiken aufzuzeigen.",
|
||||
slug: "kompetenzprofil-crit-innerhalb-des-handlungsfelds-fahrzeug-bin-ich-fähig-die-risiken-aufzuzeigen",
|
||||
type: "competence.PerformanceCriteria",
|
||||
translation_key: "71bfb708-70c7-4e50-a424-104fe10ab7bc",
|
||||
pc_id: "B2.2 Fahrzeug",
|
||||
learning_unit: {
|
||||
id: 123,
|
||||
title: "Auto verkaufen",
|
||||
slug: "versicherungsvermittlerin-lp-circle-analyse-lu-fahrzeug",
|
||||
type: "learnpath.LearningUnit",
|
||||
translation_key: "c4797663-90c3-493f-9f21-e95ad0a37eb2",
|
||||
},
|
||||
circle: "Analyse",
|
||||
},
|
||||
];
|
||||
const countStatus = computed(() => {
|
||||
const grouped = _.groupBy(
|
||||
competenceStore.flatPerformanceCriteria,
|
||||
"completion_status"
|
||||
);
|
||||
return {
|
||||
fail: grouped?.fail?.length || 0,
|
||||
success: grouped?.success?.length || 0,
|
||||
unknown: grouped?.unknown?.length || 0,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<div class="container-large lg:mt-8">
|
||||
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
|
||||
<h1>Kompetenzprofil</h1>
|
||||
<!-- <ItDropdownSelect-->
|
||||
|
|
@ -201,16 +42,16 @@ const nokCriteria = [
|
|||
<div>
|
||||
<h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="competence in lastCompetences"
|
||||
:key="competence.description"
|
||||
class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
|
||||
>
|
||||
<p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
|
||||
{{ competence.description }}
|
||||
</p>
|
||||
<ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
|
||||
</li>
|
||||
<!-- <li-->
|
||||
<!-- v-for="competence in lastCompetences"-->
|
||||
<!-- :key="competence.description"-->
|
||||
<!-- class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"-->
|
||||
<!-- >-->
|
||||
<!-- <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">-->
|
||||
<!-- {{ competence.description }}-->
|
||||
<!-- </p>-->
|
||||
<!-- <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
<router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
|
||||
<span>Alle anschauen</span>
|
||||
|
|
@ -220,30 +61,32 @@ const nokCriteria = [
|
|||
</div>
|
||||
<div class="bg-white p-8 mb-8">
|
||||
<h3 class="mb-4">Einschätzungen</h3>
|
||||
<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"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
|
||||
>
|
||||
<li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
|
||||
<h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
|
||||
<div class="flex flex-row items-center">
|
||||
<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">{{ countStatus.fail }}</p>
|
||||
</div>
|
||||
</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 mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
|
||||
<h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
|
||||
<div class="flex flex-row items-center">
|
||||
<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">
|
||||
{{ countStatus.success }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<li class="flex-1">
|
||||
<h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
|
||||
<div class="flex flex-row items-center border-r">
|
||||
<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">
|
||||
{{ countStatus.unknown }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -259,16 +102,11 @@ const nokCriteria = [
|
|||
</div>
|
||||
<ul class="mb-6">
|
||||
<li
|
||||
v-for="criteria in nokCriteria"
|
||||
:key="criteria.title"
|
||||
v-for="criteria in failedCriteria"
|
||||
:key="criteria.id"
|
||||
class="mb-4 pb-4 border-b border-gray-500"
|
||||
>
|
||||
<LeistungskriteriumRow
|
||||
:unit-url="criteria.learning_unit.slug"
|
||||
:unit="criteria.pc_id"
|
||||
:title="criteria.title"
|
||||
:unit-id="criteria.learning_unit.id"
|
||||
></LeistungskriteriumRow>
|
||||
<PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link to="/mediacenter/handlungsfeldlist" class="flex items-center">
|
||||
|
|
|
|||
Loading…
Reference in New Issue