headmin 0.2.5 → 0.3.1

data/app/assets/javascripts/headmin/controllers/flatpickr_controller.js

@@ -0,0 +1,39 @@
+import {Controller} from "@hotwired/stimulus"
+import flatpickr from "flatpickr";
+import {Dutch} from "flatpickr/dist/esm/l10n/nl.js"
+import I18n from "../config/i18n";
+
+export default class extends Controller {
+    static get targets() {
+        return ["input"]
+    }
+
+    connect() {
+        const options = {...this.defaultOptions(), ...this.options()}
+        flatpickr(this.inputTarget, options);
+    }
+
+    options() {
+        return JSON.parse(this.inputTarget.getAttribute('data-flatpickr-options'))
+    }
+
+    defaultOptions() {
+        return {
+            allowInput: true,
+            dateFormat: 'd/m/Y',
+            locale: this.getLocale(I18n.locale)
+        }
+    }
+
+    getLocale(locale) {
+        const locales = this.locales()
+        return locales[locale]
+    }
+
+    locales() {
+        return {
+            en: null,
+            nl: Dutch
+        }
+    }
+}

data/app/assets/javascripts/headmin/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello world"
+  }
+}

data/app/assets/javascripts/headmin/controllers/notification_controller.js

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus"
+import {Toast} from "bootstrap";
+
+export default class extends Controller {
+    connect() {
+        new Toast(this.element, {})
+    }
+}

data/{src/js → app/assets/javascripts}/headmin/controllers/popup_controller.js

@@ -1,5 +1,4 @@
-import {Controller} from "stimulus"
-import Sortable from "sortablejs";
+import {Controller} from "@hotwired/stimulus"
 import {createPopper} from '@popperjs/core';
 
 export default class extends Controller {

data/app/assets/javascripts/headmin/controllers/redactorx_controller.js

@@ -0,0 +1,13 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+    connect() {
+        if (typeof RedactorX == 'undefined') {
+            console.error("RedactorX is a paid module and is not included in Headmin. Please purchase it and import it as a JS module")
+            return false;
+        }
+
+        const options = JSON.parse(this.element.getAttribute('data-redactor-options'))
+        RedactorX(this.element, options);
+    }
+}

data/{src/js → app/assets/javascripts}/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 {
@@ -52,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) {
@@ -92,16 +92,15 @@ 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) {
+        const regex = new RegExp(template.dataset.templateIdRegex, "g")
+        return template.innerHTML.replace(regex, new Date().getTime())
     }
 
     visibleRowsCount() {

data/app/assets/javascripts/headmin/controllers/select_controller.js

@@ -0,0 +1,48 @@
+import {Controller} from "@hotwired/stimulus"
+import TomSelect from "tom-select";
+import I18n from "../config/i18n";
+
+export default class extends Controller {
+    connect() {
+        if (this.element.hasAttribute('multiple')) {
+            this.initTomSelect()
+        }
+    }
+
+    defaultOptions(locale) {
+        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>'
+                    }
+                }
+            }
+        }
+        return defaultOptions[locale]
+    }
+
+    hasTags() {
+        return this.element.dataset['tags'] === "true"
+    }
+
+    initTomSelect() {
+        const defaultOptions = this.defaultOptions(I18n.locale)
+        const options = {create: this.hasTags()}
+
+        new TomSelect(this.element, {...defaultOptions, ...options})
+    }
+}

data/app/assets/javascripts/headmin/controllers/table_actions_controller.js

@@ -0,0 +1,98 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static get targets() {
+        return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"]
+    }
+
+    connect() {
+        this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
+            this.updateIdFields(event.detail.ids)
+            this.updateCounter(event.detail.count)
+            this.toggleCounter(event.detail.count)
+        })
+
+    }
+
+    update(event) {
+        event.preventDefault()
+        this.updateFormAction()
+        this.updateFormMethod()
+        this.updateButton()
+    }
+
+    updateIdFields(ids) {
+        this.removeIds()
+        if (ids instanceof Array) {
+            ids.forEach((id) => {
+                this.addId(id)
+            })
+        } else {
+            this.addId('')
+        }
+    }
+
+    updateCounter(count) {
+        let htmlString = ''
+        switch (count) {
+            case 0:
+                htmlString = this.counterTarget.getAttribute('data-items-zero')
+                break;
+            case 1:
+                htmlString = this.counterTarget.getAttribute('data-items-one')
+                break;
+            default:
+                htmlString = this.counterTarget.getAttribute('data-items-other')
+                htmlString = htmlString.replace(/<b>[\s\S]*?<\/b>/, `<b>${count}<\/b>`);
+        }
+        this.counterTarget.innerHTML = htmlString;
+    }
+
+    toggleCounter(count) {
+        if (count > 0) {
+            this.wrapperTarget.classList.remove('d-none')
+        } else {
+            this.wrapperTarget.classList.add('d-none')
+        }
+    }
+
+    updateFormAction() {
+        this.formTarget.action = this.selectTarget.value
+    }
+
+    updateFormMethod() {
+        const option = this.selectedOption()
+        this.methodTarget.value = option.dataset.method
+    }
+
+    updateButton() {
+        const option = this.selectedOption()
+        const confirm = option.dataset.confirm
+        if (confirm) {
+            this.buttonTarget.dataset.confirm = confirm
+        } else {
+            this.buttonTarget.removeAttribute('data-confirm')
+        }
+        this.enableButton()
+    }
+
+    selectedOption() {
+        return this.selectTarget.options[this.selectTarget.selectedIndex]
+    }
+
+    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/app/assets/javascripts/headmin/controllers/table_controller.js

