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> </script>
<template> <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"> <h4 class="mb-1 font-bold">
<slot name="title"></slot> <slot name="title"></slot>
</h4> </h4>

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

@ -2,6 +2,7 @@
import { onMounted, ref, Ref } from "vue"; import { onMounted, ref, Ref } from "vue";
import { fetchMentorCompetenceSummary } from "@/services/dashboard"; import { fetchMentorCompetenceSummary } from "@/services/dashboard";
import { AssignmentsStatisticsType } from "@/gql/graphql"; import { AssignmentsStatisticsType } from "@/gql/graphql";
import BaseBox from "@/components/dashboard/BaseBox.vue";
const props = defineProps<{ const props = defineProps<{
courseId: string; courseId: string;
@ -17,23 +18,26 @@ onMounted(async () => {
<template> <template>
<div v-if="summary" class="w-[325px]"> <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">
<div class="flex flex-row space-x-3 bg-white"> <template #title>{{ $t("Kompetenznachweise") }}</template>
<div <template #content>
class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold" <div class="flex flex-row space-x-3 bg-white">
> <div
<span>{{ summary.summary.total_passed }}</span> class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
</div> >
<p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p> <span>{{ summary.summary.total_passed }}</span>
</div> </div>
<div class="flex flex-row space-x-3 bg-white pb-6"> <p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
<div </div>
class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold" <div class="flex flex-row space-x-3 bg-white pb-6">
> <div
<span>{{ summary.summary.total_failed }}</span> class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
</div> >
<p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p> <span>{{ summary.summary.total_failed }}</span>
</div> </div>
<p>{{ $t("Details anschauen") }}</p> <p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
</div>
</template>
</BaseBox>
</div> </div>
</template> </template>

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

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

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

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, Ref } from "vue"; import { onMounted, ref, Ref } from "vue";
import { fetchOpenTasksCount } from "@/services/dashboard"; import { fetchOpenTasksCount } from "@/services/dashboard";
import BaseBox from "@/components/dashboard/BaseBox.vue";
const props = defineProps<{ const props = defineProps<{
courseId: string; courseId: string;
@ -16,15 +17,18 @@ onMounted(async () => {
<template> <template>
<div class="w-[325px]"> <div class="w-[325px]">
<h3 class="mb-4 text-base">{{ $t("Zu erledigen") }}</h3> <BaseBox :details-link="'foo'" data-cy="dashboard.mentor.competenceSummary">
<div class="flex flex-row space-x-3 bg-white pb-6"> <template #title>{{ $t("Zu erledigen") }}</template>
<div <template #content>
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" <div class="flex flex-row space-x-3 bg-white pb-6">
> <div
<span>{{ openTaskCount }}</span> 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"
</div> >
<p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p> <span>{{ openTaskCount }}</span>
</div> </div>
<p>{{ $t("Details anschauen") }}</p> <p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
</div>
</template>
</BaseBox>
</div> </div>
</template> </template>