Copy collection; Stimulus controller for vocabs (incomplete)

2024-11-08 17:32:45 +01:00
parent 239240360e
commit dce0e1b693
10 changed files with 197 additions and 139 deletions
--- a/assets/controllers/vocabs_controller.js
+++ b/assets/controllers/vocabs_controller.js
@@ -0,0 +1,74 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = [
+        'row',
+        'term',
+        'input',
+        'save',
+        'edit',
+        'cancel',
+    ];
+
+    static values = {
+        saveUrl: String,
+    };
+
+    /**
+     * @todo Simpler way? 
+     */
+    edit(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+
+        this.saveTargets.forEach((btn, index) => {
+            if (btn.getAttribute('data-vocabs-id-value') === id) {
+                btn.classList.toggle('is-hidden');
+                this.inputTargets[index].disabled = false;
+                this.cancelTargets[index].classList.toggle('is-hidden');
+            }
+        });
+
+        event.currentTarget.classList.add('is-hidden');
+    }
+
+    async save(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+        let term = '';
+
+        for (let input of this.inputTargets) {
+            if (input.getAttribute('data-vocabs-id-value') === id) {
+                term = input.value;
+            }
+        }
+
+        let data = new FormData;
+        data.append("_id", id);
+        data.append("_new_term", term);
+
+        const res = await fetch(this.saveUrlValue, {
+            method: "POST",
+            body: data,
+        });
+
+        // TODO: show notification
+        if (res.status === 200) {
+            console.log('Saved...');
+        };
+    }
+
+    delete() {
+    }
+
+    cancel(event) {
+        const id = event.currentTarget.getAttribute('data-vocabs-id-value');
+
+        this.editTargets.forEach((btn, index) => {
+            if (btn.getAttribute('data-vocabs-id-value') === id) {
+                btn.classList.toggle('is-hidden');
+                this.inputTargets[index].disabled = true;
+                this.saveTargets[index].classList.toggle('is-hidden');
+                this.cancelTargets[index].classList.toggle('is-hidden');
+            }
+        });
+    }
+}