37 lines
1.5 KiB
Vue
37 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<table cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table overflow-auto custom-table-sm text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Tätigkeit</th>
|
|
<th>Untertätigkeit</th>
|
|
<th>Datum</th>
|
|
<th>Aktiv</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(membership, index) in value" :key="index">
|
|
<td v-text="membership.activity_name" />
|
|
<td v-text="membership.subactivity_name" />
|
|
<td v-text="membership.human_date" />
|
|
<td><ui-boolean-display :value="membership.is_active" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="md:hidden grid gap-3">
|
|
<ui-box v-for="(membership, index) in value" :key="index" class="relative" :heading="membership.activity_name" second>
|
|
<div class="text-xs text-gray-200" v-text="membership.subactivity_name" />
|
|
<div class="text-xs text-gray-200" v-text="membership.human_date" />
|
|
<div class="text-xs text-gray-200"><ui-boolean-display :value="membership.is_active" /></div>
|
|
</ui-box>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{
|
|
value: Record<number, {activity_name: string, subactivity_name: string, human_date: string, is_active: boolean}>,
|
|
}>();
|
|
</script>
|