Create own view for paymentsForm

app/Http/Views/MemberView.php

@@ -13,23 +13,14 @@ use Illuminate\Http\Request;
 class MemberView {
     public function index(Request $request) {
         return [
-            'data' => MemberResource::collection(Member::select('*')->search($request->query('search', null))->with('billKind')->withSubscriptionName()->withIsConfirmed()->withPendingPayment()->orderByRaw('lastname, firstname')->paginate(15)),
+            'data' => MemberResource::collection(Member::select('*')->search($request->query('search', null))->with('billKind')->with('payments')->withSubscriptionName()->withIsConfirmed()->withPendingPayment()->orderByRaw('lastname, firstname')->paginate(15)),
-            'toolbar' => [ ['href' => route('member.index'), 'label' => 'Zurück', 'color' => 'primary', 'icon' => 'plus'] ]
+            'toolbar' => [ ['href' => route('member.index'), 'label' => 'Zurück', 'color' => 'primary', 'icon' => 'plus'] ],
+            'paymentDefaults' => ['nr' => date('Y')],
+            'subscriptions' => Subscription::get()->pluck('name', 'id'),
+            'statuses' => Status::get()->pluck('name', 'id'),
         ];
     }
 
-    public function paymentCreate($member) {
-        return $this->additional($member, [
-            'model' => [
-                'subscription_id' => $member->subscription_id,
-                'status_id' => Status::default(),
-                'nr' => date('Y'),
-            ],
-            'links' => [ ['label' => 'Zurück', 'href' => route('member.payment.index', ['member' => $member]) ] ],
-            'mode' => 'create',
-        ]);
-    }
-
     public function paymentEdit($member, $payment) {
         return $this->additional($member, [
             'model' => new PaymentResource($payment),

app/Payment/PaymentController.php

@@ -3,10 +3,10 @@
 namespace App\Payment;
 
 use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
+use App\Http\Views\MemberView;
 use App\Member\Member;
 use App\Member\MemberResource;
-use App\Http\Views\MemberView;
+use Illuminate\Http\Request;
 
 class PaymentController extends Controller
 {
@@ -20,16 +20,6 @@ class PaymentController extends Controller
         return \Inertia::render('member/Index', $payload);
     }
 
-    public function create(Member $member, Request $request) {
-        session()->put('menu', 'member');
-        session()->put('title', "Zahlungen für Mitglied {$member->fullname}");
-
-        $payload = app(MemberView::class)->index($request);
-        $payload['single'] = app(MemberView::class)->paymentCreate($member);
-
-        return \Inertia::render('member/Index', $payload);
-    }
-
     public function store(Request $request, Member $member) {
         $member->payments()->create($request->validate([
             'nr' => 'required|numeric',
@@ -57,12 +47,12 @@ class PaymentController extends Controller
             'status_id' => 'required|exists:statuses,id',
         ]));
 
-        return redirect()->route('member.payment.index', ['member' => $member]);
+        return redirect()->back();
     }
 
     public function destroy(Request $request, Member $member, Payment $payment) {
         $payment->delete();
 
-        return redirect()->route('member.payment.index', ['member' => $member]);
+        return redirect()->back();
     }
 }

resources/js/views/member/Index.vue

@@ -46,7 +46,7 @@
                 <div v-text="`${member.joined_at_human}`"></div>
                 <div class="flex">
                     <inertia-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></inertia-link>
-                    <inertia-link :href="`/member/${member.id}/payment${query({only: ['page']})}`" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></inertia-link>
+                    <a href="#" @click.prevent="openSidebar(index, 'payment.index')" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></a>
                     <inertia-link href="#" @click.prevent="remove(member)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></inertia-link>
                 </div>
             </div>
@@ -58,9 +58,7 @@
         </div>
 
         <transition name="sidebar">
-            <payments v-if="single !== null && single.mode === 'index'" v-model="single"></payments>
+            <payments v-if="single !== null && sidebar === 'payment.index'" @close="closeSidebar" :subscriptions="subscriptions" :statuses="statuses" v-model="data.data[single]"></payments>
-            <payment-form v-if="single !== null && single.mode === 'create'" v-model="single"></payment-form>
-            <payment-form v-if="single !== null && single.mode === 'edit'" v-model="single"></payment-form>
         </transition>
     </div>
 </template>
@@ -68,30 +66,44 @@
 <script>
 import App from '../../layouts/App';
 import Payments from './Payments.vue';
-import PaymentForm from './PaymentForm.vue';
 import mergesQueryString from '../../mixins/mergesQueryString.js';
 
 export default {
 
+    data: function() {
+        return {
+            sidebar: null,
+            single: null,
+        };
+    },
+
     layout: App,
 
     mixins: [mergesQueryString],
 
-    components: { Payments, PaymentForm },
+    components: { Payments },
 
     methods: {
         remove(member) {
             if (window.confirm('Mitglied löschen?')) {
                 this.$inertia.delete(`/member/${member.id}`);
             }
+        },
+        openSidebar(index, name) {
+            this.single = index;
+            this.sidebar = name;
+        },
+        closeSidebar() {
+            this.single = null;
+            this.sidebar = null;
         }
     },
 
     props:{
         data: {},
-        single: {
+        subscriptions: {},
-            default: function() { return null; }
+        statuses: {},
-        },
+        paymentDefaults: {},
     }
 }
 </script>

resources/js/views/member/PaymentForm.vue

@@ -1,44 +0,0 @@
-<template>
-    <div class="sidebar">
-        <sidebar-header :links="value.links" @close="$inertia.visit('/member')" title="Zahlungen"></sidebar-header>
-
-        <form class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-            <f-text id="nr" v-model="inner.nr" label="Jahr" required></f-text>
-            <f-select id="subscription_id" :options="value.subscriptions" v-model="inner.subscription_id" label="Beitrag" required></f-select>
-            <f-select id="status_id" :options="value.statuses" v-model="inner.status_id" label="Status" required></f-select>
-            <button type="submit" class="btn btn-primary">Absenden</button>
-        </form>
-    </div>
-</template>
-
-<script>
-import SidebarHeader from '../../components/SidebarHeader.vue';
-
-export default {
-
-    data: function() {
-        return {
-            inner: {},
-        };
-    },
-
-    components: { SidebarHeader },
-
-    props: {
-        value: {}
-    },
-
-    methods: {
-        submit() {
-            this.value.mode === 'create' 
-                ? this.$inertia.post(`/member/${this.value.data.id}/payment`, this.inner)
-                : this.$inertia.patch(`/member/${this.value.data.id}/payment/${this.inner.id}`, this.inner);
-        }
-    },
-
-    created() {
-        this.inner = this.value.model;
-    }
-
-};
-</script>

resources/js/views/member/Payments.vue

@@ -1,8 +1,15 @@
 <template>
     <div class="sidebar flex flex-col">
-        <sidebar-header :links="value.links" @close="$inertia.visit('/member')" title="Zahlungen"></sidebar-header>
+        <sidebar-header :links="value.links" @close="$emit('close')" title="Zahlungen"></sidebar-header>
 
-        <div class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
+        <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
+            <f-text id="nr" v-model="single.nr" label="Jahr" required></f-text>
+            <f-select id="subscription_id" :options="subscriptions" v-model="single.subscription_id" label="Beitrag" required></f-select>
+            <f-select id="status_id" :options="statuses" v-model="single.status_id" label="Status" required></f-select>
+            <button type="submit" class="btn btn-primary">Absenden</button>
+        </form>
+
+        <div v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
             <header>
                 <div>Nr</div>
                 <div>Status</div>
@@ -10,12 +17,12 @@
                 <div></div>
             </header>
 
-            <div v-for="payment, index in value.data.payments">
+            <div v-for="payment, index in value.payments">
                 <div v-text="payment.nr"></div>
                 <div v-text="payment.status_name"></div>
                 <div v-text="payment.subscription_name"></div>
                 <div class="flex">
-                    <inertia-link :href="`/member/${value.data.id}/payment/${payment.id}/edit`" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></inertia-link>
+                    <a href="#" @click.prevent="single = payment; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
                     <inertia-link v-show="!payment.is_accepted" href="#" @click.prevent="accept(payment)" class="inline-flex btn btn-success btn-sm"><sprite src="check"></sprite></inertia-link>
                     <inertia-link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></inertia-link>
                 </div>
@@ -31,15 +38,22 @@
 import SidebarHeader from '../../components/SidebarHeader.vue';
 
 export default {
+    data: function() {
+        return {
+            mode: null,
+            single: null,
+        };
+    },
+
     components: { SidebarHeader },
 
     methods: {
         remove(payment) {
-            this.$inertia.delete(`/member/${this.value.data.id}/payment/${payment.id}`);
+            this.$inertia.delete(`/member/${this.value.id}/payment/${payment.id}`);
         },
 
         accept(payment) {
-            this.$inertia.patch(`/member/${this.value.data.id}/payment/${payment.id}`, { ...payment, status_id: 3 });
+            this.$inertia.patch(`/member/${this.value.id}/payment/${payment.id}`, { ...payment, status_id: 3 });
         },
 
         openLink(link) {
@@ -48,11 +62,25 @@ export default {
             }
 
             window.open(link.href);
+        },
+
+        submit() {
+            var _self = this;
+
+            this.mode === 'create' 
+                ? this.$inertia.post(`/member/${this.value.data.id}/payment`, this.inner)
+                : this.$inertia.patch(`/member/${this.value.id}/payment/${this.single.id}`, this.single, {
+                    onFinish() {
+                        _self.single = null;
+                    }
+                });
         }
     },
 
     props: {
-        value: {}
+        value: {},
+        subscriptions: {},
+        statuses: {},
     }
 };
 </script>