avo 2.5.2.pre.1 → 2.5.2.pre.2

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';
 
@@ -18,6 +19,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/card_component.rb

@@ -3,21 +3,9 @@
 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/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,
+        'blacklist-items': @field.blacklist.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,14 @@
+<%= index_field_wrapper field: @field do %>
+  <div class="flex gap-1 items-center flex-nowrap">
+    <% value.take(3).each do |item| %>
+      <% if @field.acts_as_taggable_on.present? %>
+        <%= render Avo::Fields::TagsField::TagComponent.new(label: item['value']) %>
+      <% else %>
+        <%= render Avo::Fields::TagsField::TagComponent.new(label: item) %>
+      <% end %>
+    <% 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,7 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::IndexComponent < Avo::Fields::IndexComponent
+  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,11 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::ShowComponent < Avo::Fields::ShowComponent
+  def label_from_item(item)
+    if @field.acts_as_taggable_on.present?
+      item['value']
+    else
+      item
+    end
+  end
+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-200 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/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 blacklistItems() {
+    return this.getJsonAttribute(this.inputTarget, 'data-blacklist-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.blacklistItems,
+      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')
+  }
+}

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

@@ -0,0 +1,47 @@
+export function tagTemplate(tagData) {
+  const suggestions = this.settings.whitelist || []
+
+  const possibleSuggestion = suggestions.find(
+    // eslint-disable-next-line eqeqeq
+    (item) => item.value == tagData.value,
+  )
+  const possibleLabel = possibleSuggestion
+    ? possibleSuggestion.label
+    : tagData.value
+
+  return `
+<tag title="${tagData.value}"
+  contenteditable='false'
+  spellcheck='false'
+  tabIndex="-1"
+  class="tagify__tag ${tagData.class ? tagData.class : ''}"
+  ${this.getAttributes(tagData)}
+>
+  <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+  <div>
+      <span class='tagify__tag-text'>${possibleLabel}</span>
+  </div>
+</tag>
+`
+}
+
+export function suggestionItemTemplate(tagData) {
+  return `
+<div ${this.getAttributes(tagData)}
+  class='tagify__dropdown__item flex items-center ${
+  tagData.class ? tagData.class : ''
+}'
+  tabindex="0"
+  role="option">
+  ${
+  tagData.avatar
+    ? `
+  <div class='rounded w-8 h-8 block mr-2'>
+      <img onerror="this.style.visibility='hidden'" class="w-full" src="${tagData.avatar}">
+  </div>`
+    : ''
+}
+  <span>${tagData.label}</span>
+</div>
+`
+}

data/app/javascript/js/controllers.js

@@ -25,6 +25,7 @@ import SearchController from './controllers/search_controller'
 import SelectController from './controllers/select_controller'
 import SelectFilterController from './controllers/select_filter_controller'
 import SimpleMdeController from './controllers/fields/simple_mde_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'
@@ -50,6 +51,7 @@ application.register('per-page', PerPageController)
 application.register('search', SearchController)
 application.register('select', SelectController)
 application.register('select-filter', SelectFilterController)
+application.register('tags-field', TagsFieldController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)
 application.register('toggle-panel', TogglePanelController)

data/app/views/avo/dashboards/_chartkick_card.html.erb

@@ -1,3 +1,3 @@
 <div class="relative flex flex-col <%= @card.chartkick_classes %>">
-  <%= send(@card.chart_type, @card.result_data, **@card.chartkick_options) %>
+  <%= send(@card.chart_type, @card.compute_result.result_data, **@card.chartkick_options) %>
 </div>

data/app/views/avo/dashboards/_metric_card.html.erb

@@ -1,5 +1,5 @@
 <div class="flex mt-4 items-end">
   <span class="text-3xl"><%= @card.prefix %></span>
-  <span class="text-5xl"><%= @card.result_data %></span>
+  <span class="text-5xl"><%= @card.compute_result.result_data %></span>
   <span class="text-3xl"><%= @card.suffix %></span>
 </div>

data/db/factories.rb

@@ -25,6 +25,7 @@ FactoryBot.define do
         Time.now - rand(10...365).days
       end
     end
+    tag_list { ["1", "2", "five", "seven"].shuffle }
     status { ::Post.statuses.keys.sample }
   end
 
@@ -64,6 +65,7 @@ FactoryBot.define do
 
   factory :course do
     name { Faker::Educator.unique.course_name }
+    skills { [Faker::Educator.subject, Faker::Educator.subject, Faker::Educator.subject, Faker::Educator.subject, Faker::Educator.subject] }
     country { Course.countries.sample }
     city { Course.cities.stringify_keys[country].sample }
   end

data/lib/avo/base_resource.rb

@@ -136,6 +136,12 @@ module Avo
         end
       end
 
+      if Avo::App.license.lacks_with_trial(:advanced_fields)
+        fields = fields.reject do |field|
+          field.type == 'tags'
+        end
+      end
+
       fields
     end
 

data/lib/avo/concerns/handles_field_args.rb

