avo 1.21.0.pre.1 → 1.22.0

data/app/controllers/avo/base_controller.rb

@@ -7,6 +7,7 @@ module Avo
     before_action :hydrate_resource
     before_action :set_model, only: [:show, :edit, :destroy, :update]
     before_action :set_model_to_fill
+    before_action :fill_model, only: [:create, :update]
     before_action :authorize_action
     before_action :reset_pagination_if_filters_changed, only: :index
     before_action :cache_applied_filters, only: :index
@@ -112,7 +113,6 @@ module Avo
 
     def create
       # model gets instantiated and filled in the fill_model method
-      fill_model
       saved = @model.save
       @resource.hydrate(model: @model, view: :new, user: _current_user)
 
@@ -166,7 +166,6 @@ module Avo
 
     def update
       # model gets instantiated and filled in the fill_model method
-      fill_model
       saved = @model.save
       @resource = @resource.hydrate(model: @model, view: :edit, user: _current_user)
 
@@ -194,8 +193,6 @@ module Avo
     private
 
     def model_params
-      model_param_key = @resource.form_scope
-
       request_params = params.require(model_param_key).permit(permitted_params)
 
       if @resource.devise_password_optional && request_params[:password].blank? && request_params[:password_confirmation].blank?

data/app/controllers/avo/relations_controller.rb

@@ -4,11 +4,11 @@ module Avo
   class RelationsController < BaseController
     before_action :set_model, only: [:show, :index, :new, :create, :destroy]
     before_action :set_related_resource_name
-    before_action :set_related_resource
-    before_action :hydrate_related_resource
+    before_action :set_related_resource, only: [:show, :index, :new, :create, :destroy]
+    before_action :hydrate_related_resource, only: [:show, :index, :new, :create, :destroy]
     before_action :set_related_model, only: [:show]
-    before_action :set_attachment_class
-    before_action :set_attachment_resource
+    before_action :set_attachment_class, only: [:show, :index, :new, :create, :destroy]
+    before_action :set_attachment_resource, only: [:show, :index, :new, :create, :destroy]
     before_action :set_attachment_model, only: [:create, :destroy]
     before_action :set_reflection, only: [:index, :show]
 

data/app/controllers/avo/search_controller.rb

@@ -60,7 +60,6 @@ module Avo
           _id: model.id,
           _label: resource.label,
           _url: resource.record_path,
-          model: model
         }
 
         if App.license.has_with_trial(:enhanced_search_results)

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

@@ -1,65 +1,128 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
-  static targets = ['select', 'type']
+  static targets = ['select', 'type', 'loadAssociationLink'];
+
+  defaults = {};
 
   get selectedType() {
     return this.selectTarget.value
   }
 
