From cf170edeb2ccddadda1e609ea68a24bc9f989e68 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Wed, 13 Aug 2025 10:02:11 +0000
Subject: [PATCH] GS-2251

---
 vue/src/pages/KursDetail.vue |  198 +++++++++++++++++++++++++-----------------------
 1 files changed, 103 insertions(+), 95 deletions(-)

diff --git a/vue/src/pages/KursDetail.vue b/vue/src/pages/KursDetail.vue
index 26b349a..85601e6 100644
--- a/vue/src/pages/KursDetail.vue
+++ b/vue/src/pages/KursDetail.vue
@@ -2,20 +2,40 @@
 
 import {useRoute} from 'vue-router'
 import {onMounted, reactive, ref} from "vue"
-import {getKurs, getKursItems, getKursTn} from "../lib/api.js"
+import {
+   getKurs,
+   getKursItems,
+   getKursRoles,
+   getKursTn,
+   getKursTnByRole,
+   iliasBase,
+   popcornBase,
+} from "../lib/api.js"
+import LinkExtern from "../components/LinkExtern.vue"
+import dayjs from "dayjs"
+import KursItems from '../components/KursItems.vue'
+import KursRoles from '../components/KursRoles.vue'
+import KursMembers from '../components/KursMembers.vue'
+import KursTnByRole from '../components/KursTnByRole.vue'
 
 const route = useRoute()
 const kursId = route.params.kursId
+document.title = `Kurs ${kursId} | globus-ilias-rest`
+
 const kurs = ref(null)
-const kursItems = ref(null)
-const kursTn = ref(null)
+const kursItems = ref([])
+const kursTn = ref([])
+const kursTnByRolle = ref([])
+const kursRoles = ref([])
 const error = ref(null)
 
 onMounted(init)
 
 /////////////////////////////////////////////////////////////////////////
 
+
 async function init () {
+
    const dataKurs = await getKurs(kursId)
    console.log(dataKurs)
    kurs.value = dataKurs
@@ -27,7 +47,18 @@
    const dataKursTn = await getKursTn(kursId)
    console.log(dataKursTn)
    kursTn.value = dataKursTn
+
+   const dataKursTnByRolle = await getKursTnByRole(kursId)
+   console.log(dataKursTnByRolle)
+   kursTnByRolle.value = dataKursTnByRolle
+
+   const dataKursRoles = await getKursRoles(kursId)
+   console.log(dataKursRoles)
+   kursRoles.value = dataKursRoles
+
 }
+
+const aaa = import.meta.env.VITE_TST
 
 </script>
 
@@ -37,120 +68,97 @@
       <h1>
          Kurs
          <small>{{ kurs?.title }}</small>
-         <!--         <small>{{ user?.firstname }} {{ user?.lastname }}</small>-->
       </h1>
       <p v-if="error">{{ error }}</p>
 
 
-      <div class="user" v-if="kurs">
+      <div class="kurs" v-if="kurs">
 
-         <span>ref_id</span>
-         <div>{{ kurs.ref_id }}</div>
+         <div>
+            <span>ref_id</span>
+            <div>
+               <a :href="`${iliasBase}/goto.php?target=${kurs.type}_${kurs.ref_id}`" target="_blank">
+                  {{ kurs.ref_id }}
+                  <LinkExtern />
+               </a>
+            </div>
+         </div>
 
-         <span>obj_id</span>
-         <div>{{ kurs.obj_id }}</div>
+         <div>
+            <span>obj_id</span>
+            <div>{{ kurs.obj_id }}</div>
+         </div>
 
-         <span style="margin-top: 1em;">title</span>
-         <div style="grid-column: span 3; margin-top: 1em">{{ kurs.title }}</div>
+         <div class="text-right" style="grid-column: span 2; justify-content: flex-end">
+            <a :href="`${popcornBase}/anmeldungen?query=iliasId:${kurs.ref_id}&terminFilter=alle`" target="_blank">
+               Search in 🍿
+            </a>
+         </div>
 
-         <span>description</span>
-         <div style="grid-column: span 3">{{ kurs.description }}</div>
+
+         <div style="grid-column: span 2">
+            <span style="">title</span>
+            <div style="">{{ kurs.title }}</div>
+         </div>
+
+         <div style="grid-column: span 2;">
+            <span>description</span>
+            <div style="grid-column: span 3">{{ kurs.description }}</div>
+         </div>
 
       </div>
