headmin 0.3.2 → 0.4.0

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

@@ -1,48 +1,49 @@
-import {Controller} from "@hotwired/stimulus"
-import TomSelect from "tom-select";
-import I18n from "../config/i18n";
+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()
-        }
+  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>'
-                    }
-                }
-            }
+  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]
+      }
     }
+    return defaultOptions[locale]
+  }
 
-    hasTags() {
-        return this.element.dataset['tags'] === "true"
-    }
+  hasTags () {
+    return this.element.dataset.tags === 'true'
+  }
 
-    initTomSelect() {
-        const defaultOptions = this.defaultOptions(I18n.locale)
-        const options = {create: this.hasTags()}
+  initTomSelect () {
+    const defaultOptions = this.defaultOptions(I18n.locale)
+    const options = { create: this.hasTags() }
 
-        new TomSelect(this.element, {...defaultOptions, ...options})
-    }
-}
+    /* eslint-disable no-new */
+    new TomSelect(this.element, { ...defaultOptions, ...options })
+  }
+}

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

@@ -1,98 +1,109 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static get targets() {
-        return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"]
-    }
+  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)
-        })
+  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.updateFormDataAttributes()
+    this.enableButton()
+  }
 
-    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('')
     }
+  }
 
-    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
+  }
 
-    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')
     }
+  }
 
-    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
+  }
 
-    updateFormAction() {
-        this.formTarget.action = this.selectTarget.value
-    }
+  updateFormMethod () {
+    const option = this.selectedOption()
+    this.methodTarget.value = option.dataset.method
+  }
 
-    updateFormMethod() {
-        const option = this.selectedOption()
-        this.methodTarget.value = option.dataset.method
-    }
+  updateFormDataAttributes () {
+    const option = this.selectedOption()
+    this.updateFormDataConfirm(option.dataset.turboConfirm)
+    this.updateFormDataTurbo(option.dataset.turbo)
+  }
 
-    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()
+  updateFormDataConfirm (confirm) {
+    if (confirm) {
+      this.formTarget.dataset.turboConfirm = confirm
+    } else {
+      this.formTarget.removeAttribute('data-turbo-confirm')
     }
+  }
 
-    selectedOption() {
-        return this.selectTarget.options[this.selectTarget.selectedIndex]
+  updateFormDataTurbo (turbo) {
+    if (turbo) {
+      this.formTarget.dataset.turbo = turbo
+    } else {
+      this.formTarget.removeAttribute('data-turbo')
     }
+  }
 
-    enableButton() {
-        this.buttonTarget.removeAttribute('disabled')
-    }
+  selectedOption () {
+    return this.selectTarget.options[this.selectTarget.selectedIndex]
+  }
 
-    addId(id) {
-        const template = this.idInputTemplateTarget
-        const input = template.innerHTML.replace(/ID/g, id)
-        this.formTarget.insertAdjacentHTML('afterbegin', input)
-    }
+  enableButton () {
+    this.buttonTarget.removeAttribute('disabled')
+  }
 
-    removeIds() {
-        this.idTargets.forEach((input) => {
-            this.formTarget.removeChild(input)
-        });
-    }
+  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

@@ -1,110 +1,124 @@
-import {Controller} from "@hotwired/stimulus"
-import Sortable from "sortablejs";
-import Rails from "@rails/ujs";
+/* global CustomEvent, fetch, FormData */
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
 
 export default class extends Controller {
-    static get values() {
-        return {
-            url: String,
-            count: Number
-        }
+  static get values () {
+    return {
+      url: String,
+      count: Number
     }
+  }
 
-    static get targets() {
-        return ["table", "body", "actions", "idCheckbox", "idsCheckbox", "row"]
-    }
+  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(),
-                });
-            }
-        })
-    }
+  connect () {
+    Sortable.create(this.bodyTarget, {
+      handle: '.table-drag-sort-handle',
+      onEnd: (event) => {
+        this.submitPositions()
+      }
+    })
+  }
 
