jav 2.55.4

data/app/javascript/js/controllers/search_controller.js

@@ -0,0 +1,303 @@
+/* eslint-disable no-underscore-dangle */
+import * as Mousetrap from 'mousetrap'
+import { Controller } from '@hotwired/stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import { autocomplete } from '@algolia/autocomplete-js'
+import URI from 'urijs'
+import debouncePromise from '../helpers/debounce_promise'
+
+/**
+ * The search controller is used in three places.
+ * 1. Global search (on the top navbar) and can search through multiple resources.
+ * 2. Resource search (on the Index page on top of the table panel) and will search one resource
+ * 3. belongs_to field. This requires a bit more cleanup because the user will not navigate away from the page.
+ * It will replace the id and label in some fields on the page and also needs a "clear" button which clears the information so the user can submit the form without a value.
+ */
+export default class extends Controller {
+  static targets = [
+    'autocomplete',
+    'button',
+    'hiddenId',
+    'visibleLabel',
+    'clearValue',
+    'clearButton',
+  ];
+
+  debouncedFetch = debouncePromise(fetch, this.searchDebounce);
+
+  destroyMethod;
+
+  get dataset() {
+    return this.autocompleteTarget.dataset
+  }
+
+  get searchDebounce() {
+    return window.Jav.configuration.search_debounce
+  }
+
+  get translationKeys() {
+    let keys
+    try {
+      keys = JSON.parse(this.dataset.translationKeys)
+    } catch (error) {
+      keys = {}
+    }
+
+    return keys
+  }
+
+  get isBelongsToSearch() {
+    return this.dataset.viaAssociation === 'belongs_to'
+  }
+
+  get isHasManySearch() {
+    return this.dataset.viaAssociation === 'has_many'
+  }
+
+  get isGlobalSearch() {
+    return this.dataset.searchResource === 'global'
+  }
+
+  connect() {
+    const that = this
+
+    this.buttonTarget.onclick = () => this.showSearchPanel()
+
+    this.clearValueTargets.forEach((target) => {
+      if (target.getAttribute('value') && this.hasClearButtonTarget) {
+        this.clearButtonTarget.classList.remove('hidden')
+      }
+    })
+
+    if (this.isGlobalSearch) {
+      Mousetrap.bind(['command+k', 'ctrl+k'], () => this.showSearchPanel())
+    }
+
+    // This line fixes a bug where the search box would be duplicated on back navigation.
+    this.autocompleteTarget.innerHTML = ''
+
+    const { destroy } = autocomplete({
+      container: this.autocompleteTarget,
+      placeholder: this.translationKeys.placeholder,
+      translations: {
+        detachedCancelButtonText: this.translationKeys.cancel_button,
+      },
+      autoFocus: true,
+      openOnFocus: true,
+      detachedMediaQuery: '',
+      getSources: ({ query }) => {
+        document.body.classList.add('search-loading')
+        const endpoint = that.searchUrl(query)
+
+        return that
+          .debouncedFetch(endpoint)
+          .then((response) => {
+            document.body.classList.remove('search-loading')
+
+            return response.json()
+          })
+          .then((data) => Object.keys(data).map((resourceName) => that.addSource(resourceName, data[resourceName])))
+      },
+    })
+
+    // document.addEventListener('turbo:before-render', destroy)
+    this.destroyMethod = destroy
+
+    // When using search for belongs-to
+    if (this.buttonTarget.dataset.shouldBeDisabled !== 'true') {
+      this.buttonTarget.removeAttribute('disabled')
+    }
+  }
+
+  disconnect() {
+    // Don't leave open autocompletes around when disconnected. Otherwise it will still
+    // be visible when navigating back to this page.
+    if (this.destroyMethod) {
+      this.destroyMethod()
+      this.destroyMethod = null
+    }
+  }
+
+  addSource(resourceName, data) {
+    const that = this
+
+    return {
+      sourceId: resourceName,
+      getItems: () => data.results,
+      onSelect: that.handleOnSelect.bind(that),
+      templates: {
+        header() {
+          return `${data.header.toUpperCase()} ${data.help}`
+        },
+        item({ item, createElement }) {
+          const children = []
+
+          if (item._avatar) {
+            let classes
+
+            switch (item._avatar_type) {
+              default:
+              case 'circle':
+                classes = 'rounded-full'
+                break
+              case 'rounded':
+                classes = 'rounded'
+                break
+              case 'square':
+                classes = 'rounded-none'
+                break
+            }
+
+            children.push(
+              createElement('img', {
+                src: item._avatar,
+                alt: item._label,
+                class: `flex-shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}`,
+              }),
+            )
+          }
+
+          const labelChildren = [item._label]
+          if (item._description) {
+            labelChildren.push(
+              createElement(
+                'div',
+                {
+                  class: 'aa-ItemDescription',
+                },
+                item._description,
+              ),
+            )
+          }
+
+          children.push(createElement('div', null, labelChildren))
+
+          return createElement(
+            'div',
+            {
+              class: 'flex',
+            },
+            children,
+          )
+        },
+        noResults() {
+          return that.translationKeys.no_item_found.replace(
+            '%{item}',
+            resourceName,
+          )
+        },
+      },
+    }
+  }
+
+  handleOnSelect({ item }) {
+    if (this.isBelongsToSearch) {
+      this.updateFieldAttribute(this.hiddenIdTarget, 'value', item._id)
+      this.updateFieldAttribute(this.buttonTarget, 'value', item._label)
+
+      document.querySelector('.aa-DetachedOverlay').remove()
+
+      if (this.hasClearButtonTarget) {
+        this.clearButtonTarget.classList.remove('hidden')
+      }
+    } else {
+      Turbo.visit(item._url, { action: 'advance' })
+    }
+
+    // On searchable belongs to the class `aa-Detached` remains on the body making it unscrollable
+    document.body.classList.remove('aa-Detached')
+  }
+
+  searchUrl(query) {
+    const url = URI()
+
+    return url.segment([window.Jav.configuration.root_path, ...this.searchSegments()])
+              .search(this.searchParams(encodeURIComponent(query)))
+              .readable().toString()
+  }
+
+  searchSegments() {
+    let segments = [
+      'jav_api',
+      this.dataset.searchResource,
+      'search',
+    ]
+
+    if (this.isGlobalSearch) {
+      segments = ['jav_api', 'search']
+    }
+
+    return segments
+  }
+
+  searchParams(query) {
+    let params = {
+      q: query,
+      global: false,
+      force_local: location.search?.match(/force_locale=([a-zA-Z-]+)/)?.[1],
+    }
+
+    if (this.isGlobalSearch) {
+      params.global = true
+    }
+
+    if (this.isBelongsToSearch || this.isHasManySearch) {
+      params = this.addAssociationParams(params)
+      params = this.addReflectionParams(params)
+
+      if (this.isBelongsToSearch) {
+        params = {
+          ...params,
+          // eslint-disable-next-line camelcase
+          via_parent_resource_id: this.dataset.viaParentResourceId,
+          // eslint-disable-next-line camelcase
+          via_parent_resource_class: this.dataset.viaParentResourceClass,
+          // eslint-disable-next-line camelcase
+          via_relation: this.dataset.viaRelation,
+        }
+      }
+    }
+
+    return params
+  }
+
+  addAssociationParams(params) {
+    params = {
+      ...params,
+      // eslint-disable-next-line camelcase
+      via_association: this.dataset.viaAssociation,
+      // eslint-disable-next-line camelcase
+      via_association_id: this.dataset.viaAssociationId,
+    }
+
+    return params
+  }
+
+  addReflectionParams(params) {
+    params = {
+      ...params,
+      // eslint-disable-next-line camelcase
+      via_reflection_class: this.dataset.viaReflectionClass,
+      // eslint-disable-next-line camelcase
+      via_reflection_id: this.dataset.viaReflectionId,
+    }
+
+    return params
+  }
+
+  showSearchPanel() {
+    this.autocompleteTarget.querySelector('button').click()
+  }
+
+  clearValue() {
+    this.clearValueTargets.map((target) => this.updateFieldAttribute(target, 'value', ''))
+    this.clearButtonTarget.classList.add('hidden')
+  }
+
+  // Private
+
+  updateFieldAttribute(target, attribute, value) {
+    target.setAttribute(attribute, value)
+    target.dispatchEvent(new Event('input'))
+  }
+}