@@ -0,0 +1,36 @@
+module Avo
+  module Concerns
+    module HandlesFieldArgs
+      extend ActiveSupport::Concern
+
+      private
+
+      # Add an instance variable from args
+      # That may be a string, boolean, or array
+      # Each args should also have a default value
+      def add_prop_from_args(args = {}, name: nil, type: :string, default: nil)
+        value = default
+
+        if type == :boolean
+          value = args[name.to_sym] == true
+        else
+          value = args[name.to_sym] unless args.dig(name.to_sym).nil?
+        end
+
+        instance_variable_set(:"@#{name}", value)
+      end
+
+      def add_boolean_prop(args, name, default = false)
+        add_prop_from_args args, name: name, default: default, type: :boolean
+      end
+
+      def add_array_prop(args, name, default = [])
+        add_prop_from_args args, name: name, default: default, type: :array
+      end
+
+      def add_string_prop(args, name, default = [])
+        add_prop_from_args args, name: name, default: default, type: :string
+      end
+    end
+  end
+end

data/lib/avo/fields/base_field.rb

@@ -4,8 +4,9 @@ module Avo
       extend ActiveSupport::DescendantsTracker
       extend Avo::Fields::FieldExtensions::HasFieldName
 
-      include ActionView::Helpers::UrlHelper
       include Avo::Fields::FieldExtensions::VisibleInDifferentViews
+      include Avo::Concerns::HandlesFieldArgs
+      include ActionView::Helpers::UrlHelper
 
       delegate :view_context, to: "Avo::App"
       delegate :main_app, to: :view_context

data/lib/avo/fields/tags_field.rb

@@ -0,0 +1,82 @@
+module Avo
+  module Fields
+    class TagsField < BaseField
+      attr_reader :acts_as_taggable_on
+      attr_reader :close_on_select
+      attr_reader :delimiters
+      attr_reader :enforce_suggestions
+
+      def initialize(id, **args, &block)
+        super(id, **args, &block)
+
+        add_boolean_prop args, :close_on_select
+        add_boolean_prop args, :enforce_suggestions
+        add_string_prop args, :acts_as_taggable_on
+        add_array_prop args, :blacklist
+        add_array_prop args, :delimiters, [","]
+        add_array_prop args, :suggestions
+      end
+
+      def field_value
+        return json_value if acts_as_taggable_on.present?
+
+        value || []
+      end
+
+      def json_value
+        value.map do |item|
+          {
+            value: item.name
+          }
+        end.as_json
+      end
+
+      def fill_field(model, key, value, params)
+        if acts_as_taggable_on.present?
+          model.send(act_as_taggable_attribute(key), parsed_value(value))
+        else
+          model.send("#{key}=", parsed_value(value))
+        end
+
+        model
+      end
+
+      def suggestions
+        return @suggestions if @suggestions.is_a? Array
+
+        if @suggestions.respond_to? :call
+          return Avo::Hosts::RecordHost.new(block: @suggestions, record: model).handle
+        end
+
+        []
+      end
+
+      def blacklist
+        return @blacklist if @blacklist.is_a? Array
+
+        if @blacklist.respond_to? :call
+          return Avo::Hosts::RecordHost.new(block: @blacklist, record: model).handle
+        end
+
+        []
+      end
+
+      private
+
+      def act_as_taggable_attribute(key)
+        "#{key.singularize}_list="
+      end
+
+      def parsed_value(value)
+        JSON.parse(value).pluck("value")
+      rescue
+        []
+      end
+
+      private
+
+      def parse_suggestions_from_args(args)
+      end
+    end
+  end
+end

data/lib/avo/hosts/record_host.rb

@@ -0,0 +1,7 @@
+module Avo
+  module Hosts
+    class RecordHost < BaseHost
+      option :record
+    end
+  end
+end

data/lib/avo/licensing/pro_license.rb

@@ -12,7 +12,8 @@ module Avo
           :searchable_associations,
           :resource_ordering,
           :dashboards,
-          :menu_editor
+          :menu_editor,
+          :advanced_fields
         ]
       end
     end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "2.5.2.pre.1" unless const_defined?(:VERSION)
+  VERSION = "2.5.2.pre.2" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/templates/cards/chartkick_card.tt

@@ -3,7 +3,7 @@ class <%= class_name.camelize %> < Avo::Dashboards::ChartkickCard
   self.label = "<%= name.underscore.humanize %>"
   self.chart_type = :area_chart
 
-  def query
+  query do
     data = 3.times.map do |index|
       {
         name: "Batch #{index}",

data/lib/generators/avo/templates/cards/chartkick_card_sample.tt

@@ -9,7 +9,7 @@ class <%= class_name.camelize %> < Avo::Dashboards::ChartkickCard
   # self.chart_options = { library: { plugins: { legend: { display: true } } } }
   # self.flush = true
 
-  def query
+  query do
     points = 16
     i = Time.new.year.to_i - points
     base_data = Array.new(points).map do

data/lib/generators/avo/templates/cards/metric_card.tt

@@ -2,7 +2,7 @@ class <%= class_name.camelize %> < Avo::Dashboards::MetricCard
   self.id = "<%= name.underscore %>"
   self.label = "<%= name.underscore.humanize %>"
 
-  def query
+  query do
     result 101
   end
 end

data/lib/generators/avo/templates/cards/metric_card_sample.tt

@@ -8,7 +8,7 @@ class <%= class_name.camelize %> < Avo::Dashboards::MetricCard
   # self.prefix = ""
   # self.suffix = ""
 
-  def query
+  query do
     # from = Date.today.midnight - 1.week
     # to = DateTime.current
 

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

@@ -39,6 +39,10 @@ en:
       zero: 'no %{item}'
       one: 'one %{item}'
       other: '%{count} %{item}'
+    x_items_more:
+      zero: 'no more items'
+      one: 'one more item'
+      other: '%{count} more items'
     are_you_sure: 'Are you sure?'
     filters: 'Filters'
     per_page: 'Per page'