-    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
-    }
+  submitPositions () {
+    fetch(this.urlValue, {
+      method: 'PATCH',
+      body: this.idsFormData(),
+      headers: {
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+      }
+    }).then((response) => {
+      return response.text()
+    }).catch((err) => {
+      console.warn('Fetch went wrong', err)
+    })
+  }
 
-    toggleIds(event) {
-        const checkbox = event.target
-        this.toggleIdsCheckboxes(checkbox.checked)
-        this.toggleIdCheckboxes(checkbox.checked)
-        this.updateActions()
-    }
+  positions () {
+    const handles = [...this.tableTarget.querySelectorAll('.table-drag-sort-handle')]
+    return handles.map((handle) => {
+      return handle.dataset.id
+    })
+  }
 
-    toggleId(event) {
-        this.toggleIdsCheckboxes(false)
-        this.updateActions()
-    }
+  idsFormData () {
+    const formData = new FormData()
+    this.positions().forEach(id => {
+      formData.append('ids[]', id)
+    })
+    return formData
+  }
 
-    updateActions() {
-        this.actionsTarget.dispatchEvent(
-            new CustomEvent(
-                'idSelectionChanged',
-                {
-                    detail: {
-                        ids: this.ids(),
-                        count: this.selectedIdsCount()
-                    }
-                }
-            )
-        )
-    }
+  toggleIds (event) {
+    const checkbox = event.target
+    this.toggleIdsCheckboxes(checkbox.checked)
+    this.toggleIdCheckboxes(checkbox.checked)
+    this.updateActions()
+  }
 
-    selectedIdsCount() {
-        if (this.ids() instanceof Array) {
-            return this.ids().length
-        } else {
-            return this.totalCount()
-        }
-    }
+  toggleId (event) {
+    this.toggleIdsCheckboxes(false)
+    this.updateActions()
+  }
 
-    totalCount() {
-        if (this.countValue === 0) {
-            return this.rowTargets.length
-        } else {
-            return this.countValue
+  updateActions () {
+    this.actionsTarget.dispatchEvent(
+      new CustomEvent(
+        'idSelectionChanged',
+        {
+          detail: {
+            ids: this.ids(),
+            count: this.selectedIdsCount()
+          }
         }
-    }
+      )
+    )
+  }
 
-    ids() {
-        if (this.idsCheckboxTarget.checked) {
-            return null
-        } else {
-            return this.selectedIdCheckboxes().map((checkbox) => {
-                return checkbox.value
-            })
-        }
+  selectedIdsCount () {
+    if (this.ids() instanceof Array) {
+      return this.ids().length
+    } else {
+      return this.totalCount()
     }
+  }
 
-    selectedIdCheckboxes() {
-        return this.idCheckboxTargets.filter((checkbox) => {
-            return checkbox.checked
-        })
+  totalCount () {
+    if (this.countValue === 0) {
+      return this.rowTargets.length
+    } else {
+      return this.countValue
     }
+  }
 
-    toggleIdsCheckboxes(checked) {
-        this.idsCheckboxTargets.forEach((checkbox) => {
-            checkbox.checked = checked
-        });
+  ids () {
+    if (this.idsCheckboxTarget.checked) {
+      return null
+    } else {
+      return this.selectedIdCheckboxes().map((checkbox) => {
+        return checkbox.value
+      })
     }
+  }
 
-    toggleIdCheckboxes(checked) {
-        this.idCheckboxTargets.forEach((checkbox) => {
-            checkbox.checked = checked
-        });
-    }
+  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

@@ -1,41 +1,40 @@
-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";
+/* global Stimulus */
+import { Application } from '@hotwired/stimulus'
+import AutocompleteController from './controllers/autocomplete_controller'
+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'
 
 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()
-    }
-}
+  static start () {
+    window.Stimulus = window.Stimulus || Application.start()
+    Stimulus.register('autocomplete', AutocompleteController)
+    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)
+  }
+}