adminterface 0.0.0 → 0.2.0

data/app/javascript/adminterface/lib/__tests__/utils.spec.js

@@ -0,0 +1,281 @@
+/* eslint-env jest */
+import {
+  hasTurbolinks,
+  turbolinksVisit,
+  queryString,
+  queryStringToParams,
+  toHTMLAttrString,
+  toQueryString,
+  serializeArray,
+  serializeObject,
+  cookieSet,
+  cookieGet,
+  getObjectValue,
+  deepMergeObject,
+  toSnakeCase,
+  toHTMLCssString,
+  setObjectValue,
+  camalize
+} from '../utils'
+
+describe('utils', () => {
+  let windowSpy
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+    Object.defineProperty(document, 'cookie', {
+      writable: true,
+      value: ''
+    })
+    global.Turbolinks = {
+      supported: true,
+      visit: path => path
+    }
+  })
+
+  afterEach(() => {
+    windowSpy.mockRestore()
+  })
+
+  const windowSpyMockImplement = (URL) => {
+    return windowSpy.mockImplementation(() => ({
+      location: {
+        search: URL
+      }
+    }))
+  }
+
+  test('hasTurbolinks returns boolean value correctly', () => {
+    expect(hasTurbolinks()).toBeTruthy()
+
+    global.Turbolinks.supported = false
+    expect(hasTurbolinks()).toBeFalsy()
+  })
+
+  test('turbolinksVisit triggers Turbolinks api correctly', () => {
+    const spyOnTurbolinks = jest.spyOn(global.Turbolinks, 'visit')
+
+    const params = [
+      { name: 'Richard', value: 1 },
+      { name: 'Nelson', value: 2 }
+    ]
+    const path = window.location.pathname
+    turbolinksVisit(params)
+
+    expect(spyOnTurbolinks).toHaveBeenCalledTimes(1)
+    expect(spyOnTurbolinks).toHaveBeenCalledWith(`${path}?Richard=1&Nelson=2`)
+  })
+
+  test('queryString returns correctly', () => {
+    const exampleURL = '?email=someone@example.com'
+
+    windowSpyMockImplement(exampleURL)
+    expect(queryString()).toEqual(exampleURL.replace(/^\?/, ''))
+  })
+
+  test('queryStringToParams returns correctly', () => {
+    const emailParam = 'email=someone@example.com'
+    const searchParam = 'q=Nelson+Richard'
+    const mockQueryString = `?${emailParam}&${searchParam}`
+
+    windowSpyMockImplement(mockQueryString)
+
+    const result = [
+      { name: 'email', value: 'someone@example.com' },
+      { name: 'q', value: 'Nelson Richard' }
+    ]
+
+    expect(queryStringToParams()).toEqual(result)
+  })
+
+  test('toHTMLAttrString returns correctly', () => {
+    const mockObject = {
+      name: 'Codey',
+      info: {
+        email: 'codey@example.com',
+        address: 'Tokyo'
+      }
+    }
+    const mockStringifyObject = JSON.stringify(mockObject.info)
+
+    const result = `name='${mockObject.name}' info='${mockStringifyObject}'`
+
+    expect(toHTMLAttrString(mockObject)).toEqual(result)
+  })
+
+  test('toQueryString returns query string correctly', () => {
+    const params = [
+      { name: 'Richard', value: 1 },
+      { name: 'Nelson', value: 2 }
+    ]
+    expect(toQueryString(params)).toEqual('Richard=1&Nelson=2')
+  })
+
+  test('serializeArray and serializeObject returns correctly', () => {
+    const elements = [
+      {
+        name: 'Test1',
+        disabled: false,
+        type: 'file'
+      },
+      {
+        name: 'Test2',
+        disabled: false,
+        type: 'select-multiple',
+        options: [
+          {
+            selected: true,
+            value: 'select-multiple value1'
+          },
+          {
+            selected: true,
+            value: 'select-multiple value2'
+          }
+        ]
+      },
+      {
+        name: 'Test3',
+        disabled: false,
+        type: 'checkbox',
+        checked: true,
+        value: 'checkbox value'
+      }
+    ]
+    const form = { elements }
+
+    const resultSerializeArray = [
+      {
+        name: elements[1].name,
+        value: elements[1].options[0].value
+      },
+      {
+        name: elements[1].name,
+        value: elements[1].options[1].value
+      },
+      {
+        name: elements[2].name,
+        value: elements[2].value
+      }
+    ]
+    expect(serializeArray(form)).toEqual(resultSerializeArray)
+
+    const resultSerializeObject = {
+      [resultSerializeArray[1].name]: resultSerializeArray[1].value,
+      [resultSerializeArray[2].name]: resultSerializeArray[2].value
+    }
+    expect(serializeObject(form)).toEqual(resultSerializeObject)
+  })
+
+  test('cookieSet returns correctly', () => {
+    const expireInSec = 10
+    const name = 'Codey'
+    const value = 'Du'
+
+    const expireAt = new Date()
+    expireAt.setTime(expireAt.getTime() + expireInSec * 1000)
+
+    const result = `${name}=${value};expires=${expireAt.toGMTString()};path=/`
+    cookieSet(name, value, expireInSec)
+    expect(document.cookie).toEqual(result)
+  })
+
+  test('cookieGet returns correctly', () => {
+    const name = 'Codey'
+    const expires = '2012'
+    const path = '/'
+    document.cookie = `name=${name};expires=${expires};path=${path}`
+
+    expect(cookieGet('name')).toEqual(name)
+    expect(cookieGet('expires')).toEqual(expires)
+    expect(cookieGet('path')).toEqual(path)
+    expect(cookieGet('something')).toBeNull()
+  })
+
+  test('getObjectValue returns correctly', () => {
+    const path = 'name.gender.address'
+    const data = {
+      name: 'Codey',
+      gender: 'male',
+      address: 'Tokyo'
+    }
+
+    expect(getObjectValue(data, path)).toEqual(data.name)
+  })
+
+  test('deepMergeObject returns correctly', () => {
+    const targetObject = {
+      name: 'Anonymous',
+      gender: 'Female',
+      hair: {
+        color: 'brown',
+        cut: 'long'
+      },
+      eyes: 'blue',
+      family: ['mom', 'dad']
+    }
+
+    const sourceObject = {
+      name: 'Codey Du',
+      gender: 'Male',
+      hair: {
+        cut: 'short'
+      },
+      family: ['wife', 'kids', 'dog']
+    }
+
+    const resultObject = {
+      name: 'Codey Du',
+      gender: 'Male',
+      hair: {
+        color: 'brown',
+        cut: 'short'
+      },
+      eyes: 'blue',
+      family: ['wife', 'kids', 'dog']
+    }
+
+    expect(deepMergeObject(targetObject, sourceObject)).toEqual(resultObject)
+  })
+
+  test('toSnakeCase returns correctly', () => {
+    const testString = 'AToZOneTwoThree123 Codey is in Tokyo 2021'
+    const resultString = 'a_to_z_one_two_three123_codey_is_in_tokyo_2021'
+
+    expect(toSnakeCase(testString)).toEqual(resultString)
+  })
+
+  test('toHTMLCssString returns correctly', () => {
+    const testStringPound = '#div: margin;'
+    const resultStringPound = 'div: margin;'
+
+    const testStringDot = '.h1: font-size'
+    const resultStringDot = 'h1: font-size'
+
+    expect(toHTMLCssString(testStringPound)).toEqual(resultStringPound)
+    expect(toHTMLCssString(testStringDot)).toEqual(resultStringDot)
+  })
+
+  test('setObjectValue returns correctly', () => {
+    const path = 'info.personal.gender'
+    const obj = {}
+    const value = 'male'
+
+    const result = {
+      info: {
+        personal: {
+          gender: value
+        }
+      }
+    }
+
+    setObjectValue(obj, path, value)
+    expect(obj).toEqual(result)
+  })
+
+  test('camalize returns correctly', () => {
+    const testString = 'Happy Camal casing 123'
+    const resultString = 'happyCamalCasing123'
+
+    expect(camalize(testString)).toEqual(resultString)
+  })
+})

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

