adding tn by rolle

alex

2025-07-11 3a06e3121dd540e7c26fa691b967717a9300731a

 vue/src/pages/KursDetail.vue

@@ -2,14 +2,16 @@

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
import {getKurs, getKursItems, getKursTn, iliasBase, routerBase} from "../lib/api.js"
import {getKurs, getKursItems, getKursTn, getKursTnByRole, iliasBase, routerBase} from "../lib/api.js"
import LinkExtern from "../components/LinkExtern.vue"
import dayjs from "dayjs"

const route = useRoute()
const kursId = route.params.kursId
const kurs = ref(null)
const kursItems = ref(null)
const kursTn = ref(null)
const kursTnByRolle = ref(null)
const error = ref(null)

onMounted(init)
@@ -28,6 +30,10 @@
   const dataKursTn = await getKursTn(kursId)
   console.log(dataKursTn)
   kursTn.value = dataKursTn

   const dataKursTnByRolle = await getKursTnByRole(kursId)
   console.log(dataKursTnByRolle)
   kursTnByRolle.value = dataKursTnByRolle

}

@@ -97,37 +103,72 @@
         </tbody>
      </table>

      <h2>
         KursTn
         <small>({{ kursTn?.length }})</small>
      </h2>
      <div :style="{columns: kursTn?.length > 16 ? 2 : 1}">
         <table>
            <thead>
               <tr>
                  <th>usr_id</th>
                  <th>login</th>
                  <th>firstname</th>
                  <th>lastname</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="tn in kursTn">
                  <td>
                     <RouterLink :to="`${routerBase}/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 :style="{columns: kursTn?.length > 16 ? 1 : 1}">-->
      <div id="teilnehmer">
         <div>
            <h2>KursTn by Members <small>({{ kursTn?.length }})</small></h2>
            <table>
               <thead>
                  <tr>
                     <th>usr_id</th>
                     <th>login</th>
                     <th>firstname</th>
                     <th>lastname</th>
                     <th>passed</th>
                     <th>status</th>
                     <th>status_changed</th>
                  </tr>
               </thead>
               <tbody>
                  <tr v-for="tn in kursTn">
                     <td>
                        <RouterLink :to="`${routerBase}/ui/user/${tn.usr_id}`">{{ tn.usr_id }}</RouterLink>
                     </td>
                     <td>{{ tn.login }}</td>
                     <td>{{ tn.firstname }}</td>
                     <td>{{ tn.lastname }}</td>
                     <td>{{ tn.passed }}</td>
                     <td>{{ tn.status }}</td>
                     <td>{{ dayjs(tn.status_changed).format("DD.MM.YYYY HH:mm:ss") }}</td>
                  </tr>
               </tbody>
            </table>
         </div>

         <div>
            <h2>KursTnByRole <small>({{ kursTnByRolle?.length }})</small></h2>
            <table>
               <thead>
                  <tr>
                     <th>role_id</th>
                     <th>usr_id</th>
                     <th>firstname</th>
                     <th>lastname</th>
                  </tr>
               </thead>
               <tbody>
                  <tr v-for="tn in kursTnByRolle">
                     <td>{{ tn.role_id }}</td>
                     <td>
                        <RouterLink :to="`${routerBase}/ui/user/${tn.usr_id}`">{{ tn.usr_id }}</RouterLink>
                     </td>
                     <td>{{ tn.firstname }}</td>
                     <td>{{ tn.lastname }}</td>
                  </tr>
               </tbody>
            </table>
         </div>

      </div>

   </div>

</template>

<style scoped>
<style scoped lang="stylus">

#teilnehmer
   display flex;
   gap 2em

</style>