data/app/javascript/js/controllers/select_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus'
+import URI from 'urijs'
+
+export default class extends Controller {
+  static targets = ['select']
+
+  get parentTurboFrame() {
+    return this.context.scope.element.closest('turbo-frame')
+  }
+
+  onChange(e) {
+    if (!this.parentTurboFrame.src) return
+
+    // Get the frame URL
+    const url = new URI(this.parentTurboFrame.src)
+    // update the url with the new range param
+    url.search({ ...url.query(true), range: e.currentTarget.value })
+    // change the src of the frame
+    this.parentTurboFrame.src = url.toString()
+    // reload the frame with new range
+    this.parentTurboFrame.reload()
+  }
+}

data/app/javascript/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 === '' ? null : this.selectorTarget.value
+  }
+
+  getFilterClass() {
+    const { filterClass } = this.selectorTarget.dataset
+
+    return filterClass
+  }
+}

data/app/javascript/js/controllers/sidebar_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from '@hotwired/stimulus'
+import { enter, leave, toggle } from 'el-transition'
+import Cookies from 'js-cookie'
+
+export default class extends Controller {
+  static targets = ['sidebar', 'mobileSidebar', 'mainArea']
+
+  static values = {
+    open: Boolean,
+  }
+
+  get cookieKey() {
+    return `${window.Jav.configuration.cookies_key}.sidebar.open`
+  }
+
+  get sidebarOpen() {
+    return Cookies.get(this.cookieKey) === '1'
+  }
+
+  set cookie(state) {
+    Cookies.set(this.cookieKey, state === true ? 1 : 0)
+  }
+
+  markSidebarClosed() {
+    Cookies.set(this.cookieKey, '0')
+    this.openValue = false
+    leave(this.sidebarTarget)
+    this.mainAreaTarget.classList.remove('sidebar-open')
+  }
+
+  markSidebarOpen() {
+    Cookies.set(this.cookieKey, '1')
+    this.openValue = true
+    enter(this.sidebarTarget)
+    this.mainAreaTarget.classList.add('sidebar-open')
+  }
+
+  toggleSidebar() {
+    if (this.openValue) {
+      this.markSidebarClosed()
+    } else {
+      this.markSidebarOpen()
+    }
+  }
+
+  toggleSidebarOnMobile() {
+    toggle(this.mobileSidebarTarget)
+  }
+}

