avo 2.48.0 → 3.0.0.beta1

data/app/helpers/avo/application_helper.rb

@@ -1,12 +1,7 @@
 module Avo
   module ApplicationHelper
     include ::Pagy::Frontend
-
-    def render_license_warnings
-      render partial: "avo/sidebar/license_warnings", locals: {
-        license: Avo::App.license.properties
-      }
-    end
+    include Avo::ResourcesHelper
 
     def render_license_warning(title: "", message: "", icon: "exclamation")
       render partial: "avo/sidebar/license_warning", locals: {
@@ -119,8 +114,19 @@ module Avo
       Avo::Filters::BaseFilter.encode_filters(filter_params)
     end
 
-    def frame_id(resource)
-      ["frame", resource.model_name.singular, resource.model.id].compact.join("-")
+    def number_to_social(number, start_at: 10_000)
+      return number_with_delimiter(number) if number < start_at
+
+      number_to_human(number,
+        precision: 1,
+        significant: false,
+        round_mode: :down,
+        format: "%n%u",
+        units: {
+          thousand: "K",
+          million: "M",
+          billion: "B"
+        })
     end
 
     private
@@ -144,7 +150,7 @@ module Avo
       field = field_klass.new id, form: form, view: view, **args, &block
 
       # Add the form record to the field so all fields have access to it.
-      field.hydrate(model: form.object) if form.present?
+      field.hydrate(record: form.object) if form.present?
 
       render field.component_for_view(view).new field: field, form: form, **component_options
     end

data/app/helpers/avo/resources_helper.rb

@@ -38,7 +38,7 @@ module Avo
     end
 
     def item_selector_init(resource)
-      "data-resource-name='#{resource.model_key}' data-resource-id='#{resource.model.id}' data-controller='item-selector'"
+      "data-resource-name='#{resource.model_key}' data-resource-id='#{resource.record.id}' data-controller='item-selector'"
     end
 
     def item_selector_input(floating: false, size: :md)

data/app/helpers/avo/url_helpers.rb

@@ -20,14 +20,14 @@ module Avo
     end
 
     def resource_path(
-      model:,
+      record:,
       resource:,
       resource_id: nil,
       keep_query_params: false,
       **args
     )
-      if model.respond_to? :id
-        id = model
+      if record.respond_to? :id
+        id = record
       elsif resource_id.present?
         id = resource_id
       end
@@ -35,29 +35,45 @@ module Avo
       avo.send :"resources_#{resource.singular_route_key}_path", id, **args
     end
 
+    def preview_resource_path(
+      record:,
+      resource:,
+      resource_id: nil,
+      keep_query_params: false,
+      **args
+    )
+      if record.respond_to? resource.id_attribute
+        id = record
+      elsif resource_id.present?
+        id = resource_id
+      end
+
+      avo.send :"preview_resources_#{resource.singular_route_key}_path", id, **args
+    end
+
     def new_resource_path(resource:, **args)
       avo.send :"new_resources_#{resource.singular_route_key}_path", **args
     end
 
-    def edit_resource_path(model:, resource:, **args)
-      avo.send :"edit_resources_#{resource.singular_route_key}_path", model, **args
+    def edit_resource_path(record:, resource:, **args)
+      avo.send :"edit_resources_#{resource.singular_route_key}_path", record, **args
     end
 
-    def resource_attach_path(resource, model_id, related_name, related_id = nil)
-      helpers.avo.resources_associations_new_path(resource.singular_route_key, model_id, related_name)
+    def resource_attach_path(resource, record_id, related_name, related_id = nil)
+      helpers.avo.resources_associations_new_path(resource.singular_route_key, record_id, related_name)
     end
 
     def resource_detach_path(
       model_name, # teams
-      model_id, # 1
+      record_id, # 1
       related_name, # admin
       related_id = nil
     )
-      avo.resources_associations_destroy_path(model_name, model_id, related_name, related_id)
+      avo.resources_associations_destroy_path(model_name, record_id, related_name, related_id)
     end
 
     def related_resources_path(
-      parent_model,
+      parent_record,
       record,
       keep_query_params: false,
       **args
@@ -74,7 +90,7 @@ module Avo
       rescue
       end
 
-      avo.resources_associations_index_path(parent_model.model_name.route_key, record.id, **existing_params, **args)
+      avo.resources_associations_index_path(parent_record.model_name.route_key, record.id, **existing_params, **args)
     end
 
     def resource_view_path(**args)

data/app/javascript/avo.base.js

@@ -12,6 +12,7 @@ import 'chartkick/chart.js/chart.esm'
 
 import './js/active-storage'
 import './js/controllers'
+import './js/custom-stream-actions'
 
 Rails.start()
 

data/app/javascript/js/application.js

@@ -2,9 +2,6 @@ import 'mapkick/bundle'
 
 import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
-import TurboPower from 'turbo_power'
-
-TurboPower.initialize(Turbo.StreamActions)
 
 const application = Application.start()
 

data/app/javascript/js/controllers/action_controller.js

@@ -2,10 +2,12 @@ import { Controller } from '@hotwired/stimulus'
 import { castBoolean } from '../helpers/cast_boolean'
 
 export default class extends Controller {
-  static targets = ['controllerDiv', 'resourceIds', 'submit', 'selectedAllQuery']
+  static targets = ['controllerDiv', 'resourceIds', 'form', 'selectedAllQuery']
 
   connect() {
-    this.resourceIdsTarget.value = this.resourceIds
+    if (this.resourceIdsTarget.value === '') {
+      this.resourceIdsTarget.value = this.resourceIds
+    }
 
     // This value is picked up from the DOM so we check true/false as strings
     if (this.selectionOptions.itemSelectAllSelectedAllValue === 'true') {
@@ -13,7 +15,7 @@ export default class extends Controller {
     }
 
     if (this.noConfirmation) {
-      this.submitTarget.click()
+      this.formTarget.submit()
     } else {
       this.controllerDivTarget.classList.remove('hidden')
     }

data/app/javascript/js/controllers/actions_overflow_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content']
+
+  static values = {
+    panelList: Boolean,
+  }
+
+  // get the table or grid component, if both null, get the panel body (for show page for example)
+  get parentTarget() {
+    return document.querySelector('[data-component-name="avo/index/resource_table_component"]')
+      || document.querySelector('[data-component-name="avo/index/resource_grid_component"]')
+      || document.querySelector('[data-target="panel-body"]')
+  }
+
+  childDimensions = null
+
+  parentDimensions = null
+
+  connect() {
+    // We need to make the element visible in order to get it's position
+    this.element.style.display = 'block'
+    this.childDimensions = this.contentTarget.getBoundingClientRect()
+    this.element.style.display = ''
+    this.parentDimensions = this.parentTarget.getBoundingClientRect()
+
+    this.adjustOverflow()
+  }
+
+  adjustOverflow() {
+    this.adjustVerticalOverflow()
+    this.adjustHorizontalOverflow()
+  }
+
+  adjustVerticalOverflow() {
+    if (this.contentBottomOverflow) {
+      this.contentTarget.classList.remove('top-full', 'mt-2')
+      this.contentTarget.classList.add('bottom-full', 'mb-2')
+    }
+  }
+
+  adjustHorizontalOverflow() {
+    if (this.contentLeftOverflow) {
+      this.contentTarget.classList.remove('xl:right-0', 'sm:right-0')
+      this.contentTarget.classList.add('xl:left-0', 'sm:left-0')
+    }
+  }
+
+  get contentBottomOverflow() {
+    // If the list is on panel header, we don't want to adjust the vertical overflow
+    if (this.panelListValue === true) {
+      return false
+    }
+
+    return this.parentDimensions.bottom < this.childDimensions.bottom
+  }
+
+  get contentLeftOverflow() {
+    return this.parentDimensions.left > this.childDimensions.left
+  }
+}

data/app/javascript/js/controllers/fields/key_value_controller.js

@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-import * as DOMPurify from 'dompurify'
 import { Controller } from '@hotwired/stimulus'
 import { castBoolean } from '../../helpers/cast_boolean'
 
@@ -81,7 +80,7 @@ export default class extends Controller {
     let index = 0
     this.fieldValue.forEach((row) => {
       const [key, value] = row
-      result += this.interpolatedRow(DOMPurify.sanitize(key), DOMPurify.sanitize(value), index)
+      result += this.interpolatedRow(key, value, index)
       index++
     })
     this.rowsTarget.innerHTML = result

data/app/javascript/js/controllers/filter_controller.js

@@ -98,7 +98,7 @@ export default class extends Controller {
 
     url.query(query)
 
-    this.urlRedirectTarget.href = url
+    this.urlRedirectTarget.href = url.readable().toString()
     this.urlRedirectTarget.click()
   }
 }

data/app/javascript/js/controllers/input_autofocus_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['element'];
+
+  focus({ params }) {
+    const element = this.context.element.querySelector(params.selector)
+    if (this.element) {
+      element.focus()
+    }
+  }
+}

data/app/javascript/js/controllers/preview_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+  }
+
+  connect() {
+    const vm = this;
+
+    tippy(vm.context.element, {
+      content: "loading...",
+      allowHTML: true,
+      theme: 'light',
+      maxWidth: 550,
+      async onShow(instance) {
+        const response = await fetch(vm.urlValue)
+        const content = await response.text()
+        instance.setContent(content)
+      },
+    })
+  }
+}

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

@@ -212,8 +212,8 @@ export default class extends Controller {
     const url = URI()
 
     return url.segment([window.Avo.configuration.root_path, ...this.searchSegments()])
-              .search(this.searchParams(encodeURIComponent(query)))
-              .readable().toString()
+      .search(this.searchParams(encodeURIComponent(query)))
+      .readable().toString()
   }
 
   searchSegments() {

data/app/javascript/js/controllers/self_destroy_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  destroy() {
+    this.context.element.remove()
+  }
+}

data/app/javascript/js/controllers/toggle_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from '@hotwired/stimulus'
+import { leave, toggle } from 'el-transition'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['panel']
+
+  static values = {
+    // One may want to have an element that is exempt from triggerring the click outside event
+    exemptionContainer: String,
+  }
+
+  get exemptionContainerTarget() {
+    return document.querySelector(this.exemptionContainerValue)
+  }
+
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside(e) {
+    if (this.hasPanelTarget) {
+      if (this.hasExemptionContainerValue) {
+        const inExemptionContainer = this.exemptionContainerTarget.contains(e.target)
+
+        if (!inExemptionContainer) {
+          leave(this.panelTarget)
+        }
+      } else {
+        leave(this.panelTarget)
+      }
+    }
+  }
+
+  togglePanel() {
+    if (this.hasPanelTarget) {
+      toggle(this.panelTarget)
+    }
+  }
+
+  outlet({ params }) {
+    const { outlet } = params
+
+    if (outlet && document.querySelector(outlet)) {
+      document.querySelector(outlet).classList.toggle('hidden')
+    }
+  }
+}

data/app/javascript/js/controllers.js

@@ -1,6 +1,7 @@
 import { application } from './application'
 
 import ActionController from './controllers/action_controller'
+import ActionsOverflowController from './controllers/actions_overflow_controller'
 import ActionsPickerController from './controllers/actions_picker_controller'
 import AttachmentsController from './controllers/attachments_controller'
 import BelongsToFieldController from './controllers/fields/belongs_to_field_controller'
@@ -12,6 +13,7 @@ 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 InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
 import ItemSelectorController from './controllers/item_selector_controller'
 import KeyValueController from './controllers/fields/key_value_controller'
@@ -20,23 +22,24 @@ 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 PreviewController from './controllers/preview_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 SelfDestroyController from './controllers/self_destroy_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 ToggleController from './controllers/toggle_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
 
 application.register('action', ActionController)
+application.register('actions-overflow', ActionsOverflowController)
 application.register('actions-picker', ActionsPickerController)
 application.register('attachments', AttachmentsController)
 application.register('boolean-filter', BooleanFilterController)
@@ -44,6 +47,7 @@ application.register('copy-to-clipboard', CopyToClipboardController)
 application.register('dashboard-card', DashboardCardController)
 application.register('filter', FilterController)
 application.register('hidden-input', HiddenInputController)
