create user stuff

2020-02-02 14:25:54 +01:00
parent 2c2176937c
commit d9f14a3410
7 changed files with 233 additions and 17 deletions
@@ -0,0 +1,95 @@
+<template>
+    <v-dialog v-model="showDialog" width="500"
+              @close="closeDialog"
+              @click:outside="closeDialog">
+        <v-card class="pa-6 white">
+            <div class="headline text-center mb-6">
+                {{ selectedUser.id ? 'Benutzer bearbeiten' : 'Benutzer erstellen' }}
+            </div>
+            <v-card-text>
+                <v-form class="d-flex flex-column">
+                    <v-row class="d-flex flex-column">
+                        <v-text-field hide-details outlined placeholder="Vorname"
+                                      name="firstName"
+                                      data-vv-as="Vorname"
+                                      v-validate="'required'"
+                                      v-model="selectedUser.firstName"/>
+                        <span class="input-error text-center">{{ errors.first('firstName') }}</span>
+                    </v-row>
+                    <v-row class="d-flex flex-column">
+                        <v-text-field hide-details outlined placeholder="Nachname"
+                                      name="lastName"
+                                      data-vv-as="Nachname"
+                                      v-validate="'required'"
+                                      v-model="selectedUser.lastName"/>
+                        <span class="input-error text-center">{{ errors.first('lastName') }}</span>
+                    </v-row>
+                    <v-row class="d-flex flex-column">
+                        <v-text-field hide-details outlined placeholder="E-Mail"
+                                      name="email"
+                                      data-vv-as="E-Mail"
+                                      v-validate="'required'"
+                                      v-model="selectedUser.email"/>
+                        <span class="input-error text-center">{{ errors.first('email') }}</span>
+                    </v-row>
+                    <v-row>
+                        <v-checkbox label="Aktiv" v-model="selectedUser.active"/>
+                    </v-row>
+                </v-form>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
+                <v-btn color="primary" @click="saveUser">
+                    {{ selectedUser.id ? 'Benutzer speichern' : 'Benutzer erstellen' }}
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+    import {Component, Vue, Prop} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import User from '@/models/User';
+
+    const UserStore = namespace('user');
+
+    @Component({})
+    export default class CreateUserComponent extends Vue {
+
+        @Prop({default: false})
+        private showDialog?: boolean;
+
+        @Prop({default: () => new User({})})
+        public selectedUser?: User;
+
+        @UserStore.Action('createUserAction')
+        private createUserAction!: (userData: any) => Promise<User[]>;
+
+        @UserStore.Action('editUserAction')
+        private editUserAction!: (userData: any) => Promise<User>;
+
+        private closeDialog() {
+            this.$emit('closeDialog');
+        }
+
+        private saveUser() {
+            this.$validator.validateAll().then(async (result) => {
+                if (result) {
+                    if (this.selectedUser!.id) {
+                        await this.editUserAction(this.selectedUser);
+                    } else {
+                        await this.createUserAction(this.selectedUser);
+                    }
+                } else {
+                    // TODO: Show error message
+                }
+            });
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>