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

Merged in feature/VBV-707-spinner (pull request #362) 

Add loading spinner to widget
This commit is contained in:
Christian Cueni 2024-07-25 07:16:10 +00:00
parent 1b2ad33f0e 13528f5394
commit f0013648e9
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>

11
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,10 +55,8 @@ 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", { $t("learningPathPage.progressText", {
inProgressCount: inProgressCirclesCount, inProgressCount: inProgressCirclesCount,
@ -73,4 +72,8 @@ const { inProgressCirclesCount, circlesCount } = useCourseCircleProgress(
></LearningPathCircle> ></LearningPathCircle>
</div> </div>
</div> </div>
<div v-else class="flex justify-center">
<LoadingSpinner />
</div>
</div>
</template> </template>