adminterface 0.0.0 → 0.2.3

data/app/javascript/adminterface/lib/confirm_dialog.js

@@ -0,0 +1,113 @@
+/* global Event, DOMParser, adminterface */
+
+import { Modal } from 'bootstrap'
+import { serializeObject, deepMergeObject, getObjectValue } from './utils'
+import { Input } from './input'
+
+class ConfirmDialog {
+  constructor (message, inputs, options, callback) {
+    const cssClasses = getObjectValue(adminterface, 'meta.cssClasses.confirm_dialog')
+    const translations = getObjectValue(adminterface, 'meta.translations.confirm_dialog')
+    const defaults = {
+      buttons: {
+        confirm: {
+          text: translations.confirm,
+          class: cssClasses.confirm
+        },
+        cancel: {
+          text: translations.cancel,
+          class: cssClasses.cancel
+        }
+      }
+    }
+
+    this.message = message
+    this.inputs = inputs
+    this.callback = callback
+    this.events = {
+      beforeOpen: new Event('confirm_dialog:before_open'),
+      afterOpen: new Event('confirm_dialog:after_open'),
+      confirm: new Event('confirm_dialog:confirm'),
+      cancel: new Event('confirm_dialog:cancel')
+    }
+
+    this.options = deepMergeObject(defaults, options)
+    this._bind()
+  }
+
+  _template () {
+    const buttons = this.options.buttons || {}
+    const message = this.message ? `<p id="dialog-message">${this.message}</p>` : ''
+
+    return `
+      <div id="modal-dialog-confirm" class='modal fade' tabindex='-1'>
+        <div class='modal-dialog modal-dialog-centered modal-dialog-scrollable'>
+          <div class='modal-content'>
+            <div class='modal-body'>
+              ${message}
+              ${this._form()}
+            </div>
+            <div class='modal-footer'>
+              <button type='button' class='${(buttons.cancel || {}).class}' data-bs-dismiss='modal'>${(buttons.cancel || {}).text}</button>
+              <button id="modal-dialog-confirm-button" type='button' class='${(buttons.confirm || {}).class}'>${(buttons.confirm || {}).text}</button>
+            </div>
+          </div>
+        </div>
+      </div>`
+  }
+
+  _form () {
+    let html = `<form id="modal-dialog-confirm-form" title="${this.message}">`
+    for (const name in this.inputs) {
+      const options = this.inputs[name]
+      html += (new Input(name, options)).render()
+    }
+
+    html += '</form>'
+    return html
+  }
+
+  _create () {
+    const dialogNode = new DOMParser().parseFromString(this._template(), 'text/html').body.childNodes[0]
+    return document.body.appendChild(dialogNode)
+  }
+
+  _bind () {
+    const _self = this
+    const dialogEl = this._create()
+    const dialogForm = dialogEl.querySelector('#modal-dialog-confirm-form') || {}
+    const confirmButton = dialogEl.querySelector('#modal-dialog-confirm-button') || {}
+    const beforeOpenEvent = this.events.beforeOpen
+    const afterOpenEvent = this.events.afterOpen
+    const confirmEvent = this.events.confirm
+    const cancelEvent = this.events.cancel
+    const serializeForm = serializeObject
+    const dialogConfirm = new Modal(dialogEl, {
+      keyboard: true,
+      backdrop: 'static'
+    })
+
+    confirmButton.addEventListener('click', function (_e) {
+      _self.callback(serializeForm(dialogForm))
+      dialogConfirm.hide()
+      confirmEvent.detail = { dialogForm }
+      document.dispatchEvent(confirmEvent)
+    })
+
+    dialogEl.addEventListener('hidden.bs.modal', function (_e) {
+      dialogEl.remove()
+      cancelEvent.detail = { dialogForm }
+      document.dispatchEvent(cancelEvent)
+    })
+
+    beforeOpenEvent.detail = { dialogForm }
+    afterOpenEvent.detail = { dialogForm }
+    document.dispatchEvent(beforeOpenEvent)
+    dialogConfirm.show()
+    document.dispatchEvent(afterOpenEvent)
+
+    adminterface.addObserver(dialogEl, this, this.constructor.name)
+  }
+}
+
+export default ConfirmDialog

data/app/javascript/adminterface/lib/detached_dropdown.js

