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

More work on frontend

This commit is contained in:
Daniel Egger 2023-09-05 17:20:04 +02:00
parent b48ab5ec3d
commit 08edf98e2a
3 changed files with 163 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
client/src/pages/competence/CompetenceAssignmentRow.vue Normal file
View File

@ -0,0 +1,78 @@
<script setup lang="ts">
import type { CompetenceCertificateAssignment } from "@/types";
import * as log from "loglevel";
log.debug("CompetenceAssignmentRow setup");
const props = defineProps<{
assignment: CompetenceCertificateAssignment;
}>();
const getIconName = () => {
if (props.assignment.assignment_type === "EDONIQ_TEST") {
return "it-icon-test-large";
}
return "it-icon-assignment-large";
};
</script>
<template>
<div class="flex items-center border-b py-8">
<component :is="getIconName()" class="mr-4 h-9 w-9"></component>
<div class="flex w-[420px] flex-col">
<h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
<p class="text-gray-800">
<a :href="assignment.frontend_url" class="link" target="_blank">
Im Circle «{{ assignment.learning_content.circle.title }}» anschauen
</a>
</p>
</div>
<div class="grow px-8">
<div
v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
class="flex items-center"
>
<div
class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
>
<it-icon-check class="h-4/5 w-4/5"></it-icon-check>
</div>
<div class="ml-2">Bewertung freigegeben</div>
</div>
<div
v-else-if="
['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
assignment.completion?.completion_status || ''
)
"
class="flex items-center"
>
<div
class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
>
<it-icon-check class="h-6 w-6"></it-icon-check>
</div>
<div class="ml-2">Ergebnisse abgegeben</div>
</div>
</div>
<div>
<div
v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
class="flex flex-col items-center"
>
<div class="flex flex-col items-center">
<div class="heading-2">
{{ assignment.completion?.evaluation_points }}
</div>
<div>von {{ assignment.max_points }} Punkten</div>
</div>
</div>
<div v-else class="flex flex-col items-center">
<div>Höchstpunktzahl</div>
<div>{{ assignment.max_points }} Punkte</div>
</div>
</div>
</div>
</template>
<style scoped></style>

80
client/src/pages/competence/CompetenceCertificateComponent.vue Normal file
View File

@ -0,0 +1,80 @@
<script setup lang="ts">
import * as log from "loglevel";
import type { CompetenceCertificate } from "@/types";
import CompetenceAssignmentRow from "@/pages/competence/CompetenceAssignmentRow.vue";
import { computed } from "vue";
import ItProgress, { StatusCount } from "@/components/ui/ItProgress.vue";
log.debug("CompetenceCertificateComponent setup");
const props = defineProps<{
competenceCertificate: CompetenceCertificate;
}>();
const totalPointsEvaluatedAssignments = computed(() => {
return props.competenceCertificate.assignments.reduce((acc, assignment) => {
if (assignment.completion?.completion_status === "EVALUATION_SUBMITTED") {
return acc + assignment.max_points;
}
return acc;
}, 0);
});
const userPointsEvaluatedAssignments = computed(() => {
return props.competenceCertificate.assignments.reduce((acc, assignment) => {
if (assignment.completion?.completion_status === "EVALUATION_SUBMITTED") {
return acc + assignment.completion.evaluation_points;
}
return acc;
}, 0);
});
const numAssignmentsEvaluated = computed(() => {
return props.competenceCertificate.assignments.filter((a) => {
return a.completion?.completion_status === "EVALUATION_SUBMITTED";
}).length;
});
const numAssignmentsTotal = computed(() => {
return props.competenceCertificate.assignments.length;
});
const progressStatusCount = computed(() => {
return {
SUCCESS: numAssignmentsEvaluated.value,
UNKNOWN: numAssignmentsTotal.value - numAssignmentsEvaluated.value,
FAIL: 0,
} as StatusCount;
});
</script>
<template>
<div>
<div class="mb-4 bg-white p-8">
<h2>
{{ props.competenceCertificate.title }}
</h2>
<div class="flex items-center">
<div class="heading-1 py-4">
{{ userPointsEvaluatedAssignments }}
</div>
<div class="pl-2">von {{ totalPointsEvaluatedAssignments }} Punkten</div>
</div>
<ItProgress :status-count="progressStatusCount" />
<div>
{{ numAssignmentsEvaluated }} von {{ numAssignmentsTotal }} Arbeiten
abgeschlossen
</div>
</div>
<div
v-for="assignment in props.competenceCertificate.assignments"
class="bg-white px-8"
>
<CompetenceAssignmentRow :assignment="assignment"></CompetenceAssignmentRow>
</div>
</div>
</template>
<style scoped></style>

79
client/src/pages/competence/CompetenceOverviewPage.vue
View File

@ -3,8 +3,9 @@ import log from "loglevel";
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
import { useQuery } from "@urql/vue";
import { computed, onMounted } from "vue";
import type { CompetenceCertificate, CompetenceCertificateAssignment } from "@/types";
import type { CompetenceCertificate } from "@/types";
import { useCurrentCourseSession } from "@/composables";
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
const props = defineProps<{
courseSlug: string;
@ -32,89 +33,19 @@ const competenceCertificates = computed(() => {
onMounted(async () => {
// log.debug("AssignmentView mounted", props.assignmentId, props.userId);
});
const getIconName = (assignment: CompetenceCertificateAssignment) => {
if (assignment.assignment_type === "EDONIQ_TEST") {
return "it-icon-test-large";
}
return "it-icon-assignment-large";
};
</script>
<template>
<div class="container-large lg:mt-4">
<h1>{{ $t("competences.title") }}</h1>
<!-- <pre>-->
<!-- {{ competenceCertificates }}-->
<!-- </pre>-->
<div
v-for="competenceCertificate in competenceCertificates"
:key="competenceCertificate.id"
>
{{ competenceCertificate.title }}
<div
v-for="assignment in competenceCertificate.assignments"
class="bg-white px-8"
>
<div class="flex items-center border-b py-8">
<component :is="getIconName(assignment)" class="mr-4 h-9 w-9"></component>
<div class="flex w-[420px] flex-col">
<h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
<p class="text-gray-800">
<a :href="assignment.frontend_url" class="link" target="_blank">
Im Circle «{{ assignment.learning_content.circle.title }}» anschauen
</a>
</p>
</div>
<div class="grow px-8">
<div
v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
class="flex items-center"
>
<div
class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
>
<it-icon-check class="h-4/5 w-4/5"></it-icon-check>
</div>
<div class="ml-2">Bewertung freigegeben</div>
</div>
<div
v-else-if="
['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
assignment.completion?.completion_status || ''
)
"
class="flex items-center"
>
<div
class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
>
<it-icon-check class="h-6 w-6"></it-icon-check>
</div>
<div class="ml-2">Ergebnisse abgegeben</div>
</div>
</div>
<div>
<div
v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
class="flex flex-col items-center"
>
<div class="flex flex-col items-center">
<div class="heading-2">
{{ assignment.completion?.evaluation_points }}
</div>
<div>von {{ assignment.max_points }} Punkten</div>
</div>
</div>
<div v-else class="flex flex-col items-center">
<div>Höchstpunktzahl</div>
<div>{{ assignment.max_points }} Punkte</div>
</div>
</div>
</div>
</div>
<CompetenceCertificateComponent
:competence-certificate="competenceCertificate"
></CompetenceCertificateComponent>
</div>
</div>
</template>