avo 1.24.2 → 2.1.0

data/app/components/avo/actions_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Avo::ActionsComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(actions: [], resource: nil)
+    @actions = actions
+    @resource = resource
+  end
+
+  def render?
+    @actions.present?
+  end
+end

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

@@ -1 +1,25 @@
-<div data-controller="alerts" data-alerts-target="container" data-alert-type="<%= type %>" class="hidden"><%= message %></div>
+<div data-controller="alert"
+  data-alert-dismiss-after-value="5000"
+  data-alert-remove-delay-value="0"
+  class="<%= classes %>"
+  >
+  <div class="px-2">
+    <div class="flex h-full">
+      <div class="flex items-center min-h-full">
+        <%= helpers.svg icon, class: "h-6" %>
+      </div>
+      <div class="ml-3 w-0 flex-1 pt-0.5">
+        <p class="text-sm leading-5 font-semibold">
+          <%= message %>
+        </p>
+      </div>
+      <div class="ml-4 flex-shrink-0 flex">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/avo/alert_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::AlertComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
   attr_reader :type
   attr_reader :message
 
@@ -8,4 +10,26 @@ class Avo::AlertComponent < ViewComponent::Base
     @type = type
     @message = message
   end
+
+  def icon
+    return "x-circle" if is_error?
+
+    "check-circle"
+  end
+
+  def classes
+    result = "max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
+
+    result += if is_error?
+      " bg-red-400 border-red-700"
+    else
+      " bg-green-400 border-green-700"
+    end
+
+    result
+  end
+
+  def is_error?
+    type.to_sym == :error
+  end
 end

data/app/components/avo/blank_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::BlankFieldComponent < ViewComponent::Base
+end

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

@@ -0,0 +1 @@
+<%= output %>

data/app/components/avo/button_component.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+# A button/link can have the following settings:
+# style: primary/secondary/ternary
+# size: :xs :sm, :md, :lg
+class Avo::ButtonComponent < ViewComponent::Base
+  def initialize(path = nil, size: :md, style: :outline, color: :gray, icon: nil, icon_class: "", is_link: false, rounded: true, compact: false, **args)
+    # Main settings
+    @size = size
+    @style = style
+    @color = color
+
+    # Other things that appear in the button
+    @path = path
+    @icon = icon
+    @icon_class = icon_class
+    @rounded = rounded
+    @compact = compact
+
+    # Other settings
+    @class = args[:class]
+    @is_link = is_link
+    @args = args || {}
+  end
+
+  def args
+    if @args[:spinner]
+      @args[:"data-controller"] = "loading-button"
+    end
+
+    @args[:class] = button_classes
+
+    @args
+  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-30 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
+  end
+
+  def is_link?
+    @is_link
+  end
+
+  def full_content
+    result = ""
+    icon_classes = @icon_class
+    icon_classes += full_content_icon_classes
+
+    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
+
+    result.html_safe
+  end
+
+  def output
+    if is_link?
+      output_link
+    else
+      output_button
+    end
+  end
+
+  def output_link
+    link_to @path, **args do
+      full_content
+    end
+  end
+
+  def output_button
+    if @args[:method].present?
+      button_to @args[:url], **args do
+        full_content
+      end
+    else
+      button_tag(**args) do
+        full_content
+      end
+    end
+  end
+
+  private
+
+  def spacing_classes
+    case @size.to_sym
+    when :xs
+      " py-0"
+    when :sm
+      " py-1"
+    when :md
+      " py-2"
+    when :lg
+      " py-3"
+    else
+      ""
+    end
+  end
+
+  def style_classes
+    case @style
+    when :primary
+      " bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-700 active:outline-primary-700 active:bg-primary-600"
+    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"
+    else
+      ""
+    end
+  end
+
+  def full_content_icon_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?
+    when :sm
+      icon_classes += " h-4"
+      # When icon is solo we need to add an offset
+      icon_classes += " my-1" if content.blank?
+    when :md
+      icon_classes += " h-5"
+      # When icon is solo we need to add an offset
+      icon_classes += " my-0.5" if content.blank?
+    when :lg
+      icon_classes += " h-6"
+    end
+
+    icon_classes
+  end
+end

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

