adminterface 0.0.0 → 0.2.3

data/app/javascript/adminterface/initializers/bootstrap.js

@@ -0,0 +1,29 @@
+/* global adminterface */
+import { Popover, Tooltip } from 'bootstrap'
+
+const initBootstrap = function (element) {
+  const popoverTriggerList = [].slice.call(element.querySelectorAll('[data-bs-toggle="popover"]'))
+  const tooltipTriggerList = [].slice.call(element.querySelectorAll('[data-bs-toggle="tooltip"]'))
+
+  popoverTriggerList.map((el) => {
+    const instance = new Popover(el)
+    adminterface.addObserver(el, instance, instance.constructor.name)
+    return instance
+  })
+
+  tooltipTriggerList.map((el) => {
+    const instance = new Tooltip(el)
+    adminterface.addObserver(el, instance, instance.constructor.name)
+    return instance
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initBootstrap(document)
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initBootstrap(el.detail.dialogForm)
+})
+
+export default initBootstrap

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

@@ -0,0 +1,23 @@
+import Rails from '@rails/ujs'
+import ConfirmDialog from '../lib/confirm_dialog'
+
+let __SkipConfirmation = false
+
+Rails.confirm = function (message, element) {
+  const options = JSON.parse(element.dataset.aaConfirmDialog || '{}')
+  const inputs = JSON.parse(element.dataset.inputs || '{}')
+
+  if (__SkipConfirmation) return true
+
+  function onConfirm () {
+    __SkipConfirmation = true
+    element.click()
+    __SkipConfirmation = false
+  }
+
+  /* eslint-disable no-new */
+  new ConfirmDialog(message, inputs, options, onConfirm)
+  /* eslint-enable no-new */
+
+  return false
+}

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

@@ -0,0 +1,16 @@
+import DetachedDropdown from '../lib/detached_dropdown'
+
+const initDetachedDropdown = function (element) {
+  const dropdownTriggerList = [].slice.call(element.querySelectorAll('.dropdown'))
+  dropdownTriggerList.map((el) => new DetachedDropdown(el, {}))
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initDetachedDropdown(document.getElementById('active_admin_content'))
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initDetachedDropdown(el.detail.dialogForm)
+})
+
+export default initDetachedDropdown

data/app/javascript/adminterface/initializers/drawer_menu_item_toggler.js

@@ -0,0 +1,15 @@
+import { Dropdown } from 'bootstrap'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const shouldToggle =
+    document.body.classList.contains('layout-navigation-sidebar') ||
+      document.body.classList.contains('layout-navigation-aside')
+
+  if (shouldToggle) {
+    document.querySelectorAll('#header .dropdown-toggle.active').forEach((element) => {
+      const dropdown = Dropdown.getOrCreateInstance(element)
+      dropdown.show()
+      element.blur()
+    })
+  }
+})

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

@@ -0,0 +1,23 @@
+/* global adminterface */
+import Filters from '../lib/filters'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const clearFilterBtn = document.querySelector('.clear_filters_btn')
+  const filterForm = document.querySelector('.filter_form')
+  const selectAndSearch = [].slice.call(document.querySelectorAll('.filter_form_field.select_and_search select'))
+
+  if (clearFilterBtn) {
+    clearFilterBtn.addEventListener('click', Filters._clearForm)
+    adminterface.addObserver(clearFilterBtn, { events: { click: Filters._clearForm } }, 'filters.clear')
+  }
+
+  if (filterForm) {
+    filterForm.addEventListener('submit', Filters._disableEmptyInputFields)
+    adminterface.addObserver(filterForm, { events: { submit: Filters._disableEmptyInputFields } }, 'filters.submit')
+  }
+
+  selectAndSearch.forEach((el) => {
+    el.addEventListener('change', Filters._setSearchType)
+    adminterface.addObserver(el, { events: { change: Filters._setSearchType } }, 'filters.selectAndSearch')
+  })
+})

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

@@ -0,0 +1,7 @@
+import HasMany from '../lib/has_many'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const hasManyTriggerList = [].slice.call(document.querySelectorAll('.has_many_container'))
+
+  hasManyTriggerList.map((el) => new HasMany(el))
+})

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

