Update layout for document list

Relates to VBV-324

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>

client/src/pages/learningPath/circlePage/DocumentSection.vue

@@ -1,48 +1,38 @@
 <template>
-  <div  class="mt-8 block border p-6">
+  <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>
       <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
+    <ul
-      v-if="
+      v-if="courseSessionsStore.circleDocuments.length"
-        courseSessionsStore &&
+      class="mt-8 border-t border-t-gray-500"
-        courseSessionsStore.circleDocuments &&
-        courseSessionsStore.circleDocuments.length > 0
-      "
     >
-      <li
+      <template
         v-for="learningSequence of courseSessionsStore.circleDocuments"
         :key="learningSequence.id"
       >
-        <h4 class="text-bold mt-4">{{ learningSequence.title }}</h4>
+        <DocumentListItem
-        <ul>
+          v-for="doc of learningSequence.documents"
-          <li v-for="document of learningSequence.documents" :key="document.url">
+          :key="doc.url"
-            <a :href="document.url" download>
+          :subtitle="learningSequence.title"
-              <span>{{ document.name }}</span>
+          :can-delete="courseSessionsStore.canUploadCircleDocuments"
-            </a>
+          :doc="doc"
-            <button
+          @delete="deleteDocument(doc)"
-              v-if="courseSessionsStore.canUploadCircleDocuments"
+        />
-              type="button"
+      </template>
-              class="relative top-[1px] ml-2 inline-block h-3 w-3 cursor-pointer leading-6"
+    </ul>
-              @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">
+      <button class="btn-primary mt-8 text-xl" @click="showUploadModal = true">
-        {{ $t("circlePage.documents.expertDescription") }}
-      </div>
-      <button class="btn-primary mt-4 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();

client/src/stores/courseSessions.ts

@@ -182,21 +182,23 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const circleDocuments = computed(() => {
     const circleStore = useCircleStore();
 
-    return circleStore.circle?.learningSequences
+    return (
-      .map((ls) => ({ id: ls.id, title: ls.title, documents: [] }))
+      circleStore.circle?.learningSequences
-      .map((ls: { id: number; title: string; documents: CircleDocument[] }) => {
+        .map((ls) => ({ id: ls.id, title: ls.title, documents: [] }))
-        if (currentCourseSession.value === undefined) {
+        .map((ls: { id: number; title: string; documents: CircleDocument[] }) => {
-          return ls;
+          if (currentCourseSession.value === undefined) {
-        }
+            return ls;
-
-        for (const document of currentCourseSession.value.documents) {
-          if (document.learning_sequence === ls.id) {
-            ls.documents.push(document);
           }
-        }
+
-        return ls;
+          for (const document of currentCourseSession.value.documents) {
-      })
+            if (document.learning_sequence === ls.id) {
-      .filter((ls) => ls.documents.length > 0);
+              ls.documents.push(document);
+            }
+          }
+          return ls;
+        })
+        .filter((ls) => ls.documents.length > 0) || []
+    );
   });
 
   function addDocument(document: CircleDocument) {

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",

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>

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>