refine-rails 2.9.0

data/app/javascript/controllers/refine/defaults-controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    criterionId: Number,
+    input: Object,
+  };
+
+  connect() {
+    this.state = this.getStateController()
+
+    this.state.updateInput(
+      this.criterionIdValue,
+      this.inputValue,
+    );
+  }
+
+  getStateController() {
+    let currentElement = this.element
+
+    while(currentElement !== document.body) {
+      const controller = this.application.getControllerForElementAndIdentifier(currentElement, 'refine--state')
+      if (controller) {
+        return controller
+      } else {
+        currentElement = currentElement.parentNode
+      }
+    }
+
+    return null
+  }
+}

data/app/javascript/controllers/refine/delete-controller.js

@@ -0,0 +1,13 @@
+import ServerRefreshController from './server-refresh-controller';
+
+export default class extends ServerRefreshController {
+  static values = {
+    criterionId: Number,
+  }
+
+  criterion() {
+    const { state, criterionIdValue } = this;
+    state.deleteCriterion(criterionIdValue);
+    this.refreshFromServer()
+  }
+}

data/app/javascript/controllers/refine/filter-pills-controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from '@rails/request.js'
+
+export default class extends Controller {
+  static values = {
+    submitUrl: String
+  }
+
+  connect() {
+    const urlParams = new URLSearchParams(window.location.search)
+    this.existingParams = urlParams
+    this.existingParams.delete('stable_id')
+  }
+
+  delete(event) {
+    const { criterionId } = event.currentTarget.dataset
+    var index = parseInt(criterionId)
+    this.stateController.deleteCriterion(index)
+    this.reloadPage()
+  }
+
+  async reloadPage() {
+    const {blueprint} = this.stateController
+    const request = new FetchRequest(
+      "POST",
+      this.submitUrlValue,
+      {
+        responseKind: "turbo-stream",
+        body: JSON.stringify({
+          refine_filters_builder: {
+            filter_class: this.stateController.filterName,
+            blueprint_json: JSON.stringify(blueprint),
+            client_id: this.stateController.clientIdValue
+          }
+        })
+      }
+    )
+    await request.perform()
+  }
+
+  redirectToStableId(stableId) {
+    const params = new URLSearchParams()
+    if (stableId) {
+      params.append('stable_id', stableId)
+    }
+    const allParams = new URLSearchParams({
+      ...Object.fromEntries(this.existingParams),
+      ...Object.fromEntries(params),
+    }).toString()
+    const url = `${window.location.pathname}?${allParams}`
+
+    history.pushState({}, document.title, url)
+    window.location.reload()
+  }
+
+  get stateController() {
+    return this.element.refineStateController
+  }
+
+  get stabilizeFilterController() {
+    return this.element.stabilizeFilterController
+  }
+}

data/app/javascript/controllers/refine/form-controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.state = this.getStateController()
+    this.blueprintInput = this.addHiddenInput('blueprint')
+    this.addHiddenInput('filter', this.state.filterName)
+    this.addHiddenInput('form_id', this.state.formIdValue)
+    this.finishUpdate()
+  }
+
+  getStateController() {
+    let currentElement = this.element
+
+    while(currentElement !== document.body) {
+      const controller = this.application.getControllerForElementAndIdentifier(currentElement, 'refine--state')
+      if (controller) {
+        return controller
+      } else {
+        currentElement = currentElement.parentNode
+      }
+    }
+
+    return null
+  }
+
+  addHiddenInput(name, initialValue) {
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = name
+    input.value = initialValue || ''
+    this.element.appendChild(input)
+    return input
+  }
+
+  // called on connect
+  finishUpdate() {
+    this.state.finishUpdate()
+  }
+
+  // Call this on submit
+  startUpdate() {
+    this.blueprintInput.value = JSON.stringify(this.state.blueprint)
+    this.state.startUpdate()
+  }
+
+  submitForm() {
+    this.startUpdate()
+    this.element.requestSubmit()
+  }
+}

data/app/javascript/controllers/refine/inline-conditions-controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  static targets = ['condition', 'category']
+
+  filterConditions(event) {
+    const query = event.currentTarget.value.toLowerCase()
+    const visibleCategories = new Set()
+
+    // hide / show condition links that match the query and note which
+    // categories should be visible
+    this.conditionTargets.forEach(conditionNode => {
+      const conditionName = conditionNode.innerHTML.toLowerCase()
+      if (conditionName.includes(query)) {
+        conditionNode.hidden = false
+        visibleCategories.add(conditionNode.dataset.category)
+      } else {
+        conditionNode.hidden = true
+      }
+    })
+
+    // hide / show category headers that have
+    this.categoryTargets.forEach(categoryNode => {
+      const categoryName = categoryNode.innerHTML
+      if (visibleCategories.has(categoryName)) {
+        categoryNode.hidden = false
+      } else {
+        categoryNode.hidden = true
+      }
+    })
+  }
+}

