Add: Edit member

app/Member/MemberController.php

@@ -4,6 +4,8 @@ namespace App\Member;
 
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
+use App\Gender;
+use App\Fee;
 
 class MemberController extends Controller
 {
@@ -15,4 +17,21 @@ class MemberController extends Controller
             'data' => MemberResource::collection(Member::search($request->query('search', null))->paginate(15))
         ]);
     }
+
+    public function edit(Member $member, Request $request) {
+        session()->put('menu', 'member');
+        session()->put('title', 'Mitglied bearbeiten');
+
+        return \Inertia::render('member/Edit', [
+            'genders' => Gender::where('is_null', false)->get()->pluck('name', 'id'),
+            'fees' => Fee::get()->pluck('name', 'id'),
+            'data' => new MemberResource($member)
+        ]);
+    }
+
+    public function update(Member $member, Request $request) {
+        $member->update($request->input());
+
+        return redirect()->route('member.index');
+    }
 }

app/Member/MemberResource.php

@@ -23,6 +23,16 @@ class MemberResource extends JsonResource
             'send_newspaper' => $this->send_newspaper,
             'birthday' => $this->birthday->format('d.m.Y'),
             'joined_at' => $this->joined_at->format('d.m.Y'),
+            'id' => $this->id,
+            'gender_id' => $this->gender_id,
+            'further_address' => $this->further_address,
+            'work_phone' => $this->work_phone,
+            'mobile_phone' => $this->mobile_phone,
+            'main_phone' => $this->main_phone,
+            'email' => $this->email,
+            'email_parents' => $this->email_parents,
+            'fax' => $this->fax,
+            'nami_id' => $this->nami_id,
         ];
     }
 }

resources/js/app.js

@@ -1,16 +1,19 @@
 import Vue from 'vue';
-import { App, plugin } from '@inertiajs/inertia-vue'
+import { App as InertiaApp, plugin } from '@inertiajs/inertia-vue'
 import 'font-awesome/css/font-awesome.css';
 import Echo from 'laravel-echo';
 window.io = require('socket.io-client');
 import Sprite from './components/Sprite.js';
 
 import FText from './components/FText.vue';
+import FSelect from './components/FSelect.vue';
 import Pages from './components/Pages.vue';
 import VBool from './components/VBool.vue';
+import App from './layouts/App.vue';
 
 Vue.use(plugin)
 Vue.component('f-text', FText);
+Vue.component('f-select', FSelect);
 Vue.component('sprite', Sprite);
 Vue.component('pages', Pages);
 Vue.component('v-bool', VBool);
@@ -18,11 +21,18 @@ Vue.component('v-bool', VBool);
 const el = document.getElementById('app')
 
 new Vue({
-  render: h => h(App, {
-    props: {
-      initialPage: JSON.parse(el.dataset.page),
-      resolveComponent: name => require(`./views/${name}`).default,
-    },
-  }),
+    render: h => h(InertiaApp, {
+        props: {
+            initialPage: JSON.parse(el.dataset.page),
+            resolveComponent: name => {
+                var page = require(`./views/${name}`).default;
+
+                if (page.layout === undefined) {
+                    page.layout = App;
+                }
+                return page;
+            }
+        },
+    }),
 }).$mount(el);
 

resources/js/components/FSelect.vue

@@ -1,19 +1,19 @@
 <template>
     <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
         <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-700" :class="{
+            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
-            }">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
+            }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
             <span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
             }" v-text="label"></span>
             <div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
                 <select :value="value" @change="trigger"
-                    class="border-gray-400 border-solid bg-white w-full appearance-none outline-none h-full"
+                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
                     :class="{
-                        'rounded-lg text-sm border-2 p-2 text-gray-800': size === null,
+                        'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
                         'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
                     }"
                 >

resources/js/components/FText.vue

@@ -1,10 +1,10 @@
 <template>
     <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
         <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-700" :class="{
+            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
-            }">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
+            }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
             <span v-if="label && inset" class="absolute z-10 top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
@@ -12,9 +12,9 @@
             <div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
                 <input :type="type" :name="name" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder"
                     @focus="onFocus" @blur="onBlur"