-  connect() {
-    this.setValidNames()
-    this.changedType()
+  get isSearchable() {
+    return this.context.scope.element.dataset.searchable === 'true'
   }
 
-  setValidNames() {
-    this.typeTargets.forEach((target) => {
-      const { type } = target.dataset
-      const select = target.querySelector('select')
-      const name = select.getAttribute('name')
+  get association() {
+    return this.context.scope.element.dataset.association
+  }
 
-      select.setAttribute('valid-name', name)
-      if (this.selectedType !== type) {
-        select.selectedIndex = 0
-      }
-    })
+  get associationClass() {
+    return this.context.scope.element.dataset.associationClass
   }
 
-  changedType() {
-    this.hideAllTypeTargets()
-    this.enableType(this.selectTarget.value)
+  connect() {
+    this.copyValidNames()
+    this.changeType() // Do the initial type change
   }
 
-  hideAllTypeTargets() {
+  changeType() {
+    this.hideAllTypes()
+    this.showType(this.selectTarget.value)
+  }
+
+  // Private
+
+  hideAllTypes() {
     this.typeTargets.forEach((target) => {
-      this.hideTarget(target)
+      target.classList.add('hidden')
+
       this.invalidateTarget(target)
     })
   }
 
-  hideTarget(target) {
-    target.classList.add('hidden')
-  }
+  /**
+   * Used for invalidating select fields when switching between types so they don't automatically override the previous id.
+   * Ex: There are two types Article and Project and the Comment has commentable_id 3 and commentable_type: Article
+   * When you change the type from Project to Article the Project field will override the commentable_id value
+   * because it was rendered later (alphabetical sorting) and the browser will pick that one up.
+   * So we go and copy the name attribute to valid-name for all types and then copy it back to name when the user selects it.
+   */
 
-  invalidateTarget(target) {
-    const select = target.querySelector('select')
+  /**
+   * This method does the initial copying from name to valid-name.
+   */
+  copyValidNames() {
+    this.typeTargets.forEach((target) => {
+      const { type } = target.dataset
 
-    select.setAttribute('name', '')
-  }
+      if (this.isSearchable) {
+        const textInput = target.querySelector('input[type="text"]')
+        if (textInput) {
+          textInput.setAttribute('valid-name', textInput.getAttribute('name'))
+        }
 
-  validateTarget(target) {
-    const select = target.querySelector('select')
-    const validName = select.getAttribute('valid-name')
+        const hiddenInput = target.querySelector('input[type="hidden"]')
+        if (hiddenInput) {
+          hiddenInput.setAttribute(
+            'valid-name',
+            hiddenInput.getAttribute('name'),
+          )
+        }
+      } else {
+        const select = target.querySelector('select')
+        if (select) {
+          select.setAttribute('valid-name', select.getAttribute('name'))
+        }
 
-    select.setAttribute('name', validName)
+        if (this.selectedType !== type) {
+          select.selectedIndex = 0
+        }
+      }
+    })
   }
 
-  enableType(type) {
-    const target = this.typeTargets.find((typeTarget) => typeTarget.dataset.type === type)
-
+  showType(type) {
+    const target = this.typeTargets.find(
+      (typeTarget) => typeTarget.dataset.type === type,
+    )
     if (target) {
       target.classList.remove('hidden')
+
       this.validateTarget(target)
     }
   }
+
+  /**
+   * Copy value from `valid-name` to `name`
+   */
+  validateTarget(target) {
+    if (this.isSearchable) {
+      const textInput = target.querySelector('input[type="text"]')
+      const hiddenInput = target.querySelector('input[type="hidden"]')
+
+      textInput.setAttribute('name', textInput.getAttribute('valid-name'))
+      hiddenInput.setAttribute('name', hiddenInput.getAttribute('valid-name'))
+    } else {
+      const select = target.querySelector('select')
+      select.setAttribute('name', select.getAttribute('valid-name'))
+    }
+  }
+
+  /**
+   * nullify the `name` attribute
+   */
+  invalidateTarget(target) {
+    if (this.isSearchable) {
+      // Wrapping it in a try/catch to counter turbo's cache system (going back to the edit page after initial save)
+      try {
+        target.querySelector('input[type="text"]').setAttribute('name', '')
+        target.querySelector('input[type="hidden"]').setAttribute('name', '')
+      } catch {}
+    } else if (target) {
+      try {
+        target.querySelector('select').setAttribute('name', '')
+      } catch (error) {}
+    }
+  }
 }

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

@@ -1,8 +1,14 @@
 import { Controller } from 'stimulus'
 import { DateTime } from 'luxon'
-import { castBoolean } from '../../helpers/cast_boolean'
 import flatpickr from 'flatpickr'
 
+import { castBoolean } from '../../helpers/cast_boolean'
+
+// Get the DateTime with the TZ offset applied.
+function universalTimestamp(timestampStr) {
+  return new Date(new Date(timestampStr).getTime() + (new Date(timestampStr).getTimezoneOffset() * 60 * 1000))
+}
+
 export default class extends Controller {
   static targets = ['input']
 
@@ -43,7 +49,9 @@ export default class extends Controller {
       // this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
       options.appTimezone = this.inputTarget.dataset.timezone
     } else {
-      currentValue = new Date(this.inputTarget.value)
+      // Because the browser treats the date like a timestamp and updates it ot 00:00 hour, when on a western timezone the date will be converted with one day offset.
+      // Ex: 2022-01-30 will render as 2022-01-29 on an American timezone
+      currentValue = universalTimestamp(this.inputTarget.value)
     }
 
     options.defaultDate = currentValue

data/app/javascript/js/controllers/item_selector_controller.js

@@ -1,9 +1,9 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
-  static targets = ['panel']
+  static targets = ['panel'];
 
-  checkbox = {}
+  checkbox = {};
 
   get actionsPanelPresent() {
     return this.actionsButtonElement !== null
@@ -17,6 +17,12 @@ export default class extends Controller {
     }
   }
 
+  get actionLinks() {
+    return document.querySelectorAll(
+      '.js-actions-dropdown a[data-actions-picker-target="resourceAction"]',
+    )
+  }
+
   set currentIds(value) {
     this.stateHolderElement.dataset.selectedResources = JSON.stringify(value)
 
@@ -32,8 +38,12 @@ export default class extends Controller {
   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}"]`)
+    this.actionsButtonElement = document.querySelector(
+      `[data-actions-dropdown-button="${this.resourceName}"]`,
+    )
+    this.stateHolderElement = document.querySelector(
+      `[data-selected-resources-name="${this.resourceName}"]`,
+    )
   }
 
   addToSelected() {
@@ -45,7 +55,9 @@ export default class extends Controller {
   }
 
   removeFromSelected() {
-    this.currentIds = this.currentIds.filter((item) => item.toString() !== this.resourceId)
+    this.currentIds = this.currentIds.filter(
+      (item) => item.toString() !== this.resourceId,
+    )
   }
 
   toggle(event) {
@@ -59,22 +71,20 @@ export default class extends Controller {
   }
 
   enableResourceActions() {
-    (document.querySelectorAll('.js-actions-dropdown a[data-actions-picker-target="resourceAction"]'))
-      .forEach((link) => {
-        link.classList.add('text-gray-700')
-        link.classList.remove('text-gray-500')
-        link.setAttribute('data-href', link.getAttribute('href'))
-        link.dataset.disabled = false
-      })
+    this.actionLinks.forEach((link) => {
+      link.classList.add('text-gray-700')
+      link.classList.remove('text-gray-500')
+      link.setAttribute('data-href', link.getAttribute('href'))
+      link.dataset.disabled = false
+    })
   }
 
   disableResourceActions() {
-    (document.querySelectorAll('.js-actions-dropdown a[data-actions-picker-target="resourceAction"]'))
-      .forEach((link) => {
-        link.classList.remove('text-gray-700')
-        link.classList.add('text-gray-500')
-        link.setAttribute('href', link.getAttribute('data-href'))
-        link.dataset.disabled = true
-      })
+    this.actionLinks.forEach((link) => {
+      link.classList.remove('text-gray-700')
+      link.classList.add('text-gray-500')
+      link.setAttribute('href', link.getAttribute('data-href'))
+      link.dataset.disabled = true
+    })
   }
 }

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

@@ -3,17 +3,40 @@ import * as Mousetrap from 'mousetrap'
 import { Controller } from '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']
+  static targets = [
+    'autocomplete',
+    'button',
+    'hiddenId',
+    'visibleLabel',
+    'clearValue',
+    'clearButton',
+  ];
+
+  debouncedFetch = debouncePromise(fetch, this.searchDebounce);
+
+  get dataset() {
+    return this.autocompleteTarget.dataset
+  }
 
-  debouncedFetch = debouncePromise(fetch, this.debounceTimeout)
+  get searchDebounce() {
+    return window.Avo.configuration.search_debounce
+  }
 
   get translationKeys() {
     let keys
     try {
-      keys = JSON.parse(this.autocompleteTarget.dataset.translationKeys)
+      keys = JSON.parse(this.dataset.translationKeys)
     } catch (error) {
       keys = {}
     }
@@ -21,20 +44,50 @@ export default class extends Controller {
     return keys
   }
 
-  get debounceTimeout() {
-    return this.autocompleteTarget.dataset.debounceTimeout
+  get isBelongsToSearch() {
+    return this.dataset.viaAssociation === 'belongs_to'
   }
 
-  get searchResource() {
-    return this.autocompleteTarget.dataset.searchResource
+  get isGlobalSearch() {
+    return this.dataset.searchResource === 'global'
   }
 
-  get isGlobalSearch() {
-    return this.searchResource === 'global'
+  searchUrl(query) {
+    const url = URI()
+
+    let params = { q: query }
+    let segments = [
+      window.Avo.configuration.root_path,
+      'avo_api',
+      this.dataset.searchResource,
+      'search',
+    ]
+
+    if (this.isGlobalSearch) {
+      segments = [window.Avo.configuration.root_path, 'avo_api', 'search']
+    }
+
+    if (this.isBelongsToSearch) {
+      // eslint-disable-next-line camelcase
+      params = { ...params, via_association: this.dataset.viaAssociation }
+    }
+
+    return url.segment(segments).search(params).toString()
   }
 
-  get searchUrl() {
-    return this.isGlobalSearch ? `${window.Avo.configuration.root_path}/avo_api/search` : `${window.Avo.configuration.root_path}/avo_api/${this.searchResource}/search`
+  handleOnSelect({ item }) {
+    if (this.isBelongsToSearch) {
+      this.hiddenIdTarget.setAttribute('value', item._id)
+      this.buttonTarget.setAttribute('value', item._label)
+
+      document.querySelector('.aa-DetachedOverlay').remove()
+
+      if (this.hasClearButtonTarget) {
+        this.clearButtonTarget.classList.remove('hidden')
+      }
+    } else {
+      Turbo.visit(item._url, { action: 'advance' })
+    }
   }
 
   addSource(resourceName, data) {
@@ -43,9 +96,7 @@ export default class extends Controller {
     return {
       sourceId: resourceName,
       getItems: () => data.results,
-      onSelect({ item }) {
-        Turbo.visit(item._url, { action: 'replace' })
-      },
+      onSelect: that.handleOnSelect.bind(that),
       templates: {
         header() {
           return `${data.header.toUpperCase()} ${data.help}`
@@ -84,7 +135,10 @@ export default class extends Controller {
           })
         },
         noResults() {
-          return that.translationKeys.no_item_found.replace('%{item}', resourceName)
+          return that.translationKeys.no_item_found.replace(
+            '%{item}',
+            resourceName,
+          )
         },
       },
     }
@@ -94,11 +148,22 @@ export default class extends Controller {
     this.autocompleteTarget.querySelector('button').click()
   }
 
+  clearValue() {
+    this.clearValueTargets.map((e) => e.setAttribute('value', ''))
+    this.clearButtonTarget.classList.add('hidden')
+  }
+
   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())
     }
@@ -112,12 +177,18 @@ export default class extends Controller {
       openOnFocus: true,
       detachedMediaQuery: '',
       getSources: ({ query }) => {
-        const endpoint = `${that.searchUrl}?q=${query}`
+        const endpoint = that.searchUrl(query)
 
-        return that.debouncedFetch(endpoint)
+        return that
+          .debouncedFetch(endpoint)
           .then((response) => response.json())
           .then((data) => Object.keys(data).map((resourceName) => that.addSource(resourceName, data[resourceName])))
       },
     })
+
+    // When using search for belongs-to
+    if (this.buttonTarget.dataset.shouldBeDisabled !== 'true') {
+      this.buttonTarget.removeAttribute('disabled')
+    }
   }
 }

data/app/views/avo/partials/_global_search.html.erb

@@ -3,7 +3,6 @@
     data-search-target="autocomplete"
     data-search-resource="global"
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>", "placeholder": "<%= I18n.translate 'avo.search.placeholder' %>", "cancel_button": "<%= I18n.translate 'avo.search.cancel_button' %>"}'
-    data-debounce-timeout='<%= Avo.configuration.search_debounce %>'
   >
   </div>
   <div class="relative top-[-5px] inline-flex text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md cursor-pointer"

data/app/views/avo/partials/_javascript.html.erb

@@ -2,4 +2,5 @@
   window.Avo = window.Avo || { configuration: {} }
   Avo.configuration.timezone = '<%= Avo.configuration.timezone %>'
   Avo.configuration.root_path = '<%= Avo::App.root_path %>'
+  Avo.configuration.search_debounce = '<%= Avo.configuration.search_debounce %>'
 <% end %>

data/app/views/avo/partials/_logo.html.erb

@@ -1 +1,3 @@
-<%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
+<%= link_to root_path, class: 'logo-placeholder h-16 bg-white p-2 flex justify-center' do %>
+  <%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
+<% end %>

data/app/views/avo/partials/_resource_search.html.erb

@@ -3,7 +3,6 @@
     data-search-target="autocomplete"
     data-search-resource="<%= resource %>"
     data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>"}'
-    data-debounce-timeout='<%= Avo.configuration.search_debounce %>'
   >
   </div>
   <div class="hidden relative inline-flex text-gray-400 text-sm border border-gray-300 rounded-full cursor-pointer" data-search-target="button"></div>

data/app/views/avo/partials/_turbo_frame_wrap.html.erb

@@ -1,3 +1,9 @@
 <% if name.present? %><turbo-frame id="<%= name %>"><% end %>
-<%= yield %>
+  <%
+    # When rendering the frames the flashed content gets lost.
+    # By including the alerts partial, the stimulus will pick them up and display them to the user.
+  %>
+  <%= render partial: 'avo/partials/alerts'if flash.present? if flash.present? %>
+
+  <%= yield %>
 <% if name.present? %></turbo-frame><% end %>

data/app/views/avo/sidebar/_sidebar.html.erb

@@ -1,8 +1,6 @@
 <div class="application-sidebar flex h-full bg-white text-white w-56 z-50 border-r border-gray-300">
   <div class="flex flex-col w-full">
-    <%= link_to root_path, class: 'logo-placeholder h-16 bg-white p-2 flex justify-center' do %>
-      <%= render partial: "avo/partials/logo" %>
-    <% end %>
+    <%= render partial: "avo/partials/logo" %>
 
     <div class="flex-1 flex flex-col justify-between">
       <div class="tools py-4">

data/db/factories.rb

@@ -45,6 +45,10 @@ FactoryBot.define do
     body { Faker::Lorem.paragraphs(number: rand(4...10)).join("\n") }
   end
 
+  factory :review do
+    body { Faker::Lorem.paragraphs(number: rand(4...10)).join("\n") }
+  end
+
   factory :person do
     name { "#{Faker::Name.first_name} #{Faker::Name.last_name}" }
   end
@@ -54,11 +58,15 @@ FactoryBot.define do
     type { "Spouse" }
   end
 
+  factory :fish do
+    name { %w[Tilapia Salmon Trout Catfish Pangasius Carp].sample }
+  end
+
   factory :course do
-    name { Faker::Company.name }
+    name { Faker::Educator.unique.course_name }
   end
 
-  factory :link do
-    name { Faker::Internet.url }
+  factory :course_link, class: "Course::Link" do
+    link { Faker::Internet.url }
   end
 end

data/lib/avo/base_resource.rb

@@ -6,7 +6,7 @@ module Avo
 
     include ActionView::Helpers::UrlHelper
 
-    delegate :view_context, to: 'Avo::App'
+    delegate :view_context, to: "Avo::App"
     delegate :main_app, to: :view_context
     delegate :avo, to: :view_context
     delegate :resource_path, to: :view_context
@@ -21,7 +21,7 @@ module Avo
     class_attribute :title, default: :id
     class_attribute :description, default: :id
     class_attribute :search_query, default: nil
-    class_attribute :search_query_help, default: ''
+    class_attribute :search_query_help, default: ""
     class_attribute :includes, default: []
     class_attribute :model_class
     class_attribute :translation_key
@@ -60,7 +60,7 @@ module Avo
       # This is the search_query scope
       # This should be removed and passed to the search block
       def scope
-        self.query_scope
+        query_scope
       end
 
       # This resolves the scope when doing "where" queries (not find queries)
@@ -128,17 +128,19 @@ module Avo
         end
         .select do |field|
           # Strip out the reflection field in index queries with a parent association.
-          if reflection.present? &&
-              reflection.options.present? &&
-              field.respond_to?(:polymorphic_as) &&
-              field.polymorphic_as.to_s == reflection.options[:as].to_s
-            next
-          end
-          if field.respond_to?(:foreign_key) &&
-              reflection.present? &&
-              reflection.respond_to?(:foreign_key) &&
-              reflection.foreign_key != field.foreign_key
-            next
+          if reflection.present?
+            if reflection.options.present? &&
+                field.respond_to?(:polymorphic_as) &&
+                field.polymorphic_as.to_s == reflection.options[:as].to_s
+              next
+            end
+
+            if field.respond_to?(:foreign_key) &&
+                reflection.respond_to?(:foreign_key) &&
+                reflection.foreign_key != field.foreign_key &&
+                @params[:resource_name] == field.resource.model_key
+              next
+            end
           end
 
           true

data/lib/avo/fields/base_field.rb

@@ -136,7 +136,7 @@ module Avo
           end
         end
 
-        # Run callback block if present
+        # Run computable callback block if present
         if computable && block.present?
           final_value = instance_exec(@model, @resource, @view, self, &block)
         end