add schnackbar and validation

frontend/src/App.vue

@@ -2,10 +2,20 @@
   <v-app>
     <v-main>
       <router-view />
+      <SnackbarComponent ref="vtoast"/>
     </v-main>
   </v-app>
 </template>
 
-<script setup>
-  //
+<script>
+
+
+import SnackbarComponent from "@/components/cmp_Snackback.vue";
+
+export default {
+  components: {SnackbarComponent},
+  mounted() {
+    this.$root.vtoast = this.$refs.vtoast
+  }
+}
 </script>

frontend/src/components/cmp_AddCustomer.vue

@@ -1,13 +1,16 @@
 <template>
   <v-container style="background-color: white; margin-top: 10vh">
+    <v-form v-model="form" @submit.prevent="addCustomer">
     <v-container>
       <v-row>
         <v-col>
           <v-text-field class="inputFields" v-model="firstName"
-                        label="Vorname"/>
+                        label="Vorname"
+          :rules="[rules.notNull, rules.length3]"/>
         </v-col>
         <v-col>
           <v-text-field class="inputFields" v-model="lastName"
+                        :rules="[rules.notNull, rules.length3]"
                         label="Nachname"/>
         </v-col>
       </v-row>
@@ -16,6 +19,7 @@
       <v-row>
         <v-col>
           <v-text-field class="inputFields" v-model="mobileNumber"
+                        :rules="[rules.notNull,rules.phonenumber]"
                         label="Handynummer"/>
         </v-col>
         <v-col>
@@ -26,6 +30,7 @@
       <v-row>
         <v-col>
           <v-text-field class="inputFields" v-model="email"
+                        :rules="[rules.email]"
                         label="Email"/>
         </v-col>
       </v-row>
@@ -34,31 +39,36 @@
       <v-row>
         <v-col>
           <v-text-field class="inputFields" v-model="street"
+                        :rules="[rules.notNull]"
                         label="Straße"/>
         </v-col>
         <v-col>
           <v-text-field class="inputFields" v-model="streetNumber"
+                        :rules="[rules.notNull]"
                         label="Hausnummer"/>
         </v-col>
       </v-row>
       <v-row>
         <v-col>
           <v-text-field class="inputFields" v-model="postcode"
+                        :rules="[rules.notNull]"
                         label="Postleitzahl"/>
         </v-col>
         <v-col>
           <v-text-field class="inputFields" v-model="city"
+                        :rules="[rules.notNull]"
                         label="Stadt"/>
         </v-col>
       </v-row>
     </v-container>
     <v-container>
       <v-row justify="center">
-        <v-btn @click="addCustomer()">
+        <v-btn :disabled="!form" type="submit">
           Erstellen
         </v-btn>
       </v-row>
     </v-container>
+    </v-form>
   </v-container>
 </template>
 
@@ -87,25 +97,48 @@ export default {
       landlineNumber: '',
       email: '',
       street: '',
-      streetNumber: ''
+      streetNumber: '',
+      rules: {
+        notNull: value => !!value || 'Das Feld ist leer! Bitte überprüfe die Eingabe!',
+        length3: value => value.length > 2 || 'Der Feld-Inhalt ist zu kurz! Mindestens 3 Buchstaben/Zahlen notwendig!',
+        phonenumber: value => value.match("^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$") !== null || 'Handynummer ist ungültig!',
+        email: value => {
+          if(value !== ""){
+            if(value.match("^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$") === null){
+              return 'Email ist ungültig!'
+            }
+        }
+        }
+      },
+      form: null
     }
   },
   methods: {
     addCustomer: function () {
-      const customer = {
-        "firstName": this.firstName,
-        "lastName": this.lastName,
-        "postcode": this.postcode,
-        "city": this.city,
-        "mobileNumber": this.mobileNumber,
-        "landlineNumber": this.landlineNumber,
-        "email": this.email,
-        "street": this.street,
-        "streetNumber": this.streetNumber
+      if (this.form) {
+        const customer = {
+          "firstName": this.firstName,
+          "lastName": this.lastName,
+          "postcode": this.postcode,
+          "city": this.city,
+          "mobileNumber": this.mobileNumber,
+          "landlineNumber": this.landlineNumber,
+          "email": this.email,
+          "street": this.street,
+          "streetNumber": this.streetNumber
+        }
+        RESTUtils.sendPostRequest("/customer", customer)
+          .then(
+            this.$root.$refs.vtoast.show({message: 'Customer erstellt'})
+          )
+          .catch(error => {
+            console.log(error)
+            this.$root.$refs.vtoast.show({
+              message: 'Fehler: ' + error,
+              color: 'failed'
+            })
+          })
       }
-      RESTUtils.sendPostRequest("/customer", customer)
-        .then(console.log("customer erstellt"))
-        .catch(error => console.log(error))
     }
   }
 }

frontend/src/components/cmp_Snackback.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-snackbar
+    :color="color"
+    :timeout="timer"
+    v-model="showSnackbar"
+    bottom
+    right
+  >
+    <v-icon left>{{icon}}</v-icon>{{message}}
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  name: "SnackbarComponent",
+  data() {
+    return{
+      showSnackbar: false,
+      message: '',
+      color: 'success',
+      icon: 'mdi-check',
+      timer: 3000
+    }
+  },
+  methods:{
+    show(data) {
+      this.message = data.message || 'missing "message".'
+      this.color = data.color || 'success'
+      this.timer = data.timer || 3000
+      this.icon = data.icon || 'mdi-check'
+      this.showSnackbar = true
+    }
+  }
+}
+</script>