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

Add loading spinner to widget

This commit is contained in:
Christian Cueni 2024-07-24 09:20:28 +02:00
parent c956cb1158
commit bd59f24ea9
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/dashboard/UkStatistics.vue
View File

@ -6,6 +6,7 @@ import type { CourseStatisticsType } from "@/gql/graphql";
import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue"; import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue";
import FeedbackSummaryBox from "@/components/dashboard/FeedbackSummaryBox.vue"; import FeedbackSummaryBox from "@/components/dashboard/FeedbackSummaryBox.vue";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue"; import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
const props = defineProps<{ const props = defineProps<{
courseId: string; courseId: string;
@ -95,4 +96,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div v-else class="flex w-full flex-row justify-center">
<LoadingSpinner />
</div>
</template> </template>

37
client/src/components/learningPath/LearningPathDiagram.vue
View File

@ -3,6 +3,7 @@ import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPa
import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils"; import { calculateCircleSectorData } from "@/pages/learningPath/learningPathPage/utils";
import { computed } from "vue"; import { computed } from "vue";
import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables"; import { useCourseCircleProgress, useCourseDataWithCompletion } from "@/composables";
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall"; export type DiagramType = "horizontal" | "horizontalSmall" | "singleSmall";
@ -54,23 +55,25 @@ const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
<template> <template>
<div> <div>
<h4 <div v-if="circlesCount > 0">
v-if="diagramType === 'horizontal' && circles.length > 0" <h4 v-if="diagramType === 'horizontal'" class="mb-4 font-bold">
class="mb-4 font-bold" {{
> $t("learningPathPage.progressText", {
{{ inProgressCount: inProgressCirclesCount,
$t("learningPathPage.progressText", { allCount: circlesCount,
inProgressCount: inProgressCirclesCount, })
allCount: circlesCount, }}
}) </h4>
}} <div :class="wrapperClasses">
</h4> <LearningPathCircle
<div :class="wrapperClasses"> v-for="circle in circles"
<LearningPathCircle :key="circle.id"
v-for="circle in circles" :sectors="calculateCircleSectorData(circle)"
:key="circle.id" ></LearningPathCircle>
:sectors="calculateCircleSectorData(circle)" </div>
></LearningPathCircle> </div>
<div v-else class="flex justify-center">
<LoadingSpinner />
</div> </div>
</div> </div>
</template> </template>