-      <!--      <pre>{{kurs}}</pre>-->
 
+      <div class="cols">
 
-      <h2>
-         KursItems
-         <small>({{ kursItems?.length }})</small>
-      </h2>
-      <table>
-         <thead>
-            <th>parent_id</th>
-            <th>ref_id</th>
-            <th>obj_id</th>
-            <th>title</th>
-            <th>type</th>
-         </thead>
-         <tbody>
-            <!-- TODO verlinken auf Ziel in ILAS | goto.php?target=crs_ID -->
-            <tr v-for="item in kursItems">
-               <td>{{ item.parent_id }}</td>
-               <td>{{ item.ref_id }}</td>
-               <td>{{ item.obj_id }}</td>
-               <td>{{ item.title }}</td>
-               <td>{{ item.type }}</td>
-            </tr>
-         </tbody>
-      </table>
-      <!--      <pre>{{ kursItems }}</pre>-->
+         <div>
+            <h2>KursItems <small>({{ kursItems?.length }})</small></h2>
+            <KursItems :kursItems="kursItems" />
+         </div>
 
+         <div>
+            <h2>KursRoles <small>({{ kursRoles?.length }})</small></h2>
+            <KursRoles :kursRoles="kursRoles" />
+         </div>
 
-      <h2>
-         KursTn
-         <small>({{ kursTn?.length }})</small>
-      </h2>
-      <div style="column-count: 3">
-         <table>
-            <thead>
-               <th>usr_id</th>
-               <th>login</th>
-               <th>firstname</th>
-               <th>lastname</th>
-            </thead>
-            <tbody>
-               <tr v-for="tn in kursTn">
-                  <td>{{ tn.usr_id }}</td>
-                  <td>{{ tn.login }}</td>
-                  <td>{{ tn.firstname }}</td>
-                  <td>{{ tn.lastname }}</td>
-               </tr>
-            </tbody>
-         </table>
       </div>
-      <pre>{{ kursTn }}</pre>
 
-      <!--      <pre>{{ user }}</pre>-->
+      <div class="cols">
+         <div>
+            <h2>KursTn by Members <small>({{ kursTn?.length }})</small></h2>
+            <KursMembers :kursTn="kursTn" />
+         </div>
 
+         <div>
+            <h2>KursTnByRole <small>({{ kursTnByRolle?.length }})</small></h2>
+            <KursTnByRole :kursTnByRolle="kursTnByRolle" />
+         </div>
 
-      <!--      <table v-if="user">-->
-      <!--         <tbody>-->
-      <!--            <tr>-->
-      <!--               <td>user_id</td>-->
-      <!--               <td>{{user.usr_id}}</td>-->
-      <!--               <td>login</td>-->
-      <!--               <td>{{user.login}}</td>-->
-      <!--            </tr>-->
-      <!--            <tr>-->
-      <!--               <td>firstname</td>-->
-      <!--               <td>{{user.firstname}}</td>-->
-      <!--               <td>lastname</td>-->
-      <!--               <td>{{user.lastname}}</td>-->
-      <!--            </tr>-->
-      <!--            <tr>-->
-      <!--               <td>usr_id</td>-->
-      <!--               <td>{{user.usr_id}}</td>-->
-      <!--            </tr>-->
-      <!--            <tr>-->
-      <!--               <td>usr_id</td>-->
-      <!--               <td>{{user.usr_id}}</td>-->
-      <!--            </tr>-->
-      <!--            <tr>-->
-      <!--               <td>usr_id</td>-->
-      <!--               <td>{{user.usr_id}}</td>-->
-      <!--            </tr>-->
-      <!--            <tr>-->
-      <!--               <td>usr_id</td>-->
-      <!--               <td>{{user.usr_id}}</td>-->
-      <!--            </tr>-->
-
-      <!--         </tbody>-->
-      <!--      </table>-->
+      </div>
 
    </div>
 
 </template>
 
-<style scoped>
+<style scoped lang="stylus">
+
+.cols
+   display flex;
+   gap 2em
+
+.kurs
+   padding 1em
+   border 1px solid #aaa
+   border-radius .33em
+   box-shadow 1px 1px 3px #333 inset, 1px 1px 100px #ddd inset
+   display grid;
+   grid-template-columns 1fr 1fr 1fr 1fr
+   gap 1em
+   span
+      font-variant small-caps
+      color #555
+   &>*
+      display flex
+      gap 1em
+
 
 </style>

--
Gitblit v1.8.0