data/app/javascript/controllers/refine/popup-controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from 'stimulus-use'
+
+// simple controller to hide/show the filter modal
+export default class extends Controller {
+  static targets = ["frame"]
+
+  static values = {
+    src: String,
+    isOpen: {type: Boolean, default: false}
+  }
+
+  connect() {
+    useClickOutside(this)
+    this.boundHandleKeyUp = this.handleKeyUp.bind(this)
+    document.addEventListener("keyup", this.boundHandleKeyUp)
+  }
+
+  disconnect() {
+    document.removeEventListener("keyup", this.boundHandleKeyUp)
+  }
+
+  show(event) {
+    event.preventDefault()
+    this.frameTarget.src = this.srcValue;
+    this.isOpenValue = true
+  }
+
+  hide(event) {
+    if (this.isOpenValue) {
+      event?.preventDefault()
+      this.frameTarget.innerHTML = "";
+      this.isOpenValue = false
+    }
+  }
+
+  clickOutside(event) {
+    this.hide(event)
+  }
+
+  handleKeyUp(event) {
+    if (event.key === "Escape" || event.key === "Esc") {
+      this.hide(event)
+    }
+  }
+}

data/app/javascript/controllers/refine/search-filter-controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from '@rails/request.js'
+
+export default class extends Controller {
+  static values = {
+    submitUrl: String
+  }
+
+
+  search(event) {
+    event.preventDefault()
+    this.submitFilter()
+    document.activeElement.blur()
+  }
+
+  async submitFilter() {
+    const {blueprint} = this.stateController
+    const request = new FetchRequest(
+      "POST",
+      this.submitUrlValue,
+      {
+        responseKind: "turbo-stream",
+        body: JSON.stringify({
+          refine_filters_builder: {
+            filter_class: this.stateController.filterName,
+            blueprint_json: JSON.stringify(blueprint),
+            client_id: this.stateController.clientIdValue
+          }
+        })
+      }
+    )
+    await request.perform()
+  }
+
+  get stateController() {
+    return this
+      .element
+      .querySelector('[data-controller~="refine--state"]')
+      .refineStateController
+  }
+
+  loadResults({detail: {url}}) {
+    console.log("filter submit success")
+    if (window.Turbo) {
+      window.Turbo.visit(url)
+    } else {
+      window.location.href = url
+    }
+  }
+}

data/app/javascript/controllers/refine/server-refresh-controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from '@rails/request.js'
+
+
+// Base class for controllers that reload form content from the server
+export default class extends Controller {
+  connect() {
+    this.state.finishUpdate()
+  }
+
+  get state() {
+    let currentElement = this.element
+
+    while(currentElement !== document.body) {
+      if (currentElement.matches('[data-controller~="refine--state"]'))
+        return this.application.getControllerForElementAndIdentifier(currentElement, 'refine--state')
+      else {
+        currentElement = currentElement.parentNode
+      }
+    }
+
+    return null
+  }
+
+  async refreshFromServer(options = {}) {
+    const { includeErrors } = options
+    this.state.startUpdate()
+    const request = new FetchRequest(
+      "GET",
+      this.state.refreshUrlValue,
+      {
+        responseKind: "turbo-stream",
+        query: {
+          "refine_filters_builder[filter_class]": this.state.filterName,
+          "refine_filters_builder[blueprint_json]": JSON.stringify(this.state.blueprint),
+          "refine_filters_builder[client_id]": this.state.clientIdValue,
+          include_errors: !!includeErrors
+        }
+      }
+    )
+    await request.perform()
+  }
+}

data/app/javascript/controllers/refine/state-controller.js

