headmin 0.2.4 → 0.2.8

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

@@ -1,14 +1,17 @@
-import {Controller} from "stimulus"
+import {Controller} from "@hotwired/stimulus"
 import Sortable from "sortablejs";
 import Rails from "@rails/ujs";
 
 export default class extends Controller {
     static get values() {
-        return {url: String}
+        return {
+            url: String,
+            count: Number
+        }
     }
 
     static get targets() {
-        return ["table", "body", "actions", "idCheckbox", "idsCheckbox"]
+        return ["table", "body", "actions", "idCheckbox", "idsCheckbox", "row"]
     }
 
     connect() {
@@ -38,82 +41,70 @@ 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()
+    }
+
+    updateActions() {
+        this.actionsTarget.dispatchEvent(
+            new CustomEvent(
+                'idSelectionChanged',
+                {
+                    detail: {
+                        ids: this.ids(),
+                        count: this.selectedIdsCount()
+                    }
+                }
+            )
+        )
     }
 
-    toggleActions() {
-        const idFields = this.getIdFields()
-        if(idFields.length > 0) {
-            this.actionsTarget.classList.remove('d-none')
+    selectedIdsCount() {
+        if (this.ids() instanceof Array) {
+            return this.ids().length
         } else {
-            this.actionsTarget.classList.add('d-none')
+            return this.totalCount()
         }
     }
 
-    toggleIdsCheckboxes(checked) {
-        this.idsCheckboxTargets.forEach((checkbox) => {
-            checkbox.checked = checked
-        });
-    }
-
-    toggleIdCheckboxes(checked) {
-        this.idCheckboxTargets.forEach((checkbox) => {
-            checkbox.checked = checked
-        });
-    }
-
-    syncFields() {
-        this.removeIds()
-        if(this.idsCheckboxTarget.checked) {
-            this.addId('')
+    totalCount() {
+        if(this.countValue === 0) {
+            return this.rowTargets.length
         } else {
-            this.idCheckboxTargets.forEach((checkbox) => {
-                if(checkbox.checked) {
-                    this.addId(checkbox.value)
-                }
-            });
+            return this.countValue
         }
     }
 
-    addId(id) {
-        let field = this.getIdField(id)
-        if (!field) {
-            field = this.newIdField(id)
-            this.actionsTarget.querySelector('form').insertAdjacentHTML('afterbegin', field)
+    ids() {
+        if (this.idsCheckboxTarget.checked) {
+            return null
+        } else {
+            return this.selectedIdCheckboxes().map((checkbox) => {
+                return checkbox.value
+            })
         }
     }
 
-    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)
-        }
+    selectedIdCheckboxes() {
+        return this.idCheckboxTargets.filter((checkbox) => {
+            return checkbox.checked
+        })
     }
 
-    newIdField(id) {
-        const template = this.actionsTarget.querySelector('[data-table-target="idFieldTemplate"]')
-        return template.innerHTML.replace(/ID/g, id)
+    toggleIdsCheckboxes(checked) {
+        this.idsCheckboxTargets.forEach((checkbox) => {
+            checkbox.checked = checked
+        });
     }
 
-    getIdFields() {
-        return this.actionsTarget.querySelectorAll(`input[name="ids[]"]`);
+    toggleIdCheckboxes(checked) {
+        this.idCheckboxTargets.forEach((checkbox) => {
+            checkbox.checked = checked
+        });
     }
 
-    getIdField(id) {
-        return this.actionsTarget.querySelector(`input[name="ids[]"][value="${id}"]`);
-    }
 }

data/src/js/headmin/headmin.js

@@ -1,17 +1,19 @@
 import 'ckeditor5-build-classic-simple-upload-adapter-image-resize';
 import TomSelect from "tom-select";
-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() {
         // Init Rails UJS
         Rails.start()
 
+        // Set locale
+        this.setLocale()
+
         // Init Stimulus
         const application = Application.start()
         const context = require.context("./controllers", true, /\.js$/)
@@ -27,9 +29,14 @@ export class Headmin {
 
     }
 
+    static setLocale() {
+        const locale = document.querySelector('html').getAttribute('lang')
+        window.I18n = {}
+        I18n.locale = locale || 'en'
+    }
+
     static initPlugins() {
         this.initTomSelects()
-        this.initFlatpickrs()
         this.initToasts()
         this.initPopovers()
         this.initCKEditors()
@@ -48,20 +55,6 @@ export class Headmin {
         })
     }
 
-    static initFlatpickrs() {
-        document.querySelectorAll('.flatpickr').forEach((element) => {
-            this.initFlatpickr(element)
-        })
-    }
-
-    static initFlatpickr(element) {
-        flatpickr(element, {
-            allowInput: true,
-            altInput: true,
-            altFormat: 'd/m/Y',
-        });
-    }
-
     static initCKEditors() {
         document.querySelectorAll('.ckeditor').forEach((element) => {
             this.initCKEditor(element)
@@ -119,10 +112,34 @@ export class Headmin {
     }
 
     static initTomSelects() {
+        const defaultOptions = {
+            en: {
+                render: {
+                    option_create: function (data, escape) {
+                        return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>';
+                    },
+                    no_results: function (data, escape) {
+                        return '<div class="no-results">No results found</div>';
+                    }
+                }
+            },
+            nl: {
+                render: {
+                    option_create: function (data, escape) {
+                        return '<div class="create">Voeg <strong>' + escape(data.input) + '</strong> toe &hellip;</div>';
+                    },
+                    no_results: function (data, escape) {
+                        return '<div class="no-results">Geen resultaten gevonden</div>';
+                    }
+                }
+            }
+        }
+
         document.querySelectorAll('select[multiple]').forEach((select) => {
-            new TomSelect(select, {
-                create: select.dataset['tags'] === "true"
-            });
+            const withTags = select.dataset['tags'] === "true"
+            const options = {create: withTags}
+
+            new TomSelect(select, {...defaultOptions[I18n.locale], ...options});
         })
     }
 

data/src/scss/headmin/form.scss

@@ -5,6 +5,10 @@ input[type="search"] {
   padding-left: 35px
 }
 
+.form-control[readonly] {
+  background-color: transparent;
+}
+
 .form-label[required="required"]:after {
   content: '*';
   margin-left: 1px;

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 {