-                    class="border-gray-400 border-solid bg-white w-full appearance-none outline-none h-full"
+                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
                     :class="{
-                        'rounded-lg text-sm border-2 p-2 text-gray-800': size === null,
+                        'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
                         'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
                     }"
                 />

resources/js/layouts/App.vue

@@ -17,7 +17,7 @@
                 </label>
             </div>
 
-            <div class="flex-grow">
+            <div class="flex-grow flex flex-col">
                 <slot></slot>
             </div>
         </div>

resources/js/views/member/Edit.vue

@@ -0,0 +1,96 @@
+<template>
+    <form class="flex flex-grow relative" @submit.prevent="$inertia.patch(`/member/${inner.id}`, inner)">
+        <!-- ****************************** menu links ******************************* -->
+        <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
+            <div class="grid gap-1">
+                <a v-for="item, index in menu" :key="index" href="#" @click.prevent="openMenu(index)" class="rounded py-1 px-3 text-gray-400" :class="index == active ? `bg-gray-600` : ''" v-text="item.title"></a>
+            </div>
+            <div>
+                <button type="submit" class="btn block w-full btn-primary">Speichern</button>
+            </div>
+        </div>
+
+        <div class="flex-grow">
+            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Stammdaten'">
+                <div>
+                    <f-select id="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht" required></f-select>
+                </div>
+                <div>
+                    <f-text id="firstname" v-model="inner.firstname" label="Vorname"></f-text>
+                </div>
+                <div>
+                    <f-text id="lastname" v-model="inner.lastname" label="Nachname"></f-text>
+                </div>
+                <div>
+                    <f-text id="address" v-model="inner.address" label="Adresse"></f-text>
+                </div>
+                <div>
+                    <f-text id="further_address" v-model="inner.further_address" label="Adresszusatz"></f-text>
+                </div>
+                <div>
+                    <f-text id="zip" v-model="inner.zip" label="PLZ"></f-text>
+                </div>
+                <div>
+                    <f-text id="location" v-model="inner.location" label="Ort"></f-text>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Kontakt'">
+                <div>
+                    <f-text id="main_phone" v-model="inner.main_phone" label="Telefon"></f-text>
+                </div>
+                <div>
+                    <f-text id="mobile_phone" v-model="inner.mobile_phone" label="Handy"></f-text>
+                </div>
+                <div>
+                    <f-text id="work_phone" v-model="inner.work_phone" label="Tel geschäftlich"></f-text>
+                </div>
+                <div>
+                    <f-text id="email" v-model="inner.email" label="E-Mail"></f-text>
+                </div>
+                <div>
+                    <f-text id="email_parents" v-model="inner.email_parents" label="E-Mail eltern"></f-text>
+                </div>
+                <div>
+                    <f-text id="fax" v-model="inner.fax" label="Fax"></f-text>
+                </div>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {
+            inner: {},
+            active: 0,
+            menu: [
+                { title: 'Stammdaten' },
+                { title: 'Kontakt' },
+            ]
+        };
+    },
+
+    props: {
+        genders: {},
+        fees: {},
+        data: {}
+    },
+
+    methods: {
+        openMenu(index) {
+            this.active = index;
+        }
+    },
+
+    computed: {
+        menuTitle() {
+            return this.menu[this.active].title;
+        }
+    },
+
+    created() {
+        this.inner = this.data;
+    }
+};
+</script>

resources/js/views/member/Index.vue

@@ -12,7 +12,7 @@
                 <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Eintritt</div>
             </header>
 
-            <inertia-link :href="`/member/${member.id}`" :key="index" v-for="member, index in data.data" class="text-gray-200 transition-all duration-500 rounded flex hover:bg-gray-600">
+            <inertia-link :href="`/member/${member.id}/edit`" :key="index" v-for="member, index in data.data" class="text-gray-200 transition-all duration-500 rounded flex hover:bg-gray-600">
                 <div class="py-1 px-6" v-text="member.firstname"></div>
                 <div class="py-1 px-6" v-text="member.lastname"></div>
                 <div class="py-1 px-6" v-text="`${member.address}`"></div>