adminterface 0.0.0 → 0.2.3

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

@@ -0,0 +1,224 @@
+import fs from 'fs'
+import path from 'path'
+import Sortable from 'sortablejs'
+import HasManyClass from '../has_many'
+
+jest.mock('sortablejs')
+
+describe('HasMany', () => {
+  const html = fs.readFileSync(path.resolve(__dirname, './has_many.html'))
+  let element
+
+  const 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]"]'
+  }
+
+  beforeEach(() => {
+    document.documentElement.innerHTML = html
+    element = document.querySelector('div')
+    global.adminterface = {
+      addObserver: jest.fn()
+    }
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  test('constructor initiates correctly', () => {
+    const spyOnBind = jest.spyOn(HasManyClass.prototype, '_bind')
+    spyOnBind.mockImplementation(() => {})
+
+    const HasMany = new HasManyClass(element)
+    expect(HasMany.element).toStrictEqual(element)
+
+    expect(spyOnBind).toHaveBeenCalledTimes(1)
+  })
+
+  test('bind calls bindEvents, initSortable and admininterface', () => {
+    const spyOnBindEvents = jest.spyOn(HasManyClass.prototype, '_bindEvents')
+    spyOnBindEvents.mockImplementation(() => {})
+
+    const spyOnInitSortable = jest.spyOn(HasManyClass.prototype, '_initSortable')
+    spyOnInitSortable.mockImplementation(() => {})
+
+    const HasMany = new HasManyClass(element)
+
+    expect(spyOnBindEvents).toHaveBeenCalledWith(element)
+    expect(spyOnInitSortable).toHaveBeenCalledTimes(1)
+    expect(global.adminterface.addObserver).toHaveBeenCalledTimes(1)
+    expect(global.adminterface.addObserver).toHaveBeenCalledWith(
+      element,
+      HasMany,
+      HasMany.constructor.name,
+      []
+    )
+  })
+
+  test('initSortable assigns new instance of Sortable to sortable property', () => {
+    const spyOnBindEvents = jest.spyOn(HasManyClass.prototype, '_bindEvents')
+    spyOnBindEvents.mockImplementation(() => {})
+
+    const HasMany = new HasManyClass(element)
+
+    const MockSortableArgument = {
+      handle: '.handle',
+      animation: 150,
+      ghostClass: 'sortable-placeholder',
+      dragClass: 'sortable-drag',
+      onUpdate: expect.any(Function)
+    }
+
+    expect(Sortable).toHaveBeenCalledTimes(1)
+    expect(Sortable).toHaveBeenCalledWith(
+      document.querySelector(HasMany.options.list),
+      MockSortableArgument
+    )
+    const sortable = new Sortable(
+      document.querySelector(HasMany.options.list),
+      MockSortableArgument
+    )
+    expect(HasMany.sortable.toString()).toStrictEqual(sortable.toString())
+  })
+
+  test('recomputePosition changes sortableInput value', () => {
+    const query = 'input[name$="[address]"]'
+    const sortableInput = element.querySelector(query)
+
+    expect(sortableInput.value.length).not.toEqual(0)
+
+    const HasMany = new HasManyClass(element)
+    HasMany._recomputePosition()
+
+    expect(sortableInput.value.length).toEqual(0)
+  })
+
+  test('bindDestroyEvent called with element and change event added', () => {
+    const spyOnBindDestroyEvent = jest.spyOn(
+      HasManyClass.prototype,
+      '_bindDestroyEvent'
+    )
+    const destroyInput = document.querySelector(options.destroyInput)
+    destroyInput.addEventListener = jest.fn()
+
+    new HasManyClass(element) // eslint-disable-line no-new
+
+    expect(spyOnBindDestroyEvent).toHaveBeenCalledTimes(1)
+    expect(spyOnBindDestroyEvent).toHaveBeenCalledWith(destroyInput)
+
+    expect(destroyInput.addEventListener).toHaveBeenCalledTimes(1)
+    expect(destroyInput.addEventListener).toHaveBeenCalledWith(
+      'change',
+      expect.any(Function)
+    )
+  })
+
+  test('bindRemoveEvent called with element and click event added', () => {
+    const spyOnBindRemoveEvent = jest.spyOn(
+      HasManyClass.prototype,
+      '_bindRemoveEvent'
+    )
+    const removeLinks = document.querySelector(options.removeLink)
+    removeLinks.addEventListener = jest.fn()
+
+    new HasManyClass(element) // eslint-disable-line no-new
+
+    expect(spyOnBindRemoveEvent).toHaveBeenCalledTimes(1)
+    expect(spyOnBindRemoveEvent).toHaveBeenCalledWith(removeLinks)
+
+    expect(removeLinks.addEventListener).toHaveBeenCalledTimes(1)
+    expect(removeLinks.addEventListener).toHaveBeenCalledWith(
+      'click',
+      expect.any(Function)
+    )
+  })
+
+  test('bindRemoveEventCallBack', () => {
+    const mockEvent = {
+      preventDefault: () => {},
+      target: document.body.querySelector('fieldset')
+    }
+    const spyOnRecomputePosition = jest.spyOn(
+      HasManyClass.prototype,
+      '_recomputePosition'
+    )
+    const HasMany = new HasManyClass(element)
+    const spyOnDispatch = jest.spyOn(HasMany.element, 'dispatchEvent')
+
+    const fieldSet = mockEvent.target.closest(HasMany.options.item)
+    fieldSet.remove = jest.fn()
+
+    const parent = HasMany.element
+    const removeBeforeEvent = HasMany.events.removeBefore
+    removeBeforeEvent.detail = { fieldSet, parent }
+    const removeAfterEvent = HasMany.events.removeAfter
+    removeAfterEvent.detail = { fieldSet, parent }
+
+    const output = HasMany._bindRemoveEventCallBack(mockEvent)
+
+    expect(spyOnRecomputePosition).toHaveBeenCalledTimes(1)
+    expect(spyOnDispatch).toHaveBeenCalledTimes(2)
+    expect(spyOnDispatch.mock.calls).toMatchObject([
+      [removeBeforeEvent],
+      [removeAfterEvent]
+    ])
+    expect(fieldSet.remove).toHaveBeenCalledTimes(1)
+    expect(output).toBeTruthy()
+  })
+
+  test('bindAddEvent called with correctly element and click event added', () => {
+    const spyOnBindAddEvent = jest.spyOn(
+      HasManyClass.prototype,
+      '_bindAddEvent'
+    )
+
+    const addLinks = document.querySelector(options.addLink)
+    addLinks.addEventListener = jest.fn()
+
+    new HasManyClass(element) // eslint-disable-line no-new
+
+    expect(spyOnBindAddEvent).toHaveBeenCalledTimes(1)
+    expect(spyOnBindAddEvent).toHaveBeenCalledWith(addLinks)
+
+    expect(addLinks.addEventListener).toHaveBeenCalledTimes(1)
+    expect(addLinks.addEventListener).toHaveBeenCalledWith(
+      'click',
+      expect.any(Function)
+    )
+  })
+
+  test('bindAddEventCallBack', () => {
+    const mockEvent = {
+      preventDefault: () => {},
+      target: document.body.querySelector(options.addLink)
+    }
+    const HasMany = new HasManyClass(element)
+    const spyOnDispatchEvent = jest.spyOn(HasMany.element, 'dispatchEvent')
+    const $list = HasMany.element.querySelector(HasMany.options.list)
+    const spyOnListAppendChild = jest.spyOn($list, 'appendChild')
+    const spyOnBindEvents = jest.spyOn(HasMany, '_bindEvents')
+    const spyOnRecomputePosition = jest.spyOn(HasMany, '_recomputePosition')
+    const beforeAdd = HasMany.events.addBefore
+    const parent = HasMany.element
+    const datasetHTML = document.createElement('div')
+
+    const output = HasMany._bindAddEventCallBack(mockEvent)
+
+    expect(spyOnDispatchEvent).toHaveBeenCalledTimes(2)
+    expect(spyOnDispatchEvent.mock.calls).toMatchObject([
+      [beforeAdd, [parent]],
+      [HasMany.events.addAfter]
+    ])
+
+    expect(spyOnListAppendChild).toHaveBeenCalledTimes(1)
+    expect(spyOnListAppendChild).toHaveBeenCalledWith(datasetHTML)
+    expect(spyOnBindEvents).toHaveBeenCalledTimes(1)
+    expect(spyOnBindEvents).toHaveBeenCalledWith(datasetHTML)
+    expect(spyOnRecomputePosition).toHaveBeenCalledTimes(1)
+    expect(output).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,280 @@
+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