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