From e8085831dfad68192ce4be107dedf5f4214846bf Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 13 Dec 2022 11:21:16 +0100
Subject: [PATCH] Add learning sequence field

---
 client/src/locales/de.json                    | 18 ++++---
 client/src/pages/cockpit/CockpitIndexPage.vue |  2 +-
 client/src/pages/learningPath/CirclePage.vue  | 51 +++++++++++++++----
 3 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index 51b29218..0dd272c8 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -10,6 +10,7 @@
     "save": "Speichern",
     "learningUnit": "Lerneinheit",
     "learningPath": "Lernpfad",
+    "learningSequence": "Lernsequenz",
     "show": "Anschauen",
     "circles": "Circles",
     "transferTask": "Transferauftrag | Transferaufträge",
@@ -34,13 +35,16 @@
     "duration": "Dauer",
     "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"
+    "documents": {
+      "title": "Unterlagen",
+      "description": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
+      "action": "Unterlagen hochladen",
+      "modalAction": "Datei auswählen",
+      "fileLabel": "Datei",
+      "modalFileName": "Name",
+      "modalNameInformation": "Max. 70 Zeichen",
+      "chooseSequence": "Wähle eine Lernsequenz aus"
+    }
   },
   "learningContent": {
     "completeAndContinue": "Abschliessen und weiter"
diff --git a/client/src/pages/cockpit/CockpitIndexPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue
index 9bf737a3..38714db5 100644
--- a/client/src/pages/cockpit/CockpitIndexPage.vue
+++ b/client/src/pages/cockpit/CockpitIndexPage.vue
@@ -137,7 +137,7 @@ function setActiveCircle(id: number) {
                         diagram-type="horizontalSmall"
                       ></LearningPathDiagram>
                     </div>
-                    <div>KMU Teil 1</div>
+                    <div>Einstieg</div>
                   </div>
                   <div class="ml-4 flex flex-row items-center">
                     <div class="flex flex-row items-center mr-6">
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index bb0a2cce..a5e6dcd9 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -2,18 +2,21 @@
 import CircleDiagram from "@/components/learningPath/CircleDiagram.vue";
 import CircleOverview from "@/components/learningPath/CircleOverview.vue";
 import LearningSequence from "@/components/learningPath/LearningSequence.vue";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import ItModal from "@/components/ui/ItModal.vue";
 import * as log from "loglevel";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
 import { humanizeDuration } from "@/utils/humanizeDuration";
 import _ from "lodash";
 import { computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+const { t } = useI18n();
 
 log.debug("CircleView.vue created", route);
 
@@ -23,6 +26,14 @@ const props = defineProps<{
 }>();
 
 const showUploadModal = ref(false);
+const formData = reactive({
+  file: "",
+  name: "",
+  learningSequence: {
+    id: -1,
+    name: t("circlePage.documents.chooseSequence"),
+  },
+});
 
 const appStore = useAppStore();
 appStore.showMainNavigationBar = true;
@@ -38,6 +49,13 @@ const duration = computed(() => {
   return "";
 });
 
+const dropdownLearningSequences = computed(() =>
+  circleStore.circle?.learningSequences.map((sequence) => ({
+    id: sequence.id,
+    name: sequence.title,
+  }))
+);
+
 onMounted(async () => {
   log.debug("CircleView.vue mounted", props.courseSlug, props.circleSlug);
 
@@ -141,17 +159,17 @@ onMounted(async () => {
 
                   <div class="block border mt-8 p-6">
                     <h3 class="text-blue-dark">
-                      {{ $t("circlePage.documentsTitle") }}
+                      {{ $t("circlePage.documents.title") }}
                     </h3>
                     <div class="leading-relaxed mt-4">
-                      {{ $t("circlePage.documentsDescription") }}
+                      {{ $t("circlePage.documents.description") }}
                     </div>
 
                     <button
                       class="btn-primary mt-4 text-xl"
                       @click="showUploadModal = true"
                     >
-                      {{ $t("circlePage.documentsAction") }}
+                      {{ $t("circlePage.documents.action") }}
                     </button>
                   </div>
 
@@ -182,26 +200,39 @@ onMounted(async () => {
           </div>
         </div>
         <ItModal v-model="showUploadModal">
-          <template #title>{{ $t("circlePage.documentsAction") }}</template>
+          <template #title>{{ $t("circlePage.documents.action") }}</template>
           <template #body>
             <form>
               <label class="block text-bold" for="upload">{{
-                $t("circlePage.documentsModalLabel")
+                $t("circlePage.documents.fileLabel")
               }}</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") }}
+                {{ $t("circlePage.documents.modalAction") }}
               </div>
               <!--p>{{ $t("circlePage.documentsModalInformation") }}</p-->
               <div class="mb-8">
                 <label class="block text-bold mb-4" for="name">{{
-                  $t("circlePage.documentsModalFileName")
+                  $t("circlePage.documents.modalFileName")
                 }}</label>
                 <input type="text" id="name" class="w-1/2 mb-2" />
-                <p>{{ $t("circlePage.documentsModalNameInformation") }}</p>
+                <p>{{ $t("circlePage.documents.modalNameInformation") }}</p>
+              </div>
+              <div class="mb-8">
+                <label class="block text-bold mb-4" for="learningsequnce">{{
+                  $t("general.learningSequence")
+                }}</label>
+                <ItDropdownSelect
+                  v-model="formData.learningSequence"
+                  class="w-full lg:w-96 mt-4 lg:mt-0"
+                  :items="dropdownLearningSequences"
+                >
+                </ItDropdownSelect>
               </div>
               <div class="-mx-8 px-8 pt-4 border-t">
-                <button class="btn-primary text-xl mb-0">{{ $t("general.save") }}</button>
+                <button class="btn-primary text-xl mb-0">
+                  {{ $t("general.save") }}
+                </button>
               </div>
             </form>
           </template>