headmin 0.2.3 → 0.2.7

data/src/js/headmin/controllers/repeater_controller.js

@@ -1,4 +1,4 @@
-import {Controller} from "stimulus"
+import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
 
 export default class extends Controller {
@@ -38,7 +38,6 @@ export default class extends Controller {
     }
 
     updatePopupButtonIndices(index) {
-        console.log(index)
         const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
         const buttons = popup.querySelectorAll('a')
         buttons.forEach((button) => {
@@ -53,8 +52,8 @@ export default class extends Controller {
         let rowIndex = button.dataset.rowIndex
 
         // Prepare html from template
-        let html = this.getTemplateHTML(templateName)
-        html = this.replaceIdsWithTimestamps(html)
+        const template = this.getTemplate(templateName)
+        const html = this.replaceIdsWithTimestamps(template)
 
         // Fallback to last row if no index is set
         if (rowIndex) {
@@ -93,16 +92,16 @@ export default class extends Controller {
         this.toggleEmpty()
     }
 
-    getTemplateHTML(name) {
-        const template = this.templateTargets.filter((template) => {
+    getTemplate(name) {
+        return this.templateTargets.filter((template) => {
             return template.dataset.templateName === name
         })[0]
-        return template.innerHTML
     }
 
-    replaceIdsWithTimestamps(html) {
-        const regex = new RegExp('template_id', "g");
-        return html.replace(regex, new Date().getTime())
+    replaceIdsWithTimestamps(template) {
+        console.log(template)
+        const regex = new RegExp(template.dataset.templateIdRegex, "g")
+        return template.innerHTML.replace(regex, new Date().getTime())
     }
 
     visibleRowsCount() {

data/src/js/headmin/controllers/table_actions_controller.js

@@ -1,33 +1,128 @@
-import {Controller} from "stimulus"
+import {Controller} from "@hotwired/stimulus"
 
 export default class extends Controller {
+    static get values() {
+        return {
+            count: {type: Number, default: 0}
+        }
+    }
+
     static get targets() {
-        return ["form", "select", "method", "button"]
+        return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"]
     }
 
     connect() {
-        this.wrapperClass = "table-actions"
+        this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
+            const ids = event.detail.ids
+            this.updateIdFields(ids)
+            this.updateCountValueWithIds(ids)
+        })
+
     }
 
     update(event) {
         event.preventDefault()
-        const option = this.selectTarget.options[this.selectTarget.selectedIndex]
+        this.updateFormAction()
+        this.updateFormMethod()
+        this.updateButton()
+    }
+
+    updateIdFields(ids) {
+        this.removeIds()
+        if (ids instanceof Array) {
+            this.countValue = ids.length
+            ids.forEach((id) => {
+                this.addId(id)
+            })
+        } else {
+            this.countValue = Infinity
+            this.addId('')
+        }
+    }
 
-        // Replace form action
+    updateCounter() {
+        let htmlString = ''
+        switch (this.countValue) {
+            case 0:
+                htmlString = this.counterTarget.getAttribute('data-items-zero')
+                break;
+            case 1:
+                htmlString = this.counterTarget.getAttribute('data-items-one')
+                break;
+            case Infinity:
+                htmlString = this.counterTarget.getAttribute('data-items-other')
+                htmlString = htmlString.replace(/<b>[\s\S]*?<\/b>/, '<b>' + this.totalCount() + '<\/b>');
+                break;
+            default:
+                htmlString = this.counterTarget.getAttribute('data-items-other')
+                let count = this.countValue === Infinity ? this.totalCount() : this.countValue
+                htmlString = htmlString.replace(/<b>[\s\S]*?<\/b>/, `<b>${count}<\/b>`);
+        }
+        this.counterTarget.innerHTML = htmlString;
+    }
+
+    totalCount() {
+        return this.counterTarget.getAttribute('data-total-count')
+    }
+
+    updateCountValueWithIds(ids) {
+        if (ids instanceof Array) {
+            this.countValue = ids.length
+        } else {
+            this.countValue = Infinity
+        }
+    }
+
+    countValueChanged() {
+        this.updateCounter()
+        this.toggle()
+    }
+
+    toggle() {
+        if (this.countValue > 0) {
+            this.wrapperTarget.classList.remove('d-none')
+        } else {
+            this.wrapperTarget.classList.add('d-none')
+        }
+    }
+
+    updateFormAction() {
         this.formTarget.action = this.selectTarget.value
+    }
 
-        // Replace form method
+    updateFormMethod() {
+        const option = this.selectedOption()
         this.methodTarget.value = option.dataset.method
+    }
 
-        // Set confirm on form button
+    updateButton() {
+        const option = this.selectedOption()
         const confirm = option.dataset.confirm
-        if(confirm) {
+        if (confirm) {
             this.buttonTarget.dataset.confirm = confirm
         } else {
             this.buttonTarget.removeAttribute('data-confirm')
         }
+        this.enableButton()
+    }
+
+    selectedOption() {
+        return this.selectTarget.options[this.selectTarget.selectedIndex]
+    }
 
-        // Enable button
+    enableButton() {
         this.buttonTarget.removeAttribute('disabled')
     }
+
+    addId(id) {
+        const template = this.idInputTemplateTarget
+        const input = template.innerHTML.replace(/ID/g, id)
+        this.formTarget.insertAdjacentHTML('afterbegin', input)
+    }
+
+    removeIds() {
+        this.idTargets.forEach((input) => {
+            this.formTarget.removeChild(input)
+        });
+    }
 }

data/src/js/headmin/controllers/table_controller.js

@@ -1,4 +1,4 @@
-import {Controller} from "stimulus"
+import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
 import Rails from "@rails/ujs";
 
@@ -38,25 +38,43 @@ export default class extends Controller {
         const checkbox = event.target
         this.toggleIdsCheckboxes(checkbox.checked)
         this.toggleIdCheckboxes(checkbox.checked)
-        this.syncFields()
-        this.toggleActions()
+        this.updateActions()
     }
 
     toggleId(event) {
         this.toggleIdsCheckboxes(false)
-        this.syncFields()
-        this.toggleActions()
+        this.updateActions()
     }
 
-    toggleActions() {
-        const idFields = this.getIdFields()
-        if(idFields.length > 0) {
-            this.actionsTarget.classList.remove('d-none')
+    updateActions() {
+        this.actionsTarget.dispatchEvent(
+            new CustomEvent(
+                'idSelectionChanged',
+                {
+                    detail: {
+                        ids: this.ids()
+                    }
+                }
+            )
+        )
+    }
+
+    ids() {
+        if (this.idsCheckboxTarget.checked) {
+            return null
         } else {
-            this.actionsTarget.classList.add('d-none')
+            return this.selectedIdCheckboxes().map((checkbox) => {
+                return checkbox.value
+            })
         }
     }
 
+    selectedIdCheckboxes() {
+        return this.idCheckboxTargets.filter((checkbox) => {
+            return checkbox.checked
+        })
+    }
+
     toggleIdsCheckboxes(checked) {
         this.idsCheckboxTargets.forEach((checkbox) => {
             checkbox.checked = checked
@@ -69,51 +87,4 @@ export default class extends Controller {
         });
     }
 
-    syncFields() {
-        this.removeIds()
-        if(this.idsCheckboxTarget.checked) {
-            this.addId('')
-        } else {
-            this.idCheckboxTargets.forEach((checkbox) => {
-                if(checkbox.checked) {
-                    this.addId(checkbox.value)
-                }
-            });
-        }
-    }
-
-    addId(id) {
-        let field = this.getIdField(id)
-        if (!field) {
-            field = this.newIdField(id)
-            this.actionsTarget.querySelector('form').insertAdjacentHTML('afterbegin', field)
-        }
-    }
-
-    removeIds() {
-        const fields = this.getIdFields()
-        fields.forEach((field) => {
-            this.actionsTarget.querySelector('form').removeChild(field)
-        });
-    }
-
-    removeId(id) {
-        const field = this.getIdField(id)
-        if (field) {
-            this.actionsTarget.querySelector('form').removeChild(field)
-        }
-    }
-
-    newIdField(id) {
-        const template = this.actionsTarget.querySelector('[data-table-target="idFieldTemplate"]')
-        return template.innerHTML.replace(/ID/g, id)
-    }
-
-    getIdFields() {
-        return this.actionsTarget.querySelectorAll(`input[name="ids[]"]`);
-    }
-
-    getIdField(id) {
-        return this.actionsTarget.querySelector(`input[name="ids[]"][value="${id}"]`);
-    }
 }

data/src/js/headmin/headmin.js

@@ -4,8 +4,8 @@ import flatpickr from "flatpickr";
 import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
 import Rails from "@rails/ujs";
 
-import {Application} from "stimulus";
-import {definitionsFromContext} from "stimulus/webpack-helpers";
+import {Application} from "@hotwired/stimulus"
+import {definitionsFromContext} from "@hotwired/stimulus-webpack-helpers"
 
 export class Headmin {
     static start() {

data/src/scss/headmin/table.scss

@@ -4,6 +4,7 @@
     color: $table-color;
     letter-spacing: 0.05em;
     font-size: $font-size-base * 0.85;
+    position: relative;
   }
 
   a {