feat: integrate with htmx

assets/app.js

@@ -1,3 +1,4 @@
+import 'htmx.org';
 import './bootstrap.js';
 /*
  * Welcome to your app's main JavaScript file!

assets/controllers/ajax_modal_controller.js

@@ -1,86 +0,0 @@
-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)
-    }
-
-}

assets/controllers/confirmation_modal_controller.js

@@ -1,17 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static targets = [ 'form', 'title', 'content' ]
-
-    show({ targetUrl, title, content }) {
-        this.formTarget.action = targetUrl
-        this.titleTarget.innerText = title
-        this.contentTarget.innerHTML = content
-        this.element.classList.remove('hidden')
-    }
-
-    hide() {
-        this.element.classList.add('hidden')
-    }
-
-}

assets/controllers/form_partial_controller.js

@@ -1,35 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-import { useFetch } from '../mixins/use_fetch'
-
-export default class extends Controller {
-
-    static targets = [ 'form', 'container', 'spinner' ]
-    static values = { url: String, loading: Boolean }
-
-    connect() {
-        useFetch(this)
-    }
-
-    update() {
-        this.loadingValue = true
-        const formData = new FormData(this.formTarget)
-        fetch(this.urlValue, { method: 'POST', body: formData })
-            .then(this.checkStatus)
-            .then(this.parseHTML)
-            .then(response => {
-                this.containerTarget.innerHTML = response
-            })
-            .catch(error => {
-            })
-            .finally(() => {
-                this.loadingValue = false
-            })
-
-    }
-
-    loadingValueChanged(loading) {
-        if (this.hasSpinnerTarget) {
-            this.spinnerTarget.classList.toggle('hidden', false === loading)
-        }
-    }
-}

assets/controllers/modal_button_controller.js

@@ -1,13 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-export default class extends Controller {
-    static outlets =  [ 'confirmation-modal', 'ajax-modal' ]
-
-    confirmation({ params: { title, targetUrl, content } }) {
-        this.confirmationModalOutlet.show({ title, targetUrl, content })
-    }
-
-    ajax({ params: { title, url } }) {
-        this.ajaxModalOutlet.show({ title, url })
-    }
-}

assets/controllers/modal_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    close() {
+        this.element.remove()
+    }
+}

assets/styles/_base.css

@@ -30,3 +30,13 @@
     font-weight: 900;
     src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+
+.htmx-indicator{
+    @apply invisible;
+}
+.htmx-request .htmx-indicator{
+    @apply visible;
+}
+.htmx-request.htmx-indicator{
+    @apply visible;
+}

assets/styles/components/button.css

@@ -1,5 +1,6 @@
 .btn {
-    @apply inline-flex justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 shadow-md;
+    @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
+    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
 }
 
 .btn--small {