@@ -0,0 +1,220 @@
+import { Controller } from "@hotwired/stimulus"
+import { delegate, abnegate } from 'jquery-events-to-dom-events'
+import { blueprintUpdatedEvent } from '../../refine/helpers'
+import { isEqual } from 'lodash'
+
+const criterion = (id, depth, condition) => {
+  const component = condition?.component
+  const meta = condition?.meta || { clauses: [], options: {}}
+  const refinements = condition?.refinements || []
+  const { clauses, options } = meta
+  let selected
+  if (component === 'option-condition') {
+    selected = options[0] ? [options[0].id] : []
+  } else {
+    selected = undefined
+  }
+  // Set newInput based on component
+
+  let newInput = {
+    clause: clauses[0]?.id,
+    selected: selected,
+  }
+
+  // If refinements are present, add to input array
+  refinements.forEach((refinement) => {
+    const { meta, component } = refinement
+    const { clauses, options } = meta
+    let selected
+    if (component === 'option-condition') {
+      selected = options[0] ? [options[0].id] : []
+    } else {
+      selected = undefined
+    }
+    newInput[refinement.id] = {
+      clause: clauses[0].id,
+      selected: selected,
+    }
+  })
+
+  return {
+    depth,
+    type: 'criterion',
+    condition_id: id,
+    input: newInput,
+  }
+}
+
+const or = function (depth) {
+  depth = depth === undefined ? 0 : depth
+  return {
+    depth,
+    type: 'conjunction',
+    word: 'or',
+  }
+}
+
+const and = function (depth) {
+  depth = depth === undefined ? 1 : depth
+  return {
+    depth,
+    type: 'conjunction',
+    word: 'and',
+  }
+}
+export default class extends Controller {
+  static values = {
+    blueprint: Array,
+    conditions: Array,
+    className: String,
+    refreshUrl: String,
+    clientId: String,
+    validateBlueprintUrl: String,
+    defaultConditionId: String
+  }
+  static targets = ['loading']
+
+
+  connect() {
+    // for select2 jquery events and datepicker
+    this.element.refineStateController = this
+    this.changeDelegate = delegate('change', ['event', 'picker'])
+    this.blueprint = this.blueprintValue
+    this.conditions = this.conditionsValue
+    this.filterName = this.classNameValue
+    this.conditionsLookup = this.conditions.reduce((lookup, condition) => {
+      lookup[condition.id] = condition
+      return lookup
+    }, {})
+    this.loadingTimeout = null
+    blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+  }
+
+  disconnect() {
+    abnegate('change', this.changeDelegate)
+  }
+
+  startUpdate() {
+    if (this.loadingTimeout) {
+      window.clearTimeout(this.loadingTimeout)
+    }
+    // only show the loading overlay if it's taking a long time
+    // to render the updates
+    this.loadingTimeout = window.setTimeout(() => {
+      this.loadingTarget.classList.remove('hidden')
+    }, 1000)
+  }
+
+  finishUpdate() {
+    if (this.loadingTimeout) {
+      window.clearTimeout(this.loadingTimeout)
+    }
+    this.loadingTarget.classList.add('hidden')
+  }
+
+  conditionConfigFor(conditionId) {
+    return this.conditionsLookup[conditionId]
+  }
+
+  addGroup() {
+    const { blueprint, conditions } = this
+    const condition = ( conditions.find(c => c.id == this.defaultConditionIdValue) || conditions[0] )
+    const { meta } = condition
+
+    if (this.blueprint.length > 0) {
+      this.blueprint.push(or())
+    }
+    this.blueprint.push(criterion(condition.id, 1, condition))
+    blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+  }
+
+  addCriterion(previousCriterionId) {
+    const { blueprint, conditions } = this
+    const condition = ( conditions.find(c => c.id == this.defaultConditionIdValue) || conditions[0] )
+    const { meta } = condition
+    blueprint.splice(previousCriterionId + 1, 0, and(), criterion(condition.id, 1, condition))
+    blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+  }
+
+  deleteCriterion(criterionId) {
+    /**
+       To support 'groups' there is some complicated logic for deleting criterion.
+
+       Imagine this simplified blueprint: [eq, and, sw, or, eq]
+
+       User clicks to delete the last eq. We also have to delete the preceding or
+       otherwise we're left with a hanging empty group
+
+       What if the user deletes the sw? We have to clean up the preceding and.
+
+       Imagine another scenario: [eq or sw and ew]
+       Now we delete the first eq but this time we need to clean up the or.
+
+       These conditionals cover these cases.
+    **/
+    const { blueprint } = this
+    const previous = blueprint[criterionId - 1]
+    const next = blueprint[criterionId + 1]
+
+    const nextIsOr = next && next.word === 'or'
+    const previousIsOr = previous && previous.word === 'or'
+
+    const nextIsRightParen = nextIsOr || !next
+    const previousIsLeftParen = previousIsOr || !previous
+
+    const isFirstInGroup = previousIsLeftParen && !nextIsRightParen
+    const isLastInGroup = previousIsLeftParen && nextIsRightParen
+    const isLastCriterion = !previous && !next
+
+    if (isLastCriterion) {
+      this.blueprint = []
+    } else if (isLastInGroup && previousIsOr) {
+      blueprint.splice(criterionId - 1, 2)
+    } else if (isLastInGroup && !previous) {
+      blueprint.splice(criterionId, 2)
+    } else if (isFirstInGroup) {
+      blueprint.splice(criterionId, 2)
+    } else {
+      blueprint.splice(criterionId - 1, 2)
+    }
+
+    blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+  }
+
+  /*
+    Updates a criterion in the blueprint
+    Returns true if an update was actually performed, or false if no-op
+  */
+  replaceCriterion(criterionId, conditionId, condition) {
+    const criterionRow = this.blueprint[criterionId]
+    if (criterionRow.type !== 'criterion') {
+      throw new Error(
+        `You can't call updateConditionId on a non-criterion type. Trying to update ${JSON.stringify(criterion)}`
+      )
+    }
+    const existingCriterion = this.blueprint[criterionId]
+    const newCriterion = criterion(conditionId, criterionRow.depth, condition)
+    if (isEqual(existingCriterion, newCriterion)) {
+      return false
+    } else {
+      this.blueprint[criterionId] = newCriterion
+      blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+      return true
+    }
+  }
+
+  updateInput(criterionId, input, inputId) {
+    // Input id is an array of hash keys that define the path for this input such as ["input", "date_refinement"]
+    const { blueprint } = this
+    const criterion = blueprint[criterionId]
+    inputId = inputId || 'input'
+    const blueprintPath = inputId.split(', ')
+    // If the inputId contains more than one element, add input at appropriate depth
+    if (blueprintPath.length > 1) {
+      criterion[blueprintPath[0]][blueprintPath[1]] = { ...criterion[blueprintPath[0]][blueprintPath[1]], ...input }
+    } else {
+      criterion[inputId] = { ...criterion[inputId], ...input }
+    }
+    blueprintUpdatedEvent(this.element, {blueprint: this.blueprint, formId: this.formIdValue})
+  }
+}

