WIP: Implement frontend

2023-09-18 13:10:20 +02:00
parent bfc5e5e242
commit ce97017ac4
70 changed files with 8751 additions and 337 deletions
@@ -0,0 +1,88 @@
+import { Controller } from '@hotwired/stimulus'
+import { useFetch } from '../mixins/use_fetch'
+
+export default class extends Controller {
+
+    static targets = [ 'title', 'content', 'spinner', 'backbutton' ]
+    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)
+        if (this.hasBackbuttonTarget && event.submitter === this.backbuttonTarget) {
+            formData.append(this.backbuttonTarget.name, this.backbuttonTarget.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)
+    }
+
+}