Add politicians question type

app/javascript/application.js

@@ -1,8 +1,10 @@
 // Entry point for the build script in your package.json
 import initSimpleQuestions from './simple_input.js'
 import initImageQuestions from './image_input.js'
+import initPoliticianQuestions from './politicians_answer.js'
 
 addEventListener("DOMContentLoaded", () => {
     initSimpleQuestions()
     initImageQuestions()
+    initPoliticianQuestions()
 })

app/javascript/image_input.js

@@ -1,4 +1,4 @@
-const csrfToken = document.querySelector("[name='csrf-token']").content
+import { submitValue } from './submit_value.js'
 
 export default function initImageQuestions() {
     document.querySelectorAll('[data-behaviour="question_image_input"]').forEach((input) => {
@@ -8,17 +8,10 @@ export default function initImageQuestions() {
             const file = input.files[0];
             const fileReader = new FileReader();
             fileReader.onload = (ev) => {
-                fetch(submitUrl, {
-                    method: 'PUT',
-                    headers: {
-                        "x-csrf-token": csrfToken,
-                        "content-type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        filename: file.name,
-                        mimetype: file.type,
-                        data: ev.target.result.replace(/^data:[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+\/[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+;base64,/, ""),
-                    })
+                submitValue(submitUrl, {
+                    filename: file.name,
+                    mimetype: file.type,
+                    data: ev.target.result.replace(/^data:[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+\/[a-zA-Z0-9!#$%^&\\*_\-+{}|'.`~]+;base64,/, ""),
                 })
             }
             fileReader.readAsDataURL(file);

app/javascript/politicians_answer.js

@@ -0,0 +1,20 @@
+import { Sortable, Swap } from 'sortablejs'
+
+import { submitValue } from './submit_value.js'
+
+export default function initPoliticianQuestions() {
+
+    Sortable.mount(new Swap())
+
+    document.querySelectorAll('[data-behaviour="politicians_answer').forEach((list) => {
+        const submitUrl = list.dataset.submitUrl
+
+        Sortable.create(list, {
+            swap: true,
+            onUpdate: (event) => {
+                const newOrder = Array.from(event.to.children).map((el) => Number.parseInt(el.dataset.id))
+                submitValue(submitUrl, { order: newOrder })
+            }
+        })
+    })
+}

app/javascript/simple_input.js

@@ -1,23 +1,11 @@
-import debounce from 'debounce'
-
-const csrfToken = document.querySelector("[name='csrf-token']").content
+import { submitValueDebounced } from './submit_value.js'
 
 export default function initSimpleQuestions() {
     document.querySelectorAll('[data-behaviour="question_simple_input"]').forEach((input) => {
         const submitUrl = input.dataset.submitUrl
+        const submit = submitValueDebounced()
 
-        const handleInput = debounce(() => {
-            fetch(submitUrl, {
-                method: 'PUT',
-                headers: {
-                    "x-csrf-token": csrfToken,
-                    "content-type": "application/json",
-                },
-                body: JSON.stringify({ value: input.value }),
-            })
-        }, 300)
-
-        input.addEventListener('change', handleInput)
-        input.addEventListener('input', handleInput)
+        input.addEventListener('change', () => submit(submitUrl, {value: input.value}))
+        input.addEventListener('input', () => submit(submitUrl, {value: input.value}))
     })
 }

app/javascript/submit_value.js

@@ -0,0 +1,18 @@
+import debounce from 'debounce'
+
+const csrfToken = document.querySelector("[name='csrf-token']").content
+
+export function submitValue(url, value) {
+    fetch(url, {
+        method: 'PUT',
+        headers: {
+            "x-csrf-token": csrfToken,
+            "content-type": "application/json",
+        },
+        body: JSON.stringify(value),
+    })
+}
+
+export function submitValueDebounced() {
+    return debounce(submitValue, 300)
+}