data/app/javascript/controllers/refine/stored-filter-controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+import { filterStoredEvent } from '../../refine/helpers'
+
+export default class extends Controller {
+  static targets = ['blueprintField']
+  static values = { formId: String, stateDomId: String }
+
+  connect() {
+    const stateController = document
+      .getElementById(this.stateDomIdValue)
+      .refineStateController
+    this.blueprintFieldTarget.value = JSON.stringify(stateController.blueprint)
+    console.log("connect", this.blueprintFieldTarget.value)
+  }
+
+  updateBlueprintField(event) {
+    if (event.detail.formId != this.formIdValue) { return null }
+    const { detail } = event
+    const { blueprint } = detail
+    this.blueprintFieldTarget.value = JSON.stringify(blueprint)
+    console.log("update blueprint", this.blueprintFieldTarget.value)
+  }
+}

data/app/javascript/controllers/refine/submit-form-controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  submit(event) {
+    event.preventDefault()
+    this.element.submit()
+  }
+}

data/app/javascript/controllers/refine/toggle-controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+// simple controller to hide/show the filter modal
+export default class extends Controller {
+  static targets = ["content"]
+
+  toggle(_event) {
+    this.contentTargets.forEach(node => {
+      node.toggleAttribute("hidden")
+    })
+  }
+}

data/app/javascript/controllers/refine/turbo-stream-form-controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from '@rails/request.js'
+
+/*
+  attach to a form element to have it submit to a turbo-stream endpoint
+
+  <form action="/contacts" data-controller="refine--turbo-stream-form" data-action="submit->refine--turbo-stream-form#submit">
+
+  Turbo is supposed to handle this natively but we're seeing issues when the form is inside an iframe
+*/
+export default class extends Controller {
+  async submit(event) {
+    event.preventDefault()
+    const request = new FetchRequest(
+      (this.element.method || "POST"),
+      this.element.action,
+      {
+        responseKind: "turbo-stream",
+        body: new FormData(this.element)
+      }
+    )
+    await request.perform()
+  }
+}

data/app/javascript/controllers/refine/turbo-stream-link-controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+import { FetchRequest } from '@rails/request.js'
+
+/*
+  attach to a link element to have it request turbo stream responses
+
+  <a href="/contacts" data-controller="refine--turbo-stream-link" data-action="refine--turbo-stream-link#get">Click me</a>
+
+  Turbo is supposed to handle this natively with data-turbo-stream but we're
+  seeing issues using that attribute inside iframes
+*/
+export default class extends Controller {
+  async visit(event) {
+    event.preventDefault()
+    const request = new FetchRequest(
+      (this.element.dataset.turboMethod || "GET"),
+      this.element.href,
+      {
+        responseKind: "turbo-stream",
+      }
+    )
+    await request.perform()
+  }
+}