From 26caf0639177c780a58a1afc1912d9a0a2b736d3 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 5 May 2023 10:17:20 +0200
Subject: [PATCH] Show evaluation full screen

---
 .../AssignmentEvaluationPage.vue              | 87 +++++++++++--------
 .../EvaluationContainer.vue                   | 12 +--
 .../learningPath/circlePage/CirclePage.vue    |  9 +-
 .../LearningContentContainer.vue              |  1 -
 .../LearningContentPage.vue                   |  4 -
 .../selfEvaluationPage/SelfEvaluationPage.vue |  5 --
 client/src/stores/app.ts                      | 21 -----
 7 files changed, 55 insertions(+), 84 deletions(-)

diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
index bf21b35c..fada0aef 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/AssignmentEvaluationPage.vue
@@ -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>
diff --git a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
index 3f5489f9..7afaeab3 100644
--- a/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
+++ b/client/src/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue
@@ -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>
diff --git a/client/src/pages/learningPath/circlePage/CirclePage.vue b/client/src/pages/learningPath/circlePage/CirclePage.vue
index 561ab4d4..992ea71a 100644
--- a/client/src/pages/learningPath/circlePage/CirclePage.vue
+++ b/client/src/pages/learningPath/circlePage/CirclePage.vue
@@ -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();
 
diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
index 64d93c68..b2e2dbe6 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
@@ -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
diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue b/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
index 98e46cb9..9cedba38 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentPage.vue
@@ -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 () => {
diff --git a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue
index 609f2866..b48e635a 100644
--- a/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue
+++ b/client/src/pages/learningPath/selfEvaluationPage/SelfEvaluationPage.vue
@@ -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({});
diff --git a/client/src/stores/app.ts b/client/src/stores/app.ts
index e4cb00f1..29024c29 100644
--- a/client/src/stores/app.ts
+++ b/client/src/stores/app.ts
@@ -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),