90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
id="popup-modal"
|
|
tabindex="-1"
|
|
class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
|
|
<div class="relative w-full h-full max-w-md md:h-auto">
|
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
|
<button
|
|
type="button"
|
|
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
|
|
data-modal-hide="popup-modal"
|
|
@click="closeModal()">
|
|
<svg
|
|
aria-hidden="true"
|
|
class="w-5 h-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
<div class="p-6 text-center">
|
|
<p class="text-xl font-semibold font-sans">Status wächseln</p>
|
|
<select
|
|
id="statuses"
|
|
v-model="selected"
|
|
class="bg-gray-50 border mt-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
<option value="nothing" selected>Choose a status</option>
|
|
<option v-for="status in statuses" :key="status" :value="status">
|
|
{{ status }}
|
|
</option>
|
|
</select>
|
|
<button
|
|
class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md">
|
|
Wächseln
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
import router from '../../router/index'
|
|
import { getStatuses, changeStatus } from '../../service/ContractsService'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selected: 'nothing',
|
|
statuses: ['A', 'B']
|
|
}
|
|
},
|
|
computed: {
|
|
selectedContract() {
|
|
return this.$store.state.contracts.selectedContract
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.statuses = await getStatuses()
|
|
},
|
|
methods: {
|
|
...mapActions(['closeModal']),
|
|
changeStatus() {
|
|
const id = this.selectedContract
|
|
if (id === null) {
|
|
this.closeModal()
|
|
router.push('/error?message=' + 'Contract not found' + '&code=404')
|
|
}
|
|
if (selected === 'nothing') return
|
|
//TODO: provide here contractID
|
|
changeStatus(id, this.selected)
|
|
.then(resp => {
|
|
this.closeModal()
|
|
this.$router.go()
|
|
})
|
|
.catch(error => {
|
|
console.error(error)
|
|
this.closeModal()
|
|
router.push('/error?message=' + error.message + '&code=' + error.code)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|