79 lines
2.7 KiB
Vue
79 lines
2.7 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">
|
|
{{ 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-validate="'required'"
|
|
v-model="selectedArea.name"/>
|
|
<span class="input-error text-center">{{ errors.first('name') }}</span>
|
|
</v-row>
|
|
<v-row>
|
|
<v-checkbox label="Aktiv" v-model="selectedArea.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="saveArea">
|
|
{{ selectedArea.id ? 'Gebiet speichern' : 'Gebiet erstellen' }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Vue, Prop} from 'vue-property-decorator';
|
|
import {Area} from '@/models/Area';
|
|
import {namespace} from 'vuex-class';
|
|
|
|
const AreaStore = namespace('area');
|
|
|
|
@Component({})
|
|
export default class CreateAreaComponent extends Vue {
|
|
|
|
@Prop({default: false})
|
|
private showDialog?: boolean;
|
|
|
|
@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 closeDialog() {
|
|
this.$emit('closeDialog');
|
|
}
|
|
|
|
private saveArea() {
|
|
this.$validator.validateAll().then(async (result) => {
|
|
if (result) {
|
|
if (this.selectedArea!.id) {
|
|
await this.editAreaAction(this.selectedArea);
|
|
} else {
|
|
await this.createAreaAction(this.selectedArea);
|
|
}
|
|
this.closeDialog();
|
|
} else {
|
|
// TODO: Show error message
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|