data/app/javascript/js/controllers/tabs_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from '@hotwired/stimulus'
+import { castBoolean } from '../helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['tabPanel'];
+
+  static values = {
+    view: String,
+    activeTab: String,
+  };
+
+  get currentTab() {
+    return this.tabPanelTargets.find(
+      (element) => element.dataset.tabId === this.activeTabValue,
+    )
+  }
+
+  targetTabPanel(id) {
+    return this.tabPanelTargets.find((element) => element.dataset.tabId === id)
+  }
+
+  async changeTab(e) {
+    // Stopping the link execution.
+    // We're going to reveal a lazy-loaded frame to fulfill the tab change.
+    e.preventDefault()
+
+    const { params } = e
+    const { id } = params
+
+    await this.setTheTargetPanelHeight(id)
+
+    this.hideAllTabs()
+    this.revealTab(id)
+    this.markTabLoaded(id)
+
+    this.activeTabValue = id
+  }
+
+  /**
+   * Sets the target container height to the previous panel height so we don't get jerky tab changes.
+   */
+  async setTheTargetPanelHeight(id) {
+    // Ignore this on edit.
+    // All tabs are loaded beforehand, they have their own height, and the page won't jiggle when the user toggles between them.
+    if (this.viewValue === 'edit' || this.viewValue === 'new') {
+      return
+    }
+
+    // We don't need to add a height to this panel because it was loaded before
+    if (castBoolean(this.targetTabPanel(id).dataset.loaded)) {
+      return
+    }
+
+    // Get the height of the active panel
+    const { height } = this.currentTab.getBoundingClientRect()
+    // Set it to the target panel
+    this.targetTabPanel(id).style.height = `${height}px`
+
+    // Wait until the panel loaded it's content and then remove the forced height
+    await this.targetTabPanel(id).loaded
+    this.targetTabPanel(id).style.height = ''
+  }
+
+  // Marking tab as loaded so we know to skip some things the next time the user clicks on it
+  markTabLoaded(id) {
+    this.targetTabPanel(id).dataset.loaded = true
+  }
+
+  // We're revealing the new tab that's lazy loaded by Turbo.
+  revealTab(id) {
+    this.targetTabPanel(id).classList.remove('hidden')
+  }
+
+  hideAllTabs() {
+    this.tabPanelTargets.map((element) => element.classList.add('hidden'))
+  }
+}

data/app/javascript/js/controllers/text_filter_controller.js

@@ -0,0 +1,23 @@
+import BaseFilterController from './filter_controller'
+
+export default class extends BaseFilterController {
+  static targets = ['text']
+
+  getFilterValue() {
+    return this.textTarget.value
+  }
+
+  tryToSubmit(e) {
+    if (e.keyCode === 13) {
+      return this.changeFilter()
+    }
+
+    return undefined
+  }
+
+  getFilterClass() {
+    const { filterClass } = this.textTarget.dataset
+
+    return filterClass
+  }
+}

data/app/javascript/js/controllers/tippy_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+  static targets = ['source', 'content']
+
+  connect() {
+    tippy(this.sourceTarget, {
+      content: this.contentTarget.innerHTML,
+      allowHTML: true,
+      theme: 'light',
+    })
+  }
+}

data/app/javascript/js/controllers/toggle_panel_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['panel']
+
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside() {
+    this.panelTarget.classList.add('hidden')
+  }
+
+  togglePanel() {
+    this.panelTarget.classList.toggle('hidden')
+  }
+}

data/app/javascript/js/controllers.js

@@ -0,0 +1,77 @@
+import { application } from './application'
+
+import ActionController from './controllers/action_controller'
+import ActionsPickerController from './controllers/actions_picker_controller'
+import AttachmentsController from './controllers/attachments_controller'
+import BelongsToFieldController from './controllers/fields/belongs_to_field_controller'
+import BooleanFilterController from './controllers/boolean_filter_controller'
+import CodeFieldController from './controllers/fields/code_field_controller'
+import CopyToClipboardController from './controllers/copy_to_clipboard_controller'
+import DashboardCardController from './controllers/dashboard_card_controller'
+import DateFieldController from './controllers/fields/date_field_controller'
+import EasyMdeController from './controllers/fields/easy_mde_controller'
+import FilterController from './controllers/filter_controller'
+import HiddenInputController from './controllers/hidden_input_controller'
+import ItemSelectAllController from './controllers/item_select_all_controller'
+import ItemSelectorController from './controllers/item_selector_controller'
+import KeyValueController from './controllers/fields/key_value_controller'
+import LoadingButtonController from './controllers/loading_button_controller'
+import MenuController from './controllers/menu_controller'
+import ModalController from './controllers/modal_controller'
+import MultipleSelectFilterController from './controllers/multiple_select_filter_controller'
+import PerPageController from './controllers/per_page_controller'
+import ProgressBarFieldController from './controllers/fields/progress_bar_field_controller'
+import ReloadBelongsToFieldController from './controllers/fields/reload_belongs_to_field_controller'
+import ResourceEditController from './controllers/resource_edit_controller'
+import ResourceIndexController from './controllers/resource_index_controller'
+import ResourceShowController from './controllers/resource_show_controller'
+import SearchController from './controllers/search_controller'
+import SelectController from './controllers/select_controller'
+import SelectFilterController from './controllers/select_filter_controller'
+import SidebarController from './controllers/sidebar_controller'
+import TabsController from './controllers/tabs_controller'
+import TagsFieldController from './controllers/fields/tags_field_controller'
+import TextFilterController from './controllers/text_filter_controller'
+import TippyController from './controllers/tippy_controller'
+import TogglePanelController from './controllers/toggle_panel_controller'
+import TrixFieldController from './controllers/fields/trix_field_controller'
+
+application.register('action', ActionController)
+application.register('actions-picker', ActionsPickerController)
+application.register('attachments', AttachmentsController)
+application.register('boolean-filter', BooleanFilterController)
+application.register('copy-to-clipboard', CopyToClipboardController)
+application.register('dashboard-card', DashboardCardController)
+application.register('filter', FilterController)
+application.register('hidden-input', HiddenInputController)
+application.register('item-select-all', ItemSelectAllController)
+application.register('item-selector', ItemSelectorController)
+application.register('loading-button', LoadingButtonController)
+application.register('menu', MenuController)
+application.register('modal', ModalController)
+application.register('multiple-select-filter', MultipleSelectFilterController)
+application.register('per-page', PerPageController)
+application.register('resource-edit', ResourceEditController)
+application.register('resource-index', ResourceIndexController)
+application.register('resource-show', ResourceShowController)
+application.register('search', SearchController)
+application.register('select', SelectController)
+application.register('select-filter', SelectFilterController)
+application.register('sidebar', SidebarController)
+application.register('tabs', TabsController)
+application.register('tags-field', TagsFieldController)
+application.register('text-filter', TextFilterController)
+application.register('tippy', TippyController)
+application.register('toggle-panel', TogglePanelController)
+
+// Field controllers
+application.register('belongs-to-field', BelongsToFieldController)
+application.register('code-field', CodeFieldController)
+application.register('date-field', DateFieldController)
+application.register('easy-mde', EasyMdeController)
+application.register('key-value', KeyValueController)
+application.register('progress-bar-field', ProgressBarFieldController)
+application.register("reload-belongs-to-field", ReloadBelongsToFieldController)
+application.register('trix-field', TrixFieldController)
+
+// Custom controllers

data/app/javascript/js/helpers/cast_boolean.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line eqeqeq
+export const castBoolean = (value) => value == 'true'

data/app/javascript/js/helpers/debounce_promise.js

@@ -0,0 +1,13 @@
+export default (fn, time) => {
+  let timerId
+
+  return (...args) => {
+    if (timerId) {
+      clearTimeout(timerId)
+    }
+
+    return new Promise((resolve) => {
+      timerId = setTimeout(() => resolve(fn(...args)), time)
+    })
+  }
+}

data/app/views/jav/actions/show.html.erb

@@ -0,0 +1,56 @@
+<%= turbo_frame_tag "actions_show" do %>
+  <div
+    data-controller="<%= ["action", @action.get_stimulus_controllers].join(" ") %>"
+    data-no-confirmation="<%= @action.no_confirmation %>"
+    data-action-target="controllerDiv"
+    data-resource-name="<%= @resource.model_key %>"
+    data-resource-id="<%= params[:id] %>"
+    class="hidden text-slate-800"
+  >
+    <%= form_with scope: 'fields',
+      url: Jav::Services::URIService.parse(@resource.records_path).append_paths("actions").to_s,
+      local: true,
+      data: @action.class.form_data_attributes do |form|
+    %>
+    <%= render Jav::ModalComponent.new do |c| %>
+      <% c.with_heading do %>
+        <%= @action.action_name %>
+      <% end %>
+
+      <div class="flex-1 flex">
+        <%= @action.get_message %>
+      </div>
+      <%= hidden_field_tag :action_id, @action.param_id %>
+      <%= form.hidden_field :jav_resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
+      <%= form.hidden_field :jav_selected_query, 'data-action-target': 'selectedAllQuery' %>
+      <% if @action.get_fields.present? %>
+        <div class="my-4 -mx-6">
+          <% @action.get_fields.each_with_index do |field, index| %>
+            <%= render field
+              .hydrate(resource: @resource, model: @resource.model, user: @resource.user, view: @view, action: @action)
+              .component_for_view(@view)
+              .new(field: field, resource: @resource, index: index, form: form, compact: true)
+            %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% c.with_controls do %>
+        <%= a_button type: :button,
+          data: { action: 'click->modal#close' },
+          size: :sm,
+          color: :gray do %>
+          <%= @action.cancel_button_label %>
+        <% end %>
+        <%= a_button type: :submit,
+            color: :green,
+            style: :primary,
+            size: :sm,
+            data: @action.class.submit_button_data_attributes do %>
+          <%= @action.confirm_button_label %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+<% end %>