@@ -0,0 +1,34 @@
+/* global adminterface */
+class DetachedDropdown {
+  constructor (element, options) {
+    const defaults = {
+      menu: '.dropdown-menu'
+    }
+
+    this.element = element
+    this.options = { ...defaults, ...options }
+
+    this._bind()
+  }
+
+  _append (target, node) {
+    target.append(node.parentElement.removeChild(node))
+  }
+
+  _bind () {
+    const $menu = this.element.querySelector(this.options.menu)
+    const _self = this
+
+    this.element.addEventListener('show.bs.dropdown', function (_e) {
+      _self._append(document.body, $menu)
+    })
+
+    this.element.addEventListener('hidden.bs.dropdown', function (_e) {
+      _self._append(_self.element, $menu)
+    })
+
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default DetachedDropdown

data/app/javascript/adminterface/lib/filters.js

@@ -0,0 +1,34 @@
+import { queryStringToParams, hasTurbolinks, turbolinksVisit, toQueryString, serializeArray } from './utils'
+
+class Filters {
+  static _clearForm (event) {
+    const regex = /^(q\[|q%5B|q%5b|page|utf8|commit)/
+    const params = queryStringToParams().filter(({ name }) => !name.match(regex))
+
+    event.preventDefault()
+
+    if (hasTurbolinks()) {
+      turbolinksVisit(params)
+    } else {
+      window.location.search = toQueryString(params)
+    }
+  }
+
+  static _disableEmptyInputFields (event) {
+    const elements = [...this.querySelectorAll('input, textarea, select, button')].filter((input) => input.value === '')
+    const params = serializeArray(this)
+    elements.forEach((el) => { el.disabled = true })
+
+    if (hasTurbolinks()) {
+      event.preventDefault()
+      turbolinksVisit(params)
+    }
+  }
+
+  static _setSearchType () {
+    const $element = this.closest('.filter_form_field').querySelector('input')
+    $element.name = `q[${this.value}]`
+  }
+}
+
+export default Filters

data/app/javascript/adminterface/lib/has_many.js

@@ -0,0 +1,125 @@
+/* global Event, adminterface */
+import Sortable from 'sortablejs'
+
+class HasMany {
+  constructor (element) {
+    this.element = element
+    this.events = {
+      removeBefore: new Event('has_many_remove:before'),
+      removeAfter: new Event('has_many_remove:after'),
+      addBefore: new Event('has_many_add:before'),
+      addAfter: new Event('has_many_add:after')
+    }
+    this.options = {
+      list: '.has-many-list',
+      item: 'fieldset.has_many_fields',
+      addLink: 'a.button.has_many_add',
+      removeLink: 'a.button.has_many_remove',
+      destroyInput: 'input[name$="[_destroy]"]'
+    }
+
+    this._bind()
+  }
+
+  _initSortable () {
+    this.sortable = new Sortable(document.querySelector(this.options.list), {
+      handle: '.handle',
+      animation: 150,
+      ghostClass: 'sortable-placeholder',
+      dragClass: 'sortable-drag',
+      onUpdate: () => { this._recomputePosition() }
+    })
+  }
+
+  _recomputePosition () {
+    const inputName = this.element.dataset.sortable
+    const $items = this.element.querySelectorAll(this.options.item)
+    let position = parseInt(this.element.dataset.sortableStart || 0, 10)
+
+    $items.forEach((el) => {
+      const destroyInput = el.querySelector(this.options.destroyInput) || {}
+      const sortableInput = el.querySelector(`input[name$='[${inputName}]']`) || {}
+
+      if (sortableInput) {
+        sortableInput.value = destroyInput.checked ? '' : position++
+      }
+    })
+  }
+
+  _bindDestroyEvent (el) {
+    el.addEventListener('change', (e) => this._recomputePosition())
+  }
+
+  _bindAddEvent (el) {
+    el.addEventListener('click', (e) => this._bindAddEventCallBack(e))
+  }
+
+  _bindAddEventCallBack (e) {
+    let beforeAdd
+    const el = e.target
+    const parent = this.element
+    e.preventDefault()
+    parent.dispatchEvent(beforeAdd = this.events.addBefore, [parent])
+
+    if (!beforeAdd.defaultPrevented) {
+      let index = parent.dataset.hasManyIndex || parent.querySelectorAll(this.options.item).length - 1
+      parent.setAttribute('data-has-many-index', ++index)
+
+      const regex = new RegExp(el.dataset.placeholder, 'g')
+      const html = el.dataset.html.replace(regex, index)
+      const newNode = document.createElement('div')
+      newNode.innerHTML = html
+
+      const fieldset = newNode.firstElementChild
+      const $list = this.element.querySelector(this.options.list)
+
+      $list.appendChild(fieldset)
+      this._bindEvents(fieldset)
+      this._recomputePosition()
+
+      const addAfterEvent = this.events.addAfter
+      addAfterEvent.detail = { fieldset, parent }
+      return parent.dispatchEvent(this.events.addAfter)
+    }
+  }
+
+  _bindRemoveEvent (el) {
+    el.addEventListener('click', (e) => this._bindRemoveEventCallBack(e))
+  }
+
+  _bindRemoveEventCallBack (e) {
+    const el = e.target
+    const parent = this.element
+    const fieldset = el.closest(this.options.item)
+    const removeBeforeEvent = this.events.removeBefore
+    const removeAfterEvent = this.events.removeAfter
+
+    e.preventDefault()
+    this._recomputePosition()
+
+    removeBeforeEvent.detail = { fieldset, parent }
+    removeAfterEvent.detail = { fieldset, parent }
+    parent.dispatchEvent(removeBeforeEvent)
+    fieldset.remove()
+    return parent.dispatchEvent(removeAfterEvent)
+  }
+
+  _bindEvents (el) {
+    const $addLinks = el.querySelectorAll(this.options.addLink)
+    const $removeLinks = el.querySelectorAll(this.options.removeLink)
+    const $destroyInputs = el.querySelectorAll(this.options.destroyInput)
+
+    $addLinks.forEach((el) => this._bindAddEvent(el))
+    $removeLinks.forEach((el) => this._bindRemoveEvent(el))
+    $destroyInputs.forEach((el) => this._bindDestroyEvent(el))
+  }
+
+  _bind () {
+    this._bindEvents(this.element)
+    this._initSortable()
+
+    adminterface.addObserver(this.element, this, this.constructor.name, [])
+  }
+}
+
+export default HasMany

data/app/javascript/adminterface/lib/header_toggler.js

@@ -0,0 +1,54 @@
+/* global adminterface */
+import { cookieSet, cookieGet } from './utils'
+
+class HeaderToggler {
+  constructor (element, options) {
+    const defaults = {
+      container: 'body',
+      activeClass: 'header-active',
+      cookieName: 'header-state',
+      cookieExpireSec: 30 * 24 * 60 * 60
+    }
+
+    this.element = element
+    this.options = { ...defaults, ...options }
+
+    this._bind()
+  }
+
+  _add () {
+    const $container = document.querySelector(this.options.container)
+    $container.classList.add(this.options.activeClass)
+    cookieSet(this.options.cookieName, this.options.activeClass, this.options.cookieExpireSec)
+  }
+
+  _remove () {
+    const $container = document.querySelector(this.options.container)
+    $container.classList.remove(this.options.activeClass)
+    cookieSet(this.options.cookieName, null, 0)
+  }
+
+  _bind () {
+    const cookie = cookieGet(this.options.cookieName)
+    const $breakpointHelper = document.querySelector('.breakpoint-up-helper')
+    const $container = document.querySelector(this.options.container)
+    const _self = this
+
+    if (cookie === this.options.activeClass && window.getComputedStyle($breakpointHelper).visibility === 'visible') {
+      this._add()
+    }
+
+    this.element.addEventListener('click', function (e) {
+      e.preventDefault()
+      if ($container.classList.contains(_self.options.activeClass)) {
+        _self._remove()
+      } else {
+        _self._add()
+      }
+    })
+
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default HeaderToggler

data/app/javascript/adminterface/lib/input.js

@@ -0,0 +1,108 @@
+/* global adminterface */
+import BaseInput from './inputs/base_input'
+import BooleanInput from './inputs/boolean_input'
+import CheckBoxesInput from './inputs/check_boxes_input'
+import ColorInput from './inputs/color_input'
+import CountryInput from './inputs/country_input'
+import DatalistInput from './inputs/datalist_input'
+import DatePickerInput from './inputs/date_picker_input'
+import DateTimePickerInput from './inputs/datetime_picker_input'
+import HiddenInput from './inputs/hidden_input'
+import RadioInput from './inputs/radio_input'
+import SelectInput from './inputs/select_input'
+import StringInput from './inputs/string_input'
+import SwitchInput from './inputs/switch_input'
+import TextInput from './inputs/text_input'
+import TimePickerInput from './inputs/time_picker_input'
+import TimeZoneInput from './inputs/time_zone_input'
+import PasswordInput from './inputs/password_input'
+
+const inputMapping = {
+  boolean: BooleanInput,
+  check_boxes: CheckBoxesInput,
+  color: ColorInput,
+  country: CountryInput,
+  datalist: DatalistInput,
+  date_picker: DatePickerInput,
+  datepicker: DatePickerInput,
+  datetime_picker: DateTimePickerInput,
+  hidden: HiddenInput,
+  number: StringInput,
+  password: PasswordInput,
+  phone: StringInput,
+  radio: RadioInput,
+  select: SelectInput,
+  string: StringInput,
+  switch: SwitchInput,
+  text: TextInput,
+  time_picker: TimePickerInput,
+  time_zone: TimeZoneInput,
+  url: StringInput
+}
+
+class Input {
+  constructor (name, options) {
+    this.name = name
+    this.options = options
+    this.mapping = adminterface.meta.inputs
+  }
+
+  _configs () {
+    if (this._isExplicity()) {
+      return {
+        as: this.options.as,
+        options: this.options
+      }
+    } else if (Array.isArray(this.options)) {
+      return {
+        as: 'select',
+        options: { collection: this.options }
+      }
+    } else {
+      return {
+        as: this.options,
+        options: {}
+      }
+    }
+  }
+
+  _isExplicity () {
+    return (typeof (this.options) === 'object') && this.options.as
+  }
+
+  render () {
+    const configs = this._configs()
+    const as = configs.as
+    const options = configs.options
+    const InputClass = this.mapping[as]
+
+    if (!InputClass) {
+      throw new Error(`Unsupported input type: {${this.name}: ${as}}`)
+    }
+
+    const input = new InputClass(this.name, { ...options, as: as })
+    return input.render()
+  }
+}
+
+export {
+  inputMapping,
+  Input,
+  BaseInput,
+  BooleanInput,
+  CheckBoxesInput,
+  ColorInput,
+  CountryInput,
+  DatalistInput,
+  DatePickerInput,
+  DateTimePickerInput,
+  HiddenInput,
+  RadioInput,
+  SelectInput,
+  StringInput,
+  SwitchInput,
+  TextInput,
+  TimePickerInput,
+  TimeZoneInput,
+  PasswordInput
+}

data/app/javascript/adminterface/lib/inputs/base/groupish.js

@@ -0,0 +1,55 @@
+class Groupish {
+  constructor (options) {
+    this.type = options.as
+    this.options = options
+    this.prepend = options.prepend
+    this.append = options.append
+    this.isGroupable = this._isGroupable()
+    this.isGrouped = this._isGrouped()
+  }
+
+  groupWrapping (html) {
+    const prependHTML = this.prepend || ''
+    const appendHTML = this.append || ''
+
+    if (this.isGrouped) {
+      return `
+        <div class="input-group">
+          ${prependHTML}
+          ${html}
+          ${appendHTML}
+        </div>
+      `
+    } else {
+      return html
+    }
+  }
+
+  _groupableTypes () {
+    return [
+      'string',
+      'number',
+      'url',
+      'phone',
+      'password',
+      'color',
+      'datalist',
+      'select',
+      'country',
+      'time_zone',
+      'date_picker',
+      'datepicker',
+      'datetime_picker'
+    ]
+  }
+
+  _isGrouped () {
+    return !!this.prepend || !!this.append
+  }
+
+  _isGroupable () {
+    return this._groupableTypes().includes(this.type)
+  }
+}
+
+export default Groupish

data/app/javascript/adminterface/lib/inputs/base/pluginish.js

@@ -0,0 +1,63 @@
+/* global adminterface */
+import { toSnakeCase, getObjectValue } from '../../utils'
+
+class Config {
+  constructor (configs, options) {
+    this.name = configs.name
+    this.configs = configs
+    this.options = options[toSnakeCase(this.name)]
+  }
+
+  attributes () {
+    if (!this._enabled()) return {}
+
+    let results
+
+    if (typeof (this.options) === 'object') {
+      results = this.options
+    } else {
+      results = this._defaults()
+    }
+
+    return { [`data-aa-${this.name}`]: results }
+  }
+
+  _defaults () {
+    return this.configs.options || {}
+  }
+
+  _enabled () {
+    return (
+      (!(this.options === false) && this.configs.default === true) ||
+        (this.options && this.options === true)
+    )
+  }
+}
+
+class Pluginish {
+  constructor (options) {
+    this.options = options
+    this.as = options.as
+    this.plugins = this._plugins()
+  }
+
+  enabled (name) {
+    return getObjectValue(this.plugins, `data-aa-${name}`)
+  }
+
+  _plugins () {
+    return Object.assign({}, ...this._configs())
+  }
+
+  _configs () {
+    const plugins = getObjectValue(adminterface, `meta.components.inputs.${this.as}.js`)
+
+    if (plugins) {
+      return plugins.map((plugin) => (new Config(plugin, this.options)).attributes())
+    } else {
+      return []
+    }
+  }
+}
+
+export default Pluginish

data/app/javascript/adminterface/lib/inputs/base_input.js

@@ -0,0 +1,87 @@
+/* global adminterface */
+import { toHTMLAttrString, toSnakeCase } from '../utils'
+import Pluginish from './base/pluginish'
+import Groupish from './base/groupish'
+
+class BaseInput {
+  constructor (name, options) {
+    this.name = name
+    this.options = options
+    this.wrapper_html_options = this.options.wrapper_html || {}
+    this.label_html_options = this.options.label_html || {}
+    this.input_html_options = this.options.input_html || {}
+    this.label = options.label || name.charAt(0).toUpperCase() + name.slice(1)
+    this.type = toSnakeCase(this.constructor.name.replace(/(Input$)/, ''))
+    this.pluginish = new Pluginish(this.options)
+    this.groupish = new Groupish(this.options)
+  }
+
+  _defaultWrapperHTMLOptions () {
+    const uuid = adminterface.addObserver(null, this, `Input.${this.constructor.name}`)
+    const configs = { class: `mb-3 input ${this.type}` }
+
+    if (uuid) configs['data-observer-id'] = uuid
+    return configs
+  }
+
+  _wrapperHTMLOptions () {
+    return { ...this._defaultWrapperHTMLOptions(), ...this.wrapper_html_options }
+  }
+
+  _defaultLabelHTMLOptions () {
+    return {
+      class: 'form-label',
+      for: `batch-form-${this.name}`
+    }
+  }
+
+  _labelHTMLOptions () {
+    return { ...this._defaultLabelHTMLOptions(), ...this.label_html_options }
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-control ${this.options.as}`,
+      name: this.name,
+      id: `batch-form-${this.name}`
+    }
+
+    return { ...options, ...this.pluginish.plugins }
+  }
+
+  _inputHTMLOptions () {
+    return { ...this._defaultInputHTMLOptions(), ...this.input_html_options }
+  }
+
+  _labelHTML () {
+    return `<label ${toHTMLAttrString(this._labelHTMLOptions())}>${this.label}</label>`
+  }
+
+  _inputHTML () {
+    return `<input ${toHTMLAttrString(this._inputHTMLOptions())}>`
+  }
+
+  _inputWrapping (html) {
+    return `
+      <div ${toHTMLAttrString(this._wrapperHTMLOptions())}>${html}</div>
+    `
+  }
+
+  render () {
+    const input = this._inputHTML()
+    let inputHTML
+
+    if (this.groupish.isGroupable) {
+      inputHTML = this.groupish.groupWrapping(input)
+    } else {
+      inputHTML = input
+    }
+
+    return this._inputWrapping(`
+      ${this._labelHTML()}
+      ${inputHTML}
+    `)
+  }
+}
+
+export default BaseInput

data/app/javascript/adminterface/lib/inputs/boolean_input.js

@@ -0,0 +1,30 @@
+import BaseInput from './base_input'
+
+class BooleanInput extends BaseInput {
+  _defaultLabelHTMLOptions () {
+    const options = {
+      class: 'form-check-label'
+    }
+
+    return { ...super._defaultLabelHTMLOptions(), ...options }
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-check-input ${this.options.as}`,
+      type: 'checkbox'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _inputGroup (html) {
+    return `<div class="form-check">${html}</div>`
+  }
+
+  _inputWrapping (html) {
+    return super._inputWrapping(this._inputGroup(html))
+  }
+}
+
+export default BooleanInput