Add validation errors

resources/css/app.css

@@ -3,3 +3,4 @@
 @import "tailwindcss/utilities";
 @import "base";
 @import "switch";
+@import "layout";

resources/css/layout.css

@@ -0,0 +1,3 @@
+.has-contents > div {
+    display: contents;
+}

resources/js/components/Notification.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="grid gap-2 has-contents">
+        <transition-group name="fadeRight" tag="div">
+            <div v-for="(item, index) in items" :key="'i'+index"
+                 :class="`bg-${item.type}-300 text-${item.type}-800 h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
+            >
+                <div class="text-sm" v-for="message in item.messages" v-text="message"></div>
+            </div>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        items() {
+            var i = [];
+
+            for (const field in this.$page.props.errors) {
+                i.push({ messages: this.$page.props.errors[field], type: 'red' });
+            }
+
+            if (this.$page.props.flash && this.$page.props.flash.success) {
+                i.push({ messages: [ this.$page.props.flash.success ], type: 'green' });
+            }
+
+            return i;
+
+            return this.$page.props.errors;
+        }
+    }
+};
+</script>

resources/js/layouts/App.vue

@@ -1,6 +1,8 @@
 <template>
     <div id="app" class="flex font-sans flex-grow">
 
+        <notification class="fixed z-40 right-0 top-0 mt-3 mr-3"></notification>
+
         <!-- ******************************** Sidebar ******************************** -->
         <div class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid">
             <div class="grid gap-2">
@@ -36,9 +38,11 @@
 import VLink from './_VLink.vue';
 import { debounce } from 'lodash';
 import mergesQueryString from '../mixins/mergesQueryString.js';
+import Notification from '../components/Notification.vue';
+
 
 export default {
-    components: { VLink },
+    components: { Notification, VLink },
     mixins: [ mergesQueryString ],
 
     computed: {

resources/js/views/member/Form.vue

@@ -81,8 +81,8 @@ export default {
         },
         submit() {
             this.mode === 'create'
-                ? this.$inertia.post(`/member`, inner)
+                ? this.$inertia.post(`/member`, this.inner)
-                : this.$inertia.patch(`/member/${inner.id}`, inner);
+                : this.$inertia.patch(`/member/${this.inner.id}`, this.inner);
         }
     },
 
@@ -93,7 +93,7 @@ export default {
     },
 
     created() {
-        this.inner = this.mode === 'edit' ? this.data : {};
+        this.inner = this.data;
     }
 };
 </script>

resources/lang/de/validation.php

@@ -177,5 +177,13 @@ return [
         'size'                  => 'Größe',
         'mglnr'                 => 'Mitgliesnummer',
         'groupid'               => 'Gruppierungsnummer',
+        'firstname' => 'Vorname',
+        'lastname' => 'Nachname',
+        'birthday' => 'Geburtsdatum',
+        'country_id' => 'Land',
+        'joined_at' => 'Eintrittsdatum',
+        'zip' => 'PLZ',
+        'location' => 'Ort',
+        'nationality_id' => 'Staatsangehörigkeit',
     ],
 ];