avo 2.9.2.pre1 → 2.10.3.pre.1

data/app/components/avo/item_switcher_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class Avo::ItemSwitcherComponent < Avo::BaseComponent
+  include Turbo::FramesHelper
+
+  attr_reader :resource
+  attr_reader :reflection
+  attr_reader :index
+  attr_reader :item
+  attr_reader :view
+
+  def initialize(resource: nil, reflection: nil, item: nil, index: nil, view: nil, form: nil)
+    @resource = resource
+    @reflection = reflection
+    @form = form
+    @index = index
+    @item = item
+    @view = view
+  end
+
+  def form
+    @form || nil
+  end
+
+  def render?
+    # Stops rendering if the field should be hidden in reflections
+    if item.is_field?
+      return false if in_reflection? && item.hidden_in_reflection?
+    end
+
+    true
+  end
+
+  def in_reflection?
+    @reflection.present?
+  end
+
+  def tab_group_component
+    Avo::TabGroupComponent.new resource: @resource, group: item.hydrate(view: view), index: index, params: params, form: form, view: view
+  end
+
+  def field_component
+    item.component_for_view(@view).new(field: item.hydrate(resource: @resource, view: @view, model: @resource.model), resource: @resource, index: index, form: form)
+  end
+end

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

@@ -1,4 +1,4 @@
-<div <%== data_attributes %>>
+<%= content_tag :div, data: data_attributes, class: classes do %>
   <% if render_header? %>
     <div class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
       <div class="overflow-hidden flex flex-col">
@@ -7,18 +7,15 @@
             <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
           </div>
         <% end %>
-
         <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate items-center flex flex-1" data-target="title">
-          <span><%= @title %></span>
+          <span><%= @name %></span>
         </div>
-
         <% if description.present? %>
-        <div class="text-sm tracking-normal font-medium text-gray-600" data-target="description">
-          <%== description %>
-        </div>
+          <div class="text-sm tracking-normal font-medium text-gray-600" data-target="description">
+            <%== description %>
+          </div>
         <% end %>
       </div>
-
       <% if tools.present? %>
         <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
           <%= tools %>
@@ -26,26 +23,28 @@
       <% end %>
     </div>
   <% end %>
-
-  <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
-    <%= body %>
-  </div>
-
-  <div class="relative">
-    <%= bare_content %>
-  </div>
-
-  <% if footer_tools.present? %>
+  <% if body? %>
+    <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
+      <%= body %>
+    </div>
+  <% end %>
+  <% if bare_content? %>
+    <div class="relative">
+      <%= bare_content %>
+    </div>
+  <% end %>
+  <% if footer_tools? %>
     <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mt-6">
       <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
         <%= footer_tools %>
       </div>
     </div>
   <% end %>
-
-  <div class="flex justify-end w-full">
-    <div>
-      <%= footer %>
+  <% if footer? %>
+    <div class="flex justify-end w-full">
+      <div>
+        <%= footer %>
+      </div>
     </div>
-  </div>
-</div>
+  <% end %>
+<% end %>

data/app/components/avo/panel_component.rb

@@ -2,6 +2,8 @@
 
 class Avo::PanelComponent < ViewComponent::Base
   attr_reader :title
+  attr_reader :name
+  attr_reader :classes
 
   renders_one :tools
   renders_one :body
@@ -9,13 +11,17 @@ class Avo::PanelComponent < ViewComponent::Base
   renders_one :footer_tools
   renders_one :footer
 
-  def initialize(title: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil)
+  def initialize(title: nil, name: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil, classes: nil, view: nil)
+    # deprecating title in favor of name
     @title = title
+    @name = name || title
     @description = description
+    @classes = classes
     @body_classes = body_classes
     @data = data
     @display_breadcrumbs = display_breadcrumbs
     @index = index
+    @view = view
   end
 
   private
@@ -26,9 +32,6 @@ class Avo::PanelComponent < ViewComponent::Base
 
   def data_attributes
     @data.merge({"panel-index": @index})