@@ -0,0 +1,40 @@
+<div class="relative flex-1 flex flex-col justify-between h-full" data-controller="dashboard-card" data-dashboard-card-target="card" data-refresh-every="<%= @card.refresh_every %>" data-card-id="<%= @card.id %>">
+  <% if @card.class.display_header %>
+    <div class="px-4 pt-4">
+      <div class="flex justify-between items-center min-h-6">
+          <div class="text-base font-bold text-gray-700 leading-none">
+            <%= @card.label %>
+          </div>
+        <div data-controller="select">
+          <% if @card.type == :metric && @card.parsed_ranges.present? %>
+            <%= select_tag "#{@card.id}_range", options_for_select(@card.parsed_ranges, @card.range),
+              class: 'appearance-none inline-flex bg-blue-gray-100 disabled:bg-blue-gray-300 disabled:cursor-not-allowed focus:bg-white text-sm text-blue-gray-700 disabled:text-blue-gray-700 leading-none rounded-md py-px px-2 leading-tight border outline-none outline w-24',
+              data: {
+                target: 'select',
+                action: 'change->select#onChange'
+              }
+            %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <% if @card.type == :chartkick %>
+    <%= render 'chartkick_card', card: @card %>
+  <% elsif @card.type === :partial %>
+    <%= render @card.class.partial %>
+  <% elsif @card.type === :metric %>
+    <div class="flex-1 flex px-4 pb-4">
+      <%= render 'metric_card', card: @card %>
+    </div>
+  <% end %>
+  <% if @card.description %>
+    <div class="absolute inset-auto bottom-0 right-0 mb-4 mr-4">
+      <%= helpers.svg 'heroicons/solid/information-circle',
+        class: 'h-4 text-gray-500 cursor-pointer',
+        title: @card.description,
+        'data-tippy': 'tooltip',
+        'data-target': 'card-description' %>
+    </div>
+  <% end %>
+</div>

data/app/components/avo/card_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::CardComponent < ViewComponent::Base
+  def initialize(card: nil)
+    @card = card
+  end
+
+  def render?
+    !@card.nil?
+  end
+end

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

@@ -0,0 +1,15 @@
+<div class="flex flex-col md:flex-row md:items-center pb-2 md:pb-0 leading-tight <%= @classes %> min-h-14" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+  <div class="pt-4 md:pt-0 md:h-14 flex self-start items-center text-slate-800">
+    <div class="<% if @displayed_in_modal %> md:w-48 <% else %> md:w-64 px-6 md:px-6 <% end %> w-48 flex uppercase font-semibold text-gray-500 text-sm" data-slot="label">
+      <% if @form.present? %>
+        <%= @form.label @field.id, label %>
+      <% else %>
+        <%= @field.name %>
+      <% end %>
+      <% if @field.required %> <span class="text-red-600 ml-1">*</span> <% end %>
+    </div>
+  </div>
+  <div class="flex-1 flex flex-row md:min-h-inherit py-2 <% unless @displayed_in_modal %> px-6 <% end %>">
+    <%= content %>
+  </div>
+</div>

data/app/components/avo/common_field_wrapper_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Avo::CommonFieldWrapperComponent < ViewComponent::Base
+  def initialize(field: nil, dash_if_blank: true, full_width: false, displayed_in_modal: false, form: nil, resource: {}, label: nil, **args)
+    @field = field
+    @dash_if_blank = dash_if_blank
+    @classes = args[:class].present? ? args[:class] : ""
+    @args = args
+    @displayed_in_modal = displayed_in_modal
+    @form = form
+    @resource = resource
+    @model = resource.present? ? resource.model : nil
+    @full_width = full_width
+    @label = label
+  end
+
+  def label
+    @label || @field.name
+  end
+end

data/app/components/avo/dashboards/divider_component.html.erb

@@ -0,0 +1,9 @@
+<% if invisible? %>
+  <div class="relative col-span-full gap-0"></div>
+<% else %>
+  <div class="relative col-span-full border-t border-gray-300 my-4">
+    <% if label.present? %>
+      <div class="absolute inset-auto -translate-y-1/2 -translate-x-1/2 ml-1/2 z-20 text-xs font-semibold uppercase leading-none text-gray-500 bg-application px-2"><%= label %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/dashboards/divider_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Avo::Dashboards::DividerComponent < ViewComponent::Base
+  attr_reader :divider
+
+  delegate :label, to: :divider
+
+  def initialize(divider: nil)
+    @divider = divider
+  end
+
+  def render?
+    @divider.present?
+  end
+
+  def invisible?
+    @divider.invisible
+  end
+end

data/app/components/avo/edit/field_wrapper_component.html.erb

