headmin 0.1.1 → 0.2.2

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

@@ -1,5 +1,5 @@
 import {Controller} from "stimulus"
-import {Headmin} from "../headmin";
+import Sortable from "sortablejs";
 
 export default class extends Controller {
     static get values() {
@@ -7,29 +7,135 @@ export default class extends Controller {
             id: String
         }
     }
+
     static get targets() {
-        return ["links", "template"]
+        return ["repeater", "footer", "template", "row", "list", "empty", "addButton"]
+    }
+
+    connect() {
+        new Sortable(this.listTarget, {
+            animation: 150,
+            ghostClass: 'list-group-item-dark',
+            draggable: '.repeater-row',
+            handle: '.repeater-row-handle',
+            onEnd: () => {
+                this.resetIndices()
+                this.resetPositions()
+            }
+        })
+
+        this.toggleEmpty()
+    }
+
+    resetButtonIndices(event) {
+        const row = event.target.closest('.repeater-row')
+        const index = this.containsRow(row) ? row.dataset.rowIndex : ''
+        this.updatePopupButtonIndices(index)
+    }
+
+    containsRow(row) {
+        return this.rowTargets.includes(row)
     }
 
-    add_association(event) {
+    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) => {
+            button.dataset.rowIndex = index
+        })
+    }
+
+    addRow(event) {
         event.preventDefault()
+        const button = event.target
+        const templateName = button.dataset.templateName
+        let rowIndex = button.dataset.rowIndex
 
-        let html = this.getTemplateHTML()
+        // Prepare html from template
+        let html = this.getTemplateHTML(templateName)
         html = this.replaceIdsWithTimestamps(html)
-        this.addNewRow(html)
+
+        // Fallback to last row if no index is set
+        if (rowIndex) {
+            // Insert new row after defined row
+            const row = this.rowTargets[rowIndex]
+            row.insertAdjacentHTML('afterend', html)
+        } else {
+            // Insert before footer
+            this.footerTarget.insertAdjacentHTML('beforebegin', html)
+        }
+
+        // Dispatch an event
+        document.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
+
+        this.resetIndices()
+        this.resetPositions()
+        this.toggleEmpty()
+    }
+
+    removeRow(event) {
+        event.preventDefault()
+
+        const row = event.target.closest(".repeater-row")
+
+        if (row.dataset.newRecord === "true") {
+            // New records are simply removed from the page
+            row.remove()
+        } else {
+            // Existing records are hidden and flagged for deletion
+            row.querySelector("input[name*='_destroy']").value = 1
+            row.style.display = 'none'
+        }
+
+        this.resetIndices()
+        this.resetPositions()
+        this.toggleEmpty()
     }
 
