From 5e0b69702f09da4ef06d2bada9b83f313bc75562 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 13 Dec 2022 08:42:29 +0100
Subject: [PATCH] Add file upload modal

---
 client/src/components/MainNavigationBar.vue   | 26 +++++-----
 client/src/locales/de.json                    | 10 +++-
 client/src/pages/learningPath/CirclePage.vue  | 49 ++++++++++++++++++-
 .../vbv_lernwelt/core/create_default_users.py |  3 +-
 4 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index 80394067..236bbd2f 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -168,6 +168,19 @@ const profileDropdownData: DropdownListItem[] = [
             <!--              Cockpit-->
             <!--            </router-link>-->
 
+            <router-link
+              v-if="
+                inCourse() &&
+                courseSessionsStore.courseSessionForRoute &&
+                courseSessionsStore.hasCockpit
+              "
+              :to="`${courseSessionsStore.courseSessionForRoute.course_url}/cockpit`"
+              class="nav-item"
+              :class="{ 'nav-item--active': inCockpit() }"
+            >
+              {{ $t("cockpit.title") }}
+            </router-link>
+
             <router-link
               v-if="inCourse() && courseSessionsStore.courseSessionForRoute"
               :to="courseSessionsStore.courseSessionForRoute.learning_path_url"
@@ -186,19 +199,6 @@ const profileDropdownData: DropdownListItem[] = [
               {{ $t("competences.title") }}
             </router-link>
 
-            <router-link
-              v-if="
-                inCourse() &&
-                courseSessionsStore.courseSessionForRoute &&
-                courseSessionsStore.hasCockpit
-              "
-              :to="`${courseSessionsStore.courseSessionForRoute.course_url}/cockpit`"
-              class="nav-item"
-              :class="{ 'nav-item--active': inCockpit() }"
-            >
-              {{ $t("cockpit.title") }}
-            </router-link>
-
             <div class="hidden lg:block flex-auto"></div>
             <a
               class="nav-item"
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index fb2b953f..51b29218 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -32,7 +32,15 @@
   },
   "circlePage": {
     "duration": "Dauer",
-    "circleContentBoxTitle": "Das lernst du in diesem Circle."
+    "circleContentBoxTitle": "Das lernst du in diesem Circle.",
+    "gotQuestions": "Hast du Fragen?",
+    "documentsTitle": "Unterlagen",
+    "documentsDescription": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
+    "documentsAction": "Unterlagen hochladen",
+    "documentsModalAction": "Datei auswählen",
+    "documentsModalLabel": "Datei",
+    "documentsModalFileName": "Name",
+    "documentsModalNameInformation": "Max. 70 Zeichen"
   },
   "learningContent": {
     "completeAndContinue": "Abschliessen und weiter"
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index 76a76900..bb0a2cce 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -2,7 +2,9 @@
 import CircleDiagram from "@/components/learningPath/CircleDiagram.vue";
 import CircleOverview from "@/components/learningPath/CircleOverview.vue";
 import LearningSequence from "@/components/learningPath/LearningSequence.vue";
+import ItModal from "@/components/ui/ItModal.vue";
 import * as log from "loglevel";
+import { ref } from "vue";
 
 import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
@@ -20,6 +22,8 @@ const props = defineProps<{
   circleSlug: string;
 }>();
 
+const showUploadModal = ref(false);
+
 const appStore = useAppStore();
 appStore.showMainNavigationBar = true;
 
@@ -110,7 +114,7 @@ onMounted(async () => {
                     @click="circleStore.page = 'OVERVIEW'"
                   >
                     <it-icon-info class="mr-2" />
-                    Das lernst du in diesem Circle
+                    {{ $t("circlePage.circleContentBoxTitle") }}
                   </div>
                   <div class="inline-flex items-center">
                     <it-icon-message class="mr-2" />
@@ -135,8 +139,24 @@ onMounted(async () => {
                     </button>
                   </div>
 
+                  <div class="block border mt-8 p-6">
+                    <h3 class="text-blue-dark">
+                      {{ $t("circlePage.documentsTitle") }}
+                    </h3>
+                    <div class="leading-relaxed mt-4">
+                      {{ $t("circlePage.documentsDescription") }}
+                    </div>
+
+                    <button
+                      class="btn-primary mt-4 text-xl"
+                      @click="showUploadModal = true"
+                    >
+                      {{ $t("circlePage.documentsAction") }}
+                    </button>
+                  </div>
+
                   <div class="expert border mt-8 p-6">
-                    <h3 class="text-blue-dark">Hast du Fragen?</h3>
+                    <h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3>
                     <div class="leading-relaxed mt-4">
                       Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.
                     </div>
@@ -161,6 +181,31 @@ onMounted(async () => {
             </div>
           </div>
         </div>
+        <ItModal v-model="showUploadModal">
+          <template #title>{{ $t("circlePage.documentsAction") }}</template>
+          <template #body>
+            <form>
+              <label class="block text-bold" for="upload">{{
+                $t("circlePage.documentsModalLabel")
+              }}</label>
+              <div class="btn-secondary mt-4 mb-8 text-xl relative cursor-pointer">
+                <input id="upload" type="file" class="absolute opacity-0" />
+                {{ $t("circlePage.documentsModalAction") }}
+              </div>
+              <!--p>{{ $t("circlePage.documentsModalInformation") }}</p-->
+              <div class="mb-8">
+                <label class="block text-bold mb-4" for="name">{{
+                  $t("circlePage.documentsModalFileName")
+                }}</label>
+                <input type="text" id="name" class="w-1/2 mb-2" />
+                <p>{{ $t("circlePage.documentsModalNameInformation") }}</p>
+              </div>
+              <div class="-mx-8 px-8 pt-4 border-t">
+                <button class="btn-primary text-xl mb-0">{{ $t("general.save") }}</button>
+              </div>
+            </form>
+          </template>
+        </ItModal>
       </div>
     </Transition>
   </div>
diff --git a/server/vbv_lernwelt/core/create_default_users.py b/server/vbv_lernwelt/core/create_default_users.py
index 7cbbee64..861ade66 100644
--- a/server/vbv_lernwelt/core/create_default_users.py
+++ b/server/vbv_lernwelt/core/create_default_users.py
@@ -122,10 +122,11 @@ def create_default_users(user_model=User, group_model=Group, default_password=No
         last_name="VV",
     )
     _create_student_user(
-        email="patrizia.huggel@eiger-versicherung.ch",
+        email="patrizia.huggel@eiger-versicherungen.ch",
         first_name="Patrizia",
         last_name="Huggel",
         avatar_url="/static/avatars/uk1.patrizia.huggel.jpg",
+        password="myvbv1234",
     )
     _create_student_user(
         email="daniel.tanaka@eiger-versicherung.ch",