Add mobile tables to member detail page

resources/js/views/member/Box.vue

@@ -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 '';

resources/js/views/member/ShowView.vue

@@ -26,16 +26,16 @@
             </tabs>
         </box>
 
-        <box heading="Ausbildungen" class="area-courses hidden 2xl:block">
+        <box heading="Ausbildungen" class="area-courses">
-            <courses :inner="inner"></courses>
+            <courses :value="inner.courses"></courses>
         </box>
 
-        <box heading="Mitgliedschaften" class="area-memberships hidden 2xl:block">
+        <box heading="Mitgliedschaften" class="area-memberships">
-            <memberships :inner="inner"></memberships>
+            <memberships :value="inner.memberships"></memberships>
         </box>
 
-        <box heading="Zahlungen" class="area-payments hidden 2xl:block">
+        <box heading="Zahlungen" class="area-payments">
-            <payments :inner="inner"></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) {

resources/js/views/member/boxes/Courses.vue

@@ -4,8 +4,8 @@
             cellspacing="0"
             cellpadding="0"
             border="0"
-            class="custom-table overflow-auto custom-table-sm text-sm"
+            class="hidden md:table custom-table overflow-auto custom-table-sm text-sm"
-            v-if="inner.courses.length"
+            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>

resources/js/views/member/boxes/Memberships.vue

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

resources/js/views/member/boxes/Payments.vue

@@ -1,22 +1,48 @@
 <template>
-    <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm text-sm">
+    <div>
+        <table cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table custom-table-sm text-sm">
             <thead>
-            <th>Tätigkeit</th>
+                <th>Nr</th>
-            <th>Untertätigkeit</th>
+                <th>Beitrag</th>
-            <th>Datum</th>
+                <th>Status</th>
             </thead>
-        <tr v-for="(membership, index) in inner.memberships" :key="index">
+            <tr v-for="(payment, index) in inner" :key="index">
-            <td v-text="membership.activity_name"></td>
+                <td v-text="payment.nr"></td>
-            <td v-text="membership.subactivity_name"></td>
+                <td v-text="`${payment.subscription.name} (${payment.subscription.amount_human})`"></td>
-            <td v-text="membership.human_date"></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>