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

Styling

This commit is contained in:
Daniel Egger 2024-07-27 09:49:43 +02:00
parent c7afae928b
commit b7231fb1b7
2 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/pages/dashboard/agentAssignment/AgentCompetenceGradeDetailPage.vue
View File

@ -27,6 +27,12 @@ const participantUserIds = computed(() => {
return (participants.value ?? []).map((p) => p.user_id); return (participants.value ?? []).map((p) => p.user_id);
}); });
const courseSession = computed(() => {
return participants.value[0]?.course_sessions.find(
(cs) => cs.id === props.courseSessionId
);
});
const certificateData = ref<CompetenceCertificateObjectType | undefined>(undefined); const certificateData = ref<CompetenceCertificateObjectType | undefined>(undefined);
function userGrade(userId: string) { function userGrade(userId: string) {
@ -108,7 +114,7 @@ onMounted(async () => {
<div v-if="loading" class="m-8 flex justify-center"> <div v-if="loading" class="m-8 flex justify-center">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
<div v-else class="container-large flex flex-col space-y-8"> <div v-else class="container-large flex flex-col space-y-4">
<router-link <router-link
class="btn-text inline-flex items-center pl-0" class="btn-text inline-flex items-center pl-0"
:to="`/statistic/${props.agentRole}/${props.courseSlug}/competence-grade`" :to="`/statistic/${props.agentRole}/${props.courseSlug}/competence-grade`"
@ -117,18 +123,16 @@ onMounted(async () => {
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
<div> <div>
<h2 class="text-2xl font-bold">{{ $t("a.Statistik") }}</h2> <h2 class="mb-8">{{ certificateData?.title }}</h2>
<p class="text-gray-800">
{{ $t("a.Statistik für alle Lernenden") }}
</p>
<pre>{{ totalAverageGrade }}</pre>
<div class="border-b bg-white px-6 py-6">
{{ courseSession?.session_title }}
</div>
<div class="heading-3 border-b bg-white px-6 py-6">
{{ $t("a.Durchschnittsnote") }}:
{{ totalAverageGrade }}
</div>
<div class="bg-white px-4 py-2"> <div class="bg-white px-4 py-2">
<section
class="flex flex-col space-x-0 border-b bg-white lg:flex-row lg:space-x-3"
></section>
<div <div
v-for="person in participants" v-for="person in participants"
:key="person.user_id" :key="person.user_id"
@ -155,10 +159,15 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="flex w-full flex-auto items-start md:w-1/4"> <div class="flex flex-auto items-center gap-2 md:w-1/4">
<div class="flex"> <div>{{ $t("a.Note") }}:</div>
<div>{{ $t("a.Note") }}:</div> <div class="min-w-12 text-center">
<div class="w-16 text-center">{{ userGrade(person.user_id) }}</div> <div
class="rounded px-2 py-1 font-bold"
:class="{ 'bg-red-400': (userGrade(person.user_id) ?? 4) < 4 }"
>
{{ userGrade(person.user_id) }}
</div>
</div> </div>
</div> </div>

18
client/src/pages/dashboard/agentAssignment/AgentCompetenceGradePage.vue
View File

@ -123,16 +123,13 @@ const courseSessionCompetenceAssignments = computed(() => {
<div v-if="loading" class="m-8 flex justify-center"> <div v-if="loading" class="m-8 flex justify-center">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
<div v-else class="container-large flex flex-col space-y-8"> <div v-else class="container-large flex flex-col space-y-4">
<router-link class="btn-text inline-flex items-center pl-0" to="/"> <router-link class="btn-text inline-flex items-center pl-0" to="/">
<it-icon-arrow-left /> <it-icon-arrow-left />
<span>{{ $t("general.back") }}</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
<div> <div>
<h2 class="text-2xl font-bold">{{ $t("a.Statistik") }}</h2> <h2>{{ $t("a.Kompetenznachweise") }}</h2>
<p class="text-gray-800">
{{ $t("a.Statistik für alle Lernenden") }}
</p>
<div class="bg-white px-4 py-2"> <div class="bg-white px-4 py-2">
<section <section
@ -152,10 +149,13 @@ const courseSessionCompetenceAssignments = computed(() => {
}}» }}»
</div> </div>
<div class="flex w-full flex-auto items-start md:w-1/4"> <div class="flex flex-auto items-center gap-2 md:w-1/4">
<div class="flex"> <div>{{ $t("a.Durchschnittsnote") }}:</div>
<div>{{ $t("a.Durchschnittsnote") }}:</div> <div class="min-w-12 text-center">
<div class="w-16 text-center"> <div
class="rounded px-2 py-1 font-bold"
:class="{ 'bg-red-400': (entry.averageGrade ?? 4) < 4 }"
>
{{ entry.averageGrade }} {{ entry.averageGrade }}
</div> </div>
</div> </div>