WIP: Add LK row
This commit is contained in:
Christian Cueni
Daniel Egger
parent
7d7a5c198f
commit
c96fa96a24
|
|
@ -0,0 +1,40 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
|
||||
interface Props {
|
||||
description: string
|
||||
unit: string
|
||||
unitUrl: string
|
||||
unitId: number
|
||||
state: string // maybe enum
|
||||
showState: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
description: '',
|
||||
unit: '',
|
||||
unitUrl: '',
|
||||
unitId: -1,
|
||||
state: 'open',
|
||||
showState: false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div v-if="showState">
|
||||
<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-neutral v-else></it-icon-smiley-neutral>
|
||||
</div>
|
||||
<div class="pr-5 mr-10">
|
||||
<h4 class="text-bold mb-2">{{description}}</h4>
|
||||
<p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
|
||||
</div>
|
||||
<span class="whitespace-nowrap">Sich nochmals einschätzen</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import * as log from 'loglevel'
|
||||
import { ref, watch } from 'vue'
|
||||
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
|
||||
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
|
||||
|
||||
log.debug('CompetencesMainView created')
|
||||
|
||||
|
|
@ -119,6 +120,27 @@ const summary = {
|
|||
open: 28
|
||||
};
|
||||
|
||||
const nokCriteria = [
|
||||
{
|
||||
unitId: 1,
|
||||
unit: 'Fahrzeuge',
|
||||
unitUrl: 'https://www.iterativ.ch',
|
||||
description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).'
|
||||
},
|
||||
{
|
||||
unitId: 2,
|
||||
unit: 'Reisen',
|
||||
unitUrl: 'https://www.iterativ.ch',
|
||||
description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.'
|
||||
},
|
||||
{
|
||||
unitId: 3,
|
||||
unit: 'Einkommenssicherung',
|
||||
unitUrl: 'https://www.iterativ.ch',
|
||||
description: 'Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.'
|
||||
},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -131,12 +153,16 @@ const summary = {
|
|||
</div>
|
||||
<div class="bg-white p-8 mb-8">
|
||||
<div>
|
||||
<h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
|
||||
<ul class="divide-y">
|
||||
<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 items-center">
|
||||
class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
|
||||
<p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
|
||||
<ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
|
||||
<ComptenceProgress
|
||||
:total="7"
|
||||
:done="3"
|
||||
:open="2"
|
||||
></ComptenceProgress>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
|
|
@ -148,40 +174,61 @@ const summary = {
|
|||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-8 mb-8">
|
||||
<h3 class="mb-4">Einschätzungen</h3>
|
||||
<ul class="flex flex-col lg:flex-row items-center mb-6">
|
||||
<li class="inline-block pr-12 mr-12 border-r border-gray-500">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
<li class="inline-block pr-12 mr-12 border-r border-gray-500">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
to="/mediacenter/handlungsfeldlist"
|
||||
class="flex items-center"
|
||||
>
|
||||
<span>Alle anschauen</span>
|
||||
<it-icon-arrow-right></it-icon-arrow-right>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="bg-white p-8">
|
||||
<div>
|
||||
<h3 class="pb-4">Einschätzungen</h3>
|
||||
<ul class="flex flex-col lg:flex-row items-center mb-6">
|
||||
<li class="inline-block pr-12 mr-12 border-r">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
<li class="inline-block pr-12 mr-12 border-r">
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
to="/mediacenter/handlungsfeldlist"
|
||||
class="flex items-center"
|
||||
>
|
||||
<span>Alle anschauen</span>
|
||||
<it-icon-arrow-right></it-icon-arrow-right>
|
||||
</router-link>
|
||||
<div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
|
||||
<it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
|
||||
<h3 class="pb-4">«Das muss ich nochmals anschauen»</h3>
|
||||
</div>
|
||||
<ul class="mb-6">
|
||||
<li v-for="criteria in nokCriteria" :key="criteria.description"
|
||||
class="mb-4 pb-4 border-b border-gray-500">
|
||||
<LeistungskriteriumRow
|
||||
:unit-url="criteria.unitUrl"
|
||||
:unit="criteria.unit"
|
||||
:description="criteria.description"
|
||||
:unit-id="criteria.unitId"></LeistungskriteriumRow>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
to="/mediacenter/handlungsfeldlist"
|
||||
class="flex items-center"
|
||||
>
|
||||
<span>Alle anschauen</span>
|
||||
<it-icon-arrow-right></it-icon-arrow-right>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue