avo 1.4.2 → 1.5.0

data/app/helpers/avo/application_helper.rb

@@ -31,12 +31,10 @@ module Avo
       render partial: "avo/partials/empty_state", locals: {resource_name: resource_name}
     end
 
-    def turbo_frame_start(name)
-      "<turbo-frame id=\"#{name}\">".html_safe if name.present?
-    end
-
-    def turbo_frame_end(name)
-      "</turbo-frame>".html_safe if name.present?
+    def turbo_frame_wrap(name, &block)
+      render layout: "avo/partials/turbo_frame_wrap", locals: {name: name} do
+        capture(&block)
+      end
     end
 
     def a_button(label = nil, **args, &block)

data/app/packs/entrypoints/application.css

@@ -4,7 +4,7 @@
 @import './../../../node_modules/tippy.js/themes/light.css';
 @import './../../../node_modules/trix/dist/trix.css';
 @import './../../../node_modules/flatpickr/dist/flatpickr.css';
-
+@import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
 
 @import './../stylesheets/tailwindcss/base.css';
 
@@ -15,6 +15,7 @@
 @import './../stylesheets/loader.css';
 @import './../stylesheets/pagination.css';
 @import './../stylesheets/breadcrumbs.css';
+@import './../stylesheets/search.css';
 
 @import './../stylesheets/components/status.css';
 @import './../stylesheets/components/code.css';

data/app/packs/entrypoints/application.js

@@ -45,6 +45,9 @@ document.addEventListener('turbo:load', () => {
 })
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))
+document.addEventListener('turbo:before-cache', () => {
+  document.querySelectorAll('[data-turbo-remove-before-cache]').forEach((element) => element.remove())
+})
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

data/app/packs/js/controllers/search_controller.js

@@ -0,0 +1,120 @@
+/* eslint-disable no-underscore-dangle */
+import * as Mousetrap from 'mousetrap'
+import { Controller } from 'stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import { autocomplete } from '@algolia/autocomplete-js'
+import debouncePromise from '@/js/helpers/debounce_promise'
+
+export default class extends Controller {
+  static targets = ['autocomplete', 'button']
+
+  debouncedFetch = debouncePromise(fetch, this.debounceTimeout)
+
+  get translationKeys() {
+    let keys
+    try {
+      keys = JSON.parse(this.autocompleteTarget.dataset.translationKeys)
+    } catch (error) {
+      keys = {}
+    }
+
+    return keys
+  }
+
+  get debounceTimeout() {
+    return this.autocompleteTarget.dataset.debounceTimeout
+  }
+
+  get searchResource() {
+    return this.autocompleteTarget.dataset.searchResource
+  }
+
+  get isGlobalSearch() {
+    return this.searchResource === 'global'
+  }
+
+  get searchUrl() {
+    return this.isGlobalSearch ? '/avo/avo_api/search' : `/avo/avo_api/${this.searchResource}/search`
+  }
+
+  addSource(resourceName, data) {
+    const that = this
+
+    return {
+      sourceId: resourceName,
+      getItems: () => data.results,
+      onSelect({ item }) {
+        Turbo.visit(item._url, { action: 'replace' })
+      },
+      templates: {
+        header() {
+          return data.header
+        },
+        item({ item, createElement }) {
+          let element = ''
+
+          if (item._avatar) {
+            let classes
+
+            switch (item._avatar_type) {
+              default:
+              case 'circle':
+                classes = 'rounded-full'
+                break
+              case 'rounded':
+                classes = 'rounded'
+                break
+            }
+
+            element += `<img src="${item._avatar}" alt="${item._label}" class="flex-shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}" />`
+          }
+          element += `<div>${item._label}`
+
+          if (item._description) {
+            element += `<div class="aa-ItemDescription">${item._description}</div>`
+          }
+
+          element += '</div>'
+
+          return createElement('div', {
+            class: 'flex',
+            dangerouslySetInnerHTML: {
+              __html: element,
+            },
+          })
+        },
+        noResults() {
+          return that.translationKeys.no_item_found.replace('%{item}', resourceName)
+        },
+      },
+    }
+  }
+
+  showSearchPanel() {
+    this.autocompleteTarget.querySelector('button').click()
+  }
+
+  connect() {
+    const that = this
+
+    this.buttonTarget.onclick = () => this.showSearchPanel()
+
+    if (this.isGlobalSearch) {
+      Mousetrap.bind(['command+k', 'ctrl+k'], () => this.showSearchPanel())
+    }
+
+    autocomplete({
+      container: this.autocompleteTarget,
+      placeholder: 'Search',
+      openOnFocus: true,
+      detachedMediaQuery: '',
+      getSources: ({ query }) => {
+        const endpoint = `${that.searchUrl}?q=${query}`
+
+        return that.debouncedFetch(endpoint)
+          .then((response) => response.json())
+          .then((data) => Object.keys(data).map((resourceName) => that.addSource(resourceName, data[resourceName])))
+      },
+    })
+  }
+}

data/app/packs/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/packs/stylesheets/search.css

@@ -0,0 +1,79 @@
+:root {
+  --aa-primary-color: --tw-ring-color;
+  --aa-selected-color: --tw-ring-color;
+  --aa-primary-color-rgb: 5, 150, 105;
+}
+
+.global-search {
+  .aa-DetachedSearchButton:focus,
+  .aa-DetachedSearchButton {
+    border: none !important;
+  }
+}
+
+.resource-search {
+  .aa-Autocomplete {
+    @apply w-full;
+  }
+
+  .aa-DetachedSearchButton {
+    @apply rounded-full border-gray-300;
+  }
+}
+
+.aa-SourceHeader {
+  @apply uppercase text-xs font-semibold;
+}
+
+.aa-DetachedFormContainer,
+.aa-DetachedContainer .aa-Panel {
+  @apply bg-blue-gray-100 border-b-0;
+}
+
+.aa-Form {
+  &:focus-within {
+    @apply ring-0 !important;
+  }
+
+  input {
+    @apply focus:ring-0 !important;
+  }
+  &:focus-within {
+    .aa-InputWrapperPrefix{
+      .aa-SubmitButton {
+        @apply ring-0;
+      }
+    }
+  }
+}
+.aa-Input {
+  @apply focus:ring-green-600;
+}
+
+.aa-DetachedContainer {
+  .aa-PanelLayout {
+    @apply pt-0 space-y-3;
+  }
+
+  .aa-Source {
+    .aa-List {
+      @apply space-y-1;
+
+      .aa-Item {
+        @apply bg-white rounded-md px-3 py-4 shadow;
+
+        .aa-ItemDescription {
+          @apply text-gray-500 text-sm;
+        }
+
+        &[aria-selected=true]{
+          @apply bg-blue-700 text-white;
+
+          .aa-ItemDescription {
+            @apply text-white;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-<%= turbo_frame_start params[:turbo_frame] %>
+<%= turbo_frame_wrap(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceIndexComponent.new(
       resource: @resource,
       resources: @resources,
@@ -12,4 +12,4 @@
       parent_model: @parent_model,
     )
   %>
-<%= turbo_frame_end params[:turbo_frame] %>
+<% end %>

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

@@ -1,3 +1,3 @@
-<%= turbo_frame_start params[:turbo_frame] %>
+<%= turbo_frame_wrap(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection) %>
-<%= turbo_frame_end params[:turbo_frame] %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<div data-controller="search" class="global-search" data-turbo-remove-before-cache>
+  <div class="inline-block"
+    data-search-target="autocomplete"
+    data-search-resource="global"
+    data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>"}'
+    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-search-target="button"
+  >
+    <span class="sr-only">Press </span>
+    <kbd class="font-sans"><abbr title="Command" class="no-underline">⌘</abbr></kbd>
+    <span class="sr-only"> and </span>
+    <kbd class="font-sans">K</kbd><span class="sr-only"> to search</span>
+  </div>
+</div>

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

@@ -1,19 +1,23 @@
 <div data-controller="toggle-panel">
   <a href="javascript:void(0);" class="flex items-center cursor-pointer font-semibold text-gray-700" data-action="click->toggle-panel#togglePanel">
-    <% if _current_user.respond_to? 'avatar' %>
-      <%= image_tag _current_user.avatar, class: "h-12 rounded-full border-4 border-white mr-1" if _current_user.avatar.present? %>
+    <% if _current_user.respond_to?(:avatar) &&  _current_user.avatar.present? %>
+      <%= image_tag _current_user.avatar, class: "h-12 rounded-full border-4 border-white mr-1" %>
     <% end %>
-    <% if _current_user.name.present? %>
+    <% if _current_user.respond_to?(:name) && _current_user.name.present? %>
       <%= _current_user.name %>
-    <% elsif _current_user.email.present? %>
+    <% elsif _current_user.respond_to?(:email) && _current_user.email.present? %>
       <%= _current_user.email %>
     <% else %>
       Avo user
     <% end %>
-    <%= svg 'chevron-down', class: "ml-1 h-4" %>
+    <% if main_app.respond_to?(:destroy_user_session_path) %>
+      <%= svg 'chevron-down', class: "ml-1 h-4" %>
+    <% end %>
   </a>
 
-  <div class="hidden absolute inset-auto inset-auto right-0 mr-6 mt-0 py-4 bg-white rounded-xl min-w-[200px] shadow-context" data-toggle-panel-target="panel">
-    <%= button_to "Sign out", main_app.destroy_user_session_path, method: :delete, form: { "data-turbo" => "false" }, class: "appearance-none bg-white text-left cursor-pointer text-green-600 font-semibold hover:text-white hover:bg-green-500 block px-4 py-1 w-full" %>
-  </div>
+  <% if main_app.respond_to?(:destroy_user_session_path) %>
+    <div class="hidden absolute inset-auto inset-auto right-0 mr-6 mt-0 py-4 bg-white rounded-xl min-w-[200px] shadow-context" data-toggle-panel-target="panel">
+      <%= button_to "Sign out", main_app.destroy_user_session_path, method: :delete, form: { "data-turbo" => "false" }, class: "appearance-none bg-white text-left cursor-pointer text-green-600 font-semibold hover:text-white hover:bg-green-500 block px-4 py-1 w-full" %>
+    </div>
+  <% end %>
 </div>

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

@@ -0,0 +1,10 @@
+<div data-controller="search" class="resource-search flex items-center h-full w-full" data-turbo-remove-before-cache>
+  <div class="w-full"
+    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="relative inline-flex text-gray-400 text-sm border border-gray-300 rounded-full cursor-pointer" data-search-target="button"></div>
+</div>

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

@@ -0,0 +1,3 @@
+<% if name.present? %><turbo-frame id="<%= name %>"><% end %>
+<%= yield %>
+<% if name.present? %></turbo-frame><% end %>

data/app/views/layouts/avo/application.html.erb

@@ -23,10 +23,8 @@
         <div>
           <%= render partial: "avo/partials/header" %>
         </div>
-        <div class="flex-1 flex justify-center">
-          <div class="w-64 flex">
-            <%# <resources-search :global="true"> %>
-          </div>
+        <div class="flex-1 flex ml-4 pl-4">
+          <%= render partial: "avo/partials/global_search" if ::Avo::App.license.has_with_trial(:global_search) %>
         </div>
         <div class="align-end">
           <%= render partial: "avo/partials/profile_dropdown" %>

data/avo.gemspec

@@ -45,4 +45,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "meta-tags"
   spec.add_dependency "breadcrumbs_on_rails"
   spec.add_dependency "manifester"
+  spec.add_dependency "ransack"
 end

data/config/routes.rb

@@ -4,6 +4,8 @@ Avo::Engine.routes.draw do
   get "resources", to: redirect("/avo")
 
   scope "avo_api", as: "avo_api" do
+    get "/search", to: "search#index"
+    get "/:resource_name/search", to: "search#show"
     post "/resources/:resource_name/:id/attachments/", to: "attachments#create"
   end
 
@@ -27,10 +29,4 @@ Avo::Engine.routes.draw do
     post "/:resource_name/:id/:related_name", to: "relations#create"
     delete "/:resource_name/:id/:related_name/:related_id", to: "relations#destroy"
   end
-
-  # get '/avo-api/search',                  to: 'search#index'
-  # get '/avo-api/:resource_name/search',   to: 'search#resource'
-
-  # Tools
-  # get '/avo-tools/resource-overview', to: 'resource_overview#index'
 end

data/lib/avo/app.rb

@@ -6,6 +6,7 @@ module Avo
     class_attribute :request, default: nil
     class_attribute :context, default: nil
     class_attribute :license, default: nil
+    class_attribute :current_user, default: nil
 
     class << self
       def boot
@@ -20,9 +21,10 @@ module Avo
         end
       end
 
-      def init(request:, context:)
+      def init(request:, context:, current_user:)
         self.request = request
         self.context = context
+        self.current_user = current_user
 
         self.license = Licensing::LicenseManager.new(Licensing::HQ.new(request).response).license
 

data/lib/avo/base_resource.rb

@@ -11,7 +11,7 @@ module Avo
 
     class_attribute :id, default: :id
     class_attribute :title, default: :id
-    class_attribute :search, default: [:id]
+    class_attribute :search_query, default: nil
     class_attribute :includes, default: []
     class_attribute :model_class
     class_attribute :translation_key
@@ -42,6 +42,18 @@ module Avo
 
         self.filters_loader.use filter_class
       end
+
+      def scope
+        authorization.apply_policy model_class
+      end
+
+      def authorization
+        Avo::Services::AuthorizationService.new Avo::App.current_user
+      end
+    end
+
+    def initialize
+      self.class.model_class = model_class
     end
 
     def hydrate(model: nil, view: nil, user: nil, params: nil)
@@ -65,7 +77,7 @@ module Avo
         field.hydrate(resource: self, panel_name: default_panel_name, user: user)
       end
 
-      if Avo::App.license.invalid? || Avo::App.license.lacks(:custom_fields)
+      if Avo::App.license.has_with_trial(:custom_fields)
         fields = fields.reject do |field|
           field.custom?
         end
@@ -96,9 +108,9 @@ module Avo
         end
       end
 
-      fields.map do |field|
-        field.hydrate(model: @model, view: @view, resource: self)
-      end
+      hydrate_fields(model: @model, view: @view)
+
+      fields
     end
 
     def get_grid_fields
@@ -119,8 +131,16 @@ module Avo
       self.class.actions_loader.bag
     end
 
+    def hydrate_fields(model: nil, view: nil)
+      fields.map do |field|
+        field.hydrate(model: @model, view: @view, resource: self)
+      end
+
+      self
+    end
+
     def default_panel_name
-      return @params[:related_name].capitalize if @params[:related_name].present?
+      return @params[:related_name].capitalize if @params.present? && @params[:related_name].present?
 
       case @view
       when :show
@@ -226,7 +246,11 @@ module Avo
 
     def fill_model(model, params)
       # Map the received params to their actual fields
-      fields_by_database_id = get_field_definitions.map { |field| [field.database_id(model).to_s, field] }.to_h
+      fields_by_database_id = get_field_definitions
+        .reject do |field|
+          field.computed
+        end
+        .map { |field| [field.database_id(model).to_s, field] }.to_h
 
       params.each do |key, value|
         field = fields_by_database_id[key]
@@ -301,5 +325,57 @@ module Avo
         end
       end
     end
+
+    def avo_path
+      "#{Avo.configuration.root_path}/resources/#{model_class.model_name.route_key}/#{model.id}"
+    end
+
+    def label_field
+      get_field_definitions.find do |field|
+        field.as_label.present?
+      end
+    rescue
+      nil
+    end
+
+    def label
+      label_field.value || model_title
+    rescue
+      model_title
+    end
+
+    def avatar_field
+      get_field_definitions.find do |field|
+        field.as_avatar.present?
+      end
+    rescue
+      nil
+    end
+
+    def avatar
+      avatar_field.to_image
+    rescue
+      nil
+    end
+
+    def avatar_type
+      avatar_field.as_avatar
+    rescue
+      nil
+    end
+
+    def description_field
+      get_field_definitions.find do |field|
+        field.as_description.present?
+      end
+    rescue
+      nil
+    end
+
+    def description
+      description_field.value
+    rescue
+      nil
+    end
   end
 end