Add mobile tables to member detail page
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2022-11-29 21:38:55 +01:00
parent 4850f4ef5a
commit 5a97d0c84d
5 changed files with 119 additions and 28 deletions

View File

@ -1,5 +1,8 @@
<template>
<section class="bg-gray-800 p-3 rounded-lg flex flex-col">
<section
class="p-3 rounded-lg flex flex-col"
:class="{'bg-gray-800': second === false, 'bg-gray-700': second === true}"
>
<div class="flex items-center">
<heading class="col-span-full" v-if="heading">{{ heading }}</heading>
<slot name="in-title"></slot>
@ -16,6 +19,10 @@ export default {
heading: {
type: String,
},
second: {
type: Boolean,
default: false,
},
containerClass: {
default: function () {
return '';

View File

@ -26,16 +26,16 @@
</tabs>
</box>
<box heading="Ausbildungen" class="area-courses hidden 2xl:block">
<courses :inner="inner"></courses>
<box heading="Ausbildungen" class="area-courses">
<courses :value="inner.courses"></courses>
</box>
<box heading="Mitgliedschaften" class="area-memberships hidden 2xl:block">
<memberships :inner="inner"></memberships>
<box heading="Mitgliedschaften" class="area-memberships">
<memberships :value="inner.memberships"></memberships>
</box>
<box heading="Zahlungen" class="area-payments hidden 2xl:block">
<payments :inner="inner"></payments>
<box heading="Zahlungen" class="area-payments">
<payments :value="inner.payments"></payments>
</box>
<box heading="Karte" container-class="grow" class="area-map hidden 2xl:block">
@ -97,7 +97,10 @@ export default {
.this-grid {
grid-template-areas:
'stammkontakt'
'praesystem';
'praesystem'
'courses'
'memberships'
'payments';
grid-template-columns: 1fr;
}
@media screen and (min-width: 1536px) {

View File

@ -4,8 +4,8 @@
cellspacing="0"
cellpadding="0"
border="0"
class="custom-table overflow-auto custom-table-sm text-sm"
v-if="inner.courses.length"
class="hidden md:table custom-table overflow-auto custom-table-sm text-sm"
v-if="inner.length"
>
<thead>
<th>Datum</th>
@ -13,7 +13,7 @@
<th>Veranstaltung</th>
<th>Organisator</th>
</thead>
<tr v-for="(course, index) in inner.courses" :key="index">
<tr v-for="(course, index) in inner" :key="index">
<td v-text="course.completed_at_human"></td>
<td v-text="course.course.short_name"></td>
<td v-text="course.event_name"></td>
@ -21,13 +21,37 @@
</tr>
</table>
<div class="py-3 text-gray-400 text-center" v-else>Keine Ausbildungen vorhanden</div>
<div class="md:hidden grid gap-3">
<box
class="relative"
:heading="course.course.short_name"
v-for="(course, index) in inner"
:key="index"
second
>
<div class="text-xs text-gray-200" v-text="course.event_name"></div>
<div class="text-xs text-gray-200" v-text="course.completed_at_human"></div>
<div class="text-xs text-gray-200" v-text="course.organizer"></div>
</box>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
inner: [],
};
},
components: {
box: () => import(/* webpackChunkName: "member" */ '../Box'),
},
props: {
inner: {},
value: {},
},
created() {
this.inner = this.value;
},
};
</script>

View File

@ -1,24 +1,55 @@
<template>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table overflow-auto custom-table-sm text-sm">
<table
cellspacing="0"
cellpadding="0"
border="0"
class="hidden md:table custom-table overflow-auto custom-table-sm text-sm"
>
<thead>
<th>Tätigkeit</th>
<th>Untertätigkeit</th>
<th>Datum</th>
</thead>
<tr v-for="(membership, index) in inner.memberships" :key="index">
<tr v-for="(membership, index) in inner" :key="index">
<td v-text="membership.activity_name"></td>
<td v-text="membership.subactivity_name"></td>
<td v-text="membership.human_date"></td>
</tr>
</table>
<div class="md:hidden grid gap-3">
<box
class="relative"
:heading="membership.activity_name"
v-for="(membership, index) in inner"
:key="index"
second
>
<div class="text-xs text-gray-200" v-text="membership.subactivity_name"></div>
<div class="text-xs text-gray-200" v-text="membership.human_date"></div>
</box>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
inner: [],
};
},
props: {
inner: {},
value: {},
},
components: {
box: () => import(/* webpackChunkName: "member" */ '../Box'),
},
created() {
this.inner = this.value;
},
};
</script>

View File

@ -1,22 +1,48 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
<thead>
<th>Tätigkeit</th>
<th>Untertätigkeit</th>
<th>Datum</th>
</thead>
<tr v-for="(membership, index) in inner.memberships" :key="index">
<td v-text="membership.activity_name"></td>
<td v-text="membership.subactivity_name"></td>
<td v-text="membership.human_date"></td>
</tr>
</table>
<div>
<table cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table custom-table-sm text-sm">
<thead>
<th>Nr</th>
<th>Beitrag</th>
<th>Status</th>
</thead>
<tr v-for="(payment, index) in inner" :key="index">
<td v-text="payment.nr"></td>
<td v-text="`${payment.subscription.name} (${payment.subscription.amount_human})`"></td>
<td v-text="payment.status_name"></td>
</tr>
</table>
<div class="md:hidden grid gap-3">
<box class="relative" :heading="payment.nr" v-for="(payment, index) in inner" :key="index" second>
<div
class="text-xs text-gray-200"
v-text="`${payment.subscription.name} (${payment.subscription.amount_human})`"
></div>
<div class="text-xs text-gray-200" v-text="payment.status_name"></div>
</box>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
inner: [],
};
},
props: {
inner: {},
value: {},
},
components: {
box: () => import(/* webpackChunkName: "member" */ '../Box'),
},
created() {
this.inner = this.value;
},
};
</script>