adminterface 0.0.0 → 0.2.0

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

@@ -0,0 +1,90 @@
+/* global adminterface */
+import SelectInput from './select_input'
+import { toHTMLAttrString } from '../utils'
+
+class CountryInput extends SelectInput {
+  constructor (name, options) {
+    super(name, options)
+    this.countries = this._getAllCountries()
+    this.priorityCountries = this.options.priority_countries || []
+    this.exceptCountries = this.options.except || []
+    this.onlyCountries = this.options.only || []
+  }
+
+  _exceptCountries () {
+    const _self = this
+
+    if (Array.isArray(this.exceptCountries) && this.exceptCountries.length) {
+      this.countries = this.countries.filter(function (item) {
+        return !_self.exceptCountries.includes(item.code)
+      })
+    }
+  }
+
+  _onlyCountries () {
+    const _self = this
+
+    if (Array.isArray(this.onlyCountries) && this.onlyCountries.length) {
+      this.countries = this.countries.filter(function (item) {
+        return _self.onlyCountries.includes(item.code)
+      })
+    }
+  }
+
+  _prioritizeCountries () {
+    const priorityCountries = []
+    const _self = this
+
+    if (Array.isArray(this.priorityCountries) && this.priorityCountries.length) {
+      this.priorityCountries.forEach(function (code) {
+        const item = _self.countries.find(item => item.code === code)
+        if (item) priorityCountries.push(item)
+      })
+
+      const restOfCountries = this.countries.filter(function (item) {
+        return !priorityCountries.find(el => el.code === item.code)
+      })
+
+      this.countries = priorityCountries.concat(this._divider()).concat(restOfCountries)
+    }
+  }
+
+  _getAllCountries () {
+    const countries = adminterface.meta.countries
+
+    if (countries.error) {
+      console.error(countries)
+      return []
+    } else {
+      return countries
+    }
+  }
+
+  _formatCountries () {
+    const _self = this
+
+    this.countries = this.countries.map(function (item) {
+      if (item === _self._divider()) {
+        return item
+      } else {
+        return [item.translated_name, item.name]
+      }
+    })
+  }
+
+  _optionsHTML () {
+    this._onlyCountries()
+    this._exceptCountries()
+    this._prioritizeCountries()
+    this._formatCountries()
+
+    const collection = this.countries
+    return collection.length ? this._optionsForSelect(collection) : ''
+  }
+
+  _inputHTML () {
+    return `<select ${toHTMLAttrString(this._inputHTMLOptions())}>${this._optionsHTML()}</select>`
+  }
+}
+
+export default CountryInput

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

@@ -0,0 +1,41 @@
+import BaseInput from './base_input'
+
+class DatalistInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: 'text',
+      list: `batch-form-${this.name}-datalist`
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _optionsForSelect (collection) {
+    return ((() => {
+      const result = []
+
+      collection.forEach(v => {
+        let option
+        if (Array.isArray(v)) {
+          option = `<option value=${v[1]}>${v[0]}</option>`
+        } else {
+          option = `<option>${v}</option>`
+        }
+        result.push(option)
+      })
+
+      return result
+    })()).join('')
+  }
+
+  _optionsHTML () {
+    const collection = this.options.collection || []
+    return collection.length ? this._optionsForSelect(collection) : ''
+  }
+
+  _inputHTML () {
+    return `${super._inputHTML()}<datalist id="batch-form-${this.name}-datalist">${this._optionsHTML()}</datalist>`
+  }
+}
+
+export default DatalistInput

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

@@ -0,0 +1,11 @@
+import BaseInput from './base_input'
+
+class DatePickerInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = { type: 'text' }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default DatePickerInput

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

@@ -0,0 +1,11 @@
+import BaseInput from './base_input'
+
+class DateTimePickerInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = { type: 'text' }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default DateTimePickerInput

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

@@ -0,0 +1,21 @@
+import BaseInput from './base_input'
+
+class HiddenInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: 'hidden'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _defaultWrapperHTMLOptions () {
+    const options = {
+      class: 'd-none'
+    }
+
+    return { ...super._defaultWrapperHTMLOptions, ...options }
+  }
+}
+
+export default HiddenInput

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

