chore: workaround to make show all clickable in competence profile page

This commit is contained in:
Livio Bieri 2024-03-06 13:36:52 +01:00
parent 53b2b77472
commit 84f2761795
4 changed files with 29 additions and 12 deletions

View File

@ -3,9 +3,10 @@ import { computed } from "vue";
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback"; import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import { useCurrentCourseSession } from "@/composables"; import { useCurrentCourseSession } from "@/composables";
const emit = defineEmits(["showAll"]);
const props = defineProps<{ const props = defineProps<{
profileUserId: string; profileUserId: string;
detailUrl?: string;
}>(); }>();
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
@ -116,15 +117,13 @@ const isLoaded = computed(() => !selfEvaluationFeedbackSummaries.loading.value);
</ul> </ul>
</div> </div>
<!-- Show All (always)--> <!-- Show All (always)-->
<div v-if="detailUrl" class="pt-8"> <button
<router-link class="btn-text inline-flex items-center py-2 pl-0 pt-8"
:to="detailUrl" @click="emit('showAll')"
class="btn-text inline-flex items-center py-2 pl-0" >
> <span>{{ $t("general.showAll") }}</span>
<span>{{ $t("general.showAll") }}</span> <it-icon-arrow-right></it-icon-arrow-right>
<it-icon-arrow-right></it-icon-arrow-right> </button>
</router-link>
</div>
</div> </div>
</template> </template>
</template> </template>

View File

@ -3,6 +3,7 @@ import CockpitProfileContent from "@/components/cockpit/profile/CockpitProfileCo
import { ref } from "vue"; import { ref } from "vue";
import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue"; import SelfEvaluationAndFeedbackList from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackList.vue";
import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"; import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
import { useCurrentCourseSession } from "@/composables";
type SubMenuType = "OVERVIEW" | "DETAILS"; type SubMenuType = "OVERVIEW" | "DETAILS";
@ -18,10 +19,18 @@ interface SubMenuItem {
const MENU_ENTRIES: SubMenuItem[] = [ const MENU_ENTRIES: SubMenuItem[] = [
{ type: "OVERVIEW", label: "a.Übersicht" }, { type: "OVERVIEW", label: "a.Übersicht" },
{ type: "DETAILS", label: "a.Selbst- und Fremdeinschätzungen" }, {
type: "DETAILS",
label: useCurrentCourseSession().value.course.configuration.enable_learning_mentor
? "a.Selbst- und Fremdeinschätzungen"
: "a.Selbsteinschätzungen",
},
]; ];
const active = ref<SubMenuItem>(MENU_ENTRIES[0]); const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
const selectDetails = () => {
active.value = MENU_ENTRIES[1];
};
</script> </script>
<template> <template>
@ -41,6 +50,7 @@ const active = ref<SubMenuItem>(MENU_ENTRIES[0]);
<SelfEvaluationAndFeedbackOverview <SelfEvaluationAndFeedbackOverview
v-if="active.type === 'OVERVIEW'" v-if="active.type === 'OVERVIEW'"
:profile-user-id="props.userId" :profile-user-id="props.userId"
@show-all="selectDetails"
/> />
<SelfEvaluationAndFeedbackList <SelfEvaluationAndFeedbackList
v-else-if="active.type === 'DETAILS'" v-else-if="active.type === 'DETAILS'"

View File

@ -13,6 +13,7 @@ import {
import ItProgress from "@/components/ui/ItProgress.vue"; import ItProgress from "@/components/ui/ItProgress.vue";
import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue"; import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
const props = defineProps<{ const props = defineProps<{
courseSlug: string; courseSlug: string;
@ -52,6 +53,8 @@ const userPointsEvaluatedAssignments = computed(() => {
const currentCourseSession = useCurrentCourseSession(); const currentCourseSession = useCurrentCourseSession();
const isLoaded = computed(() => !certificatesQuery.fetching.value); const isLoaded = computed(() => !certificatesQuery.fetching.value);
const router = useRouter();
</script> </script>
<template> <template>
@ -133,7 +136,11 @@ const isLoaded = computed(() => !certificatesQuery.fetching.value);
</section> </section>
<SelfEvaluationAndFeedbackOverview <SelfEvaluationAndFeedbackOverview
:profile-user-id="useUserStore().id" :profile-user-id="useUserStore().id"
:detail-url="`/course/${props.courseSlug}/competence/self-evaluation-and-feedback`" @show-all="
() => {
router.push({ name: 'selfEvaluationAndFeedback' });
}
"
/> />
</div> </div>
</template> </template>

View File

@ -105,6 +105,7 @@ const router = createRouter({
import("@/pages/competence/CompetenceCertificateDetailPage.vue"), import("@/pages/competence/CompetenceCertificateDetailPage.vue"),
}, },
{ {
name: "selfEvaluationAndFeedback",
path: "self-evaluation-and-feedback", path: "self-evaluation-and-feedback",
props: true, props: true,
component: () => component: () =>