Differential D3551 Diff 10190 src/resources/vue/Widgets/SupportForm.vue

Changeset View

Standalone View

src/resources/vue/Widgets/SupportForm.vue

<template>		<template>
<div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true">		<modal-dialog id="support-dialog" ref="dialog" :title="$t('support.title')" @click="submit" :buttons="['submit']">
<div class="modal-dialog" role="document">		<form>
<form class="modal-content" @submit.prevent="submit">
<div class="modal-header">
<h5 class="modal-title">{{ $t('support.title') }}</h5>
<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
</div>
<div class="modal-body">
<div class="mb-3">		<div class="mb-3">
<label for="support-user" class="form-label">{{ $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="text-muted">{{ $t('support.id-hint') }}</small>		<small class="text-muted">{{ $t('support.id-hint') }}</small>
</div>		</div>
<div class="mb-3">		<div class="mb-3">
<label for="support-name" class="form-label">{{ $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="mb-3">		<div class="mb-3">
<label for="support-email" class="form-label">{{ $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="mb-3">		<div class="mb-3">
<label for="support-summary" class="form-label">{{ $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>		<div>
<label for="support-body" class="form-label">{{ $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>
<div class="modal-footer">
<btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
<btn type="submit" class="btn-primary modal-action" icon="check">{{ $t('btn.submit') }}</btn>
</div>
</form>		</form>
</div>		</modal-dialog>
</div>
</template>		</template>

<script>		<script>
import { Modal } from 'bootstrap'		import ModalDialog from '../Widgets/ModalDialog'

export default {		export default {
		components: {
		ModalDialog
		},
data() {		data() {
return {		return {
body: '',		body: '',
email: '',		email: '',
name: '',		name: '',
summary: '',		summary: '',
user: ''		user: ''
}		}
},		},
mounted() {		mounted() {
const dialog = this.$el		this.$refs.dialog.events({
		hide: () => {
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
}		}
})		},
		show: () => {
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.$el).find('input,textarea,.modal-action').prop('disabled', lock)		$(this.$el).find('input,textarea,.modal-action').prop('disabled', lock)
},		},
showDialog() {		show() {
this.dialog.show()		this.$refs.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.hide()		this.$refs.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>