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

WIP: Use Basebox

This commit is contained in:
Christian Cueni 2024-04-09 15:29:46 +02:00
parent a375559670
commit 66220cdfcb
4 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/dashboard/BaseBox.vue
View File

@ -5,7 +5,7 @@ defineProps<{
</script>
<template>
<div class="flex flex-col space-y-4 bg-white p-6">
<div class="flex flex-col space-y-4 bg-white">
<h4 class="mb-1 font-bold">
<slot name="title"></slot>
</h4>

8
client/src/components/dashboard/MentorCompetenceSummary.vue
View File

@ -2,6 +2,7 @@
import { onMounted, ref, Ref } from "vue";
import { fetchMentorCompetenceSummary } from "@/services/dashboard";
import { AssignmentsStatisticsType } from "@/gql/graphql";
import BaseBox from "@/components/dashboard/BaseBox.vue";
const props = defineProps<{
courseId: string;
@ -17,7 +18,9 @@ onMounted(async () => {
<template>
<div v-if="summary" class="w-[325px]">
<h3 class="mb-4 text-base">{{ $t("Kompetenznachweise") }}</h3>
<BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
<template #title>{{ $t("Kompetenznachweise") }}</template>
<template #content>
<div class="flex flex-row space-x-3 bg-white">
<div
class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
@ -34,6 +37,7 @@ onMounted(async () => {
</div>
<p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
</div>
<p>{{ $t("Details anschauen") }}</p>
</template>
</BaseBox>
</div>
</template>

12
client/src/components/dashboard/MentorMenteeCount.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, Ref } from "vue";
import { fetchMenteeCount } from "@/services/dashboard";
import BaseBox from "@/components/dashboard/BaseBox.vue";
const props = defineProps<{
courseId: string;
@ -16,15 +17,20 @@ onMounted(async () => {
<template>
<div class="w-[325px]">
<h3 class="mb-4 text-base">{{ $t("Personen") }}</h3>
<BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
<template #title>{{ $t("Elemente zu erledigen") }}</template>
<template #content>
<div class="flex flex-row space-x-3 bg-white pb-6">
<div
class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
>
<span>{{ menteeCount }}</span>
</div>
<p class="ml-3 mt-0 leading-[74px]">{{ $t("Personen, die du begleitest") }}</p>
<p class="ml-3 mt-0 leading-[74px]">
{{ $t("Personen, die du begleitest") }}
</p>
</div>
<p>{{ $t("Details anschauen") }}</p>
</template>
</BaseBox>
</div>
</template>

8
client/src/components/dashboard/MentorOpenTasksCount.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, Ref } from "vue";
import { fetchOpenTasksCount } from "@/services/dashboard";
import BaseBox from "@/components/dashboard/BaseBox.vue";
const props = defineProps<{
courseId: string;
@ -16,7 +17,9 @@ onMounted(async () => {
<template>
<div class="w-[325px]">
<h3 class="mb-4 text-base">{{ $t("Zu erledigen") }}</h3>
<BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
<template #title>{{ $t("Zu erledigen") }}</template>
<template #content>
<div class="flex flex-row space-x-3 bg-white pb-6">
<div
class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
@ -25,6 +28,7 @@ onMounted(async () => {
</div>
<p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
</div>
<p>{{ $t("Details anschauen") }}</p>
</template>
</BaseBox>
</div>
</template>