87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<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>
|