@@ -1,20 +1,11 @@
-<div class="flex items-center py-0 leading-tight <%= @classes %> min-h-16" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
-  <div class="h-16 flex self-start items-center text-slate-800">
-    <div class="<% if @displayed_in_modal %> md:w-48 <% else %> md:w-64 <% end %> w-48 px-8 flex" data-slot="label">
-      <%= @form.label @field.id, label %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
-    </div>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, resource: @resource, index: @index, form: @form, displayed_in_modal: @displayed_in_modal, label: @label) do %>
+  <div class="self-center <% if @displayed_in_modal or @full_width %> w-full <% else %> w-full md:w-8/12 <% end %>" data-slot="value">
+    <%= content %>
+    <% if @model.present? and @model.errors.include? @field.id %>
+      <div class="text-red-600 mt-2 text-sm"><%= @model.errors.full_messages_for(@field.id).to_sentence %></div>
+    <% end %>
+    <% if @field.help %>
+      <div class="text-gray-600 mt-2 text-sm"><%== @field.help %></div>
+    <% end %>
   </div>
-  <div class="flex-1 flex flex-row min-h-inherit">
-    <div class="px-6 py-3 self-center <% if @displayed_in_modal or @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
-      <%= content %>
-
-      <% if @model.present? and @model.errors.include? @field.id %>
-        <div class="text-red-600 mt-2 text-sm"><%= @model.errors.full_messages_for(@field.id).to_sentence %></div>
-      <% end %>
-
-      <% if @field.help %>
-        <div class="text-gray-600 mt-2 text-sm"><%== @field.help %></div>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/components/avo/edit/field_wrapper_component.rb

@@ -12,13 +12,5 @@ class Avo::Edit::FieldWrapperComponent < ViewComponent::Base
     @model = resource.present? ? resource.model : nil
     @full_width = full_width
     @label = label
-
-    if (@index != 0) || @displayed_in_modal
-      @classes += " border-t"
-    end
-  end
-
-  def label
-    @label || @field.name
   end
 end

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

@@ -0,0 +1,12 @@
+<% if @add_background %>
+  <div class="bg-white rounded shadow-panel">
+<% end %>
+<div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
+  <%= helpers.svg view_type_svg, class: 'h-[250px]' %>
+  <div class="text-gray-500 text-center">
+    <%= message %>
+  </div>
+</div>
+<% if @add_background %>
+  </div>
+<% end %>

data/app/components/avo/empty_state_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Avo::EmptyStateComponent < ViewComponent::Base
+  def initialize(message: nil, resource_name: nil, related_name: nil, view_type: :table, add_background: false)
+    @message = message
+    @view_type = view_type
+    @related_name = related_name
+    @resource_name = resource_name
+    @add_background = add_background
+  end
+
+  def message
+    return @message if @message.present?
+
+    translation_tag = @related_name.present? ? 'avo.no_related_item_found' : 'avo.no_item_found'
+    helpers.t translation_tag, item: @resource_name
+  end
+
+  def view_type_svg
+    return "grid-empty-state" if @view_type.to_sym == :grid
+
+    "table-empty-state"
+  end
+end

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

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, flush: true do %>
   <%= render Avo::Fields::Common::BadgeViewerComponent.new value: @field.value, options: @field.options %>
 <% end %>

data/app/components/avo/fields/belongs_to_field/autocomplete_component.html.erb

@@ -6,7 +6,7 @@
     data-via-association="belongs_to"
   ></div>
   <div class="relative w-full" autocomplete="off">
-    <%= @form.text_field @field.foreign_key,
+    <%= @form.text_field @foreign_key,
       value: field_label,
       class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
       placeholder: @field.placeholder,

data/app/components/avo/fields/belongs_to_field/autocomplete_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
-  def initialize(form:, field:, model_key:, foreign_key:, disabled:, type: nil, resource: nil, polymorphic_record: nil)
+  def initialize(form:, field:, model_key:, foreign_key:, disabled: false, type: nil, resource: nil, polymorphic_record: nil)
     @form = form
     @field = field
     @type = type
@@ -37,7 +37,15 @@ class Avo::Fields::BelongsToField::AutocompleteComponent < ViewComponent::Base
   private
 
   def should_prefill?
-    @field.is_polymorphic? && searchable? && !(new_record? && has_polymorphic_association?)
+    # default this conditional to true
+    is_polymorphic = true
+
+    # if this is a field that can be polymorphic (belongs_to)
+    if @field.respond_to? :is_polymorphic?
+      is_polymorphic = @field.is_polymorphic?
+    end
+
+    is_polymorphic && searchable? && !(new_record? && has_polymorphic_association?)
   end
 
   def searchable?

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

@@ -7,7 +7,8 @@
     [type.to_s, resource.model_key]
   end.to_h
 %>
-<div data-controller="belongs-to-field"
+<div class="divide-y"
+    data-controller="belongs-to-field"
     data-searchable="<%= @field.searchable %>"
     data-association="<%= @field.id %>"
     data-association-class="<%= @field&.target_resource&.model_class || nil %>"

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

