Show evaluation full screen
This commit is contained in:
Daniel Egger
parent
9a5feb2ba6
commit
26caf06391
|
|
@ -41,7 +41,7 @@ const courseSessionStore = useCourseSessionsStore();
|
|||
const router = useRouter();
|
||||
|
||||
onMounted(async () => {
|
||||
log.debug("AssignmentView mounted", props.assignmentId, props.learningContent);
|
||||
log.debug("AssignmentView mounted", props.assignmentId, props.userId);
|
||||
|
||||
if (courseSessionStore.currentCourseSession) {
|
||||
state.assignmentUser = courseSessionStore.currentCourseSession.users.find(
|
||||
|
|
@ -69,49 +69,60 @@ function exit() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="state.assignment && state.completionData" class="relative">
|
||||
<header
|
||||
class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
|
||||
>
|
||||
<div>Geleitete Fallarbeit: {{ state.assignment.title }}</div>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
|
||||
data-cy="close-learning-content"
|
||||
@click="exit()"
|
||||
<div class="absolute bottom-0 top-0 z-10 w-full bg-white">
|
||||
<div v-if="state.assignment && state.completionData" class="relative">
|
||||
<header
|
||||
class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
|
||||
>
|
||||
<it-icon-close></it-icon-close>
|
||||
</button>
|
||||
</header>
|
||||
<div>Geleitete Fallarbeit: {{ state.assignment.title }}</div>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
|
||||
data-cy="close-learning-content"
|
||||
@click="exit()"
|
||||
>
|
||||
<it-icon-close></it-icon-close>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="flex">
|
||||
<div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-white p-10">
|
||||
<h3>Ergebnisse</h3>
|
||||
<div class="my-6 flex items-center">
|
||||
<img
|
||||
:src="state.assignmentUser?.avatar_url"
|
||||
class="mr-4 h-11 w-11 rounded-full"
|
||||
/>
|
||||
<div class="font-bold">
|
||||
{{ state.assignmentUser?.first_name }}
|
||||
{{ state.assignmentUser?.last_name }}
|
||||
<div class="h-content flex">
|
||||
<div class="h-full w-1/2 overflow-y-auto bg-white">
|
||||
<!-- Left part content goes here -->
|
||||
<div class="p-10">
|
||||
<h3>Ergebnisse</h3>
|
||||
<div class="my-6 flex items-center">
|
||||
<img
|
||||
:src="state.assignmentUser?.avatar_url"
|
||||
class="mr-4 h-11 w-11 rounded-full"
|
||||
/>
|
||||
<div class="font-bold">
|
||||
{{ state.assignmentUser?.first_name }}
|
||||
{{ state.assignmentUser?.last_name }}
|
||||
</div>
|
||||
</div>
|
||||
<AssignmentSubmissionResponses
|
||||
:assignment="state.assignment"
|
||||
:assignment-completion-data="state.completionData?.completion_data"
|
||||
:allow-edit="false"
|
||||
></AssignmentSubmissionResponses>
|
||||
</div>
|
||||
</div>
|
||||
<AssignmentSubmissionResponses
|
||||
:assignment="state.assignment"
|
||||
:assignment-completion-data="state.completionData?.completion_data"
|
||||
:allow-edit="false"
|
||||
></AssignmentSubmissionResponses>
|
||||
</div>
|
||||
<div class="overflow-auto-y min-h-full w-1/2 flex-initial bg-gray-200">
|
||||
<EvaluationContainer
|
||||
:assignment-completion="state.completionData"
|
||||
:assignment-user="state.assignmentUser"
|
||||
:assignment="state.assignment"
|
||||
></EvaluationContainer>
|
||||
<div class="w-1/2 overflow-y-auto bg-gray-200">
|
||||
<EvaluationContainer
|
||||
:assignment-completion="state.completionData"
|
||||
:assignment-user="state.assignmentUser"
|
||||
:assignment="state.assignment"
|
||||
></EvaluationContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
$nav-height: 64px;
|
||||
|
||||
.h-content {
|
||||
height: calc(100vh - $nav-height);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,14 +81,4 @@ function nextTask() {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$nav-height: 86px;
|
||||
|
||||
.h-content {
|
||||
height: calc(100vh - $nav-height);
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: $nav-height;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import log from "loglevel";
|
||||
import { computed, onMounted } from "vue";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import CircleDiagram from "./CircleDiagram.vue";
|
||||
import CircleOverview from "./CircleOverview.vue";
|
||||
import DocumentSection from "./DocumentSection.vue";
|
||||
import LearningSequence from "./LearningSequence.vue";
|
||||
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { uploadCircleDocument } from "@/services/files";
|
||||
import { useCircleStore } from "@/stores/circle";
|
||||
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
||||
import type { CourseSessionUser } from "@/types";
|
||||
|
|
@ -31,8 +31,9 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
|
||||
log.debug("CirclePage created", props.readonly, props.profileUser);
|
||||
|
||||
const appStore = useAppStore();
|
||||
appStore.showMainNavigationBar = true;
|
||||
const showUploadModal = ref(false);
|
||||
const showUploadErrorMessage = ref(false);
|
||||
const isUploading = ref(false);
|
||||
|
||||
const circleStore = useCircleStore();
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ defineEmits(["exit"]);
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full"></div>
|
||||
<div class="absolute bottom-0 top-0 w-full bg-white">
|
||||
<div class="h-content overflow-y-auto">
|
||||
<header
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import LearningContent from "@/pages/learningPath/learningContentPage/LearningContent.vue";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { useCircleStore } from "@/stores/circle";
|
||||
import type { LearningContent as LearningContentType } from "@/types";
|
||||
import * as log from "loglevel";
|
||||
|
|
@ -16,9 +15,6 @@ const props = defineProps<{
|
|||
|
||||
const state: { learningContent?: LearningContentType } = reactive({});
|
||||
|
||||
const appStore = useAppStore();
|
||||
appStore.showMainNavigationBar = false;
|
||||
|
||||
const circleStore = useCircleStore();
|
||||
|
||||
const loadLearningContent = async () => {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import * as log from "loglevel";
|
||||
|
||||
import SelfEvaluation from "@/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue";
|
||||
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { useCircleStore } from "@/stores/circle";
|
||||
import type { LearningUnit } from "@/types";
|
||||
import { onMounted, reactive } from "vue";
|
||||
|
|
@ -16,9 +14,6 @@ const props = defineProps<{
|
|||
learningUnitSlug: string;
|
||||
}>();
|
||||
|
||||
const appStore = useAppStore();
|
||||
appStore.showMainNavigationBar = false;
|
||||
|
||||
const circleStore = useCircleStore();
|
||||
|
||||
const state: { learningUnit?: LearningUnit } = reactive({});
|
||||
|
|
|
|||
|
|
@ -3,33 +3,12 @@ import { defineStore } from "pinia";
|
|||
export type AppState = {
|
||||
userLoaded: boolean;
|
||||
routingFinished: boolean;
|
||||
showMainNavigationBar: boolean;
|
||||
currentCourseSlug: string;
|
||||
};
|
||||
|
||||
const showMainNavigationBarInitialState = () => {
|
||||
let path = window.location.pathname;
|
||||
|
||||
// remove dangling slash
|
||||
if (path.endsWith("/")) {
|
||||
path = path.slice(0, -1);
|
||||
}
|
||||
|
||||
const numberOfSlashes = (path.match(/\//g) || []).length;
|
||||
|
||||
// it should hide main navigation bar when on learning content page
|
||||
if (path.startsWith("/learn/") && numberOfSlashes >= 4) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
export const useAppStore = defineStore({
|
||||
id: "app",
|
||||
state: () =>
|
||||
({
|
||||
showMainNavigationBar: showMainNavigationBarInitialState(),
|
||||
userLoaded: false,
|
||||
routingFinished: false,
|
||||
} as AppState),
|
||||
|
|
|
|||
Loading…
Reference in New Issue