@@ -0,0 +1,10 @@
+import HeaderToggler from '../lib/header_toggler'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const togglerTriggerList = [].slice.call(document.querySelectorAll('[data-aa-header-toggler]'))
+  togglerTriggerList.map((el) => {
+    const options = JSON.parse(el.dataset.aaHeaderToggler || '{}')
+
+    return new HeaderToggler(el, options)
+  })
+})

data/app/javascript/adminterface/initializers/index.js

@@ -0,0 +1,2 @@
+const initializers = require.context('.', true, /\.js$/)
+initializers.keys().forEach(initializers)

data/app/javascript/adminterface/initializers/per_page.js

@@ -0,0 +1,12 @@
+/* global adminterface */
+import PerPage from '../lib/per_page'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const target = document.querySelector('.pagination_per_page select')
+
+  if (target) {
+    target.addEventListener('change', PerPage._update)
+
+    adminterface.addObserver(target, { events: { change: PerPage._update } }, 'perPage')
+  }
+})

data/app/javascript/adminterface/initializers/plugins/flatpickr.js

@@ -0,0 +1,24 @@
+/* global adminterface */
+import flatpickr from 'flatpickr'
+
+const initFlatpickr = (element) => {
+  const flatpickrTriggerList = [].slice.call(element.querySelectorAll('[data-aa-flatpickr]'))
+
+  flatpickrTriggerList.map((el) => {
+    const options = JSON.parse(el.dataset.aaFlatpickr || '{}')
+    const instance = flatpickr(el, options)
+
+    adminterface.addObserver(el, instance, 'flatpickr')
+    return instance
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initFlatpickr(document)
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initFlatpickr(el.detail.dialogForm)
+})
+
+export default initFlatpickr

data/app/javascript/adminterface/initializers/plugins/input_counter.js

@@ -0,0 +1,21 @@
+import InputCounter from '../../lib/plugins/input_counter'
+
+const initInputCounter = function (element) {
+  const inputCounterTriggerList = [].slice.call(element.querySelectorAll('[data-aa-input-counter]'))
+
+  inputCounterTriggerList.map((el) => {
+    const options = JSON.parse(el.dataset.aaInputCounter || '{}')
+
+    return new InputCounter(el, options)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initInputCounter(document)
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initInputCounter(el.detail.dialogForm)
+})
+
+export default initInputCounter

data/app/javascript/adminterface/initializers/plugins/password_visibility.js

@@ -0,0 +1,23 @@
+import PasswordVisibility from '../../lib/plugins/password_visibility'
+import initBootstrap from '../bootstrap'
+
+const initPasswordVisibility = function (element) {
+  const visibilityTriggerList = [].slice.call(element.querySelectorAll('[data-aa-password-visibility]'))
+  visibilityTriggerList.map((el) => {
+    const options = JSON.parse(el.dataset.aaPasswordVisibility || '{}')
+    const instance = new PasswordVisibility(el, options)
+
+    initBootstrap(instance.eventTarget)
+    return instance
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initPasswordVisibility(document)
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initPasswordVisibility(el.detail.dialogForm)
+})
+
+export default initPasswordVisibility

data/app/javascript/adminterface/initializers/plugins/tom_select.js

@@ -0,0 +1,24 @@
+/* global adminterface */
+import TomSelect from 'tom-select'
+
+const initTomSelect = function (element) {
+  const tomSelectTriggerList = [].slice.call(element.querySelectorAll('[data-aa-tom-select]'))
+
+  tomSelectTriggerList.map((el) => {
+    const options = JSON.parse(el.dataset.aaTomSelect || '{}')
+    const instance = new TomSelect(el, options)
+
+    adminterface.addObserver(el, instance, instance.constructor.name)
+    return instance
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTomSelect(document)
+})
+
+document.addEventListener('confirm_dialog:before_open', (el) => {
+  initTomSelect(el.detail.dialogForm)
+})
+
+export default initTomSelect

data/app/javascript/adminterface/lib/__tests__/checkbox_toggler.html

@@ -0,0 +1,5 @@
+<div id="find-me">
+  <input type="checkbox" class="toggle_all" checked>
+  <input type="checkbox" class="toggle_one" checked>
+  <input type="checkbox" class="toggle_two" checked>
+</div>

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

@@ -0,0 +1,110 @@
+import fs from 'fs'
+import path from 'path'
+import CheckboxTogglerClass from '../checkbox_toggler'
+
+describe('CheckboxToggler', () => {
+  const html = fs.readFileSync(path.resolve(__dirname, './checkbox_toggler.html'))
+  const container = '#find-me'
+  const options = 'options'
+
+  beforeEach(() => {
+    document.documentElement.innerHTML = html.toString()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  test('constructor initiates correctly', () => {
+    const spyOnInit = jest.spyOn(CheckboxTogglerClass.prototype, '_init')
+    const spyOnBind = jest.spyOn(CheckboxTogglerClass.prototype, '_bind')
+
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+
+    expect(CheckboxToggler.options).toStrictEqual(options)
+    expect(CheckboxToggler.container).toStrictEqual(container)
+
+    expect(spyOnInit).toHaveBeenCalledTimes(1)
+    expect(spyOnBind).toHaveBeenCalledTimes(1)
+  })
+
+  test('init throws error if container is null', () => {
+    expect(() => { new CheckboxTogglerClass(null, options) }).toThrow( // eslint-disable-line no-new
+      'Container element not found'
+    )
+  })
+
+  test('init throws error if toggle checkbox missing', () => {
+    const element = document.createElement('div')
+    element.id = 'find-me'
+    document.documentElement.innerHTML = element.outerHTML
+
+    expect(() => { new CheckboxTogglerClass(container, options) }).toThrow( // eslint-disable-line no-new
+      '"toggle all" checkbox not found'
+    )
+  })
+
+  test('init sets $container, $toggleAllCheckbox, $checkboxes', () => {
+    const $container = document.querySelector(container)
+    const $toggleAllCheckbox = $container.querySelector('.toggle_all')
+    const $checkboxes = $container.querySelectorAll('input[type="checkbox"]:not(.toggle_all)')
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+
+    expect(CheckboxToggler.$container).toStrictEqual($container)
+    expect(CheckboxToggler.$toggleAllCheckbox).toStrictEqual($toggleAllCheckbox)
+    expect(CheckboxToggler.$checkboxes).toStrictEqual($checkboxes)
+  })
+
+  test('bind triggers addEventListener', () => {
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+    const spyOnCheckboxesAddEvent = jest.spyOn(
+      CheckboxToggler.$checkboxes[0], 'addEventListener'
+    )
+    const spyOnToggleAllCheckboxAddEvent = jest.spyOn(
+      CheckboxToggler.$toggleAllCheckbox, 'addEventListener'
+    )
+
+    CheckboxToggler._bind()
+
+    expect(spyOnCheckboxesAddEvent).toHaveBeenCalledTimes(1)
+    expect(spyOnCheckboxesAddEvent).toHaveBeenCalledWith(
+      'change',
+      expect.any(Function)
+    )
+
+    expect(spyOnToggleAllCheckboxAddEvent).toHaveBeenCalledTimes(1)
+    expect(spyOnToggleAllCheckboxAddEvent).toHaveBeenCalledWith(
+      'change',
+      expect.any(Function)
+    )
+  })
+
+  test('didChangeCheckbox sets toggleAllCheckbox checked to true when all checked', () => {
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+    CheckboxToggler._didChangeCheckbox()
+
+    expect(CheckboxToggler.$toggleAllCheckbox.checked).toBeTruthy()
+    expect(CheckboxToggler.$toggleAllCheckbox.indeterminate).toBeFalsy()
+  })
+
+  test('didChangeCheckbox sets toggleAllCheckbox checked to false when some checked', () => {
+    const inputElementToggleTwo = document.querySelector('input.toggle_two')
+    inputElementToggleTwo.checked = false
+
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+    CheckboxToggler._didChangeCheckbox()
+
+    expect(CheckboxToggler.$toggleAllCheckbox.checked).toBeFalsy()
+    expect(CheckboxToggler.$toggleAllCheckbox.indeterminate).toBeTruthy()
+  })
+
+  test('didChangeToggleAllCheckbox', () => {
+    const CheckboxToggler = new CheckboxTogglerClass(container, options)
+    const setting = CheckboxToggler._didChangeToggleAllCheckbox()
+
+    expect(setting).toBeTruthy()
+    CheckboxToggler.$checkboxes.forEach(el => {
+      expect(el.checked).toStrictEqual(setting)
+    })
+  })
+})

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

@@ -0,0 +1,69 @@
+import DetachedDropdownClass from '../detached_dropdown'
+
+describe('DetachedDropdown', () => {
+  const element = document.createElement('div')
+  const options = {
+    title: '.title-menu'
+  }
+
+  beforeEach(() => {
+    global.adminterface = {
+      addObserver: jest.fn()
+    }
+  })
+
+  test('constructor initiates properties and call bind correctly', () => {
+    const spyOnBind = jest.spyOn(DetachedDropdownClass.prototype, '_bind')
+    spyOnBind.mockImplementation(() => {})
+    const DetachedDropdown = new DetachedDropdownClass(element, options)
+
+    expect(DetachedDropdown.element).toEqual(element)
+    expect(DetachedDropdown.options).toEqual({
+      menu: '.dropdown-menu',
+      ...options
+    })
+    expect(spyOnBind).toHaveBeenCalledTimes(1)
+    spyOnBind.mockRestore()
+  })
+
+  test('bind method calls adminterface correctly', () => {
+    const DetachedDropdown = new DetachedDropdownClass(element, options)
+
+    expect(global.adminterface.addObserver).toHaveBeenCalledWith(
+      element,
+      DetachedDropdown,
+      DetachedDropdown.constructor.name
+    )
+  })
+
+  test('bind method add event listener correctly', () => {
+    const DetachedDropdown = new DetachedDropdownClass(element, options)
+    const spyOnAddEventListener = jest.spyOn(
+      DetachedDropdown.element,
+      'addEventListener'
+    )
+    DetachedDropdown._bind()
+
+    expect(spyOnAddEventListener).toHaveBeenCalledTimes(2)
+    expect(spyOnAddEventListener.mock.calls).toEqual([
+      ['show.bs.dropdown', expect.any(Function)],
+      ['hidden.bs.dropdown', expect.any(Function)]
+    ])
+  })
+
+  test('append method calls native WEB API append correctly', () => {
+    const testDiv = document.createElement('div')
+    const testP = document.createElement('p')
+    testDiv.append('Some text', testP)
+
+    const DetachedDropdown = new DetachedDropdownClass(element, options)
+    const spyOnAppend = jest.spyOn(document.body, 'append')
+
+    DetachedDropdown._append(document.body, testP)
+
+    expect(spyOnAppend).toHaveBeenCalledTimes(1)
+    expect(spyOnAppend).toHaveBeenCalledWith(
+      testP.parentElement.removeChild(testP)
+    )
+  })
+})

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

@@ -0,0 +1,150 @@
+import Filters from '../filters'
+import * as utilModule from '../utils'
+
+describe('Filters', () => {
+  const mockURL = '?city=tokyo&country=japan'
+  const mockEvent = {
+    preventDefault: () => {}
+  }
+
+  const spyOnLocation = jest.spyOn(window, 'location', 'get')
+  spyOnLocation.mockImplementation(() => ({ search: mockURL }))
+
+  const regex = /^(q\[|q%5B|q%5b|page|utf8|commit)/
+  const params = utilModule
+    .queryStringToParams()
+    .filter(({ name }) => !name.match(regex))
+
+  const mockElementList = [
+    {
+      value: '',
+      disabled: false,
+      type: 'input'
+    }
+  ]
+
+  let spyOnQueryStringToParams
+  let spyOnHasTurbolinks
+  let spyOnTurbolinksVisit
+  let spyOnToQueryString
+  let spyOnQuerySelectorAll
+  let spyOnSerializeArray
+  let spyOnClosest
+  let spyOnQuerySelector
+
+  beforeEach(() => {
+    document.body.innerHTML =
+      '<div class="filter_form_field">' +
+      '  <input />' +
+      '</div>'
+
+    spyOnQueryStringToParams = jest.spyOn(utilModule, 'queryStringToParams')
+
+    spyOnHasTurbolinks = jest.spyOn(utilModule, 'hasTurbolinks')
+
+    spyOnTurbolinksVisit = jest.spyOn(utilModule, 'turbolinksVisit')
+
+    spyOnToQueryString = jest.spyOn(utilModule, 'toQueryString')
+
+    spyOnQuerySelectorAll = jest.spyOn(document, 'querySelectorAll')
+    spyOnQuerySelectorAll.mockImplementation(() => [...mockElementList])
+
+    spyOnSerializeArray = jest.spyOn(utilModule, 'serializeArray')
+    spyOnSerializeArray.mockImplementation(() => [])
+
+    spyOnClosest = jest.spyOn(document.documentElement, 'closest')
+    spyOnClosest.mockImplementation(() => ({
+      querySelector: (selector) => document.querySelector(selector)
+    }))
+
+    spyOnQuerySelector = jest.spyOn(document, 'querySelector')
+
+    Filters.querySelectorAll = document.querySelectorAll
+    Filters.closest = document.documentElement.closest
+    Filters.value = 'test value'
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('clearForm: triggers queryStringToParams', () => {
+    Filters._clearForm(mockEvent)
+
+    expect(spyOnQueryStringToParams).toHaveBeenCalledTimes(1)
+  })
+
+  test('clearForm: hasTurbolinks true triggers turbolinksVisit', () => {
+    spyOnHasTurbolinks.mockImplementation(() => true)
+    spyOnTurbolinksVisit.mockImplementation(params => params)
+    Filters._clearForm(mockEvent)
+
+    expect(spyOnTurbolinksVisit).toHaveBeenCalledTimes(1)
+    expect(spyOnTurbolinksVisit).toHaveBeenCalledWith(params)
+  })
+
+  test('clearForm: hasTurbolinks false triggers toQueryString', () => {
+    spyOnHasTurbolinks.mockImplementation(() => false)
+    Filters._clearForm(mockEvent)
+
+    expect(spyOnToQueryString).toHaveBeenCalledTimes(1)
+    expect(spyOnToQueryString).toHaveBeenCalledWith(params)
+  })
+
+  test('disableEmptyInputFields triggers querySelectorAll', () => {
+    const mockSelectors = 'input, textarea, select, button'
+
+    Filters._disableEmptyInputFields(mockEvent)
+
+    expect(spyOnQuerySelectorAll).toHaveBeenCalledTimes(1)
+    expect(spyOnQuerySelectorAll).toHaveBeenCalledWith(mockSelectors)
+  })
+
+  test('disableEmptyInputFields triggers serializeArray', () => {
+    Filters._disableEmptyInputFields(mockEvent)
+
+    expect(spyOnSerializeArray).toHaveBeenCalledTimes(1)
+    expect(spyOnSerializeArray).toHaveBeenCalledWith(Filters)
+  })
+
+  test('disableEmptyInputFields sets element list disable value to true', () => {
+    Filters._disableEmptyInputFields(mockEvent)
+
+    const disabledList = mockElementList.filter(el => el.disabled)
+    expect(disabledList).toHaveLength(1)
+  })
+
+  test('disableEmptyInputFields triggers turboLinksVisit if hasTurbolinks true', () => {
+    spyOnHasTurbolinks.mockImplementation(() => true)
+    Filters._disableEmptyInputFields(mockEvent)
+
+    expect(spyOnTurbolinksVisit).toHaveBeenCalledTimes(1)
+    expect(spyOnTurbolinksVisit).toHaveBeenCalledWith([])
+  })
+
+  test('disableEmptyInputFields does not trigger turboLinksVisit if hasTurbolinks false', () => {
+    spyOnHasTurbolinks.mockImplementation(() => false)
+    Filters._disableEmptyInputFields(mockEvent)
+
+    expect(spyOnTurbolinksVisit).not.toHaveBeenCalled()
+  })
+
+  test('setSearchType calls DOM API closest and querySelector', () => {
+    Filters._setSearchType()
+
+    expect(spyOnClosest).toHaveBeenCalledTimes(1)
+    expect(spyOnClosest).toHaveBeenCalledWith('.filter_form_field')
+
+    expect(spyOnQuerySelector).toHaveBeenCalledTimes(1)
+    expect(spyOnQuerySelector).toHaveBeenCalledWith('input')
+  })
+
+  test('setSearchType sets element name correctly', () => {
+    const $element = document.querySelector('input')
+    expect($element.name).toEqual('')
+
+    Filters._setSearchType()
+
+    expect($element.name).toEqual(`q[${Filters.value}]`)
+  })
+})

data/app/javascript/adminterface/lib/__tests__/has_many.html

@@ -0,0 +1,14 @@
+<div data-sortable="address">
+  <form class="has-many-list">
+    <fieldset class="has_many_fields">
+      <input type="checkbox" name="[_destroy]" checked>
+      <input type="text" name="[address]" value="Tokyo">
+      <a class="button has_many_remove"></a>
+      <a
+        class="button has_many_add"
+        data-html="<div></div>"
+        data-placeholder="script"
+      ></a>
+    </fieldset>
+  </form>
+</div>