create user stuff

src/api/repositories/AreaRepository.ts

@@ -19,6 +19,6 @@ export default class AreaRepository extends BaseRepository {
     }
 
     public setUsers(area: any, userIds: any): Promise<any> {
-        return this.axiosClient.post(`area/${area.id}/setUsers`, {userIds: userIds});
+        return this.axiosClient.post(`area/${area.id}/setUsers`, {userIds});
     }
 }

src/components/area/CreateArea.component.vue

@@ -1,13 +1,15 @@
 <template>
-    <v-dialog title="Gebiet erstellen" v-model="showDialog" width="500" @close="closeDialog"
+    <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">Gebiet erstellen
+            <div class="headline text-center mb-6">
+                {{ selectedArea.id ? 'Gebiet bearbeiten' : 'Gebiet 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="Gebietsname" name="name" data-vv-as="Gebietsname"
+                        <v-text-field hide-details outlined placeholder="Gebietsname" name="name"
+                                      data-vv-as="Gebietsname"
                                       v-validate="'required'"
                                       v-model="selectedArea.name"/>
                         <span class="input-error text-center">{{ errors.first('name') }}</span>
@@ -40,14 +42,14 @@
         @Prop({default: false})
         private showDialog?: boolean;
 
-        @Prop({default: () => new Area(null)})
+        @Prop({default: () => new Area({})})
         public selectedArea?: Area;
 
         @AreaStore.Action('createAreaAction')
         private createAreaAction!: (areaData: any) => Promise<Area[]>;
 
         @AreaStore.Action('editAreaAction')
-        private editAreaAction!: (areaData: any) => Promise<Area[]>;
+        private editAreaAction!: (areaData: any) => Promise<Area>;
 
         private closeDialog() {
             this.$emit('closeDialog');
@@ -62,7 +64,7 @@
                         await this.createAreaAction(this.selectedArea);
                     }
                 } else {
-
+                    // TODO: Show error message
                 }
             });
         }

src/components/user/CreateUser.component.vue

@@ -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>

src/components/user/UserTable.component.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <v-data-table
+                :headers="tableHeaders" :items="allUsers" class="elevation-1" item-key="id">
+            <template v-slot:item.options="{ item }">
+                <div class="d-flex justify-end ma-3">
+                    <v-btn color="primary" small @click="handleEdit(item)" class="mr-1">
+                        <v-icon>mdi-pencil</v-icon>
+                    </v-btn>
+                </div>
+            </template>
+        </v-data-table>
+        <create-user-component v-if="showEditUserDialog" :showDialog="showEditUserDialog" :selectedUser="selectedUser"
+                               @createdUser="createdUser" @closeDialog="showEditUserDialog = false">
+        </create-user-component>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import User from '@/models/User';
+
+    const UserStore = namespace('user');
+
+    @Component({
+        components: {
+            CreateUserComponent: () => import(
+                /* webpackChunkName: "CreateUserComponent" */
+                '@/components/user/CreateUser.component.vue'
+                ),
+        }
+    })
+    export default class UserTableComponent extends Vue {
+
+        @UserStore.Action('loadUsersAction')
+        private loadUsers!: () => Promise<User[]>;
+
+        @UserStore.Getter('users')
+        public allUsers?: User[];
+
+        public tableHeaders: any[] = [];
+
+        private showEditUserDialog: boolean = false;
+
+        public selectedUser?: User;
+
+        public created() {
+            this.tableHeaders = [{
+                text: 'Vorname',
+                value: 'firstName'
+            }, {
+                text: 'Nachname',
+                value: 'lastName'
+            }, {
+                text: 'E-Mail',
+                value: 'email'
+            }, {
+                text: 'Gebiete',
+                value: 'areas.length'
+            }, {
+                text: 'Optionen',
+                value: 'options',
+                align: 'right',
+                width: 200
+            }];
+
+            this.loadUsers();
+        }
+
+        private handleEdit(selectedUser: User) {
+            this.selectedUser = selectedUser;
+            this.showEditUserDialog = true;
+        }
+
+        private createdUser() {
+            this.loadUsers();
+            this.showEditUserDialog = false;
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/models/Area.ts

@@ -9,8 +9,6 @@ export class Area {
 
     constructor(data: any) {
         Object.assign(this, data);
-        if (data) {
-            this.users = [];
 
         if (data.users) {
             data.users.map((userData: any) => {
@@ -19,4 +17,3 @@ export class Area {
         }
     }
 }
-}

src/stores/user.store.ts

@@ -28,7 +28,7 @@ const actions: ActionTree<any, any> = {
         return user;
     },
     editUserAction: async ({commit}, userData: any): Promise<User> => {
-        const userRaw = await userRepository.createUser(userData);
+        const userRaw = await userRepository.editUser(userData);
         const user = new User(userRaw.data);
         commit('handleUser', user);
         return user;

src/views/users/Users.view.vue

@@ -1,13 +1,49 @@
 <template>
-
+    <div id="users" class="ma-6">
+        <div class="d-flex justify-space-between">
+            <div class="right-header">
+                <h1>Benutzer</h1>
+            </div>
+            <div class="left-header">
+                <v-btn @click="openCreateDialog()" color="primary"
+                >Benutzer erstellen
+                </v-btn>
+            </div>
+        </div>
+        <user-table-component class="mt-3"/>
+        <create-user-component v-if="showCreateDialog" :showDialog="showCreateDialog"
+                               @createdUser="createdUser" @closeDialog="showCreateDialog = false"/>
+    </div>
 </template>
 
 <script lang="ts">
     import {Component, Vue} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
 
-    @Component({})
+    const UserStore = namespace('user');
+
+    @Component({
+        components: {
+            UserTableComponent: () => import(
+                /* webpackChunkName: "UserTableComponent" */
+                '@/components/user/UserTable.component.vue'),
+            CreateUserComponent: () => import(
+                /* webpackChunkName: "CreateUserComponent" */
+                '@/components/user/CreateUser.component.vue'
+                )
+        }
+    })
     export default class UsersView extends Vue {
 
+        private showCreateDialog: boolean = false;
+
+        private openCreateDialog() {
+            this.showCreateDialog = true;
+        }
+
+        private createdUser() {
+            this.showCreateDialog = false;
+        }
     }
 </script>