@@ -0,0 +1,106 @@
+/* global Event, adminterface */
+import ConfirmDialog from './confirm_dialog'
+import CheckboxToggler from './checkbox_toggler'
+import TableCheckboxToggler from './table_checkbox_toggler'
+
+class BatchActions {
+  constructor (element) {
+    this.element = element
+    this.modal = null
+    this.events = {
+      confirm: new Event('confirm:complete')
+    }
+    this.options = {
+      batchActionSelector: '.batch_actions_selector',
+      collection: '.paginated_collection',
+      toggler: '#collection_selection_toggle_all'
+    }
+
+    this._bind()
+  }
+
+  _bindLinks () {
+    const $elements = this.element.querySelectorAll(`${this.options.batchActionSelector} li a`)
+    const _self = this
+
+    $elements.forEach((el) => {
+      el.addEventListener('click', (e) => {
+        const el = e.target
+        const dialogOptions = JSON.parse(el.dataset.aaConfirmDialog || '{}')
+        let message
+
+        e.stopPropagation()
+        e.preventDefault()
+
+        if ((message = el.dataset.confirm)) {
+          this.modal = new ConfirmDialog(message, JSON.parse(el.dataset.inputs), dialogOptions, function (inputs) {
+            const event = _self.events.confirm
+            event.detail = { inputs }
+            el.dispatchEvent(event)
+          })
+        }
+      })
+    })
+  }
+
+  _bindConfirm () {
+    const $elements = this.element.querySelectorAll(`${this.options.batchActionSelector} li a`)
+
+    $elements.forEach((el) => {
+      el.addEventListener(this.events.confirm.type, function (e) {
+        let value
+        const $batchActionInputs = document.getElementById('batch_action_inputs')
+        const inputs = (e.detail || {}).inputs
+
+        e.stopPropagation()
+        e.preventDefault()
+
+        if ((value = JSON.stringify(inputs))) {
+          $batchActionInputs.removeAttribute('disabled')
+          $batchActionInputs.value = value
+        } else {
+          $batchActionInputs.setAttribute('disabled', 'disabled')
+        }
+
+        document.getElementById('batch_action').value = e.target.dataset.action
+        document.getElementById('collection_selection').submit()
+      })
+    })
+  }
+
+  _bindSelector () {
+    const $indexTable = this.element.querySelector(`${this.options.collection} table.index_table`)
+    const $batchActionSelector = this.element.querySelector(this.options.batchActionSelector)
+    const $toggleAll = this.element.querySelector(this.options.toggler)
+    const $checkboxes = this.element.querySelectorAll(`${this.options.collection} input[type="checkbox"]`)
+    const $toggler = this.element.querySelector(`${this.options.batchActionSelector} .dropdown-toggle`)
+
+    if ($batchActionSelector && $toggleAll) {
+      if ($indexTable) {
+        this.tableCheckboxToggler = new TableCheckboxToggler(`${this.options.collection} table.index_table`)
+      } else {
+        this.checkboxToggler = new CheckboxToggler(this.options.collection)
+      }
+    }
+
+    $checkboxes.forEach((el) => {
+      el.addEventListener('change', (_e) => {
+        if (this.element.querySelectorAll(`${this.options.collection} input[type="checkbox"]:checked`).length) {
+          $toggler.classList.remove('disabled')
+        } else {
+          $toggler.classList.add('disabled')
+        }
+      })
+    })
+  }
+
+  _bind () {
+    this._bindLinks()
+    this._bindConfirm()
+    this._bindSelector()
+
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default BatchActions

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

@@ -0,0 +1,55 @@
+class CheckboxToggler {
+  constructor (container, options) {
+    this.options = options
+    this.container = container
+    this._init()
+    this._bind()
+  }
+
+  _init () {
+    if (!this.container) {
+      throw new Error('Container element not found')
+    } else {
+      this.$container = document.querySelector(this.container)
+    }
+
+    if (!this.$container.querySelector('.toggle_all')) {
+      throw new Error('"toggle all" checkbox not found')
+    } else {
+      this.$toggleAllCheckbox = this.$container.querySelector('.toggle_all')
+    }
+
+    this.$checkboxes = this.$container.querySelectorAll('input[type="checkbox"]:not(.toggle_all)')
+  }
+
+  _bind () {
+    this.$checkboxes.forEach((el) => {
+      el.addEventListener('change', (e) => {
+        this._didChangeCheckbox(e.target)
+      })
+    })
+
+    this.$toggleAllCheckbox.addEventListener('change', (_e) => {
+      this._didChangeToggleAllCheckbox()
+    })
+  }
+
+  _didChangeCheckbox (_checkbox) {
+    const numChecked = [...this.$checkboxes].filter(el => el.checked).length
+    const allChecked = numChecked === this.$checkboxes.length
+    const someChecked = (numChecked > 0) && (numChecked < this.$checkboxes.length)
+
+    this.$toggleAllCheckbox.checked = allChecked
+    this.$toggleAllCheckbox.indeterminate = someChecked
+  }
+
+  _didChangeToggleAllCheckbox () {
+    const setting = this.$toggleAllCheckbox.checked
+    this.$checkboxes.forEach((el) => {
+      el.checked = setting
+    })
+    return setting
+  }
+}
+
+export default CheckboxToggler

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