From 0bae4a8cb240d2b99be4da3baa5ecf27c5f55a2a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 27 Apr 2023 11:55:45 +0200
Subject: [PATCH 01/10] Add info block for teachers

Also refactor CirclePage

Resolves VBV-310
---
 client/src/locales/de.json                    |   4 +
 .../learningPath/circlePage/CirclePage.vue    | 119 ++----------------
 .../learningPath/circlePage/DocumentBlock.vue | 119 ++++++++++++++++++
 3 files changed, 132 insertions(+), 110 deletions(-)
 create mode 100644 client/src/pages/learningPath/circlePage/DocumentBlock.vue

diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index 5f668bf9..1a8d9847 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -16,6 +16,10 @@
       "modalNameInformation": "Max. 70 Zeichen",
       "selectFile": "Bitte wähle eine Datei aus",
       "title": "Unterlagen",
+      "trainerDescription": "Finde auf Teams zusätzliche Inhalte für deinen Unterricht.",
+      "trainerLinkSrc": "https://teams.microsoft.com",
+      "trainerLinkText": "Inhalte auf Teams anschauen",
+      "trainerTitle": "Begleitung für Trainer",
       "uploadErrorMessage": "Beim Hochladen ist ein Fehler aufgetreten. Bitte versuche es erneut.",
       "userDescription": "Hier findest du die Unterlagen, die dir die Fachexpertin zur Verfügung gestellt hat."
     },
diff --git a/client/src/pages/learningPath/circlePage/CirclePage.vue b/client/src/pages/learningPath/circlePage/CirclePage.vue
index 88691e92..f782e807 100644
--- a/client/src/pages/learningPath/circlePage/CirclePage.vue
+++ b/client/src/pages/learningPath/circlePage/CirclePage.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import ItModal from "@/components/ui/ItModal.vue";
-import * as log from "loglevel";
-import { computed, onMounted, ref, watch } from "vue";
+import log from "loglevel";
+import { computed, onMounted } from "vue";
 import CircleDiagram from "./CircleDiagram.vue";
 import CircleOverview from "./CircleOverview.vue";
-import DocumentUploadForm from "./DocumentUploadForm.vue";
+import DocumentBlock from "./DocumentBlock.vue";
 import LearningSequence from "./LearningSequence.vue";
 
-import { uploadCircleDocument } from "@/services/files";
 import { useAppStore } from "@/stores/app";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
-import type { CourseSessionUser, DocumentUploadData } from "@/types";
+import type { CourseSessionUser } from "@/types";
 import { humanizeDuration } from "@/utils/humanizeDuration";
 import sumBy from "lodash/sumBy";
 import { useRoute } from "vue-router";
 