-    getTemplateHTML() {
-        return this.templateTarget.innerHTML
+    getTemplateHTML(name) {
+        const template = this.templateTargets.filter((template) => {
+            return template.dataset.templateName === name
+        })[0]
+        return template.innerHTML
     }
 
     replaceIdsWithTimestamps(html) {
-        const regex = new RegExp(this.idValue, "g");
+        const regex = new RegExp('template_id', "g");
         return html.replace(regex, new Date().getTime())
     }
 
-    addNewRow(html) {
-        this.linksTarget.insertAdjacentHTML('beforebegin', html)
-        Headmin.initPlugins()
+    visibleRowsCount() {
+        return this.visibleRows().length
+    }
+
+    visibleRows() {
+        const rows = this.rowTargets
+        return rows.filter((row) => {
+            return row.querySelector("input[name*='_destroy']").value !== '1'
+        })
+    }
+
+    toggleEmpty() {
+        if (this.visibleRowsCount() > 0) {
+            this.emptyTarget.classList.add('invisible')
+        } else {
+            this.emptyTarget.classList.remove('invisible')
+        }
+    }
+
+    resetPositions() {
+        this.visibleRows().forEach((row, index) => {
+            const positionInput = row.querySelector("input[name*='position']")
+            if (positionInput) {
+                positionInput.value = index
+            }
+        })
+    }
+
+    resetIndices() {
+        this.visibleRows().forEach((row, index) => {
+            row.dataset.rowIndex = index
+        })
     }
 }

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

@@ -2,7 +2,7 @@ import {Controller} from "stimulus"
 
 export default class extends Controller {
     static get targets() {
-        return ["form", "select", "method"]
+        return ["form", "select", "method", "button"]
     }
 
     connect() {
@@ -12,11 +12,22 @@ export default class extends Controller {
     update(event) {
         event.preventDefault()
         const option = this.selectTarget.options[this.selectTarget.selectedIndex]
-        const action = this.selectTarget.value
-        const method = option.dataset.method
 
         // Replace form action
-        this.formTarget.action = action
-        this.methodTarget.value = method
+        this.formTarget.action = this.selectTarget.value
+
+        // Replace form method
+        this.methodTarget.value = option.dataset.method
+
+        // Set confirm on form button
+        const confirm = option.dataset.confirm
+        if(confirm) {
+            this.buttonTarget.dataset.confirm = confirm
+        } else {
+            this.buttonTarget.removeAttribute('data-confirm')
+        }
+
+        // Enable button
+        this.buttonTarget.removeAttribute('disabled')
     }
 }

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

@@ -8,7 +8,7 @@ export default class extends Controller {
     }
 
     static get targets() {
-        return ["table", "body"]
+        return ["table", "body", "actions", "idCheckbox", "idsCheckbox"]
     }
 
     connect() {
@@ -33,4 +33,87 @@ export default class extends Controller {
         })
         return data
     }
+
+    toggleIds(event) {
+        const checkbox = event.target
+        this.toggleIdsCheckboxes(checkbox.checked)
+        this.toggleIdCheckboxes(checkbox.checked)
+        this.syncFields()
+        this.toggleActions()
+    }
+
+    toggleId(event) {
+        this.toggleIdsCheckboxes(false)
+        this.syncFields()
+        this.toggleActions()
+    }
+
+    toggleActions() {
+        const idFields = this.getIdFields()
+        if(idFields.length > 0) {
+            this.actionsTarget.classList.remove('d-none')
+        } else {
+            this.actionsTarget.classList.add('d-none')
+        }
+    }
+
+    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('')
+        } 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

@@ -1,6 +1,5 @@
 import 'ckeditor5-build-classic-simple-upload-adapter-image-resize';
-import Choices from "choices.js";
-import Sortable from 'sortablejs';
+import TomSelect from "tom-select";
 import flatpickr from "flatpickr";
 import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
 import Rails from "@rails/ujs";
@@ -20,14 +19,33 @@ export class Headmin {
 
         // Init Plugins
         this.initPlugins()
+
+        // Listen for a headmin:reinit event
+        document.addEventListener('headmin:reinit', (e) => {
+            this.initPlugins()
+        })
+
     }
 
     static initPlugins() {
-        this.initChoices()
+        this.initTomSelects()
         this.initFlatpickrs()
         this.initToasts()
         this.initPopovers()
         this.initCKEditors()
+        this.initRedactorX()
+    }
+
+    static initRedactorX() {
+        document.querySelectorAll('.redactorx').forEach((element) => {
+            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(element.getAttribute('data-redactor-options'))
+            RedactorX(element, options);
+        })
     }
 
     static initFlatpickrs() {
@@ -55,6 +73,10 @@ export class Headmin {
     }
 
     static initCKEditor(element) {
+
+        // Check if CKEditor is already initialized
+        if (element.nextElementSibling && element.nextElementSibling.classList.contains('ck-editor')) return
+
         const defaultToolbarItems = [
             'heading', '|', 'bold', 'italic', 'bulletedList', 'numberedList', '|', 'outdent',
             'indent', '|', 'link', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', '|', 'undo', 'redo'
@@ -96,59 +118,10 @@ export class Headmin {
             })
     }
 
-    static initChoices() {
-        this.initChoicesSelectTags()
-        this.initChoicesMultipleSelect()
-    }
-
-    static initChoicesSelectTags() {
-        document.querySelectorAll('.select-tags').forEach((select) => {
-
-            // Skip if already initialized
-            if (select.dataset.choice === 'active') {
-                return
-            }
-
-            // Create a new instance
-            new Choices(select, {
-                removeItemButton: true,
-                loadingText: 'Loading...',
-                noResultsText: 'No results found',
-                noChoicesText: 'No choices to choose from',
-                itemSelectText: 'Press to select',
-                addItems: true,
-                addItemText: (value) => {
-                    return `Press Enter to add <b>"${value}"</b>`;
-                },
-                maxItemText: (maxItemCount) => {
-                    return `Only ${maxItemCount} values can be added`;
-                },
-            });
-        })
-    }
-
-    static initChoicesMultipleSelect() {
-        document.querySelectorAll('.multiple-select').forEach((select) => {
-
-            // Skip if already initialized
-            if (select.dataset.choice === 'active') {
-                return
-            }
-
-            // Create a new instance
-            new Choices(select, {
-                removeItemButton: true,
-                loadingText: 'Loading...',
-                noResultsText: 'No results found',
-                noChoicesText: 'No choices to choose from',
-                itemSelectText: 'Press to select',
-                addItems: true,
-                addItemText: (value) => {
-                    return `Press Enter to add <b>"${value}"</b>`;
-                },
-                maxItemText: (maxItemCount) => {
-                    return `Only ${maxItemCount} values can be added`;
-                },
+    static initTomSelects() {
+        document.querySelectorAll('select[multiple]').forEach((select) => {
+            new TomSelect(select, {
+                create: select.dataset['tags'] === "true"
             });
         })
     }

data/src/scss/headmin/filters.scss

@@ -1,14 +0,0 @@
-.h-filters, .h-filters-search {
-  width: 100%;
-  @include media-breakpoint-up(md) {
-    width: auto;
-  }
-}
-
-.h-filters .separator {
-  display: block;
-  width: 1px;
-  height: 30px;
-  background: $input-border-color;
-  margin: 0 15px 0 0;
-}

data/src/scss/headmin/form.scss

@@ -1,3 +1,15 @@
+input[type="search"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  padding-left: 35px
+}
+
+.form-label[required="required"]:after {
+  content: '*';
+  margin-left: 1px;
+}
+
 .forms-group {
   .card-footer {
     border-top: none;
@@ -19,21 +31,49 @@
     & > .repeater-row-add {
       visibility: visible;
     }
+
+    & > .repeater-row-handle {
+      visibility: visible;
+    }
   }
 }
 
 .repeater-row-remove {
   position: absolute;
-  top: calc(50% - 18px);
+  top: calc(50% - 17px);
   right: -22px;
   z-index: 2;
   visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
 }
 
 .repeater-row-add {
   position: absolute;
-  top: calc(100% - 19px);
-  right: calc(50% - 18px);
+  top: calc(100% - 18px);
+  right: calc(50% - 17px);
   z-index: 2;
   visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
 }
+
+.repeater-row-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  visibility: hidden;
+  cursor: move;
+}

data/src/scss/headmin/popup.scss

@@ -0,0 +1,17 @@
+.h-popup {
+  padding: 10px;
+  background: $white;
+  z-index: $zindex-popover;
+  width: $popover-max-width;
+  @include reset-text();
+  @include font-size($popover-font-size);
+  word-wrap: break-word;
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  @include border-radius($popover-border-radius);
+  @include box-shadow($popover-box-shadow);
+
+  &.closed {
+    display: none;
+  }
+}

data/src/scss/headmin/table.scss

@@ -21,12 +21,15 @@
 }
 
 .h-table-actions {
-  width: 100%;
-  @include media-breakpoint-up(md) {
-    width: auto;
-  }
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(100% - 54px);
+  background: $table-striped-bg;
+  padding: 0.3rem 0.3rem 0.26rem 0.3rem !important;
 
-  select {
-    min-width: 100%;
+  .form-select {
+    width: 300px;
+    max-width: 100%;
   }
 }

data/src/scss/headmin.scss

@@ -39,14 +39,16 @@
 @import "~bootstrap/scss/helpers.scss";
 @import "~bootstrap/scss/utilities/api.scss";
 
-// Choices
-@import "vendor/choices/variables"; // Choices overrides
-@import "~choices.js/src/styles/choices.scss";
-@import "vendor/choices/custom"; // Choices custom styling
+// Tom select
+@import "~tom-select/dist/scss/tom-select.bootstrap5";
 
 // Flatpickr
 @import "~flatpickr/dist/flatpickr";
 
+// Redactor
+@import "vendor/redactorx/redactorx";
+@import "vendor/redactorx/override";
+
 // Headmin
 @import "headmin/filters";
 @import "headmin/form";
@@ -56,3 +58,4 @@
 @import "headmin/table";
 @import "headmin/utilities";
 @import "headmin/filter";
+@import "headmin/popup";

data/src/scss/vendor/redactorx/override.css

@@ -0,0 +1,3 @@
+.rx-container {
+    width: 100%;
+}