avo 1.20.1 → 1.21.0

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,48 @@ 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()
+
+      this.clearButtonTarget.classList.remove('hidden')
+    } else {
+      Turbo.visit(item._url, { action: 'advance' })
+    }
   }
 
   addSource(resourceName, data) {
@@ -43,9 +94,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 +133,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 +146,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.clearButtonTarget.classList.remove('hidden')
+      }
+    })
+
     if (this.isGlobalSearch) {
       Mousetrap.bind(['command+k', 'ctrl+k'], () => this.showSearchPanel())
     }
@@ -112,12 +175,15 @@ 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])))
       },
     })
+
+    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/_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/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

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

data/lib/avo/fields/belongs_to_field.rb

@@ -1,10 +1,9 @@
 module Avo
   module Fields
     class BelongsToField < BaseField
-      attr_reader :searchable
       attr_reader :polymorphic_as
       attr_reader :relation_method
-      attr_reader :types
+      attr_reader :types # for Polymorphic associations
 
       def initialize(id, **args, &block)
         args[:placeholder] ||= I18n.t("avo.choose_an_option")
@@ -17,10 +16,28 @@ module Avo
         @relation_method = name.to_s.parameterize.underscore
       end
 
+      def searchable
+        @searchable && ::Avo::App.license.has_with_trial(:searchable_belongs_to)
+      end
+
       def value
         super(polymorphic_as)
       end
 
+      # The value
+      def field_value
+        value.send(database_value)
+      rescue
+        nil
+      end
+
+      # What the user sees in the text field
+      def field_label
+        value.send(target_resource.class.title)
+      rescue
+        nil
+      end
+
       def options
         ::Avo::Services::AuthorizationService.apply_policy(user, target_resource.class.query_scope).all.map do |model|
           {

data/lib/avo/fields/file_field.rb

@@ -4,6 +4,7 @@ module Avo
       attr_accessor :link_to_resource
       attr_accessor :is_avatar
       attr_accessor :is_image
+      attr_accessor :is_audio
       attr_accessor :direct_upload
 
       def initialize(id, **args, &block)
@@ -12,6 +13,7 @@ module Avo
         @link_to_resource = args[:link_to_resource].present? ? args[:link_to_resource] : false
         @is_avatar = args[:is_avatar].present? ? args[:is_avatar] : false
         @is_image = args[:is_image].present? ? args[:is_image] : @is_avatar
+        @is_audio = args[:is_audio].present? ? args[:is_audio] : false
         @direct_upload = args[:direct_upload].present? ? args[:direct_upload] : false
       end
 

data/lib/avo/fields/files_field.rb

@@ -1,12 +1,14 @@
 module Avo
   module Fields
     class FilesField < BaseField
+      attr_accessor :is_audio
       attr_accessor :is_image
       attr_accessor :direct_upload
 
       def initialize(id, **args, &block)
         super(id, **args, &block)
 
+        @is_audio = args[:is_audio].present? ? args[:is_audio] : false
         @is_image = args[:is_image].present? ? args[:is_image] : @is_avatar
         @direct_upload = args[:direct_upload].present? ? args[:direct_upload] : false
       end

data/lib/avo/licensing/pro_license.rb

@@ -7,7 +7,8 @@ module Avo
           :custom_tools,
           :custom_fields,
           :global_search,
-          :enhanced_search_results
+          :enhanced_search_results,
+          :searchable_belongs_to,
         ]
       end
     end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "1.20.1"
+  VERSION = "1.21.0"
 end

data/lib/generators/avo/templates/locales/avo.en.yml

@@ -93,3 +93,4 @@ en:
       delete_row: 'Delete row'
     was_successfully_created: 'was successfully created'
     was_successfully_updated: 'was successfully updated'
+    clear_value: "Clear value"

data/public/avo-assets/avo.css

@@ -6402,6 +6402,14 @@ progress[value]::-moz-progress-bar{
   top:-1px
 }
 
+.left-auto{
+  left:auto
+}
+
+.right-3{
+  right:0.75rem
+}
+
 .z-10{
   z-index:10
 }
@@ -6571,6 +6579,14 @@ progress[value]::-moz-progress-bar{
   margin-left:0.5rem
 }
 
+.mr-px{
+  margin-right:1px
+}
+
+.-mt-2{
+  margin-top:-0.5rem
+}
+
 .ml-6{
   margin-left:1.5rem
 }