-      .map do |key, value|
-        " data-#{key}=\"#{value}\""
-      end.join
   end
 
   def display_breadcrumbs?
@@ -42,7 +45,7 @@ class Avo::PanelComponent < ViewComponent::Base
   end
 
   def render_header?
-    @title.present? || description.present? || tools.present? || display_breadcrumbs?
+    @name.present? || description.present? || tools.present? || display_breadcrumbs?
   end
 
   def render_footer_tools?

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

@@ -0,0 +1,53 @@
+<%= content_tag :div,
+  data: {
+    target: "tab-group",
+    index: index,
+    controller: "tabs",
+    tabs_view_value: view,
+    tabs_active_tab_value: active_tab_name
+  },
+  class: 'space-y-12' do %>
+  <% visible_tabs.each_with_index do |tab, index| %>
+    <%
+      args = {
+        # Hide the turbo frames that aren't in the current tab
+        # This way we can lazy load the un-selected tabs on the show view
+        class: "block #{'hidden' unless tab.name == active_tab_name}",
+        data: {
+          # Add a marker to know if we already loaded a turbo frame
+          loaded: tab.name == active_tab_name,
+          tabs_target: :tab,
+          tab_id: tab.name,
+        }
+      }
+
+      is_current_tab = active_tab_name.to_s == tab.name.to_s
+
+      # On edit screens we want to load each tab because we wnst the DOM to have the fields present on form submission.
+      # If you have a field which is in the second tab and it's required, the form submission will fail because the required field is not in view, and we don't want that.
+      # We also want to load the current tab
+      should_lazy_load = if @view.to_s.in?(['edit', 'new'])
+        false
+      else
+        !is_current_tab
+      end
+
+      if should_lazy_load
+        args[:src] = helpers.resource_path(resource: @resource, model: @resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+        args[:loading] = :lazy
+      end
+    %>
+    <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **args do %>
+      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-4 space-y-4">
+        <%= render Avo::TabSwitcherComponent.new resource: @resource, current_tab: tab, group: group, active_tab_name: active_tab_name, view: view %>
+        <% if !should_lazy_load && !tab.empty? %>
+          <div class="space-y-12">
+            <% tab.visible_items.each do |item| %>
+              <%= render Avo::ItemSwitcherComponent.new resource: @resource, item: item, index: index, form: form, view: @view %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/avo/tab_group_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class Avo::TabGroupComponent < Avo::BaseComponent
+  attr_reader :group
+  attr_reader :index
+  attr_reader :view
+  attr_reader :form
+
+  def initialize(resource:, group:, index:, form:, params:, view:)
+    @resource = resource
+    @group = group
+    @index = index
+    @form = form
+    @params = params
+    @view = view
+
+    @group.index = index
+  end
+
+  def render?
+    tabs_have_content? && visible_tabs.present?
+  end
+
+  def tabs_have_content?
+    visible_tabs.present?
+  end
+
+  def active_tab_name
+    params[:active_tab_name] || group.visible_items&.first&.name
+  end
+
+  def tabs
+    @group.items.map do |tab|
+      tab.hydrate(view: view)
+    end
+  end
+
+  def visible_tabs
+    tabs.select do |tab|
+      !tab.empty?
+    end
+  end
+
+  def active_tab
+    return if group.visible_items.blank?
+
+    group.visible_items.find do |tab|
+      tab.name.to_s == active_tab_name.to_s
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="flex" data-target="tab-switcher">
+  <div class="button-group">
+    <% visible_items.each do |tab| %>
+      <%= a_link tab_path(tab),
+          color: selected?(tab) ? :gray : :primary,
+          rounded: false,
+          size: :sm,
+          class: selected?(tab) ? ' bg-gray-100 border-gray-300' : ' z-20',
+          title: tab.description,
+          data: {
+            tippy: tab.description.present? ? 'tooltip' : '',
+            control: "view-type-toggle-#{tab.name}",
+            selected: selected?(tab),
+            action: 'click->tabs#changeTab',
+            tabs_id_param: tab.name
+          } do %>
+        <%= tab.name %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/avo/tab_switcher_component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+class Avo::TabSwitcherComponent < Avo::BaseComponent
+  include Avo::UrlHelpers
+  include Avo::ApplicationHelper
+
+  attr_reader :active_tab_name
+  attr_reader :group
+  attr_reader :current_tab
+  attr_reader :tabs
+  attr_reader :view
+
+  def initialize(resource:, group:, current_tab:, active_tab_name:, view:)
+    @active_tab_name = active_tab_name
+    @resource = resource
+    @group = group
+    @current_tab = current_tab
+    @tabs = group.items
+    @view = view
+  end
+
+  def tab_path(tab)
+    if is_edit?
+      helpers.edit_resource_path(resource: @resource, model: @resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+    elsif is_new?
+      helpers.new_resource_path(resource: @resource, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+    else
+      helpers.resource_path(resource: @resource, model: @resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id)
+    end
+  end
+
+  def is_edit?
+    @view == :edit
+  end
+
+  def is_new?
+    @view == :new
+  end
+
+  def is_initial_load?
+    params[:active_tab_name].blank?
+  end
+
+  # On initial load we want that each tab button to be the selected one.
+  # We do that so we don't get the wrongly selected item for a quick brief when first switching from one panel to another.
+  def selected?(tab)
+    if is_initial_load?
+      current_tab.name.to_s == tab.name.to_s
+    else
+      tab.name.to_s == active_tab_name.to_s
+    end
+  end
+
+  # Goes through all items and removes the ones that are not supposed to be visible.
+  # Example below:
+  # tabs do
+  #   field :comments, as: :has_many
+  # end
+  # Because the developer hasn't specified that it should be visible on edit views (with the show_on: :edit option),
+  # the field should not be visible in the item switcher either.
+  def visible_items
+    tabs.select do |item|
+      visible = true
+
+      if item.items.blank?
+        visible = false
+      end
+
+      first_item = item.items.first
+      if item.items.count == 1 && first_item.is_field? && first_item.has_own_panel? && !first_item.visible_on?(view)
+        # Return nil if tab contians a has_many type of fields and it's hidden in current view
+        visible = false
+      end
+
+      if item.respond_to?(:visible_on?)
+        visible = item.visible_on? view
+      end
+
+      if item.respond_to?(:visible?)
+        visible = item.visible?
+      end
+
+      visible
+    end
+  end
+end

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

@@ -1,77 +1,55 @@
 <%= content_tag :div,
-  class: "space-y-12",
   data: {
     'model-id': @resource.model.id,
     selected_resources_name: @resource.model_key,
     selected_resources: [@resource.model.id],
     **@resource.stimulus_data_attributes
   } do %>
-  <% @resource.panels.each_with_index do |resource_panel, index| %>
-    <%= form_with model: @resource.model,
-        scope: @resource.form_scope,
-        url: form_url,
-        local: true,
-        multipart: true do |form| %>
-      <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
-      <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true, index: index) do |c| %>
-        <% c.tools do %>
-          <%= a_link back_path,
-            style: :text,
-            icon: 'arrow-left' do %>
-            <%= t('avo.cancel').capitalize %>
-          <% end %>
-          <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
-          <% if can_see_the_save_button? %>
-            <%= a_button color: :primary,
+  <%= form_with model: @resource.model,
+    scope: @resource.form_scope,
+    url: form_url,
+    method: form_method,
+    local: true,
+    html: {
+      novalidate: true
+    },
+    multipart: true do |form| %>
+    <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
+    <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: 0, data: { panel_id: "main" }) do |c| %>
+      <% c.tools do %>
+        <%= a_link back_path,
+        style: :text,
+        icon: 'arrow-left' do %>
+          <%= t('avo.cancel').capitalize %>
+        <% end %>
+        <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource, view: @view %>
+        <% if can_see_the_save_button? %>
+          <%= a_button color: :primary,
               style: :primary,
               loading: true,
               type: :submit,
               icon: 'save' do %>
-              <%= t('avo.save').capitalize %>
-            <% end %>
+            <%= t('avo.save').capitalize %>
           <% end %>
         <% end %>
-        <% if Avo.configuration.buttons_on_form_footers %>
-          <% c.footer_tools do %>
-            <%= a_link back_path, icon: 'arrow-left' do %>
-              <%= t('avo.cancel').capitalize %>
-            <% end %>
-            <% if can_see_the_save_button? %>
-              <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
-                <%= t('avo.save').capitalize %>
-              <% end %>
-            <% end %>
+      <% end %>
+      <% if Avo.configuration.buttons_on_form_footers %>
+        <% c.footer_tools do %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
+            <%= t('avo.cancel').capitalize %>
           <% end %>
-        <% end %>
-        <% c.body do %>
-          <div class="divide-y">
-            <% @resource.get_fields.each_with_index do |field, index| %>
-              <%= render field.component_for_view(:edit).new(field: field, resource: @resource, index: index, form: form) unless field.computed %>
+          <% if can_see_the_save_button? %>
+            <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
+              <%= t('avo.save').capitalize %>
             <% end %>
-          </div>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
-  <% end %>
-  <% if @reflection.blank? %>
-    <% if has_one_panels.present? %>
-      <% has_one_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_many_panels.present? %>
-      <% has_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_as_belongs_to_many_panels.present? %>
-      <% has_as_belongs_to_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if resource_tools.present? %>
-      <% resource_tools.each do |tool, index| %>
-        <%= render tool.partial, tool: tool %>
+    <%= content_tag :div, class: 'space-y-12' do %>
+      <% @resource.get_items.each_with_index do |item, index| %>
+        <% next if item.nil? %>
+        <%= render Avo::ItemSwitcherComponent.new resource: @resource, item: item, index: index + 1, view: @view, form: form %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -15,6 +15,10 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     split_panel_fields
   end
 
+  def title
+    @resource.default_panel_name
+  end
+
   def back_path
     if via_resource?
       helpers.resource_path(model: params[:via_resource_class].safe_constantize, resource: relation_resource, resource_id: params[:via_resource_id])
@@ -32,7 +36,7 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   # The save button is dependent on the edit? policy method.
   # The update? method should be called only when the user clicks the Save button so the developer gets access to the params from the form.
   def can_see_the_save_button?
-    @resource.authorization.authorize_action :edit, raise_exception: false
+    @resource.authorization.authorize_action @view, raise_exception: false
   end
 
   private
@@ -45,6 +49,12 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
     view == :edit
   end
 
+  def form_method
+    return :put if is_edit?
+
+    :post
+  end
+
   def form_url
     if is_edit?
       helpers.resource_path(

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

@@ -34,10 +34,10 @@
       >
         <% if @resource.search_query.present? %>
           <div class="flex items-center px-4 w-64">
-            <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_name.collection} %>
+            <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.route_key} %>
           </div>
         <% else %>
-          <%# Offset for the space-y-2 property when the serach is missing %>
+          <%# Offset for the space-y-2 property when the search is missing %>
           <div class="-mb-2"></div>
         <% end %>
         <% if @filters.present? || available_view_types.count > 1 %>

data/app/components/avo/views/resource_index_component.rb

@@ -113,11 +113,11 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
       end
     end
 
-    helpers.new_resource_path(model: @resource.model_class, resource: @resource, **args)
+    helpers.new_resource_path(resource: @resource, **args)
   end
 
   def attach_path
-    "#{Avo::App.root_path}#{request.env["PATH_INFO"]}/new"
+    Avo::App.root_path(paths: [request.env["PATH_INFO"], "new"])
   end
 
   def singular_resource_name
@@ -145,7 +145,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     @reflection.active_record.to_s
   end
 
-  def name 
+  def name
     field.custom_name? ? field.name : field.plural_name
   end