120 lines
3.0 KiB
Vue
120 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-card tile :loading="jobkindsLoading">
|
||
|
|
<v-card-title>
|
||
|
|
Dienstarten
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn fab small color="primary" @click="add()">
|
||
|
|
<v-icon>
|
||
|
|
{{ plusIcon }}
|
||
|
|
</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<v-card tile v-for="jobkind in jobkinds" :key="jobkind.id">
|
||
|
|
<v-card-text class="black--text">
|
||
|
|
<v-row class="ml-3 mr-3">
|
||
|
|
{{ jobkind.name }}
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn icon @click="editJobKind(jobkind)">
|
||
|
|
<v-icon>
|
||
|
|
{{ editIcon }}
|
||
|
|
</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
<v-btn icon @click="deleteJobKind(jobkind)">
|
||
|
|
<v-icon>
|
||
|
|
{{ deleteIcon }}
|
||
|
|
</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-row>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
<v-dialog v-model="dialog">
|
||
|
|
<v-card>
|
||
|
|
<v-card-title>
|
||
|
|
{{ title }}
|
||
|
|
</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<v-text-field outlined label="Name" v-model="editedItem.name" />
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn text color="primary" @click="close()">Abbrechen</v-btn>
|
||
|
|
<v-btn text color="primary" @click="save()">Speichern</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters, mapActions } from 'vuex'
|
||
|
|
import { mdiPencil, mdiDelete, mdiPlus } from '@mdi/js'
|
||
|
|
export default {
|
||
|
|
name: 'JobKindManager',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
editIcon: mdiPencil,
|
||
|
|
deleteIcon: mdiDelete,
|
||
|
|
plusIcon: mdiPlus,
|
||
|
|
dialog: false,
|
||
|
|
editedItem: {
|
||
|
|
id: -1,
|
||
|
|
name: null
|
||
|
|
},
|
||
|
|
defaultItem: {
|
||
|
|
id: -1,
|
||
|
|
name: null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions({
|
||
|
|
getAllJobKinds: 'jkm/getAllJobKinds',
|
||
|
|
addingJobKind: 'jkm/addJobKind',
|
||
|
|
updateJobKind: 'jkm/updateJobKind',
|
||
|
|
deletingJobKind: 'jkm/deleteJobKind'
|
||
|
|
}),
|
||
|
|
add() {
|
||
|
|
this.dialog = true
|
||
|
|
},
|
||
|
|
editJobKind(jobkind) {
|
||
|
|
this.dialog = true
|
||
|
|
this.editedItem = Object.assign({}, jobkind)
|
||
|
|
},
|
||
|
|
deleteJobKind(jobkind) {
|
||
|
|
confirm("Willst du diese Dienstart wirklich löschen") && this.deletingJobKind(jobkind)
|
||
|
|
this.close()
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.editedItem = Object.assign({}, this.defaultItem)
|
||
|
|
this.dialog = false
|
||
|
|
}, 200)
|
||
|
|
},
|
||
|
|
save() {
|
||
|
|
this.editedItem.id === -1 ? this.addingJobKind(this.editedItem) : this.updateJobKind(this.editedItem)
|
||
|
|
this.close()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters({
|
||
|
|
jobkinds: 'jkm/jobkinds',
|
||
|
|
jobkindsLoading: 'jkm/jobkindsLoading'
|
||
|
|
}),
|
||
|
|
title() {
|
||
|
|
return this.editedItem.id === -1
|
||
|
|
? 'Neue Dienstart erstellen'
|
||
|
|
: 'Dienstart bearbeiten'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getAllJobKinds()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|