87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import { useFetch } from '../mixins/use_fetch'
|
|
|
|
export default class extends Controller {
|
|
|
|
static targets = [ 'title', 'content', 'spinner' ]
|
|
static values = { loading: Boolean }
|
|
|
|
connect() {
|
|
useFetch(this)
|
|
}
|
|
|
|
show({ title, url }) {
|
|
this.titleTarget.innerHTML = title
|
|
this.element.classList.remove('hidden')
|
|
this.loadContent(url)
|
|
}
|
|
|
|
hide() {
|
|
this.element.classList.add('hidden')
|
|
}
|
|
|
|
loadContent(url) {
|
|
this.loadingValue = true
|
|
fetch(url, this.getInitObject())
|
|
.then(this.checkStatus)
|
|
.then(this.parseJSON)
|
|
.then(response => {
|
|
this.handleResponse(response)
|
|
})
|
|
.catch(error => {
|
|
this.handleResponse(this.createErrorResponse(error))
|
|
})
|
|
.finally(() => {
|
|
this.loadingValue = false
|
|
})
|
|
}
|
|
|
|
submitForm(event) {
|
|
event.preventDefault()
|
|
this.loadingValue = true
|
|
const form = event.target
|
|
const formData = new FormData(form)
|
|
formData.append(event.submitter.name, event.submitter.value)
|
|
fetch(form.action, this.getInitObject('post', formData))
|
|
.then(this.checkStatus)
|
|
.then(this.parseJSON)
|
|
.then(response => {
|
|
this.handleResponse(response)
|
|
})
|
|
.catch(error => {
|
|
this.handleResponse(this.createErrorResponse(error))
|
|
})
|
|
.finally(() => {
|
|
this.loadingValue = false
|
|
})
|
|
}
|
|
|
|
handleResponse(modalResponse) {
|
|
if (modalResponse.redirect) {
|
|
window.location = modalResponse.redirect
|
|
return
|
|
}
|
|
|
|
if (true === modalResponse.close) {
|
|
this.element.classList.add('hidden')
|
|
return
|
|
}
|
|
|
|
this.contentTarget.innerHTML = modalResponse.content
|
|
}
|
|
|
|
createErrorResponse(error) {
|
|
return {
|
|
close: false,
|
|
redirect: null,
|
|
content: error.message,
|
|
}
|
|
}
|
|
|
|
loadingValueChanged() {
|
|
this.spinnerTarget.classList.toggle('hidden', false === this.loadingValue)
|
|
this.contentTarget.classList.toggle('hidden', true === this.loadingValue)
|
|
}
|
|
|
|
}
|