104 lines
3.9 KiB
Vue
104 lines
3.9 KiB
Vue
<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">
|
|
{{ userCopy.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="userCopy.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="userCopy.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="userCopy.email"/>
|
|
<span class="input-error text-center">{{ errors.first('email') }}</span>
|
|
</v-row>
|
|
<v-row>
|
|
<v-checkbox label="Aktiv" v-model="userCopy.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">
|
|
{{ userCopy.id ? 'Benutzer speichern' : 'Benutzer erstellen' }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Vue, Prop, Watch} 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;
|
|
|
|
public userCopy: User = new User({});
|
|
|
|
@UserStore.Action('createUserAction')
|
|
private createUserAction!: (userData: any) => Promise<User[]>;
|
|
|
|
@UserStore.Action('editUserAction')
|
|
private editUserAction!: (userData: any) => Promise<User>;
|
|
|
|
private closeDialog() {
|
|
this.$emit('closeDialog');
|
|
}
|
|
|
|
@Watch('selectedUser', {immediate: true})
|
|
private onUserChange() {
|
|
this.userCopy = this.selectedUser!.deepCopy();
|
|
}
|
|
|
|
private saveUser() {
|
|
this.$validator.validateAll().then(async (result) => {
|
|
if (result) {
|
|
if (this.userCopy!.id) {
|
|
await this.editUserAction(this.userCopy);
|
|
} else {
|
|
await this.createUserAction(this.userCopy);
|
|
}
|
|
this.closeDialog();
|
|
} else {
|
|
// TODO: Show error message
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|