Refactor competence detail view
This commit is contained in:
Daniel Egger
parent
999a916427
commit
f4dafef005
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
|
||||
import LeistungskriteriumRow from "@/components/competences/PerformanceCriteriaRow.vue";
|
||||
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
|
||||
import type { CompetencePage } from "@/types";
|
||||
import _ from "lodash";
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
competence: object;
|
||||
userProgress: object;
|
||||
competence: CompetencePage;
|
||||
}>();
|
||||
|
||||
const isOpen = ref(false);
|
||||
|
|
@ -14,15 +15,29 @@ const togglePerformanceCriteria = () => {
|
|||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
const userStateForCriteria = (id: string) =>
|
||||
props.userProgress[id] ? props.userProgress[id] : "open";
|
||||
const calcStatusCount = () => {
|
||||
if (props.competence) {
|
||||
const grouped = _.groupBy(props.competence.children, "completion_status");
|
||||
return {
|
||||
fail: grouped?.fail?.length || 0,
|
||||
success: grouped?.success?.length || 0,
|
||||
unknown: grouped?.unknown?.length || 0,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: 0,
|
||||
fail: 0,
|
||||
unknown: 0,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
|
||||
<div class="mb-4 flex flex-row justify-between items-center">
|
||||
<h2 class="text-large">{{ competence.description }}</h2>
|
||||
<h2 class="text-large">{{ competence.title }}</h2>
|
||||
<button class="transition-transform" :class="{ 'rotate-180': isOpen }">
|
||||
<it-icon-arrow-down
|
||||
class="h-10 w-10"
|
||||
|
|
@ -31,22 +46,18 @@ const userStateForCriteria = (id: string) =>
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
<ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
|
||||
<ComptenceProgress :status-count="calcStatusCount()"></ComptenceProgress>
|
||||
</div>
|
||||
<ul v-if="isOpen">
|
||||
<li
|
||||
v-for="performanceCriteria in competence.criteria"
|
||||
:key="performanceCriteria.description"
|
||||
v-for="performanceCriteria in competence.children"
|
||||
:key="performanceCriteria.id"
|
||||
class="mb-4 pb-4 border-b border-gray-500"
|
||||
>
|
||||
<LeistungskriteriumRow
|
||||
:state="userStateForCriteria(`${performanceCriteria.id}`)"
|
||||
<PerformanceCriteriaRow
|
||||
:criteria="performanceCriteria"
|
||||
:show-state="true"
|
||||
:unit-url="performanceCriteria.learning_unit.slug"
|
||||
:unit="performanceCriteria.pc_id"
|
||||
:title="performanceCriteria.title"
|
||||
:unit-id="performanceCriteria.learning_unit.id"
|
||||
></LeistungskriteriumRow>
|
||||
></PerformanceCriteriaRow>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,37 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
total: number;
|
||||
done: number;
|
||||
open: number;
|
||||
statusCount?: {
|
||||
fail: number;
|
||||
success: number;
|
||||
unknown: number;
|
||||
};
|
||||
}>();
|
||||
|
||||
const done = (100 * props.done) / props.total;
|
||||
const notDone = 100 * ((props.total - props.open - props.done) / props.total) + done;
|
||||
const total = computed(() => {
|
||||
return (
|
||||
(props.statusCount?.fail || 0) +
|
||||
(props.statusCount?.success || 0) +
|
||||
(props.statusCount?.unknown || 0)
|
||||
);
|
||||
});
|
||||
|
||||
const done = computed(() => {
|
||||
if (total.value === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return ((props.statusCount?.success || 0) / total.value) * 100;
|
||||
});
|
||||
|
||||
const notDone = computed(() => {
|
||||
if (total.value === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,195 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
|
||||
import { useCompetenceStore } from "@/stores/competence";
|
||||
import * as log from "loglevel";
|
||||
|
||||
log.debug("CompetencesMainView created");
|
||||
|
||||
const competences = [
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
id: 1,
|
||||
criteria: [
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
id: 2,
|
||||
criteria: [
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen",
|
||||
id: 3,
|
||||
criteria: [
|
||||
{
|
||||
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 userProgress = {
|
||||
341: "open",
|
||||
342: "notDone",
|
||||
343: "done",
|
||||
};
|
||||
const competenceStore = useCompetenceStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<nav>
|
||||
<a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)"
|
||||
><it-icon-arrow-left /><span>zurück</span></a
|
||||
<div class="container-large">
|
||||
<nav class="lg:mt-4">
|
||||
<a class="block mb-8 cursor-pointer flex items-center" @click="router.go(-1)">
|
||||
<it-icon-arrow-left />
|
||||
<span>zurück</span></a
|
||||
>
|
||||
</nav>
|
||||
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
|
||||
|
|
@ -198,16 +22,13 @@ const userProgress = {
|
|||
<!-- v-model="dropdownSelected"-->
|
||||
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
|
||||
</div>
|
||||
<ul>
|
||||
<ul v-if="competenceStore.competenceProfilePage">
|
||||
<li
|
||||
v-for="competence in competences"
|
||||
v-for="competence in competenceStore.competenceProfilePage.children"
|
||||
:key="competence.id"
|
||||
class="bg-white p-8 mb-8"
|
||||
>
|
||||
<CompetenceDetail
|
||||
:competence="competence"
|
||||
:user-progress="userProgress"
|
||||
></CompetenceDetail>
|
||||
<CompetenceDetail :competence="competence"></CompetenceDetail>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue