adminterface 0.0.0 → 0.2.0

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__/detached_dropdown.spec.js

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+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,151 @@
+/* eslint-env jest */
+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}]`)
+  })
+})