@@ -0,0 +1,110 @@
+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,
+            count: Number
+        }
+    }
+
+    static get targets() {
+        return ["table", "body", "actions", "idCheckbox", "idsCheckbox", "row"]
+    }
+
+    connect() {
+        new Sortable(this.bodyTarget, {
+            handle: '.table-drag-sort-handle',
+            onEnd: (event) => {
+                Rails.ajax({
+                    url: this.urlValue,
+                    type: "PATCH",
+                    data: this.getIdsDataString(),
+                });
+            }
+        })
+    }
+
+    getIdsDataString() {
+        const table = this.tableTarget
+        let data = ""
+        const handles = [...table.querySelectorAll(".table-drag-sort-handle")]
+        handles.map(handle => {
+            data += `ids[]=${handle.dataset.id}&`
+        })
+        return data
+    }
+
+    toggleIds(event) {
+        const checkbox = event.target
+        this.toggleIdsCheckboxes(checkbox.checked)
+        this.toggleIdCheckboxes(checkbox.checked)
+        this.updateActions()
+    }
+
+    toggleId(event) {
+        this.toggleIdsCheckboxes(false)
+        this.updateActions()
+    }
+
+    updateActions() {
+        this.actionsTarget.dispatchEvent(
+            new CustomEvent(
+                'idSelectionChanged',
+                {
+                    detail: {
+                        ids: this.ids(),
+                        count: this.selectedIdsCount()
+                    }
+                }
+            )
+        )
+    }
+
+    selectedIdsCount() {
+        if (this.ids() instanceof Array) {
+            return this.ids().length
+        } else {
+            return this.totalCount()
+        }
+    }
+
+    totalCount() {
+        if (this.countValue === 0) {
+            return this.rowTargets.length
+        } else {
+            return this.countValue
+        }
+    }
+
+    ids() {
+        if (this.idsCheckboxTarget.checked) {
+            return null
+        } else {
+            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
+        });
+    }
+
+    toggleIdCheckboxes(checked) {
+        this.idCheckboxTargets.forEach((checkbox) => {
+            checkbox.checked = checked
+        });
+    }
+
+}

data/app/assets/javascripts/headmin/index.js

@@ -0,0 +1,41 @@
+import {Application} from "@hotwired/stimulus"
+import BlocksController from "./controllers/blocks_controller"
+import DateRangeController from "./controllers/date_range_controller"
+import DropzoneController from "./controllers/dropzone_controller"
+import FilePreviewController from "./controllers/file_preview_controller"
+import FilterController from "./controllers/filter_controller"
+import FiltersController from "./controllers/filters_controller"
+import FlatpickrController from "./controllers/flatpickr_controller"
+import HelloController from "./controllers/hello_controller"
+import NotificationController from "./controllers/notification_controller"
+import PopupController from "./controllers/popup_controller"
+import RedactorxController from "./controllers/redactorx_controller"
+import RepeaterController from "./controllers/repeater_controller"
+import SelectController from "./controllers/select_controller"
+import TableActionsController from "./controllers/table_actions_controller"
+import TableController from "./controllers/table_controller"
+import Rails from "@rails/ujs";
+
+export class Headmin {
+    static start() {
+        window.Stimulus = window.Stimulus || Application.start()
+        Stimulus.register("blocks", BlocksController)
+        Stimulus.register("date_range", DateRangeController)
+        Stimulus.register("dropzone", DropzoneController)
+        Stimulus.register("file-preview", FilePreviewController)
+        Stimulus.register("filter", FilterController)
+        Stimulus.register("filters", FiltersController)
+        Stimulus.register("flatpickr", FlatpickrController)
+        Stimulus.register("hello", HelloController)
+        Stimulus.register("notification", NotificationController)
+        Stimulus.register("popup", PopupController)
+        Stimulus.register("redactorx", RedactorxController)
+        Stimulus.register("repeater", RepeaterController)
+        Stimulus.register("select", SelectController)
+        Stimulus.register("table", TableController)
+        Stimulus.register("table-actions", TableActionsController)
+
+        // Init Rails UJS
+        Rails.start()
+    }
+}