adding tn count

alex

2025-07-14 1c61333f0c111a71f85eb076e176af635d98cd83

 vue/src/pages/KursDetail.vue

@@ -2,21 +2,40 @@

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
import {getKurs, getKursItems, getKursTn, iliasBase} 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
@@ -28,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>

@@ -38,88 +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>
            <a :href="`${iliasBase}/goto.php?target=${kurs.type}_${kurs.ref_id}`" target="_blank">
               {{ kurs.ref_id }} <LinkExtern />
            <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>

         <div>
            <span>obj_id</span>
            <div>{{ kurs.obj_id }}</div>
         </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>obj_id</span>
         <div>{{ kurs.obj_id }}</div>

         <span style="margin-top: 1em;">title</span>
         <div style="grid-column: span 3; margin-top: 1em">{{ kurs.title }}</div>
         <div style="grid-column: span 2">
            <span style="">title</span>
            <div style="">{{ kurs.title }}</div>
         </div>

         <span>description</span>
         <div style="grid-column: span 3">{{ kurs.description }}</div>
         <div style="grid-column: span 2;">
            <span>description</span>
            <div style="grid-column: span 3">{{ kurs.description }}</div>
         </div>

      </div>

      <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>
                  <a :href="`${iliasBase}/goto.php?target=${item.type}_${item.ref_id}`" target="_blank">
                     {{ item.ref_id }} <LinkExtern />
                  </a>
               </td>
               <td>{{ item.obj_id }}</td>
               <td>{{ item.title }}</td>
               <td>{{ item.type }}</td>
            </tr>
         </tbody>
      </table>
      <div class="cols">

      <h2>
         KursTn
         <small>({{ kursTn?.length }})</small>
      </h2>
      <div :style="{columns: kursTn?.length > 16 ? 3 : 1}">
         <table>
            <thead>
               <th>usr_id</th>
               <th>login</th>
               <th>firstname</th>
               <th>lastname</th>
            </thead>
            <tbody>
               <tr v-for="tn in kursTn">
                  <td>
                     <RouterLink :to="`/ui/user/${tn.usr_id}`">{{ tn.usr_id }}</RouterLink>
                  </td>
                  <td>{{ tn.login }}</td>
                  <td>{{ tn.firstname }}</td>
                  <td>{{ tn.lastname }}</td>
               </tr>
            </tbody>
         </table>
         <div>
            <h2>KursItems <small>({{ kursItems?.length }})</small></h2>
            <KursItems :kursItems="kursItems" />
         </div>

         <div>
            <h2>KursRoles <small>({{ kursRoles?.length }})</small></h2>
            <KursRoles :kursRoles="kursRoles" />
         </div>

      </div>

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

      </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>