-const route = useRoute();
-const courseSessionsStore = useCourseSessionsStore();
-
-interface Props {
+export interface Props {
   courseSlug: string;
   circleSlug: string;
   profileUser?: CourseSessionUser;
   readonly?: boolean;
 }
 
+const route = useRoute();
+const courseSessionsStore = useCourseSessionsStore();
+
 const props = withDefaults(defineProps<Props>(), {
   readonly: false,
   profileUser: undefined,
@@ -33,10 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 log.debug("CirclePage created", props.readonly, props.profileUser);
 
-const showUploadModal = ref(false);
-const showUploadErrorMessage = ref(false);
-const isUploading = ref(false);
-
 const appStore = useAppStore();
 appStore.showMainNavigationBar = true;
 
@@ -51,15 +45,6 @@ const duration = computed(() => {
   return "";
 });
 
-const dropdownLearningSequences = computed(() =>
-  circleStore.circle?.learningSequences.map((sequence) => ({
-    id: sequence.id,
-    name: sequence.title,
-  }))
-);
-
-watch(showUploadModal, (_v) => (showUploadErrorMessage.value = false));
-
 onMounted(async () => {
   log.debug(
     "CirclePage mounted",
@@ -107,28 +92,6 @@ onMounted(async () => {
     log.error(error);
   }
 });
-
-async function uploadDocument(data: DocumentUploadData) {
-  isUploading.value = true;
-  showUploadErrorMessage.value = false;
-  try {
-    if (!courseSessionsStore.currentCourseSession) {
-      throw new Error("No course session found");
-    }
-    const newDocument = await uploadCircleDocument(
-      data,
-      courseSessionsStore.currentCourseSession.id
-    );
-    const courseSessionStore = useCourseSessionsStore();
-    courseSessionStore.addDocument(newDocument);
-    showUploadModal.value = false;
-    isUploading.value = false;
-  } catch (error) {
-    log.error(error);
-    showUploadErrorMessage.value = true;
-    isUploading.value = false;
-  }
-}
 </script>
 
 <template>
@@ -213,60 +176,7 @@ async function uploadDocument(data: DocumentUploadData) {
                       {{ $t("circlePage.learnMore") }}
                     </button>
                   </div>
-                  <div v-if="!props.readonly" class="mt-8 block border p-6">
-                    <h3 class="text-blue-dark">
-                      {{ $t("circlePage.documents.title") }}
-                    </h3>
-                    <div v-if="!courseSessionsStore.canUploadCircleDocuments">
-                      <div class="mt-4 leading-relaxed">
-                        {{ $t("circlePage.documents.userDescription") }}
-                      </div>
-                    </div>
-                    <ol
-                      v-if="
-                        courseSessionsStore &&
-                        courseSessionsStore.circleDocuments &&
-                        courseSessionsStore.circleDocuments.length > 0
-                      "
-                    >
-                      <li
-                        v-for="learningSequence of courseSessionsStore.circleDocuments"
-                        :key="learningSequence.id"
-                      >
-                        <h4 class="text-bold mt-4">{{ learningSequence.title }}</h4>
-                        <ul>
-                          <li
-                            v-for="document of learningSequence.documents"
-                            :key="document.url"
-                          >
-                            <a :href="document.url" download>
-                              <span>{{ document.name }}</span>
-                            </a>
-                            <button
-                              v-if="courseSessionsStore.canUploadCircleDocuments"
-                              type="button"
-                              class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
-                              @click="courseSessionsStore.removeDocument(document.id)"
-                            >
-                              <it-icon-close class="h-3 w-3"></it-icon-close>
-                            </button>
-                          </li>
-                        </ul>
-                      </li>
-                    </ol>
-                    <div v-if="courseSessionsStore.canUploadCircleDocuments">
-                      <div class="mt-4 leading-relaxed">
-                        {{ $t("circlePage.documents.expertDescription") }}
-                      </div>
-                      <button
-                        class="btn-primary mt-4 text-xl"
-                        @click="showUploadModal = true"
-                      >
-                        {{ $t("circlePage.documents.action") }}
-                      </button>
-                    </div>
-                  </div>
-
+                  <DocumentBlock v-if="!readonly" />
                   <div v-if="!props.readonly" class="expert mt-8 border p-6">
                     <h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3>
                     <div class="mt-4 leading-relaxed">
@@ -312,17 +222,6 @@ async function uploadDocument(data: DocumentUploadData) {
             </div>
           </div>
         </div>
-        <ItModal v-model="showUploadModal">
-          <template #title>{{ $t("circlePage.documents.action") }}</template>
-          <template #body>
-            <DocumentUploadForm
-              :learning-sequences="dropdownLearningSequences"
-              :show-upload-error-message="showUploadErrorMessage"
-              :is-uploading="isUploading"
-              @form-submit="uploadDocument"
-            />
-          </template>
-        </ItModal>
       </div>
     </Transition>
   </div>
diff --git a/client/src/pages/learningPath/circlePage/DocumentBlock.vue b/client/src/pages/learningPath/circlePage/DocumentBlock.vue
new file mode 100644
index 00000000..f27cd515
--- /dev/null
+++ b/client/src/pages/learningPath/circlePage/DocumentBlock.vue
@@ -0,0 +1,119 @@
+<template>
+  <div  class="mt-8 block border p-6">
+    <!-- documents block -->
+    <h3 class="text-blue-dark">
+      {{ $t("circlePage.documents.title") }}
+    </h3>
+    <div v-if="!courseSessionsStore.canUploadCircleDocuments">
+      <div class="mt-4 leading-relaxed">
+        {{ $t("circlePage.documents.userDescription") }}
+      </div>
+    </div>
+    <ol
+      v-if="
+        courseSessionsStore &&
+        courseSessionsStore.circleDocuments &&
+        courseSessionsStore.circleDocuments.length > 0
+      "
+    >
+      <li
+        v-for="learningSequence of courseSessionsStore.circleDocuments"
+        :key="learningSequence.id"
+      >
+        <h4 class="text-bold mt-4">{{ learningSequence.title }}</h4>
+        <ul>
+          <li v-for="document of learningSequence.documents" :key="document.url">
+            <a :href="document.url" download>
+              <span>{{ document.name }}</span>
+            </a>
+            <button
+              v-if="courseSessionsStore.canUploadCircleDocuments"
+              type="button"
+              class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
+              @click="courseSessionsStore.removeDocument(document.id)"
+            >
+              <it-icon-close class="h-3 w-3"></it-icon-close>
+            </button>
+          </li>
+        </ul>
+      </li>
+    </ol>
+    <div v-if="courseSessionsStore.canUploadCircleDocuments">
+      <div class="mt-4 leading-relaxed">
+        {{ $t("circlePage.documents.expertDescription") }}
+      </div>
+      <button class="btn-primary mt-4 text-xl" @click="showUploadModal = true">
+        {{ $t("circlePage.documents.action") }}
+      </button>
+    </div>
+  </div>
+  <ItModal v-model="showUploadModal">
+    <template #title>{{ $t("circlePage.documents.action") }}</template>
+    <template #body>
+      <DocumentUploadForm
+        :learning-sequences="dropdownLearningSequences"
+        :show-upload-error-message="showUploadErrorMessage"
+        :is-uploading="isUploading"
+        @form-submit="uploadDocument"
+      />
+    </template>
+  </ItModal>
+  <div
+    v-if="courseSessionsStore.canUploadCircleDocuments"
+    class="mt-8 flex flex-col gap-y-4 border p-6"
+  >
+    <h3 class="text-blue-dark">
+      {{ $t("circlePage.documents.trainerTitle") }}
+    </h3>
+    <div class="leading-relaxed">
+      {{ $t("circlePage.documents.trainerDescription") }}
+    </div>
+    <a target="_blank" class="link" :href="$t('circlePage.documents.trainerLinkSrc')">
+      {{ $t("circlePage.documents.trainerLinkText") }}
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ItModal from "@/components/ui/ItModal.vue";
+import { uploadCircleDocument } from "@/services/files";
+import { useCircleStore } from "@/stores/circle";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import type { DocumentUploadData } from "@/types";
+import log from "loglevel";
+import { computed, ref, watch } from "vue";
+import DocumentUploadForm from "./DocumentUploadForm.vue";
+const courseSessionsStore = useCourseSessionsStore();
+const circleStore = useCircleStore();
+const showUploadModal = ref(false);
+const showUploadErrorMessage = ref(false);
+const isUploading = ref(false);
+const dropdownLearningSequences = computed(() =>
+  circleStore.circle?.learningSequences.map((sequence) => ({
+    id: sequence.id,
+    name: sequence.title,
+  }))
+);
+watch(showUploadModal, () => (showUploadErrorMessage.value = false));
+async function uploadDocument(data: DocumentUploadData) {
+  isUploading.value = true;
+  showUploadErrorMessage.value = false;
+  try {
+    if (!courseSessionsStore.currentCourseSession) {
+      throw new Error("No course session found");
+    }
+    const newDocument = await uploadCircleDocument(
+      data,
+      courseSessionsStore.currentCourseSession.id
+    );
+    const courseSessionStore = useCourseSessionsStore();
+    courseSessionStore.addDocument(newDocument);
+    showUploadModal.value = false;
+    isUploading.value = false;
+  } catch (error) {
+    log.error(error);
+    showUploadErrorMessage.value = true;
+    isUploading.value = false;
+  }
+}
+</script>

From 78037b337325ea7f14078360798e4bc3dd00e0d6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 27 Apr 2023 12:01:35 +0200
Subject: [PATCH 02/10] Rename component

---
 client/src/pages/learningPath/circlePage/CirclePage.vue       | 4 ++--
 .../circlePage/{DocumentBlock.vue => DocumentSection.vue}     | 0
 .../src/pages/learningPath/circlePage/DocumentUploadForm.vue  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename client/src/pages/learningPath/circlePage/{DocumentBlock.vue => DocumentSection.vue} (100%)

diff --git a/client/src/pages/learningPath/circlePage/CirclePage.vue b/client/src/pages/learningPath/circlePage/CirclePage.vue
index f782e807..561ab4d4 100644
--- a/client/src/pages/learningPath/circlePage/CirclePage.vue
+++ b/client/src/pages/learningPath/circlePage/CirclePage.vue
@@ -3,7 +3,7 @@ import log from "loglevel";
 import { computed, onMounted } from "vue";
 import CircleDiagram from "./CircleDiagram.vue";
 import CircleOverview from "./CircleOverview.vue";
-import DocumentBlock from "./DocumentBlock.vue";
+import DocumentSection from "./DocumentSection.vue";
 import LearningSequence from "./LearningSequence.vue";
 
 import { useAppStore } from "@/stores/app";
@@ -176,7 +176,7 @@ onMounted(async () => {
                       {{ $t("circlePage.learnMore") }}
                     </button>
                   </div>
-                  <DocumentBlock v-if="!readonly" />
+                  <DocumentSection v-if="!readonly" />
                   <div v-if="!props.readonly" class="expert mt-8 border p-6">
                     <h3 class="text-blue-dark">{{ $t("circlePage.gotQuestions") }}</h3>
                     <div class="mt-4 leading-relaxed">
diff --git a/client/src/pages/learningPath/circlePage/DocumentBlock.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
similarity index 100%
rename from client/src/pages/learningPath/circlePage/DocumentBlock.vue
rename to client/src/pages/learningPath/circlePage/DocumentSection.vue
diff --git a/client/src/pages/learningPath/circlePage/DocumentUploadForm.vue b/client/src/pages/learningPath/circlePage/DocumentUploadForm.vue
index 35b9736d..f268ee71 100644
--- a/client/src/pages/learningPath/circlePage/DocumentUploadForm.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentUploadForm.vue
@@ -4,7 +4,7 @@ import type { DocumentUploadData, DropdownSelectable } from "@/types";
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 
-interface Props {
+export interface Props {
   learningSequences: DropdownSelectable[];
   showUploadErrorMessage: boolean;
   isUploading: boolean;

From af7f0c92235a572d5081a3f68b96196e825e1d7a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 1 May 2023 21:40:04 +0200
Subject: [PATCH 03/10] Update layout for document list

Relates to VBV-324
---
 .../circlePage/DocumentListItem.vue           | 33 +++++++++++
 .../circlePage/DocumentSection.vue            | 59 ++++++++-----------
 client/src/stores/courseSessions.ts           | 30 +++++-----
 client/tailwind.config.js                     |  2 +
 .../vbv_lernwelt/static/icons/icon-delete.svg |  4 ++
 .../static/icons/icon-download.svg            |  1 +
 6 files changed, 81 insertions(+), 48 deletions(-)
 create mode 100644 client/src/pages/learningPath/circlePage/DocumentListItem.vue
 create mode 100644 server/vbv_lernwelt/static/icons/icon-delete.svg
 create mode 100644 server/vbv_lernwelt/static/icons/icon-download.svg

diff --git a/client/src/pages/learningPath/circlePage/DocumentListItem.vue b/client/src/pages/learningPath/circlePage/DocumentListItem.vue
new file mode 100644
index 00000000..c9b4632f
--- /dev/null
+++ b/client/src/pages/learningPath/circlePage/DocumentListItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <li
+    :key="doc.url"
+    class="grid grid-cols-document-list-item border-b border-b-gray-500 py-3 grid-areas-document-list-item"
+  >
+    <h3 class="grid-in-title">
+      {{ doc.name }}
+    </h3>
+    <h4 class="grid-in-subtitle">{{ subtitle }}</h4>
+    <div class="flex items-center justify-end gap-x-4 grid-in-icons">
+      <a v-if="canDelete" class="flex cursor-pointer" @click="emit('delete')">
+        <it-icon-delete class="h-8 w-8" />
+      </a>
+
+      <a download :href="doc.url" class="flex">
+        <it-icon-download class="h-8 w-8" />
+      </a>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  doc: {
+    url: string;
+    name: string;
+  };
+  canDelete: boolean;
+  subtitle: string;
+}>();
+
+const emit = defineEmits(["delete"]);
+</script>
diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index f27cd515..f5172f21 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -1,48 +1,38 @@
 <template>
-  <div  class="mt-8 block border p-6">
-    <!-- documents block -->
+  <div class="mt-8 block border p-6">
     <h3 class="text-blue-dark">
       {{ $t("circlePage.documents.title") }}
     </h3>
-    <div v-if="!courseSessionsStore.canUploadCircleDocuments">
+    <div>
       <div class="mt-4 leading-relaxed">
-        {{ $t("circlePage.documents.userDescription") }}
+        <template v-if="!courseSessionsStore.canUploadCircleDocuments">
+          {{ $t("circlePage.documents.userDescription") }}
+        </template>
+        <template v-else>
+          {{ $t("circlePage.documents.expertDescription") }}
+        </template>
       </div>
     </div>
-    <ol
-      v-if="
-        courseSessionsStore &&
-        courseSessionsStore.circleDocuments &&
-        courseSessionsStore.circleDocuments.length > 0
-      "
+    <ul
+      v-if="courseSessionsStore.circleDocuments.length"
+      class="mt-8 border-t border-t-gray-500"
     >
-      <li
+      <template
         v-for="learningSequence of courseSessionsStore.circleDocuments"
         :key="learningSequence.id"
       >
-        <h4 class="text-bold mt-4">{{ learningSequence.title }}</h4>
-        <ul>
-          <li v-for="document of learningSequence.documents" :key="document.url">
-            <a :href="document.url" download>
-              <span>{{ document.name }}</span>
-            </a>
-            <button
-              v-if="courseSessionsStore.canUploadCircleDocuments"
-              type="button"
-              class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
-              @click="courseSessionsStore.removeDocument(document.id)"
-            >
-              <it-icon-close class="h-3 w-3"></it-icon-close>
-            </button>
-          </li>
-        </ul>
-      </li>
-    </ol>
+        <DocumentListItem
+          v-for="doc of learningSequence.documents"
+          :key="doc.url"
+          :subtitle="learningSequence.title"
+          :can-delete="courseSessionsStore.canUploadCircleDocuments"
+          :doc="doc"
+          @delete="deleteDocument(doc)"
+        />
+      </template>
+    </ul>
     <div v-if="courseSessionsStore.canUploadCircleDocuments">
-      <div class="mt-4 leading-relaxed">
-        {{ $t("circlePage.documents.expertDescription") }}
-      </div>
-      <button class="btn-primary mt-4 text-xl" @click="showUploadModal = true">
+      <button class="btn-primary mt-8 text-xl" @click="showUploadModal = true">
         {{ $t("circlePage.documents.action") }}
       </button>
     </div>
@@ -79,9 +69,10 @@ import ItModal from "@/components/ui/ItModal.vue";
 import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
-import type { DocumentUploadData } from "@/types";
+import type { CircleDocument, DocumentUploadData } from "@/types";
 import log from "loglevel";
 import { computed, ref, watch } from "vue";
+import DocumentListItem from "./DocumentListItem.vue";
 import DocumentUploadForm from "./DocumentUploadForm.vue";
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index c928586a..3124a1e2 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -182,21 +182,23 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const circleDocuments = computed(() => {
     const circleStore = useCircleStore();
 
-    return circleStore.circle?.learningSequences
-      .map((ls) => ({ id: ls.id, title: ls.title, documents: [] }))
-      .map((ls: { id: number; title: string; documents: CircleDocument[] }) => {
-        if (currentCourseSession.value === undefined) {
-          return ls;
-        }
-
-        for (const document of currentCourseSession.value.documents) {
-          if (document.learning_sequence === ls.id) {
-            ls.documents.push(document);
+    return (
+      circleStore.circle?.learningSequences
+        .map((ls) => ({ id: ls.id, title: ls.title, documents: [] }))
+        .map((ls: { id: number; title: string; documents: CircleDocument[] }) => {
+          if (currentCourseSession.value === undefined) {
+            return ls;
           }
-        }
-        return ls;
-      })
-      .filter((ls) => ls.documents.length > 0);
+
+          for (const document of currentCourseSession.value.documents) {
+            if (document.learning_sequence === ls.id) {
+              ls.documents.push(document);
+            }
+          }
+          return ls;
+        })
+        .filter((ls) => ls.documents.length > 0) || []
+    );
   });
 
   function addDocument(document: CircleDocument) {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index baef2d07..6b0011e2 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -51,11 +51,13 @@ module.exports = {
         ],
         "rating-scale-slim": ["bar bar bar", "fst mid fth"],
         "icon-card": ["icon title", "icon value"],
+        "document-list-item": ["title icons", "subtitle icons"],
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
         "horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
         "icon-card": "60px auto",
+        "document-list-item": "1fr 100px",
       },
       gridTemplateRows: {
         "horizontal-bar-chart": "200px 40px",
diff --git a/server/vbv_lernwelt/static/icons/icon-delete.svg b/server/vbv_lernwelt/static/icons/icon-delete.svg
new file mode 100644
index 00000000..39ec0664
--- /dev/null
+++ b/server/vbv_lernwelt/static/icons/icon-delete.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <path d="m25.63,7.06h-6.08v-1.05c0-1.18-.96-2.14-2.14-2.14h-4.83c-1.18,0-2.14.96-2.14,2.14v1.05h-6.08v1.5h2.61l.82,15.54c.06,1.14,1,2.03,2.14,2.03h10.14c1.14,0,2.08-.89,2.14-2.03l.82-15.54h2.61v-1.5Zm-13.69-1.05c0-.35.29-.64.64-.64h4.83c.35,0,.64.29.64.64v1.05h-6.11v-1.05Zm8.76,18.02c-.02.34-.3.61-.64.61h-10.14c-.34,0-.62-.27-.64-.61l-.81-15.46h13.04l-.81,15.46Z"/>
+</svg>
\ No newline at end of file
diff --git a/server/vbv_lernwelt/static/icons/icon-download.svg b/server/vbv_lernwelt/static/icons/icon-download.svg
new file mode 100644
index 00000000..5b63d09a
--- /dev/null
+++ b/server/vbv_lernwelt/static/icons/icon-download.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M15,22.31c.19,0,.38-.07,.53-.22l7.45-7.45-1.06-1.06-6.17,6.17V3.83h-1.5v15.92l-6.17-6.17-1.06,1.06,7.45,7.45c.15,.15,.34,.22,.53,.22Z"/><rect x="4.94" y="24.84" width="20.11" height="1.5"/></svg>
\ No newline at end of file

From 17028b8905741ecc6b068f7c07058d428278a992 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 1 May 2023 21:41:58 +0200
Subject: [PATCH 04/10] Add 2 types of confirm modal

Still need to be refactored into one
---
 client/src/components/ui/ConfirmDialog.vue    | 34 +++++++++++++
 client/src/components/ui/ItModal.vue          | 34 +++++++------
 client/src/locales/de.json                    |  2 +
 .../circlePage/DocumentSection.vue            | 50 +++++++++++++++++++
 4 files changed, 104 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/ui/ConfirmDialog.vue

diff --git a/client/src/components/ui/ConfirmDialog.vue b/client/src/components/ui/ConfirmDialog.vue
new file mode 100644
index 00000000..5796b200
--- /dev/null
+++ b/client/src/components/ui/ConfirmDialog.vue
@@ -0,0 +1,34 @@
+<template>
+  <Dialog :open="isOpen" class="relative z-50" @close="close">
+    <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
+    <div class="fixed inset-0 flex items-center justify-center p-4">
+      <DialogPanel class="w-full max-w-2xl bg-white pt-8">
+        <div class="px-8 pb-4">
+          <DialogTitle class="relative mb-8 flex flex-row">{{ title }}</DialogTitle>
+          Hallo Velo
+        </div>
+        <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
+          <button class="btn-primary" @click="confirm">Löschen</button>
+          <button class="btn-secondary" @click="close">Abbrechen</button>
+        </div>
+      </DialogPanel>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+
+defineProps<{
+  isOpen: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits(["confirm", "close"]);
+const close = () => {
+  emit("close");
+};
+const confirm = () => {
+  emit("confirm");
+};
+</script>
diff --git a/client/src/components/ui/ItModal.vue b/client/src/components/ui/ItModal.vue
index f962eb96..1930002e 100644
--- a/client/src/components/ui/ItModal.vue
+++ b/client/src/components/ui/ItModal.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 
-interface Props {
+export interface Props {
   modelValue: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   modelValue: false,
 });
 
@@ -20,20 +20,22 @@ function setIsOpen(value: boolean) {
   <Dialog :open="modelValue" class="relative z-50" @close="setIsOpen">
     <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
     <div class="fixed inset-0 flex items-center justify-center p-4">
-      <DialogPanel class="w-full max-w-2xl bg-white px-8 pb-4 pt-8">
-        <DialogTitle class="relative mb-8 flex flex-row">
-          <slot name="title"></slot>
-          <button
-            type="button"
-            class="absolute right-4 h-4 w-4 cursor-pointer"
-            @click="setIsOpen(false)"
-          >
-            <it-icon-close></it-icon-close>
-          </button>
-        </DialogTitle>
-        <DialogDescription></DialogDescription>
+      <DialogPanel class="w-full max-w-2xl bg-white pt-8">
+        <div class="px-8 pb-4">
+          <DialogTitle class="relative mb-8 flex flex-row">
+            <slot name="title"></slot>
+            <button
+              type="button"
+              class="absolute right-4 h-4 w-4 cursor-pointer"
+              @click="setIsOpen(false)"
+            >
+              <it-icon-close></it-icon-close>
+            </button>
+          </DialogTitle>
 
-        <slot name="body"></slot>
+          <slot name="body"></slot>
+        </div>
+        <slot name="footer" />
       </DialogPanel>
     </div>
   </Dialog>
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index 1a8d9847..25dc92f4 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -8,6 +8,8 @@
       "chooseLearningSequence": "Bitte wähle eine Lernsequenz aus",
       "chooseName": "Bitte wähle einen Namen",
       "chooseSequence": "Wähle eine Lernsequenz aus",
+      "deleteModalTitle": "Unterlage löschen",
+      "deleteModalWarning": "Willst du die Unterlage <strong>\"{title}\"</strong> löschen?<br> Diese Aktion ist nicht umkehrbar.",
       "expertDescription": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
       "fileLabel": "Datei",
       "maxFileSize": "Maximale Dateigrösse: 20 MB",
diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index f5172f21..ff6b7fef 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -48,6 +48,28 @@
       />
     </template>
   </ItModal>
+  <ItModal v-model="showDeleteModal">
+    <template #title>{{ $t("circlePage.documents.deleteModalTitle") }}</template>
+    <template #body>
+      <p
+        class="mb-4"
+        v-html="$t('circlePage.documents.deleteModalWarning', { title: 'bla' })"
+      />
+    </template>
+
+    <template #footer>
+      <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
+        <button class="btn-primary">Löschen</button>
+        <button class="btn-secondary">Abbrechen</button>
+      </div>
+    </template>
+  </ItModal>
+  <ConfirmDialog
+    :is-open="showConfirm"
+    title="Heyho"
+    @close="close"
+    @confirm="confirm"
+  />
   <div
     v-if="courseSessionsStore.canUploadCircleDocuments"
     class="mt-8 flex flex-col gap-y-4 border p-6"
@@ -65,6 +87,7 @@
 </template>
 
 <script setup lang="ts">
+import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
 import ItModal from "@/components/ui/ItModal.vue";
 import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
@@ -77,6 +100,7 @@ import DocumentUploadForm from "./DocumentUploadForm.vue";
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
 const showUploadModal = ref(false);
+const showDeleteModal = ref(false);
 const showUploadErrorMessage = ref(false);
 const isUploading = ref(false);
 const dropdownLearningSequences = computed(() =>
@@ -85,6 +109,32 @@ const dropdownLearningSequences = computed(() =>
     name: sequence.title,
   }))
 );
+type ResolveReject = (v: any) => void;
+const showConfirm = ref(false);
+const confirm = ref<ResolveReject | undefined>();
+const close = ref<ResolveReject | undefined>();
+const deleteDocument = (doc: CircleDocument) => {
+  // courseSessionsStore.removeDocument(doc.id);
+  showConfirm.value = true;
+  const modalDialog = new Promise((resolve, reject) => {
+    confirm.value = resolve;
+    close.value = reject;
+  });
+  modalDialog
+    .then(
+      () => {
+        console.log("confirmed");
+        courseSessionsStore.removeDocument(doc.id);
+      },
+      () => {
+        console.log("just closing");
+      }
+    )
+    .finally(() => {
+      console.log("closing");
+      showConfirm.value = false;
+    });
+};
 watch(showUploadModal, () => (showUploadErrorMessage.value = false));
 async function uploadDocument(data: DocumentUploadData) {
   isUploading.value = true;

From ba2d4df639fc41abd8766881db3b1f2fe2e62530 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 May 2023 15:32:27 +0200
Subject: [PATCH 05/10] Add body text

---
 client/src/components/ui/ConfirmDialog.vue      |  3 ++-
 .../learningPath/circlePage/DocumentSection.vue | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ui/ConfirmDialog.vue b/client/src/components/ui/ConfirmDialog.vue
index 5796b200..ea04a72b 100644
--- a/client/src/components/ui/ConfirmDialog.vue
+++ b/client/src/components/ui/ConfirmDialog.vue
@@ -5,7 +5,7 @@
       <DialogPanel class="w-full max-w-2xl bg-white pt-8">
         <div class="px-8 pb-4">
           <DialogTitle class="relative mb-8 flex flex-row">{{ title }}</DialogTitle>
-          Hallo Velo
+          <p v-html="content" />
         </div>
         <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
           <button class="btn-primary" @click="confirm">Löschen</button>
@@ -22,6 +22,7 @@ import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 defineProps<{
   isOpen: boolean;
   title: string;
+  content: string;
 }>();
 
 const emit = defineEmits(["confirm", "close"]);
diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index ff6b7fef..4e828b58 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -66,7 +66,8 @@
   </ItModal>
   <ConfirmDialog
     :is-open="showConfirm"
-    title="Heyho"
+    :title="$t('circlePage.documents.deleteModalTitle')"
+    :content="$t('circlePage.documents.deleteModalWarning', { title: documentName })"
     @close="close"
     @confirm="confirm"
   />
@@ -109,13 +110,16 @@ const dropdownLearningSequences = computed(() =>
     name: sequence.title,
   }))
 );
-type ResolveReject = (v: any) => void;
+// confirm dialog
+// todo: refactor to own service
+type ResolveReject = (v: unknown) => void;
 const showConfirm = ref(false);
 const confirm = ref<ResolveReject | undefined>();
 const close = ref<ResolveReject | undefined>();
+const documentName = ref("");
 const deleteDocument = (doc: CircleDocument) => {
-  // courseSessionsStore.removeDocument(doc.id);
   showConfirm.value = true;
+  documentName.value = doc.name;
   const modalDialog = new Promise((resolve, reject) => {
     confirm.value = resolve;
     close.value = reject;
@@ -123,16 +127,15 @@ const deleteDocument = (doc: CircleDocument) => {
   modalDialog
     .then(
       () => {
-        console.log("confirmed");
         courseSessionsStore.removeDocument(doc.id);
+        showConfirm.value = false;
       },
       () => {
-        console.log("just closing");
+        showConfirm.value = false;
       }
     )
     .finally(() => {
-      console.log("closing");
-      showConfirm.value = false;
+      documentName.value = "";
     });
 };
 watch(showUploadModal, () => (showUploadErrorMessage.value = false));

From 0ac4f7b395cd84b6ea911ec5d7e978c9705fdb4a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 May 2023 16:22:43 +0200
Subject: [PATCH 06/10] Move confirm dialog to its own service

---
 client/src/components/ui/ConfirmDialog.vue    |  2 +-
 .../circlePage/DocumentSection.vue            | 65 +++++--------------
 client/src/utils/confirm-dialog.ts            | 45 +++++++++++++
 3 files changed, 62 insertions(+), 50 deletions(-)
 create mode 100644 client/src/utils/confirm-dialog.ts

diff --git a/client/src/components/ui/ConfirmDialog.vue b/client/src/components/ui/ConfirmDialog.vue
index ea04a72b..b138b1e8 100644
--- a/client/src/components/ui/ConfirmDialog.vue
+++ b/client/src/components/ui/ConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :open="isOpen" class="relative z-50" @close="close">
+  <Dialog :open="true" class="relative z-50" @close="close">
     <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
     <div class="fixed inset-0 flex items-center justify-center p-4">
       <DialogPanel class="w-full max-w-2xl bg-white pt-8">
diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index 4e828b58..4a2468d5 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -48,29 +48,6 @@
       />
     </template>
   </ItModal>
-  <ItModal v-model="showDeleteModal">
-    <template #title>{{ $t("circlePage.documents.deleteModalTitle") }}</template>
-    <template #body>
-      <p
-        class="mb-4"
-        v-html="$t('circlePage.documents.deleteModalWarning', { title: 'bla' })"
-      />
-    </template>
-
-    <template #footer>
-      <div class="flex flex-row-reverse gap-x-4 border-t border-t-gray-500 p-4">
-        <button class="btn-primary">Löschen</button>
-        <button class="btn-secondary">Abbrechen</button>
-      </div>
-    </template>
-  </ItModal>
-  <ConfirmDialog
-    :is-open="showConfirm"
-    :title="$t('circlePage.documents.deleteModalTitle')"
-    :content="$t('circlePage.documents.deleteModalWarning', { title: documentName })"
-    @close="close"
-    @confirm="confirm"
-  />
   <div
     v-if="courseSessionsStore.canUploadCircleDocuments"
     class="mt-8 flex flex-col gap-y-4 border p-6"
@@ -94,10 +71,13 @@ import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { CircleDocument, DocumentUploadData } from "@/types";
+import dialog from "@/utils/confirm-dialog";
 import log from "loglevel";
 import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import DocumentListItem from "./DocumentListItem.vue";
 import DocumentUploadForm from "./DocumentUploadForm.vue";
+
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
 const showUploadModal = ref(false);
@@ -110,33 +90,20 @@ const dropdownLearningSequences = computed(() =>
     name: sequence.title,
   }))
 );
+
 // confirm dialog
-// todo: refactor to own service
-type ResolveReject = (v: unknown) => void;
-const showConfirm = ref(false);
-const confirm = ref<ResolveReject | undefined>();
-const close = ref<ResolveReject | undefined>();
-const documentName = ref("");
-const deleteDocument = (doc: CircleDocument) => {
-  showConfirm.value = true;
-  documentName.value = doc.name;
-  const modalDialog = new Promise((resolve, reject) => {
-    confirm.value = resolve;
-    close.value = reject;
-  });
-  modalDialog
-    .then(
-      () => {
-        courseSessionsStore.removeDocument(doc.id);
-        showConfirm.value = false;
-      },
-      () => {
-        showConfirm.value = false;
-      }
-    )
-    .finally(() => {
-      documentName.value = "";
-    });
+const { t } = useI18n();
+const deleteDocument = async (doc: CircleDocument) => {
+  const options = {
+    title: t("circlePage.documents.deleteModalTitle"),
+    content: t("circlePage.documents.deleteModalWarning", { title: doc.name }),
+  };
+  try {
+    await dialog.confirm(options);
+    courseSessionsStore.removeDocument(doc.id);
+  } catch (e) {
+    log.debug("rejected");
+  }
 };
 watch(showUploadModal, () => (showUploadErrorMessage.value = false));
 async function uploadDocument(data: DocumentUploadData) {
diff --git a/client/src/utils/confirm-dialog.ts b/client/src/utils/confirm-dialog.ts
new file mode 100644
index 00000000..a3ab6a6d
--- /dev/null
+++ b/client/src/utils/confirm-dialog.ts
@@ -0,0 +1,45 @@
+import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
+import { createApp } from "vue";
+
+interface ConfirmDialogOptions {
+  title: string;
+  content: string;
+}
+type ResolveReject = (v?: unknown) => void;
+
+export default {
+  confirm(options: ConfirmDialogOptions) {
+    const mountEl = document.createElement("div");
+    document.body.appendChild(mountEl);
+
+    let _resolve: ResolveReject, _reject: ResolveReject;
+
+    const promise = new Promise((resolve, reject) => {
+      _resolve = resolve;
+      _reject = reject;
+    });
+
+    const cleanUp = () => {
+      mountEl?.parentNode?.removeChild(mountEl);
+      dialog.unmount();
+    };
+
+    const dialog = createApp(ConfirmDialog, {
+      isOpen: true,
+      title: options.title,
+      content: options.content,
+      onClose() {
+        console.log("close");
+        cleanUp();
+        _reject();
+      },
+      onConfirm() {
+        console.log("confirm");
+        cleanUp();
+        _resolve();
+      },
+    });
+    dialog.mount(mountEl);
+    return promise;
+  },
+};

From 9ab9f25d862b500b0bb5ef92df99510153b8e669 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 May 2023 16:47:11 +0200
Subject: [PATCH 07/10] Add comment to annotate inspiration

---
 client/src/utils/confirm-dialog.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/utils/confirm-dialog.ts b/client/src/utils/confirm-dialog.ts
index a3ab6a6d..3edf393d 100644
--- a/client/src/utils/confirm-dialog.ts
+++ b/client/src/utils/confirm-dialog.ts
@@ -7,6 +7,7 @@ interface ConfirmDialogOptions {
 }
 type ResolveReject = (v?: unknown) => void;
 
+// inspired by https://stackoverflow.com/a/69773076/6071058
 export default {
   confirm(options: ConfirmDialogOptions) {
     const mountEl = document.createElement("div");

From 270acd557527ad6020ddb469238cea8365805c91 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 May 2023 16:49:05 +0200
Subject: [PATCH 08/10] Remove console.log statements

---
 client/src/utils/confirm-dialog.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/utils/confirm-dialog.ts b/client/src/utils/confirm-dialog.ts
index 3edf393d..5b977031 100644
--- a/client/src/utils/confirm-dialog.ts
+++ b/client/src/utils/confirm-dialog.ts
@@ -30,12 +30,10 @@ export default {
       title: options.title,
       content: options.content,
       onClose() {
-        console.log("close");
         cleanUp();
         _reject();
       },
       onConfirm() {
-        console.log("confirm");
         cleanUp();
         _resolve();
       },

From eba448afecbf013859c472fd27e699d661c43ee1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 May 2023 17:40:46 +0200
Subject: [PATCH 09/10] Remove unused code

---
 client/src/pages/learningPath/circlePage/DocumentSection.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/pages/learningPath/circlePage/DocumentSection.vue b/client/src/pages/learningPath/circlePage/DocumentSection.vue
index 4a2468d5..3275fded 100644
--- a/client/src/pages/learningPath/circlePage/DocumentSection.vue
+++ b/client/src/pages/learningPath/circlePage/DocumentSection.vue
@@ -65,7 +65,6 @@
 </template>
 
 <script setup lang="ts">
-import ConfirmDialog from "@/components/ui/ConfirmDialog.vue";
 import ItModal from "@/components/ui/ItModal.vue";
 import { uploadCircleDocument } from "@/services/files";
 import { useCircleStore } from "@/stores/circle";
@@ -81,7 +80,6 @@ import DocumentUploadForm from "./DocumentUploadForm.vue";
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
 const showUploadModal = ref(false);
-const showDeleteModal = ref(false);
 const showUploadErrorMessage = ref(false);
 const isUploading = ref(false);
 const dropdownLearningSequences = computed(() =>

From 8a96af18183c3c3542d2b7c166de2c3aec4667d6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 4 May 2023 16:43:39 +0200
Subject: [PATCH 10/10] Add documentation to the confirm dialog service

---
 client/src/utils/confirm-dialog.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/client/src/utils/confirm-dialog.ts b/client/src/utils/confirm-dialog.ts
index 5b977031..dac8d906 100644
--- a/client/src/utils/confirm-dialog.ts
+++ b/client/src/utils/confirm-dialog.ts
@@ -8,6 +8,29 @@ interface ConfirmDialogOptions {
 type ResolveReject = (v?: unknown) => void;
 
 // inspired by https://stackoverflow.com/a/69773076/6071058
+/*
+ * We need a separate service for the ConfirmDialog, because we don't want the 
+ * boilerplate of including the component and the handling of the promises inside
+ * of every component where we need a confirm dialog.
+ *
+ * With this service, one can simply import the dialog and use it, e.g.
+ *
+import dialog from "@/utils/confirm-dialog";
+const someMethodToConfirm = async () => {
+  const options = {
+    title: 'Dialog Title',
+    content: 'Do you really wanna?'
+  };
+  try {
+    await dialog.confirm(options);
+    doSomethingWhenConfirmed();
+  } catch (e) {
+    log.debug("rejected");
+    doSomethingWhenRejected()
+  }
+};
+
+ */
 export default {
   confirm(options: ConfirmDialogOptions) {
     const mountEl = document.createElement("div");