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

feat: competence navi in profile

This commit is contained in:
Livio Bieri 2024-03-06 12:09:18 +01:00
parent 7073beee49
commit 7de9766381
8 changed files with 96 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue
View File

@ -1,14 +0,0 @@
<script setup lang="ts">
defineProps<{
profileUserId: string;
courseSessionId: string;
}>();
</script>
<template>
<h1>COMPETENCE FEEDBACK EVALUATION</h1>
<h2>{{ profileUserId }}</h2>
<h2>{{ courseSessionId }}</h2>
</template>
<style scoped></style>

13
client/src/components/cockpit/profile/CockpitProfileCompetenceOverview.vue
View File

@ -1,13 +0,0 @@
<script setup lang="ts">
import SelfEvaluationAndFeedbackOverview from "@/components/cockpit/SelfEvaluationAndFeedbackOverview.vue";
defineProps<{
profileUserId: string;
}>();
</script>
<template>
<SelfEvaluationAndFeedbackOverview :target-user-id="profileUserId" detail-url="#" />
</template>
<style scoped></style>

18
client/src/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue
View File

@ -32,7 +32,7 @@ const feedbackProviderName = computed(() => {
<b>{{ props.summary.title }}</b>
<span>Circle «{{ props.summary.circle_title }}»</span>
</div>
<span class="underline">
<span class="pl-4 underline">
<router-link
:to="props.summary.detail_url"
:data-cy="`self-eval-${summary.id}-detail-url`"
@ -47,21 +47,17 @@ const feedbackProviderName = computed(() => {
<div class="w-1/2">
{{ $t("a.Deine Selbsteinschätzung") }}
</div>
<div class="cell">
<div class="smily-row">
<SmileyCell
:count="props.summary.self_assessment.counts.pass"
:cypress-identifier="`self-eval-${props.summary.id}-pass`"
smiley="it-icon-smiley-happy"
/>
</div>
<div class="cell">
<SmileyCell
:count="props.summary.self_assessment.counts.fail"
:cypress-identifier="`self-eval-${props.summary.id}-fail`"
smiley="it-icon-smiley-thinking"
/>
</div>
<div class="cell">
<SmileyCell
:count="props.summary.self_assessment.counts.unknown"
:cypress-identifier="`self-eval-${props.summary.id}-unknown`"
@ -82,19 +78,15 @@ const feedbackProviderName = computed(() => {
</span>
<img class="ml-2 h-7 w-7 rounded-full" :src="feedbackProviderAvatar" />
</div>
<div class="cell">
<div class="smily-row">
<SmileyCell
:count="props.summary.feedback_assessment?.counts.pass ?? 0"
smiley="it-icon-smiley-happy"
/>
</div>
<div class="cell">
<SmileyCell
:count="props.summary.feedback_assessment?.counts.fail ?? 0"
smiley="it-icon-smiley-thinking"
/>
</div>
<div class="cell">
<SmileyCell
:count="props.summary.feedback_assessment?.counts.unknown ?? 0"
smiley="it-icon-smiley-neutral"
@ -107,7 +99,7 @@ const feedbackProviderName = computed(() => {
</template>
<style lang="postcss" scoped>
.cell {
@apply w-12;
.smily-row {
@apply flex flex-1 justify-end pl-8 lg:justify-start;
}
</style>

72
client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue Normal file
View File

@ -0,0 +1,72 @@
<script setup lang="ts">
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import { useCurrentCourseSession } from "@/composables";
import { computed, ref } from "vue";
import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { t } from "i18next";
const props = defineProps<{
profileUserId: string;
}>();
const courseSession = useCurrentCourseSession();
const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
courseSession.value.id,
props.profileUserId
);
const course = computed(() => courseSession.value.course);
const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
const selectedCircle = ref({ name: t("a.AlleCircle"), id: "_all" });
const circles = computed(() => [
{ name: t("a.AlleCircle"), id: "_all" },
...selfEvaluationFeedbackSummaries.circles.value.map((circle) => ({
name: `Circle: ${circle.title}`,
id: circle.id,
})),
]);
const summaries = computed(() => {
if (selectedCircle.value.id === "_all") {
return selfEvaluationFeedbackSummaries.summaries.value;
}
return selfEvaluationFeedbackSummaries.summaries.value.filter(
(summary) => summary.circle_id === selectedCircle.value.id
);
});
const headerTitle = computed(() => {
if (course.value.configuration.enable_learning_mentor) {
return t("a.Selbst- und Fremdeinschätzungen");
} else {
return t("a.Selbsteinschätzungen");
}
});
</script>
<template>
<div v-if="isLoaded">
<div>
<div class="flex flex-col items-center justify-between pb-4 md:flex-row">
<h2 class="py-4">{{ headerTitle }}</h2>
<ItDropdownSelect
v-model="selectedCircle"
class="text-bold w-full min-w-[18rem] border-2 border-gray-300 md:w-24"
:items="circles"
borderless
></ItDropdownSelect>
</div>
<div class="space-y-3">
<FeedbackByLearningUnitSummary
v-for="summary in summaries"
:key="summary.id"
:summary="summary"
/>
</div>
</div>
</div>
</template>
<style scoped></style>

10
client/src/components/cockpit/SelfEvaluationAndFeedbackOverview.vue → client/src/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue
View File

@ -4,15 +4,15 @@ import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFee
import { useCurrentCourseSession } from "@/composables";
const props = defineProps<{
targetUserId: string;
detailUrl: string;
profileUserId: string;
detailUrl?: string;
}>();
const courseSession = useCurrentCourseSession();
const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
useCurrentCourseSession().value.id,
props.targetUserId
props.profileUserId
);
const selfAssessmentCounts = computed(
@ -78,7 +78,7 @@ const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
<!-- Feedback Evaluation -->
<div
v-if="courseSession.course.configuration.enable_learning_mentor"
class="mb-8 border-t pt-8"
class="border-t pt-8"
>
<h3 class="mb-4 pb-4 lg:pb-0">
{{ $t("a.Fremdeinschätzungen") }}
@ -116,7 +116,7 @@ const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
</ul>
</div>
<!-- Show All (always)-->
<div>
<div v-if="detailUrl" class="pt-8">
<router-link
:to="detailUrl"
class="btn-text inline-flex items-center py-2 pl-0"

21
client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
View File

@ -1,17 +1,16 @@
<script setup lang="ts">
import CockpitProfileContent from "@/components/cockpit/profile/CockpitProfileContent.vue";
import { ref } from "vue";
import CockpitProfileCompetenceOverview from "@/components/cockpit/profile/CockpitProfileCompetenceOverview.vue";
import CockpitProfileCompetenceFeedbackEvaluation from "@/components/cockpit/profile/CockpitProfileCompetenceFeedbackEvaluation.vue";
import { useCurrentCourseSession } from "@/composables";
import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
type SubMenuType = "OVERVIEW" | "DETAILS";
const props = defineProps<{
userId: string;
courseSlug: string;
}>();
type SubMenuType = "OVERVIEW" | "EVALUATION";
interface SubMenuItem {
type: SubMenuType;
label: string;
@ -19,11 +18,9 @@ interface SubMenuItem {
const MENU_ENTRIES: SubMenuItem[] = [
{ type: "OVERVIEW", label: "a.Übersicht" },
{ type: "EVALUATION", label: "a.Selbst- und Fremdeinschätzungen" },
{ type: "DETAILS", label: "a.Selbst- und Fremdeinschätzungen" },
];
const currentCourseSession = useCurrentCourseSession();
const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
</script>
@ -41,13 +38,13 @@ const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
</div>
</template>
<template #main>
<CockpitProfileCompetenceOverview
<SelfEvaluationAndFeedbackOverview
v-if="active.type === 'OVERVIEW'"
:profile-user-id="props.userId"
/>
<CockpitProfileCompetenceFeedbackEvaluation
v-else-if="active.type === 'EVALUATION'"
:course-session-id="currentCourseSession.id"
<SelfEvaluationAndFeedbackList
v-else-if="active.type === 'DETAILS'"
class="w-full"
:profile-user-id="props.userId"
/>
</template>

4
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -11,7 +11,7 @@ import {
competenceCertificateProgressStatusCount,
} from "@/pages/competence/utils";
import ItProgress from "@/components/ui/ItProgress.vue";
import SelfEvaluationAndFeedbackOverview from "@/components/cockpit/SelfEvaluationAndFeedbackOverview.vue";
import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
import { useUserStore } from "@/stores/user";
const props = defineProps<{
@ -132,7 +132,7 @@ const isLoaded = computed(() => !certificatesQuery.fetching.value);
</div>
</section>
<SelfEvaluationAndFeedbackOverview
:target-user-id="useUserStore().id"
:profile-user-id="useUserStore().id"
:detail-url="`/course/${props.courseSlug}/competence/self-evaluation-and-feedback`"
/>
</div>

65
client/src/pages/competence/SelfEvaluationAndFeedbackPage.vue
View File

@ -1,71 +1,12 @@
<script setup lang="ts">
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import { useCurrentCourseSession } from "@/composables";
import { computed, ref } from "vue";
import FeedbackByLearningUnitSummary from "@/components/selfEvaluationFeedback/FeedbackByLearningUnitSummary.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { t } from "i18next";
import { useUserStore } from "@/stores/user";
import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
useCurrentCourseSession().value.id,
useUserStore().id
);
const courseSession = useCurrentCourseSession();
const course = computed(() => courseSession.value.course);
const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
const selectedCircle = ref({ name: t("a.AlleCircle"), id: "_all" });
const circles = computed(() => [
{ name: t("a.AlleCircle"), id: "_all" },
...selfEvaluationFeedbackSummaries.circles.value.map((circle) => ({
name: `Circle: ${circle.title}`,
id: circle.id,
})),
]);
const summaries = computed(() => {
if (selectedCircle.value.id === "_all") {
return selfEvaluationFeedbackSummaries.summaries.value;
}
return selfEvaluationFeedbackSummaries.summaries.value.filter(
(summary) => summary.circle_id === selectedCircle.value.id
);
});
const headerTitle = computed(() => {
if (course.value.configuration.enable_learning_mentor) {
return t("a.Selbst- und Fremdeinschätzungen");
} else {
return t("a.Selbsteinschätzungen");
}
});
const userId = useUserStore().id;
</script>
<template>
<div v-if="isLoaded">
<div class="container-large">
<div class="col flex items-center justify-between pb-4">
<h2 class="py-4">{{ headerTitle }}</h2>
<ItDropdownSelect
v-model="selectedCircle"
class="text-bold w-24 min-w-[18rem] border-2 border-gray-300"
:items="circles"
borderless
></ItDropdownSelect>
</div>
<div class="space-y-3">
<FeedbackByLearningUnitSummary
v-for="summary in summaries"
:key="summary.id"
:summary="summary"
/>
</div>
</div>
</div>
<SelfEvaluationAndFeedbackList :profile-user-id="userId" class="container-large" />
</template>
<style scoped></style>