+application.register('input-autofocus', InputAutofocusController)
 application.register('item-select-all', ItemSelectAllController)
 application.register('item-selector', ItemSelectorController)
 application.register('loading-button', LoadingButtonController)
@@ -51,18 +55,19 @@ application.register('menu', MenuController)
 application.register('modal', ModalController)
 application.register('multiple-select-filter', MultipleSelectFilterController)
 application.register('per-page', PerPageController)
+application.register('preview', PreviewController)
 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('self-destroy', SelfDestroyController)
 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)
+application.register('toggle', ToggleController)
 
 // Field controllers
 application.register('belongs-to-field', BelongsToFieldController)
@@ -71,7 +76,6 @@ 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/custom-stream-actions.js

@@ -0,0 +1,15 @@
+/* eslint-disable camelcase */
+import { StreamActions } from '@hotwired/turbo'
+
+// TODO: move these to the avo_filters gem
+
+StreamActions.close_filters_dropdown = function () {
+  document.querySelector('.filters-dropdown-selector').classList.add('hidden')
+}
+
+StreamActions.open_filter = function () {
+  const id = this.getAttribute('unique-id')
+  setTimeout(() => {
+    document.querySelector(`[data-filter-id="${id}"] .pill`).click()
+  }, 150)
+}

data/app/views/avo/actions/keep_modal_open.turbo_stream.erb

@@ -0,0 +1,5 @@
+<turbo-stream action="append" target="alerts">
+  <template>
+    <%= render Avo::FlashAlertsComponent.new flashes: flash %>
+  </template>
+</turbo-stream>

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

@@ -1,13 +1,14 @@
 <%= turbo_frame_tag "actions_show" do %>
   <div
-    data-controller="<%= ["action", @action.get_stimulus_controllers].join(" ") %>"
+    data-controller="action"
     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',
+    <%= form_with model: @record,
+      scope: 'fields',
       url: Avo::Services::URIService.parse(@resource.records_path).append_paths("actions").to_s,
       local: true,
       data: @action.class.form_data_attributes do |form|
@@ -16,25 +17,24 @@
       <% 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 :avo_resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
+      <%= form.hidden_field :avo_resource_ids, value: params[:id] || params[:resource_ids], 'data-action-target': 'resourceIds' %>
       <%= form.hidden_field :avo_selected_query, 'data-action-target': 'selectedAllQuery' %>
+      <%= form.hidden_field :arguments, value: params[:arguments] %>
       <% 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)
+              .hydrate(resource: @resource, record: @resource.record, user: @resource.user, view: @view)
               .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' },
@@ -46,7 +46,10 @@
             color: :green,
             style: :primary,
             size: :sm,
-            data: @action.class.submit_button_data_attributes do %>
+            data: {
+              target: :submit_action,
+              **@action.class.submit_button_data_attributes
+            } do %>
           <%= @action.confirm_button_label %>
         <% end %>
       <% end %>

data/app/views/avo/associations/new.html.erb

@@ -16,8 +16,8 @@
       <% end %>
 
       <div class="flex-1 flex items-center justify-center px-0 lg:px-8 text-lg mt-8 mb-12">
-        <% if @field.searchable %>
-          <%= render Avo::Fields::BelongsToField::AutocompleteComponent.new form: form,
+        <% if @field.is_searchable? %>
+          <%= render Avo::Pro::SearchableAssociations::AutocompleteComponent.new form: form,
             classes: input_classes("w-full"),
             field: @field,
             model_key: @field.target_resource&.model_key,

data/app/views/avo/base/index.html.erb

@@ -2,17 +2,18 @@
   <%= render Avo::Views::ResourceIndexComponent.new(
       resource: @resource,
       resources: @resources,
-      models: @models,
+      records: @records,
       pagy: @pagy,
       index_params: @index_params,
       filters: @filters,
       actions: @actions,
       reflection: @reflection,
       turbo_frame: params[:turbo_frame],
-      parent_model: @parent_model,
+      parent_record: @parent_record,
       parent_resource: @parent_resource,
       applied_filters: @applied_filters,
       query: @query,
+      scopes: @scopes,
     )
   %>
 <% end %>

data/app/views/avo/base/new.html.erb

@@ -1 +1,2 @@
-<%= render Avo::Views::ResourceEditComponent.new(resource: @resource, model: @model, view: @view, actions: @actions) %>
+<%= render Avo::Views::ResourceEditComponent.new(resource: @resource, record: @record, view: @view, actions: @actions) %>
+

data/app/views/avo/base/preview.html.erb

@@ -0,0 +1,19 @@
+<%= turbo_frame_tag params[:turbo_frame] do %>
+  <%= content_tag :div, class: "-mx-2" do %>
+    <%= content_tag :div, class: "px-4 py-2" do %>
+      <div class="text-base font-semibold text-gray-800">Previewing <%= @resource.record_title %></div>
+    <% end %>
+
+    <% if @resource.get_preview_fields.present? %>
+      <div class="mt-4 divide-y border-t">
+        <% @resource.get_preview_fields.each_with_index do |field, index| %>
+          <%= render field
+            .hydrate(resource: @resource, record: @resource.record, user: @resource.user, view: :show)
+            .component_for_view(:show)
+            .new(field: field, resource: @resource, index: index, compact: true, short: true, stacked: false)
+          %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/avo/base/show.html.erb

@@ -3,7 +3,7 @@
     resource: @resource,
     reflection: @reflection,
     actions: @actions,
-    parent_model: @parent_model,
+    parent_record: @parent_record,
     parent_resource: @parent_resource,
   ) %>
 <% end %>

data/app/views/avo/debug/_valid_indicator.html.erb

@@ -0,0 +1,9 @@
+<% if valid %>
+  <span class="text-green-700 text-xl">
+    <%= svg "check-badge", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
+  </span>
+<% else %>
+  <span class="text-orange-700 text-xl">
+    <%= svg "exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
+  </span>
+<% end %>