@@ -0,0 +1,13 @@
+import BaseInput from './base_input'
+
+class PasswordInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: 'password'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default PasswordInput

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

@@ -0,0 +1,13 @@
+import ChoicesInput from './choices_input'
+
+class RadioInput extends ChoicesInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: 'radio'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default RadioInput

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

@@ -0,0 +1,68 @@
+import BaseInput from './base_input'
+import { toHTMLAttrString } from '../utils'
+
+class SelectInput extends BaseInput {
+  constructor (name, options) {
+    super(name, options)
+    this.multiple = this.options.multiple || false
+    this.include_blank = this.options.include_blank || false
+  }
+
+  _divider () {
+    return '-'
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-select ${this.options.as}`
+    }
+
+    if (this.multiple) { options.multiple = true }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _blankOption () {
+    let label = ''
+
+    if (typeof (this.include_blank) === 'string') {
+      label = this.options.include_blank
+    }
+
+    return `<option value>${label}</option>`
+  }
+
+  _optionsForSelect (collection) {
+    return ((() => {
+      const result = []
+      const _self = this
+
+      if (this.include_blank) result.push(this._blankOption())
+
+      collection.forEach(v => {
+        let option
+        if (Array.isArray(v)) {
+          option = `<option value="${v[1]}">${v[0]}</option>`
+        } else if (v === _self._divider()) {
+          option = '<option value="" disabled>-------------</option>'
+        } else {
+          option = `<option value="${v}">${v}</option>`
+        }
+        result.push(option)
+      })
+
+      return result
+    })()).join('')
+  }
+
+  _optionsHTML () {
+    const collection = this.options.collection || []
+    return collection.length ? this._optionsForSelect(collection) : ''
+  }
+
+  _inputHTML () {
+    return `<select ${toHTMLAttrString(this._inputHTMLOptions())}>${this._optionsHTML()}</select>`
+  }
+}
+
+export default SelectInput

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

@@ -0,0 +1,13 @@
+import BaseInput from './base_input'
+
+class StringInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: (this.options.as === 'phone' ? 'tel' : this.options.as)
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default StringInput

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

@@ -0,0 +1,9 @@
+import BooleanInput from './boolean_input'
+
+class SwitchInput extends BooleanInput {
+  _inputGroup (html) {
+    return `<div class="form-check form-switch">${html}</div>`
+  }
+}
+
+export default SwitchInput

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

@@ -0,0 +1,12 @@
+import BaseInput from './base_input'
+import { toHTMLAttrString } from '../utils'
+
+class TextInput extends BaseInput {
+  _inputHTML () {
+    return `
+      <textarea ${toHTMLAttrString(this._inputHTMLOptions())}></textarea>
+    `
+  }
+}
+
+export default TextInput

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

@@ -0,0 +1,13 @@
+import BaseInput from './base_input'
+
+class TimePickerInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      type: 'time'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default TimePickerInput

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

@@ -0,0 +1,66 @@
+/* global adminterface */
+import SelectInput from './select_input'
+import { toHTMLAttrString } from '../utils'
+
+class TimeZoneInput extends SelectInput {
+  constructor (name, options) {
+    super(name, options)
+    this.timeZones = this._getAllTimeZones()
+    this.priorityTimeZones = this.options.priority_zones || []
+  }
+
+  _prioritizeTimeZones () {
+    const priorityTimeZones = []
+    const _self = this
+
+    if (Array.isArray(this.priorityTimeZones) && this.priorityTimeZones.length) {
+      this.priorityTimeZones.forEach(function (zone) {
+        const item = _self.timeZones.find(item => item.name === zone.name)
+        if (item) priorityTimeZones.push(item)
+      })
+
+      const restOfTimeZones = this.timeZones.filter(function (item) {
+        return !priorityTimeZones.find(el => el.name === item.name)
+      })
+
+      this.timeZones = priorityTimeZones.concat(this._divider()).concat(restOfTimeZones)
+    }
+  }
+
+  _getAllTimeZones () {
+    const timeZones = adminterface.meta.timeZones
+
+    if (timeZones.error) {
+      console.error(timeZones)
+      return []
+    } else {
+      return timeZones
+    }
+  }
+
+  _formatTimeZones () {
+    const _self = this
+
+    this.timeZones = this.timeZones.map(function (item) {
+      if (item === _self._divider()) {
+        return item
+      } else {
+        return [item.translated_name, item.name]
+      }
+    })
+  }
+
+  _optionsHTML () {
+    this._prioritizeTimeZones()
+    this._formatTimeZones()
+
+    const collection = this.timeZones
+    return collection.length ? this._optionsForSelect(collection) : ''
+  }
+
+  _inputHTML () {
+    return `<select ${toHTMLAttrString(this._inputHTMLOptions())}>${this._optionsHTML()}</select>`
+  }
+}
+
+export default TimeZoneInput

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

@@ -0,0 +1,18 @@
+import { queryStringToParams, hasTurbolinks, turbolinksVisit, toQueryString } from './utils'
+
+class PerPage {
+  static _update (event) {
+    const params = queryStringToParams().filter(({ name }) => name !== 'per_page' && name !== 'page')
+
+    params.push({ name: 'per_page', value: this.value })
+
+    if (hasTurbolinks()) {
+      event.preventDefault()
+      turbolinksVisit(params)
+    } else {
+      window.location.search = toQueryString(params)
+    }
+  }
+}
+
+export default PerPage

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

@@ -0,0 +1,94 @@
+/* global DOMParser, adminterface */
+import { toHTMLCssString } from '../utils'
+
+class InputCounter {
+  constructor (element, options) {
+    const defaults = {
+      type: 'letter',
+      containerClass: '.input-counter-container',
+      statsContainerClass: '.input-counter-stats',
+      charCountClass: '.input-counter-char-count',
+      charLeftClass: '.input-counter-char-left',
+      charLimitClass: '.input-counter-char-limit',
+      limit: 150
+    }
+
+    this.element = element
+    this.options = { ...defaults, ...options }
+
+    this._bind()
+  }
+
+  _count () {
+    const el = this.element
+    const limit = this.options.limit
+    let count = 0
+    let left = limit
+    let trimmedText
+
+    if (el.value) {
+      if (this.options.type === 'word') {
+        count = el.value.split(' ').length
+      } else {
+        count = el.value.length
+      }
+    }
+
+    if (count >= limit) {
+      if (this.options.type === 'word') {
+        trimmedText = el.value.split(' ').slice(0, limit).join(' ')
+      } else {
+        trimmedText = el.value.substring(0, limit)
+      }
+
+      el.value = trimmedText
+      left = 0
+      count = limit
+    } else {
+      left = limit - count
+    }
+
+    this._update(count, left)
+  }
+
+  _update (count, left) {
+    const limit = this.options.limit
+    const elContainer = this.element.closest(this.options.containerClass)
+    const elCount = elContainer.querySelector(this.options.charCountClass)
+    const elLeft = elContainer.querySelector(this.options.charLeftClass)
+    const elLimit = elContainer.querySelector(this.options.charLimitClass)
+
+    if (elCount) elCount.innerHTML = count.toString()
+    if (elLeft) elLeft.innerHTML = left.toString()
+    if (elLimit) elLimit.innerHTML = limit.toString()
+  }
+
+  _insert () {
+    const el = this.element
+    const wrapper = document.createElement('div')
+
+    const statsHtml = `
+      <ul class="${toHTMLCssString(this.options.statsContainerClass)}">
+        <li class="${toHTMLCssString(this.options.charCountClass)}"></li>
+        <li class="${toHTMLCssString(this.options.charLeftClass)}"></li>
+        <li class="${toHTMLCssString(this.options.charLimitClass)}"></li>
+      </ul>
+    `
+    const statsNode = new DOMParser().parseFromString(statsHtml, 'text/html').body.childNodes[0]
+
+    el.parentNode.insertBefore(wrapper, el)
+    wrapper.classList.add(toHTMLCssString(this.options.containerClass))
+    wrapper.appendChild(el)
+    wrapper.appendChild(statsNode)
+  }
+
+  _bind () {
+    this._insert()
+    this._count()
+    this.element.addEventListener('keyup', (_e) => this._count())
+
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default InputCounter

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

@@ -0,0 +1,70 @@
+/* global DOMParser, adminterface */
+import { getObjectValue, toHTMLCssString } from '../utils'
+
+class PasswordVisibility {
+  constructor (element, options) {
+    const translations = adminterface.meta.translations
+    const defaults = {
+      activeClass: 'show',
+      wrapperClass: '.input-group'
+    }
+
+    this.element = element
+    this.options = { ...defaults, ...options }
+    this.translations = (getObjectValue(translations, 'inputs.password') || {})
+
+    this._bind()
+  }
+
+  _template () {
+    return `
+      <div class="input-group-text password-visibility-toggler">
+        <i data-mode="show" data-bs-toggle="tooltip" title="${getObjectValue(this.translations, 'visibility.show')}"></i>
+        <i data-mode="hide" data-bs-toggle="tooltip" title="${getObjectValue(this.translations, 'visibility.hide')}"></i>
+      </div>
+    `
+  }
+
+  _isWrapped () {
+    return this.element.parentNode.classList.contains(toHTMLCssString(this.options.wrapperClass))
+  }
+
+  _insert () {
+    const el = this.element
+    const toggler = new DOMParser().parseFromString(this._template(), 'text/html').body.childNodes[0]
+
+    if (!this._isWrapped()) {
+      const wrapper = document.createElement('div')
+      el.parentNode.insertBefore(wrapper, el)
+      wrapper.classList.add(toHTMLCssString(this.options.wrapperClass))
+      wrapper.appendChild(el)
+    }
+
+    el.parentNode.insertBefore(toggler, el.nextSibling)
+  }
+
+  _bind () {
+    this._insert()
+    const group = this.element.closest('.password.input')
+    const trigger = group.querySelector('.password-visibility-toggler')
+    const input = group.querySelector('input')
+    const activeClass = this.options.activeClass
+
+    trigger.addEventListener('click', function (e) {
+      e.preventDefault()
+
+      if (trigger.classList.contains(activeClass)) {
+        trigger.classList.remove(activeClass)
+        input.type = 'password'
+      } else {
+        trigger.classList.add(activeClass)
+        input.type = 'text'
+      }
+    })
+
+    this.eventTarget = group
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default PasswordVisibility

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

@@ -0,0 +1,47 @@
+import CheckboxToggler from '../lib/checkbox_toggler'
+
+class TableCheckboxToggler extends CheckboxToggler {
+  _bind () {
+    super._bind(...arguments)
+
+    const $cells = this.$container.querySelectorAll('tbody td')
+
+    $cells.forEach((el) => {
+      el.addEventListener('click', (e) => {
+        if (e.target.type !== 'checkbox') {
+          this._didClickCell(e.target)
+        }
+      })
+    })
+  }
+
+  _didChangeCheckbox (checkbox) {
+    super._didChangeCheckbox(...arguments)
+
+    if (checkbox.checked) {
+      checkbox.closest('tr').classList.add('selected')
+    } else {
+      checkbox.closest('tr').classList.remove('selected')
+    }
+  }
+
+  _didChangeToggleAllCheckbox () {
+    const rows = this.$container.querySelectorAll('tbody tr')
+    const checked = super._didChangeToggleAllCheckbox(...arguments)
+
+    rows.forEach((row) => {
+      if (checked) {
+        row.classList.add('selected')
+      } else {
+        row.classList.remove('selected')
+      }
+    })
+  }
+
+  _didClickCell (cell) {
+    const $checkbox = cell.parentNode.querySelector('input[type="checkbox"]')
+    if ($checkbox) $checkbox.click()
+  }
+}
+
+export default TableCheckboxToggler