47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<table v-if="inner.length" cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table overflow-auto custom-table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Baustein</th>
|
|
<th>Veranstaltung</th>
|
|
<th>Organisator</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(course, index) in inner" :key="index">
|
|
<td v-text="course.completed_at_human" />
|
|
<td v-text="course.course.short_name" />
|
|
<td v-text="course.event_name" />
|
|
<td v-text="course.organizer" />
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div v-else class="py-3 text-gray-400 text-center">Keine Ausbildungen vorhanden</div>
|
|
<div class="md:hidden grid gap-3">
|
|
<ui-box v-for="(course, index) in inner" :key="index" class="relative" :heading="course.course.short_name" second>
|
|
<div class="text-xs text-gray-200" v-text="course.event_name" />
|
|
<div class="text-xs text-gray-200" v-text="course.completed_at_human" />
|
|
<div class="text-xs text-gray-200" v-text="course.organizer" />
|
|
</ui-box>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {},
|
|
},
|
|
data: function () {
|
|
return {
|
|
inner: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.inner = this.value;
|
|
},
|
|
};
|
|
</script>
|