@@ -1,7 +1,7 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, dash_if_blank: false, displayed_in_modal: @displayed_in_modal do %>
   <div class="h-8 flex items-center">
     <%= @form.check_box @field.id,
-      class: 'mx-2 text-lg h-4 w-4',
+      class: 'text-lg h-4 w-4',
       disabled: @field.readonly,
       checked: @field.value
     %>

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

@@ -1,3 +1,3 @@
-<%= index_field_wrapper field: @field, dash_if_blank: false do %>
+<%= index_field_wrapper field: @field, dash_if_blank: false, center_content: true, flush: true do %>
   <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
 <% end %>

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

@@ -17,7 +17,7 @@
           end
         %>
         <label class="block">
-          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, { class: "w-3 h-3", disabled: @field.readonly, id: "#{model_param_key}_#{@field.id}_#{id}" } %> <%= label %>
+          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, { class: "w-4 h-4", disabled: @field.readonly, id: "#{model_param_key}_#{@field.id}_#{id}" } %> <%= label %>
         </label>
       <% end %>
     </div>

data/app/components/avo/fields/common/boolean_check_component.html.erb

@@ -1,12 +1,12 @@
 <%
-  classes = 'h-5 float-left'
+  classes = 'h-6 float-left mr-1'
 
   if @checked
-    classes += ' text-teal-600'
-    icon = 'check-circle'
+    classes += ' text-green-600'
+    icon = 'heroicons/outline/check-circle'
   else
     classes += ' text-red-500'
-    icon = 'x-circle'
+    icon = 'heroicons/outline/x-circle'
   end
 %>
 <%= helpers.svg "#{icon}.svg", class: classes %>

data/app/components/avo/fields/common/boolean_group_component.html.erb

@@ -6,9 +6,9 @@
         @options.each do |id, label|
           checked = @value.present? && @value[id.to_s].present?
       %>
-      <div>
+      <div class="flex flex-nowrap">
         <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: checked %>
-          <div class="ml-6 text-left py-px"><%= label %></div>
+          <div class="ml-px text-left py-px"><%= label %></div>
         </div>
       <% end %>
     </div>

data/app/components/avo/fields/common/files_list_viewer_component.html.erb

@@ -1,5 +1,5 @@
-<div class="relative p-3 bg-slate-200 grid grid-cols-3 xl:grid-cols-4 gap-3 rounded-xl">
+<div class="relative py-3 grid xs:grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 rounded-xl">
   <% @field.value.attachments.each do |file| %>
-    <%= render Avo::Fields::Common::MultipleFileViewerComponent.new id: @field.id, file: file, is_image: @field.is_image, is_audio: @field.is_audio, button_size: :xs, resource: @resource %>
+    <%= render Avo::Fields::Common::SingleFileViewerComponent.new field: @field, resource: @resource, file: file %>
   <% end %>
 </div>

data/app/components/avo/fields/common/gravatar_viewer_component.html.erb

@@ -7,6 +7,6 @@
   options[:size] = @size if @size.present?
   query = options.map { |key, value| "#{key}=#{value}" }.join('&')
   url = URI::HTTPS.build(host: "www.gravatar.com", path: "/avatar/#{@md5}", query: query)
-  classes = @rounded ? 'min-w-10 rounded-full' : 'min-w-10'
+  classes = @rounded ? 'rounded-full' : ''
 %>
 <%= link_to_if @link_to_resource.present?, image_tag(url.to_s, class: classes), @link, title: @title %>

data/app/components/avo/fields/common/heading_component.html.erb

@@ -1,5 +1,5 @@
-<div class="flex items-start py-1 leading-tight border-t bg-slate-600 text-white text-xs">
-  <div class="p-3 pl-6 h-full w-full">
+<div class="flex items-start py-1 leading-tight bg-gray-100 text-gray-500 text-xs">
+  <div class="py-2 px-6 h-full w-full">
     <% if @value.present? %>
       <% if @as_html %>
         <%== @value %>

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -1,4 +1,4 @@
-<div class="w-full shadow-lg rounded-lg overflow-hidden"
+<div class="w-full shadow-lg rounded overflow-hidden"
   data-controller="key-value"
   data-key-value-target="controller"
   data-options="<%= @field.options.to_json %>"
@@ -7,7 +7,7 @@
 >
   <div class="w-full flex flex-col">
     <div class="flex w-full">
-      <div class="flex w-full bg-gray-800 shadow overflow-hidden">
+      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
         <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
           <%= @field.key_label %>
         </div>