From f7066549d1cdd0db7a1139f620a2cf6564dc7516 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 22 Jun 2021 23:00:14 +0200
Subject: [PATCH] Add validation errors

---
 resources/css/app.css                    |  1 +
 resources/css/layout.css                 |  3 +++
 resources/js/components/Notification.vue | 33 ++++++++++++++++++++++++
 resources/js/layouts/App.vue             |  6 ++++-
 resources/js/views/member/Form.vue       |  6 ++---
 resources/lang/de/validation.php         |  8 ++++++
 6 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 resources/css/layout.css
 create mode 100644 resources/js/components/Notification.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 12181874..a889f574 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -3,3 +3,4 @@
 @import "tailwindcss/utilities";
 @import "base";
 @import "switch";
+@import "layout";
diff --git a/resources/css/layout.css b/resources/css/layout.css
new file mode 100644
index 00000000..5ec154fe
--- /dev/null
+++ b/resources/css/layout.css
@@ -0,0 +1,3 @@
+.has-contents > div {
+    display: contents;
+}
diff --git a/resources/js/components/Notification.vue b/resources/js/components/Notification.vue
new file mode 100644
index 00000000..d7f4cdaf
--- /dev/null
+++ b/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>
diff --git a/resources/js/layouts/App.vue b/resources/js/layouts/App.vue
index 2e6e1cc3..8cd03114 100644
--- a/resources/js/layouts/App.vue
+++ b/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: {
diff --git a/resources/js/views/member/Form.vue b/resources/js/views/member/Form.vue
index 31d8e7b7..3cb2f0c6 100644
--- a/resources/js/views/member/Form.vue
+++ b/resources/js/views/member/Form.vue
@@ -81,8 +81,8 @@ export default {
         },
         submit() {
             this.mode === 'create'
-                ? this.$inertia.post(`/member`, inner)
-                : this.$inertia.patch(`/member/${inner.id}`, inner);
+                ? this.$inertia.post(`/member`, this.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>
diff --git a/resources/lang/de/validation.php b/resources/lang/de/validation.php
index ea3301c3..c9c73a8b 100644
--- a/resources/lang/de/validation.php
+++ b/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',
     ],
 ];