mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<template>
|
|
<!--Notice modal-->
|
|
<modal
|
|
:show.sync="$store.state.modals"
|
|
modal-classes="modal-danger"
|
|
modal-content-classes="bg-gradient-danger"
|
|
>
|
|
<h6 slot="header" class="modal-title">Your attention is required</h6>
|
|
|
|
<div class="py-3 text-center">
|
|
<form ref="form" @submit.stop.prevent="handleSubmit">
|
|
<b-form-group
|
|
label="Name"
|
|
label-for="name-input"
|
|
invalid-feedback="Name is required"
|
|
:state="nameState"
|
|
>
|
|
<b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
|
|
</b-form-group>
|
|
</form>
|
|
</div>
|
|
|
|
<template slot="footer">
|
|
<base-button type="white">Ok</base-button>
|
|
<base-button type="link" class="ml-auto" @click="$store.state.modals = false">
|
|
abbrechen
|
|
</base-button>
|
|
</template>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'modal',
|
|
data() {
|
|
return {
|
|
name: '',
|
|
nameState: null,
|
|
submittedNames: [],
|
|
}
|
|
},
|
|
/* Modal */
|
|
checkFormValidity() {
|
|
const valid = this.$refs.form.checkValidity()
|
|
this.nameState = valid
|
|
return valid
|
|
},
|
|
resetModal() {
|
|
this.name = ''
|
|
this.nameState = null
|
|
},
|
|
handleOk(bvModalEvt) {
|
|
// Prevent modal from closing
|
|
bvModalEvt.preventDefault()
|
|
// Trigger submit handler
|
|
this.handleSubmit()
|
|
},
|
|
handleSubmit() {
|
|
// Exit when the form isn't valid
|
|
if (!this.checkFormValidity()) {
|
|
return
|
|
}
|
|
// Push the name to submitted names
|
|
this.submittedNames.push(this.name)
|
|
this.$store.state.modals = false
|
|
this.$store.commit('loginAsAdmin')
|
|
this.$router.push('/AdminOverview')
|
|
|
|
// Hide the modal manually
|
|
this.$nextTick(() => {
|
|
this.$bvModal.hide('modal-prevent-closing')
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.modal-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.6) !important;
|
|
}
|
|
</style>
|