More work on frontend
This commit is contained in:
Daniel Egger
parent
b48ab5ec3d
commit
08edf98e2a
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -3,8 +3,9 @@ import log from "loglevel";
|
||||||
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
|
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
|
||||||
import { useQuery } from "@urql/vue";
|
import { useQuery } from "@urql/vue";
|
||||||
import { computed, onMounted } from "vue";
|
import { computed, onMounted } from "vue";
|
||||||
import type { CompetenceCertificate, CompetenceCertificateAssignment } from "@/types";
|
import type { CompetenceCertificate } from "@/types";
|
||||||
import { useCurrentCourseSession } from "@/composables";
|
import { useCurrentCourseSession } from "@/composables";
|
||||||
|
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
courseSlug: string;
|
courseSlug: string;
|
||||||
|
|
@ -32,89 +33,19 @@ const competenceCertificates = computed(() => {
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// log.debug("AssignmentView mounted", props.assignmentId, props.userId);
|
// 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container-large lg:mt-4">
|
<div class="container-large lg:mt-4">
|
||||||
<h1>{{ $t("competences.title") }}</h1>
|
<h1>{{ $t("competences.title") }}</h1>
|
||||||
<!-- <pre>-->
|
|
||||||
<!-- {{ competenceCertificates }}-->
|
|
||||||
<!-- </pre>-->
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="competenceCertificate in competenceCertificates"
|
v-for="competenceCertificate in competenceCertificates"
|
||||||
:key="competenceCertificate.id"
|
:key="competenceCertificate.id"
|
||||||
>
|
>
|
||||||
{{ competenceCertificate.title }}
|
<CompetenceCertificateComponent
|
||||||
|
:competence-certificate="competenceCertificate"
|
||||||
<div
|
></CompetenceCertificateComponent>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue