avo 2.5.2.pre.5 → 2.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e54bc1e7a03908a2868d5d9033ee9f8bd9b928113cff389fbbb3bea423f43fa
-  data.tar.gz: 873b114da5fb663ffb558d5583917c10a6e6733a777925b93d0bde96d532ed40
+  metadata.gz: 886b0051c7a9b11b46dcd99cdb419559f1b7326d8b8a90a3514d110935bf6d05
+  data.tar.gz: 4e21cf6d49133dc5551fdfea9759366bedfd3d487dcfd1df562a40b808383ef2
 SHA512:
-  metadata.gz: 5712e7794346582747ad3dfe4e1bf7a380e542f3ed27c643432006f78034a0d71d3d296107dfe44b9675604a10840396df578263dc48fa0a0b0d52f9da9f2168
-  data.tar.gz: 62c2e65a1d1a762f223aa9f944fe7847f25c6d370000621aa0de807c38c027849248601f0d08b802134728cdba20a9a10e8c875591f3d35efd7978484c72fc14
+  metadata.gz: 33608aef95479841514e639bd5e08c81f05a1fa4c73fa3067b59530774e7f11024a5f3e6f9c27e6a10125f9c6d9fef3684436b8b12deeb7c21d988ffa18379ed
+  data.tar.gz: ec6b40cda212f0a2ab04d0e672d099a5ebb672b2351cdfa0d8354c7b1ee3334704b5f128421e642d88da09b56fac98178ed7b7da93a370ee8cc53645419559df

data/Gemfile

@@ -148,3 +148,5 @@ gem "hightop"
 gem "active_median"
 
 gem 'acts_as_list'
+
+gem 'acts-as-taggable-on', '~> 9.0'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (2.5.2.pre.5)
+    avo (2.6.0)
       active_link_to
       addressable
       breadcrumbs_on_rails
@@ -86,6 +86,8 @@ GEM
       minitest (>= 5.1)
       tzinfo (~> 2.0)
       zeitwerk (~> 2.3)
+    acts-as-taggable-on (9.0.1)
+      activerecord (>= 6.0, < 7.1)
     acts_as_list (1.0.4)
       activerecord (>= 4.2)
     addressable (2.8.0)
@@ -248,8 +250,6 @@ GEM
     nokogiri (1.13.4)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.4-x86_64-linux)
-      racc (~> 1.4)
     orm_adapter (0.5.0)
     pagy (5.10.1)
       activesupport
@@ -421,6 +421,7 @@ PLATFORMS
 DEPENDENCIES
   active_link_to
   active_median
+  acts-as-taggable-on (~> 9.0)
   acts_as_list
   addressable
   annotate

data/app/assets/stylesheets/avo.css

@@ -4,6 +4,7 @@
 @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 './../../../node_modules/@yaireo/tagify/dist/tagify.css';
 
 @import 'tailwindcss/base';
 
@@ -17,6 +18,7 @@
 @import './css/search.css';
 @import './css/active-storage.css';
 @import './css/spinner.css';
+@import './css/tags.css';
 
 @import './css/components/status.css';
 @import './css/components/code.css';

data/app/assets/stylesheets/css/tags.css

@@ -0,0 +1,16 @@
+tags.tagify {
+  --tag-inset-shadow-size: 3em;
+}
+
+tags.tagify {
+  @apply !p-0;
+
+  span.tagify__input {
+    @apply my-1;
+  }
+}
+
+tag.tagify__tag {
+  @apply text-sm my-1 mb-0;
+}
+

data/app/components/avo/actions_component.html.erb

@@ -35,7 +35,7 @@
             'actions-picker-target': action.standalone ? 'standaloneAction' : 'resourceAction',
             'disabled': disabled,
           },
-          class: "flex items-center px-4 py-4 w-full font-medium #{disabled ? 'text-gray-500' : 'text-black hover:bg-blue-500 hover:text-white'}" do %>
+          class: "flex items-center px-4 py-3 w-full font-semibold text-sm #{disabled ? 'text-gray-500' : 'text-black hover:bg-blue-500 hover:text-white'}" do %>
           <%= svg 'play', class: 'h-5 mr-1 inline' %> <%= action.action_name %>
         <% end %>
       <% end %>

data/app/components/avo/button_component.rb

@@ -38,14 +38,15 @@ class Avo::ButtonComponent < ViewComponent::Base
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
+    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
 
     classes += " rounded" if @rounded.present?
 
     classes += style_classes
 
-    classes += @compact ? " px-1" : " px-4" # Same horizontal padding on all sizes
-    classes += spacing_classes
+    classes += horizontal_padding_classes
+    classes += vertical_padding_classes
+    classes += text_size_classes
 
     classes
   end
@@ -57,10 +58,14 @@ class Avo::ButtonComponent < ViewComponent::Base
   def full_content
     result = ""
     icon_classes = @icon_class
-    icon_classes += full_content_icon_classes
+    # space out the icon from the text if text is present
+    icon_classes += " mr-1" if content.present?
+    # add the icon height
+    icon_classes += icon_size_classes
 
+    # Add the icon
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?
-    result += "<span class='w-0 m-0'>&nbsp;</span>"
+
     if content.present?
       result += "<span>#{content}</span>"
     end
@@ -96,21 +101,51 @@ class Avo::ButtonComponent < ViewComponent::Base
 
   private
 
-  def spacing_classes
+  def vertical_padding_classes
     case @size.to_sym
     when :xs
       " py-0"
     when :sm
       " py-1"
     when :md
-      " py-2"
+      " py-1.5"
     when :lg
+      " py-2"
+    when :xl
       " py-3"
     else
       ""
     end
   end
 
+  def horizontal_padding_classes
+    return " px-1" if @compact
+
+    case @size.to_sym
+    when :xs
+      " px-2"
+    when :sm
+      " px-3"
+    when :md
+      " px-3"
+    when :lg
+      " px-5"
+    when :xl
+      " px-6"
+    else
+      "px-4"
+    end
+  end
+
+  def text_size_classes
+    case @size.to_sym
+    when :xs
+      " text-xs"
+    else
+      " text-sm"
+    end
+  end
+
   def style_classes
     case @style
     when :primary
@@ -118,29 +153,25 @@ class Avo::ButtonComponent < ViewComponent::Base
     when :outline
       " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
     when :text
-      " text-#{@color}-500 active:outline-#{@color}-500 border-none hover:bg-gray-100"
+      " text-#{@color}-500 active:outline-#{@color}-500 hover:bg-gray-100 border-transparent"
     else
       ""
     end
   end
 
-  def full_content_icon_classes
+  def icon_size_classes
     icon_classes = ""
 
     case @size
     when :xs
-      icon_classes += " h-4"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-1" if content.blank?
+      icon_classes += " h-4 my-1"
     when :sm
-      icon_classes += " h-4"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-1" if content.blank?
+      icon_classes += " h-4 my-1"
     when :md
-      icon_classes += " h-5"
-      # When icon is solo we need to add an offset
-      icon_classes += " my-0.5" if content.blank?
+      icon_classes += " h-4 my-1"
     when :lg
+      icon_classes += " h-5 my-0.5"
+    when :xl
       icon_classes += " h-6"
     end
 

data/app/components/avo/card_component.rb

@@ -3,9 +3,21 @@
 class Avo::CardComponent < ViewComponent::Base
   def initialize(card: nil)
     @card = card
+
+    init_card
   end
 
   def render?
     !@card.nil?
   end
+
+  # Initializing the card byt running the query method.
+  # We'll still keep the query block around for compatibility reasons.
+  def init_card
+    if @card.respond_to? :query
+      @card.query
+    elsif @card.query_block.present?
+      @card.compute_result
+    end
+  end
 end

data/app/components/avo/fields/concerns/item_labels.rb

@@ -0,0 +1,40 @@
+module Avo
+  module Fields
+    module Concerns
+      module ItemLabels
+        extend ActiveSupport::Concern
+
+        def value_for_item(item)
+          if @field.acts_as_taggable_on.present?
+            item["value"]
+          else
+            item
+          end
+        end
+
+        def label_from_item(item)
+          value = value_for_item item
+
+          if suggestions_are_a_hash?
+            return suggestions_by_id[value.to_s][:label] if suggestions_by_id[value.to_s].present?
+          end
+          value
+        end
+
+        def suggestions_by_id
+          return {} unless suggestions_are_a_hash?
+
+          @field.suggestions.map do |suggestion|
+            [suggestion[:value].to_s, suggestion]
+          end.to_h
+        end
+
+        def suggestions_are_a_hash?
+          return false if @field.suggestions.blank?
+
+          @field.suggestions.first.is_a? Hash
+        end
+      end
+    end
+  end
+end

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -0,0 +1,27 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <div data-controller="tags-field">
+    <%# dummy field %>
+    <%= text_field_tag "#{@field.id}-dummy", '',
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      value: '',
+      data: {
+        'tags-field-target': 'fakeInput',
+      } %>
+    <%# real field %>
+    <%= @form.text_field @field.id,
+      class: helpers.input_classes('hidden w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      value: @field.field_value.to_json,
+      data: {
+        'tags-field-target': 'input',
+        'whitelist-items': @field.suggestions.to_json,
+        'disallowed-items': @field.disallowed.to_json,
+        'enforce-suggestions': @field.enforce_suggestions ? 1 : 0,
+        'delimiters': @field.delimiters,
+        'close-on-select': @field.close_on_select ? 1 : 0,
+      } %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/edit_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::EditComponent < Avo::Fields::EditComponent
+end

data/app/components/avo/fields/tags_field/index_component.html.erb

@@ -0,0 +1,10 @@
+<%= index_field_wrapper field: @field do %>
+  <div class="flex gap-1 items-center flex-nowrap">
+    <% value.take(3).each do |item| %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: label_from_item(item)) %>
+    <% end %>
+    <% if value.count > 3 %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: '...', title: I18n.t('avo.x_items_more', count: value.count - 3)) %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/index_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::IndexComponent < Avo::Fields::IndexComponent
+  include Avo::Fields::Concerns::ItemLabels
+
+  def value
+    @field.field_value
+  end
+end

data/app/components/avo/fields/tags_field/show_component.html.erb

@@ -0,0 +1,7 @@
+<%= show_field_wrapper field: @field, index: @index do %>
+  <div class="flex gap-1 items-center flex-wrap">
+    <% @field.field_value.each do |item| %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: label_from_item(item)) %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/show_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+# require_relative 'item_labels'
+
+class Avo::Fields::TagsField::ShowComponent < Avo::Fields::ShowComponent
+  include Avo::Fields::Concerns::ItemLabels
+end

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -0,0 +1,9 @@
+<div class="flex px-2 py-1 rounded bg-gray-100 text-sm text-gray-800 font-normal flex-shrink-0"
+  <% if title.present? %>
+    data-tippy="tooltip"
+    title="<%= title %>"
+  <% end %>
+  data-target="tag-component"
+>
+  <%= label %>
+</div>

data/app/components/avo/fields/tags_field/tag_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::TagComponent < ViewComponent::Base
+  attr_reader :label
+  attr_reader :title
+
+  def initialize(label: nil, title: nil)
+    @label = label
+    @title = title
+  end
+end

data/app/components/avo/index/resource_table_component.html.erb

@@ -1,5 +1,5 @@
 <div class="w-full ">
-  <table class="w-full px-4 bg-white rounded" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
+  <table class="w-full px-4 bg-white" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
     <%= render partial: 'avo/partials/table_header', locals: {fields: @resource.get_fields(reflection: @reflection)} %>
     <tbody class="divide-y">
       <% @resources.each_with_index do |resource, index| %>

data/app/components/avo/sidebar/group_component.html.erb

@@ -8,18 +8,18 @@
 >
   <% if item.name.present? %>
     <div
-      class="flex justify-between px-10 pt-2 pb-0 text-gray-400"
+      class="flex justify-between px-10 pr-2 pt-2 pb-0 text-gray-400"
     >
       <div class="flex items-center text-xs uppercase font-semibold leading-none">
         <%= item.name %>
       </div>
       <% if collapsable %>
-        <div class="cursor-pointer <%= 'rotate-180' if collapsed %>"
+        <div class="cursor-pointer <%= 'rotate-90' if collapsed %>"
           data-action="click->menu#triggerCollapse"
           data-menu-target="svg"
           data-menu-key-param="<%= key %>"
           >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4"%>
+          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4 mr-0.5"%>
         </div>
       <% end %>
     </div>

data/app/components/avo/sidebar/heading_component.html.erb

@@ -1,9 +1,9 @@
-<div class="flex justify-between px-6 py-2 text-gray-500">
+<div class="flex justify-between px-4 pr-2 py-1 text-gray-500">
   <div class="flex items-center text-sm uppercase font-semibold leading-none space-x-1">
     <span class="min-w-[20px]"><%= icon %></span> <span><%= label %></span>
   </div>
   <% if collapsable %>
-    <div class="cursor-pointer <%= 'rotate-180' if collapsed %>"
+    <div class="cursor-pointer <%= 'rotate-90' if collapsed %>"
       data-action="click->menu#triggerCollapse"
       data-menu-key-param="<%= key %>"
       data-menu-target="svg"

data/app/components/avo/sidebar/link_component.html.erb

@@ -2,7 +2,7 @@
   <%= send link_method, path, class: classes, active: active, target: target do %>
     <%= label %>
     <% if target == :_blank %>
-      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3') %>
+      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3 mr-2') %>
     <% end %>
   <% end %>
 <% else %>

data/app/components/avo/sidebar/link_component.rb

@@ -23,6 +23,6 @@ class Avo::Sidebar::LinkComponent < ViewComponent::Base
   end
 
   def classes
-    "px-4 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100"
+    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100"
   end
 end

data/app/components/avo/sidebar_profile_component.html.erb

@@ -1,4 +1,4 @@
-<div class="text-black Xborder-t border-gray-200 p-4 flex">
+<div class="text-black border-gray-200 p-4 flex">
   <div class="flex-1 flex space-x-4">
     <% if avatar.present? %>
       <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">

data/app/components/avo/views/resource_index_component.html.erb

@@ -59,14 +59,14 @@
     <% c.bare_content do %>
       <% if view_type.to_sym == :table %>
         <% if @models.present? %>
-          <div class="mt-8">
+          <div class="mt-4">
             <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_model: @parent_model %>
           </div>
         <% end %>
       <% end %>
       <% if view_type.to_sym == :grid %>
         <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model) %>
-        <div class="mt-14">
+        <div class="mt-6">
           <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_model: @parent_model %>
         </div>
       <% end %>

data/app/components/avo/views/resource_show_component.html.erb

@@ -1,7 +1,7 @@
 <div data-model-id="<%= @resource.model.id %>"
   data-selected-resources-name="<%= @resource.model_key %>"
   data-selected-resources='["<%= @resource.model.id %>"]'
-  class="space-y-8"
+  class="space-y-12"
 >
   <% @resource.panels.each_with_index do |resource_panel, index| %>
     <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: index) do |c| %>

data/app/controllers/avo/base_controller.rb

@@ -11,8 +11,6 @@ module Avo
     before_action :set_edit_title_and_breadcrumbs, only: [:edit, :update]
     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
 
     def index
       @page_title = @resource.plural_name.humanize
@@ -360,23 +358,6 @@ module Avo
       filter_defaults.merge(@applied_filters)
     end
 
-    # Caching these so we know when the filters have changed so we reset the pagination
-    # def cache_applied_filters
-    #   # puts ["Rails.session->", session].inspect
-    #   session[:avo_applied_filters] = params[:filters]
-    #   # ::Avo::App.cache_store.delete(applied_filters_cache_key) if params[:filters].nil?
-
-    #   # ::Avo::App.cache_store.write(applied_filters_cache_key, params[:filters], expires_in: 1.day)
-    # end
-
-    # def reset_pagination_if_filters_changed
-    #   params[:page] = 1 if params[:filters] != session[:avo_applied_filters]
-    # end
-
-    # def applied_filters_cache_key
-    #   "avo.base_controller.#{@resource.model_key}.applied_filters"
-    # end
-
     def set_edit_title_and_breadcrumbs
       @resource = @resource.hydrate(model: @model, view: :edit, user: _current_user)
       @page_title = @resource.default_panel_name.to_s

data/app/controllers/avo/private_controller.rb

@@ -3,6 +3,7 @@ require_dependency "avo/application_controller"
 module Avo
   class PrivateController < ApplicationController
     def design
+      @page_title = "Design [Private]"
     end
   end
 end

data/app/javascript/js/application.js

@@ -4,7 +4,7 @@ import { Application } from '@hotwired/stimulus'
 const application = Application.start()
 
 // Configure Stimulus development experience
-application.debug = false
+application.debug = window?.localStorage.getItem('avo.debug')
 window.Stimulus = application
 
 // Register stimulus-components controller

data/app/javascript/js/controllers/base_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  /**
+  * Helper that parses the data attribute value to JSON
+  */
+  getJsonAttribute(target, attribute, defaultValue = []) {
+    let result = defaultValue
+    try {
+      result = JSON.parse(target.getAttribute(attribute))
+    } catch (error) {}
+
+    return result
+  }
+
+  /**
+  * Parses the attribute to boolean
+  */
+  getBooleanAttribute(target, attribute) {
+    return target.getAttribute(attribute) === '1'
+  }
+}

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

@@ -0,0 +1,86 @@
+import { first, isObject, merge } from 'lodash'
+import Tagify from '@yaireo/tagify'
+
+import BaseController from '../base_controller'
+
+import { suggestionItemTemplate, tagTemplate } from './tags_field_helpers'
+
+export default class extends BaseController {
+  static targets = ['input', 'fakeInput'];
+
+  tagify = null;
+
+  get whitelistItems() {
+    return this.getJsonAttribute(this.inputTarget, 'data-whitelist-items', [])
+  }
+
+  get disallowedItems() {
+    return this.getJsonAttribute(this.inputTarget, 'data-disallowed-items', [])
+  }
+
+  get enforceSuggestions() {
+    return this.getBooleanAttribute(this.inputTarget, 'data-enforce-suggestions')
+  }
+
+  get closeOnSelect() {
+    return this.getBooleanAttribute(this.inputTarget, 'data-close-on-select')
+  }
+
+  get delimiters() {
+    return this.getJsonAttribute(this.inputTarget, 'data-delimiters', [])
+  }
+
+  get suggestionsAreObjects() {
+    return isObject(first(this.whitelistItems))
+  }
+
+  get tagifyOptions() {
+    let options = {
+      whitelist: this.whitelistItems,
+      blacklist: this.disallowedItems,
+      enforceWhitelist: this.enforceSuggestions,
+      delimiters: this.delimiters.join('|'),
+      maxTags: 10,
+      dropdown: {
+        maxItems: 20,
+        enabled: 0,
+        closeOnSelect: this.closeOnSelect,
+      },
+    }
+
+    if (this.suggestionsAreObjects) {
+      options = merge(options, {
+        tagTextProp: 'label',
+        dropdown: {
+          searchKeys: ['label'],
+        },
+        templates: {
+          tag: tagTemplate,
+          dropdownItem: suggestionItemTemplate,
+        },
+      })
+    }
+
+    return options
+  }
+
+  connect() {
+    if (this.hasInputTarget) {
+      this.hideFakeInput()
+      this.showRealInput()
+      this.initTagify()
+    }
+  }
+
+  initTagify() {
+    this.tagify = new Tagify(this.inputTarget, this.tagifyOptions)
+  }
+
+  hideFakeInput() {
+    this.fakeInputTarget.classList.add('hidden')
+  }
+
+  showRealInput() {
+    this.inputTarget.classList.remove('hidden')
+  }
+}