WIP: Add competence detail view
This commit is contained in:
Christian Cueni
Daniel Egger
parent
c96fa96a24
commit
9756902ce2
|
|
@ -0,0 +1,49 @@
|
|||
<script setup lang="ts">
|
||||
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
|
||||
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
|
||||
import {ref} from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
competence: object
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false);
|
||||
|
||||
const togglePerformanceCriteria = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
</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>
|
||||
<button><it-icon-arrow-down
|
||||
@click="togglePerformanceCriteria()"
|
||||
class="h-10 w-10"
|
||||
aria-hidden="true"/></button>
|
||||
</div>
|
||||
<ComptenceProgress
|
||||
:total="7"
|
||||
:done="3"
|
||||
:open="2"
|
||||
></ComptenceProgress>
|
||||
</div>
|
||||
<ul v-if="isOpen">
|
||||
<li v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
|
||||
class="mb-4 pb-4 border-b border-gray-500">
|
||||
<LeistungskriteriumRow
|
||||
:showState="true"
|
||||
:state="performanceCriteria.state"
|
||||
:unit-url="performanceCriteria.unitUrl"
|
||||
:unit="performanceCriteria.unit"
|
||||
:description="performanceCriteria.description"
|
||||
:unit-id="performanceCriteria.unitId"></LeistungskriteriumRow>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -12,7 +12,7 @@ const notDone = 100 * ((props.total - props.open - props.done) / props.total) +
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<span class="relative w-full h-2 bg-gray-300">
|
||||
<span class="relative w-full h-2 bg-gray-300 inline-block">
|
||||
<span v-if="notDone !== done"
|
||||
class="absolute bg-orange-500 h-full"
|
||||
:style="{width: `${notDone}%`}"
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
|
||||
<template>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div v-if="showState">
|
||||
<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-thinking v-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>
|
||||
</div>
|
||||
<div class="pr-5 mr-10">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel'
|
||||
import CompetenceDetail from '@/components/competences/CompetenceDetail.vue'
|
||||
|
||||
log.debug('CompetencesMainView created')
|
||||
|
||||
const competences = [
|
||||
{
|
||||
description: 'Analyse des Kundenbedarfs und des Kundenbedürfnisses durchführen',
|
||||
id: 1,
|
||||
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',
|
||||
id: 2,
|
||||
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',
|
||||
id: 3,
|
||||
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 openCompetences = []
|
||||
|
||||
</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>
|
||||
</nav>
|
||||
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
|
||||
<h1>Kompetenzen</h1>
|
||||
<!-- <ItDropdownSelect-->
|
||||
<!-- v-model="dropdownSelected"-->
|
||||
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="competence in competences" :key="competence.description"
|
||||
class="bg-white p-8 mb-8">
|
||||
<CompetenceDetail :competence="competence"></CompetenceDetail>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel'
|
||||
import { ref, watch } from 'vue'
|
||||
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
|
||||
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,10 @@ const router = createRouter({
|
|||
path: 'overview',
|
||||
component: () => import('@/views/CompetencesMainView.vue'),
|
||||
},
|
||||
{
|
||||
path: 'detail',
|
||||
component: () => import('@/views/CompetencesDetailView.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue