avo 0.4.6 → 0.5.0.beta1

data/app/frontend/importmap.json.erb

@@ -0,0 +1,5 @@
+{
+  "imports": { 
+    <%= importmap_list_with_stimulus_from "app/assets/javascripts/controllers", "app/assets/javascripts/libraries" %>
+  }
+}

data/app/frontend/js/controllers/action_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['controllerDiv', 'resourceIds', 'form']
+
+  connect() {
+    this.resourceIdsTarget.value = this.resourceIds
+
+    if (this.noConfirmation) {
+      this.formTarget.submit()
+    } else {
+      this.controllerDivTarget.classList.remove('hidden')
+    }
+  }
+
+  get noConfirmation() {
+    return castBoolean(this.controllerDivTarget.dataset.noConfirmation)
+  }
+
+  get resourceName() {
+    return this.controllerDivTarget.dataset.resourceName
+  }
+
+  get resourceIds() {
+    try {
+      return JSON.parse(document.querySelector(`[data-selected-resources-name="${this.resourceName}"]`).dataset.selectedResources)
+    } catch (error) {
+      return []
+    }
+  }
+}

data/app/frontend/js/controllers/actions_picker_controller.js

@@ -0,0 +1,44 @@
+import { AttributeObserver } from '@stimulus/mutation-observers'
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  target = {}
+
+  enableTarget() {
+    if (this.targetIsDisabled(this.target)) {
+      this.target.classList.remove('cursor-wait', 'text-gray-500', 'hover:bg-blue-300')
+      this.target.classList.add('text-gray-700', 'hover:bg-blue-500')
+      this.target.dataset.disabled = false
+    }
+  }
+
+  disableTarget() {
+    this.target.classList.add('cursor-wait', 'text-gray-500', 'hover:bg-blue-300')
+    this.target.classList.remove('text-gray-700', 'hover:bg-blue-500')
+    this.target.dataset.disabled = true
+  }
+
+  targetIsDisabled() {
+    return this.target.dataset.disabled === 'true'
+  }
+
+  visitAction(event) {
+    this.target = event.target
+
+    if (this.targetIsDisabled()) {
+      event.preventDefault()
+
+      return
+    }
+
+    this.disableTarget()
+
+    const observer = new AttributeObserver(document.querySelector('turbo-frame#actions_show'), 'busy', {
+      elementUnmatchedAttribute: () => {
+        this.enableTarget(this.target)
+        if (observer) observer.stop()
+      },
+    })
+    observer.start()
+  }
+}

data/app/frontend/js/controllers/alerts_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['container']
+
+  connect() {
+    window.toastr[this.type](this.message)
+  }
+
+  get type() {
+    const typeMap = {
+      info: 'info',
+      warning: 'warning',
+      success: 'success',
+      error: 'error',
+      notice: 'info',
+      alert: 'error',
+    }
+
+    return typeMap[this.containerTarget.dataset.alertType]
+  }
+
+  get message() {
+    return this.containerTarget.innerHTML
+  }
+}

data/app/frontend/js/controllers/attachments_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['form']
+
+  connect() {
+    this.formTarget.submit()
+  }
+}

data/app/frontend/js/controllers/boolean_filter_controller.js

@@ -0,0 +1,21 @@
+import BaseFilterController from './filter_controller'
+
+export default class extends BaseFilterController {
+  static targets = ['option']
+
+  getFilterValue() {
+    const filterValue = {}
+
+    this.optionTargets.forEach((option) => {
+      filterValue[option.value] = option.checked
+    })
+
+    return filterValue
+  }
+
+  getFilterClass() {
+    const { filterClass } = this.optionTarget.dataset
+
+    return filterClass
+  }
+}

data/app/frontend/js/controllers/fields/code_field_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+import CodeMirror from 'codemirror'
+import 'codemirror/mode/css/css.js'
+import 'codemirror/mode/css/css.js'
+import 'codemirror/mode/dockerfile/dockerfile.js'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/markdown/markdown.js'
+import 'codemirror/mode/nginx/nginx.js'
+import 'codemirror/mode/php/php.js'
+import 'codemirror/mode/ruby/ruby.js'
+import 'codemirror/mode/sass/sass.js'
+import 'codemirror/mode/shell/shell.js'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/mode/vue/vue.js'
+import 'codemirror/mode/xml/xml.js'
+
+export default class extends Controller {
+  static targets = ['element']
+
+  connect() {
+    const options = {
+      readOnly: castBoolean(this.elementTarget.dataset.readOnly),
+      mode: this.elementTarget.dataset.language,
+      theme: this.elementTarget.dataset.theme,
+      tabSize: this.elementTarget.dataset.tabSize,
+      indentWithTabs: castBoolean(this.elementTarget.dataset.indentWithTabs),
+      lineWrapping: castBoolean(this.elementTarget.dataset.lineWrapping),
+      lineNumbers: true,
+    }
+
+    CodeMirror.fromTextArea(this.elementTarget, options)
+  }
+}

data/app/frontend/js/controllers/fields/date_field_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from 'stimulus'
+import { DateTime } from 'luxon'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+import flatpickr from 'flatpickr'
+
+export default class extends Controller {
+  static targets = ['input']
+
+  connect() {
+    const options = {
+      enableTime: false,
+      enableSeconds: false,
+      // eslint-disable-next-line camelcase
+      time_24hr: false,
+      locale: {
+        firstDayOfWeek: 0,
+      },
+      altInput: true,
+    }
+    const enableTime = castBoolean(this.inputTarget.dataset.enableTime)
+
+    // Set the format of the displayed input field.
+    options.altFormat = this.inputTarget.dataset.pickerFormat
+
+    // Set first day of the week.
+    options.locale.firstDayOfWeek = this.inputTarget.dataset.firstDayOfWeek
+
+    // Enable time if needed.
+    options.enableTime = enableTime
+    options.enableSeconds = enableTime
+
+    let currentValue
+
+    // enable timezone display
+    if (enableTime) {
+      currentValue = DateTime.fromISO(this.inputTarget.value, { zone: window.timezone })
+      currentValue = currentValue.setZone(this.inputTarget.dataset.timezone)
+      currentValue = currentValue.toISO()
+
+      options.dateFormat = 'Y-m-d H:i:S'
+      // eslint-disable-next-line camelcase
+      options.time_24hr = castBoolean(this.inputTarget.dataset.time24hr)
+      // this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      options.appTimezone = this.inputTarget.dataset.timezone
+    } else {
+      currentValue = new Date(this.inputTarget.value)
+    }
+
+    options.defaultDate = currentValue
+
+    flatpickr(this.inputTarget, options)
+  }
+}

data/app/frontend/js/controllers/fields/simple_mde_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from 'stimulus'
+import SimpleMDE from 'simplemde'
+
+export default class extends Controller {
+  static targets = ['element']
+
+  get view() {
+    return this.elementTarget.dataset.view
+  }
+
+  connect() {
+    const options = {
+      element: this.elementTarget,
+    }
+
+    if (this.view === 'show') {
+      options.toolbar = false
+      options.status = false
+    }
+
+    const simpleMde = new SimpleMDE(options)
+    if (this.view === 'show') {
+      simpleMde.codemirror.options.readOnly = true
+    }
+  }
+}

data/app/frontend/js/controllers/filter_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from 'stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import URI from 'urijs'
+
+export default class extends Controller {
+  static targets = ['urlRedirect']
+
+  // eslint-disable-next-line class-methods-use-this
+  uriParams() {
+    return URI(window.location.toString()).query(true)
+  }
+
+  viaResourceName() {
+    return this.uriParams().via_resource_name
+  }
+
+  uriParam(param) {
+    const viaResourceName = this.viaResourceName()
+
+    if (viaResourceName) return `${this.viaResourceName}_${param}`
+
+    return param
+  }
+
+  changeFilter() {
+    const value = this.getFilterValue()
+    const filterClass = this.getFilterClass()
+
+    let filters = this.uriParams()[this.uriParam('filters')]
+
+    if (filters) {
+      filters = JSON.parse(atob(filters))
+    } else {
+      filters = {}
+    }
+
+    filters[filterClass] = value
+    const encodedFilters = btoa(JSON.stringify(filters))
+
+    const url = new URI(this.urlRedirectTarget.href)
+
+    const query = {
+      ...url.query(true),
+      filters: encodedFilters,
+    }
+
+    url.query(query)
+
+    this.urlRedirectTarget.href = url
+    this.urlRedirectTarget.click()
+  }
+}

data/app/frontend/js/controllers/hidden_input_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['content']
+
+  showContent(event) {
+    this.contentTarget.classList.toggle('hidden')
+    event.target.classList.add('hidden')
+  }
+}

data/app/frontend/js/controllers/item_selector_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['panel']
+
+  checkbox = {}
+
+  get actionsPanelPresent() {
+    return this.actionsButtonElement !== null
+  }
+
+  get currentIds() {
+    try {
+      return JSON.parse(this.stateHolderElement.dataset.selectedResources)
+    } catch (error) {
+      return []
+    }
+  }
+
+  set currentIds(value) {
+    this.stateHolderElement.dataset.selectedResources = JSON.stringify(value)
+
+    if (this.actionsPanelPresent) {
+      if (value.length > 0) {
+        this.enableActionsPanel()
+      } else {
+        this.disableActionsPanel()
+      }
+    }
+  }
+
+  connect() {
+    this.resourceName = this.element.dataset.resourceName
+    this.resourceId = this.element.dataset.resourceId
+    this.actionsButtonElement = document.querySelector(`[data-actions-dropdown-button="${this.resourceName}"]`)
+    this.stateHolderElement = document.querySelector(`[data-selected-resources-name="${this.resourceName}"]`)
+  }
+
+  addToSelected() {
+    const ids = this.currentIds
+
+    ids.push(this.resourceId)
+
+    this.currentIds = ids
+  }
+
+  removeFromSelected() {
+    this.currentIds = this.currentIds.filter((item) => item.toString() !== this.resourceId)
+  }
+
+  toggle(event) {
+    this.checkbox = event.target
+
+    if (this.checkbox.checked) {
+      this.addToSelected()
+    } else {
+      this.removeFromSelected()
+    }
+  }
+
+  enableActionsPanel() {
+    this.actionsButtonElement.disabled = false
+  }
+
+  disableActionsPanel() {
+    this.actionsButtonElement.disabled = true
+  }
+}

data/app/frontend/js/controllers/modal_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['modal']
+
+  close() {
+    this.modalTarget.remove()
+
+    document.dispatchEvent(new Event('actions-modal:close'))
+  }
+}

data/app/frontend/js/controllers/per_page_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['selector']
+
+  reload() {
+    document.querySelector(`[data-per-page-option="${this.selectorTarget.value}"]`).click()
+  }
+}

data/app/frontend/js/controllers/select_filter_controller.js

@@ -0,0 +1,15 @@
+import BaseFilterController from './filter_controller'
+
+export default class extends BaseFilterController {
+  static targets = ['selector']
+
+  getFilterValue() {
+    return this.selectorTarget.value
+  }
+
+  getFilterClass() {
+    const { filterClass } = this.selectorTarget.dataset
+
+    return filterClass
+  }
+}