Page MenuHomePhorge
Differential D2734 Diff 7825 src/resources/vue/Widgets/SupportForm.vue

Changeset View

Standalone View

View Options

src/resources/vue/Widgets/SupportForm.vue

<template> <template>
<div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<form class="modal-content" @submit.prevent="submit"> <form class="modal-content" @submit.prevent="submit">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">{{ $t('support.title') }}</h5> <h5 class="modal-title">{{ $t('support.title') }}</h5>
<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form"> <form>
<div class="form-group"> <div class="mb-3">
<label for="support-user">{{ $t('support.id') }}</label> <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
<input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" /> <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
<small class="form-text text-muted">{{ $t('support.id-hint') }}</small> <small class="text-muted">{{ $t('support.id-hint') }}</small>
</div> </div>
<div class="form-group"> <div class="mb-3">
<label for="support-name">{{ $t('support.name') }}</label> <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
<input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" /> <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
</div> </div>
<div class="form-group"> <div class="mb-3">
<label for="support-email">{{ $t('support.email') }}</label> <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
<input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required /> <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
</div> </div>
<div class="form-group"> <div class="mb-3">
<label for="support-summary">{{ $t('support.summary') }}</label> <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
<input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required /> <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
</div> </div>
<div class="form-group"> <div>
<label for="support-body">{{ $t('support.expl') }}</label> <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
<textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea> <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
</div> </div>
</div> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">{{ $t('btn.cancel') }}</button> <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
<button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button> <button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Modal } from 'bootstrap'
export default { export default {
data() { data() {
return { return {
body: '', body: '',
email: '', email: '',
name: '', name: '',
summary: '', summary: '',
user: '' user: ''
} }
}, },
mounted() { mounted() {
this.dialog = $('#support-dialog') const dialog = this.$el
.on('hide.bs.modal', () => {
dialog.addEventListener('hide.bs.modal', () => {
this.lockForm(false) this.lockForm(false)
if (this.cancelToken) { if (this.cancelToken) {
this.cancelToken() this.cancelToken()
this.cancelToken = null this.cancelToken = null
} }
}) })
.on('show.bs.modal', () => {
dialog.addEventListener('show.bs.modal', () => {
this.cancelToken = null this.cancelToken = null
}) })
dialog.addEventListener('shown.bs.modal', () => {
$(dialog).find('input').first().focus()
})
this.dialog = new Modal(dialog)
}, },
methods: { methods: {
lockForm(lock) { lockForm(lock) {
this.dialog.find('input,textarea,.modal-action').prop('disabled', lock) $(this.$el).find('input,textarea,.modal-action').prop('disabled', lock)
},
showDialog() {
this.dialog.show()
}, },
submit() { submit() {
this.lockForm(true) this.lockForm(true)
let params = { let params = {
user: this.user, user: this.user,
name: this.name, name: this.name,
email: this.email, email: this.email,
Show All 9 Lines export default {
}) })
} }
axios.post('/api/v4/support/request', params, args) axios.post('/api/v4/support/request', params, args)
.then(response => { .then(response => {
this.summary = '' this.summary = ''
this.body = '' this.body = ''
this.lockForm(false) this.lockForm(false)
this.dialog.modal('hide') this.dialog.hide()
this.$toast.success(response.data.message) this.$toast.success(response.data.message)
}) })
.catch(error => { .catch(error => {
this.lockForm(false) this.lockForm(false)
}) })
} }
} }
} }
</script> </script>