avo 3.30.4 → 4.0.0.beta.1

data/app/components/avo/view_types/table_component.html.erb

@@ -0,0 +1,63 @@
+<turbo-frame id="<%= "#{@resource.model_key}_list" %>" target="_top" class="relative w-full">
+  <div
+    class="card relative w-full"
+    data-component-name="<%= self.class.to_s.underscore %>"
+    data-controller="item-select-all"
+    data-resource-name="<%= @resource.model_key %>"
+    data-item-select-all-selected-all-value="false"
+    data-item-select-all-selected-all-query-value="<%= encrypted_query %>"
+    data-item-select-all-page-count-value="<%= @pagy.pages %>"
+    data-selected-resources-name="<%= @resource.model_key %>"
+    data-selected-resources="[]"
+  >
+    <div class="card__wrapper mac-styled-scrollbar overflow-auto">
+      <% if @pagy.pages > 1 %>
+        <div
+          class="absolute z-30 ms-10 hidden w-[calc(100%-4rem)] mt-0.5 "
+          data-item-select-all-target="selectAllOverlay"
+        >
+          <div class="flex items-center ps-2 bg-secondary w-full">
+            <div data-item-select-all-target="unselectedMessage">
+              <%= selected_page_label %>
+
+              <%= a_link request.url,
+                size: :xs,
+                color: :primary,
+                class: "relative -top-[0.1rem] ms-2 cursor-pointer text-primary-500",
+                data: {action: "click->item-select-all#selectAll"} do %>
+                <%= t "avo.select_all_matching" %>
+              <% end %>
+            </div>
+
+            <div class="hidden w-full " data-item-select-all-target="selectedMessage">
+              <%= selected_all_label %>
+
+              <%= a_link request.url,
+                size: :xs,
+                color: :primary,
+                class: "relative -top-[0.1rem] ms-2 cursor-pointer text-primary-500",
+                data: {action: "click->item-select-all#selectAll"} do %>
+                <%= t("avo.undo").humanize %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <table class="w-full border-separate border-spacing-0">
+        <%= render partial: 'avo/partials/table_header', locals: {fields: @header_fields, resource: @resource} %>
+
+        <%= content_tag :tbody, class: "card__body table-row-group rounded-lg tr>td:first:rounded-t-lg tr>td:last:rounded-b-lg",
+          data: {
+            **(try(:drag_reorder_data_attributes) || {}),
+          } do %>
+          <% @table_row_components.each do |table_row_component| %>
+            <%= render table_row_component %>
+          <% end %>
+        <% end %>
+      </table>
+
+      </div>
+    <div class="card__footer"><%= render paginator_component %></div>
+  </div>
+</turbo-frame>

data/app/components/avo/{index/resource_table_component.rb → view_types/table_component.rb}

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Avo::Index::ResourceTableComponent < Avo::BaseComponent
+class Avo::ViewTypes::TableComponent < Avo::ViewTypes::BaseViewTypeComponent
   include Avo::ApplicationHelper
   attr_reader :pagy, :query
 
@@ -8,15 +8,6 @@ class Avo::Index::ResourceTableComponent < Avo::BaseComponent
     @header_fields, @table_row_components = cache_table_rows
   end
 
-  prop :resources
-  prop :resource
-  prop :reflection
-  prop :parent_record
-  prop :parent_resource
-  prop :pagy
-  prop :query
-  prop :actions
-
   def encrypted_query
     # TODO: move this to the resource where we can apply the adapter pattern
     if Module.const_defined?("Ransack::Search") && @query.instance_of?(Ransack::Search)

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

@@ -9,21 +9,11 @@
     **@resource.stimulus_data_attributes
   } do %>
   <%= render_cards_component %>
-  <%= form_with model: @resource.record,
-    scope: @resource.form_scope,
-    url: form_url,
-    method: form_method,
-    local: true,
-    html: {
-      novalidate: true,
-      data: {
-        controller: "form",
-        action: "keydown.ctrl+enter->form#submit keydown.meta+enter->form#submit"
-      }
-    },
-    multipart: true do |form| %>
+
+  <%= build_form do |form| %>
     <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
-    <%= content_tag :div, class: "space-y-12" do %>
+
+    <%= content_tag :div, class: "flex flex-col gap-y-12" do %>
       <% @resource.get_items.each_with_index do |item, index| %>
         <%= render Avo::Items::SwitcherComponent.new(
           resource: @resource,
@@ -40,10 +30,14 @@
       <% end %>
 
       <% if Avo.configuration.buttons_on_form_footers %>
-        <%= render Avo::PanelComponent.new do |c| %>
-          <% c.with_footer_tools do %>
-            <% @resource.render_edit_controls.each do |control| %>
-              <%= render_control control %>
+        <%= render ui.panel do |panel| %>
+          <% panel.with_footer do %>
+            <%= render ui.panel_header do |header| %>
+              <% header.with_controls do %>
+                <% @resource.render_edit_controls.each do |control| %>
+                  <%= render_control control %>
+                <% end %>
+              <% end %>
             <% end %>
           <% end %>
         <% end %>

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

@@ -2,16 +2,12 @@
 
 class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   include Avo::ApplicationHelper
+  include Avo::Concerns::FormBuilder
 
   prop :resource
   prop :record
   prop :actions, default: [].freeze
   prop :view, default: Avo::ViewInquirer.new(:edit).freeze
-  prop :display_breadcrumbs, default: true, reader: :public
-
-  def after_initialize
-    @display_breadcrumbs = @reflection.blank? && display_breadcrumbs
-  end
 
   def title
     @resource.default_panel_name
@@ -64,26 +60,4 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   def is_edit?
     @view.in?(%w[edit update])
   end
-
-  def form_method
-    return :put if is_edit?
-
-    :post
-  end
-
-  def form_url
-    if is_edit?
-      helpers.resource_path(
-        record: @resource.record,
-        resource: @resource
-      )
-    else
-      helpers.resources_path(
-        resource: @resource,
-        via_relation_class: params[:via_relation_class],
-        via_relation: params[:via_relation],
-        via_record_id: params[:via_record_id]
-      )
-    end
-  end
 end

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

@@ -6,92 +6,115 @@
     resource_name: @resource.class.to_s,
     **@resource.stimulus_data_attributes
   } do %>
+
   <%= render_cards_component %>
-  <%= render Avo::PanelComponent.new(
-      description: description,
-      cover_photo: resource.cover_photo,
-      data: {component: "resources-index"},
-      display_breadcrumbs: (@reflection.blank? && @parent_resource.blank?) || (@reflection.present? && !helpers.turbo_frame_request?)
-    ) do |c| %>
-    <% c.with_name_slot do %>
-      <%= render Avo::PanelNameComponent.new name: title, url: (params[:turbo_frame].present? && linkable?) ? field.frame_url(add_turbo_frame: false) : nil, target: :_blank do |panel_name_component| %>
-        <% panel_name_component.with_body do %>
-          <% if reloadable %>
-            <%= button_tag data: { controller: "panel-refresh", action: "click->panel-refresh#refresh" } do %>
-              <%= helpers.svg "heroicons/outline/arrow-path", class: "ml-2 text-2xl h-6 " %>
-            <% end %>
-          <% end %>
+
+  <%= render ui.panel(
+      cover: resource.cover,
+      class: "w-full px-2",
+      data: {
+        component_name:,
+        controller: "resource-search",
+        "resource-search-debounce-value": "500",
+        "resource-search-url-value": request.fullpath
+      },
+    ) do |panel| %>
+      <% if @resource.cover.present? %>
+        <% panel.with_cover do %>
+          <%= render Avo::CoverComponent.new cover: @resource.cover %>
         <% end %>
       <% end %>
-    <% end %>
-    <% c.with_tools do %>
-      <% @resource.render_index_controls(item: singular_resource_name.downcase).each do |control| %>
-        <%= render_control control %>
-      <% end %>
-    <% end %>
-    <% c.with_body do %>
-      <div class="flex flex-col">
-        <%= render scopes_list if can_render_scopes? %>
-        <div class="flex flex-col">
-          <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4 <%= "hidden" unless header_visible? %>">
-            <div class="flex items-center px-4 w-64">
-              <% if show_search_input %>
-                <%= render partial: "avo/partials/resource_search", locals: {resource: @resource.route_key, via_reflection: via_reflection} %>
-              <% else %>
-                <%# Offset for the space-y-2 property when the search is missing %>
-                <div class="-mb-2"></div>
-              <% end %>
-            </div>
 
-            <div class="justify-self-end flex justify-start xs:justify-end items-center px-4 space-x-3">
-              <%= render_dynamic_filters_button %>
-              <% unless field&.hide_filter_button %>
-                <%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters, parent_record: @parent_record %>
-              <% end %>
+    <% panel.with_header do %>
+      <%= render ui.panel_header(
+        title:,
+        description:
+      ) do |header| %>
+        <% header.with_title_slot do %>
+          <% if reloadable? %>
+            <%= render Avo::DiscreetInformationComponent.new(
+              icon: "tabler/outline/refresh",
+              as: :icon,
+              title: t('avo.reload'),
+              classes: "cursor-pointer",
+              data: { controller: "panel-refresh", action: "click->panel-refresh#refresh" }
+            ) %>
+          <% end %>
 
-              <%= render partial: "avo/partials/view_toggle_button", locals: { available_view_types: @resource.available_view_types, view_type: @resource.view_type, turbo_frame: @turbo_frame } %>
-            </div>
-          </div>
-          <% if has_dynamic_filters? %>
-            <%= render Avo::DynamicFilters::FiltersComponent.new resource: resource, turbo_frame: @turbo_frame, dynamic_filters_component_id: dynamic_filters_component_id, parent_record: @parent_record, parent_resource: @parent_resource %>
+          <% if linkable? %>
+            <%= render Avo::DiscreetInformationComponent.new(
+              icon: "tabler/outline/external-link",
+              as: :icon,
+              url: field.frame_url(add_turbo_frame: false),
+              target: :_blank,
+              title: t('avo.open_in_new_tab')
+            ) %>
+          <% end %>
+
+          <% if Rails.env.development? %>
+            <%= render Avo::DiscreetInformationComponent.new(
+              as: :icon,
+              title: t('avo.open_in_your_editor'),
+              url: helpers.editor_file_path(@resource),
+              icon: "tabler/outline/code"
+            ) %>
           <% end %>
-        </div>
-      </div>
-      <% if @resource.view_type.to_sym == :table %>
-        <% if @resources.present? %>
-          <div class="w-full relative flex-1 flex mt-0">
-            <%= render(@resource.resolve_component(Avo::Index::ResourceTableComponent).new(resources: @resources, resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, pagy: @pagy, query: @query, actions: @actions)) %>
-          </div>
-        <% else %>
-          <%= helpers.empty_state by_association: params[:related_name].present?, view_type: @resource.view_type, add_background: true %>
         <% end %>
-      <% end %>
-    <% end %>
-    <% c.with_bare_content do %>
-     <% if @resource.view_type.to_sym == :map %>
-        <% if @resources.present? %>
-          <div>
-            <%= render(@resource.resolve_component(Avo::Index::ResourceMapComponent).new(resources: @resources, resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, pagy: @pagy, query: @query)) %>
+
+        <% header.with_controls do %>
+          <div class="flex gap-3">
+            <% @resource.render_index_controls(item: singular_resource_name.downcase).each do |control| %>
+              <%= render_control control %>
+            <% end %>
           </div>
-        <% else %>
-          <%= helpers.empty_state by_association: params[:related_name].present?, view_type: @resource.view_type, add_background: true %>
         <% end %>
       <% end %>
-      <% if @resource.view_type.to_sym == :table || @resource.view_type.to_sym == :map %>
-        <% if @records.present? %>
-          <div class="mt-4 w-full">
-            <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame, index_params: @index_params, resource: @resource, parent_record: @parent_record, parent_resource: @parent_resource, discreet_pagination: field&.discreet_pagination %>
+    <% end %>
+
+    <% panel.with_body do %>
+      <div class="relative flex flex-col gap-y-4">
+        <div class="relative flex flex-col gap-y-4 z-20">
+          <div class="flex flex-col gap-y-4">
+            <%= render scopes_list if can_render_scopes? %>
+
+            <% if header_visible? %>
+              <div class="flex flex-col xs:flex-row xs:justify-between">
+                <div class="flex w-64 items-center">
+                  <% if show_search_input %>
+                    <%= render ui.search_input(
+                      name: "q",
+                      value: params[:q],
+                      id: nil,
+                      placeholder: t('avo.search.placeholder'),
+                      data: {
+                        action: "input->resource-search#search",
+                        "resource-search-target": "input"
+                      }) %>
+                  <% end %>
+                </div>
+
+                <div class="flex items-center justify-start space-x-3 rtl:space-x-reverse justify-self-end px-4 xs:justify-end">
+                  <div class="index-missing-resources:hidden">
+                    <%= render_dynamic_filters_button %>
+                  </div>
+
+                  <% unless field&.hide_filter_button %>
+                    <%= render Avo::FiltersComponent.new filters: @filters, resource: @resource, applied_filters: @applied_filters, parent_record: @parent_record %>
+                  <% end %>
+
+                  <%= render partial: "avo/partials/view_toggle_button", locals: { available_view_types: @resource.available_view_types, view_type: @resource.view_type, turbo_frame: @turbo_frame } %>
+                </div>
+              </div>
+            <% end %>
+
+            <% if has_dynamic_filters? %>
+              <%= render Avo::DynamicFilters::FiltersComponent.new resource: resource, turbo_frame: @turbo_frame, dynamic_filters_component_id: dynamic_filters_component_id, parent_record: @parent_record, parent_resource: @parent_resource %>
+            <% end %>
           </div>
-        <% end %>
-      <% end %>
-      <% if @resource.view_type.to_sym == :grid %>
-        <div id="records_panel">
-          <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, actions: @actions) %>
         </div>
-        <div class="mt-6">
-          <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame, index_params: @index_params, resource: @resource, parent_record: @parent_record, parent_resource: @parent_resource, discreet_pagination: field&.discreet_pagination %>
-        </div>
-      <% end %>
+
+        <%= render Avo::ResourceListingComponent.new(**resource_content_components_common_args) %>
+      </div>
     <% end %>
   <% end %>
 <% end %>

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

@@ -130,6 +130,7 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
   def render_dynamic_filters_button
     return unless Avo.avo_dynamic_filters_installed?
     return unless @resource.has_filters?
+    return unless has_resources?
     return if field&.hide_filter_button
     return if Avo::DynamicFilters.configuration.always_expanded
 
@@ -219,11 +220,30 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     @dynamic_filters_component_id ||= "dynamic_filters_component_id_#{SecureRandom.hex(3)}"
   end
 
-  def reloadable
+  def reloadable?
     field&.reloadable?
   end
 
   def linkable?
     field&.linkable?
   end
+
+  def resource_content_components_common_args
+    @resource_content_components_common_args ||= {
+      resources: @resources,
+      resource: @resource,
+      reflection: @reflection,
+      parent_record: @parent_record,
+      parent_resource: @parent_resource,
+      pagy: @pagy,
+      query: @query,
+      actions: @actions,
+      turbo_frame: @turbo_frame,
+      index_params: @index_params
+    }
+  end
+
+  def has_resources?
+    @resources.present?
+  end
 end

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

@@ -7,8 +7,9 @@
     selected_resources: [@resource.record_param],
     **@resource.stimulus_data_attributes
   } do %>
-  <%= content_tag :div, class: 'space-y-12' do %>
+  <%= content_tag :div, class: 'flex flex-col gap-y-12' do %>
     <%= render_cards_component %>
+
     <% @resource.get_items.each_with_index do |item, index| %>
       <%= render Avo::Items::SwitcherComponent.new(
         resource: @resource,
@@ -20,9 +21,10 @@
         parent_record: @parent_record,
         parent_component: self,
         actions: @actions
-      )%>
+      ) %>
     <% end %>
   <% end %>
+
   <% if should_display_invalid_fields_errors? %>
     <turbo-stream action="append" target="alerts">
       <template>

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

@@ -3,8 +3,6 @@
 class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
   include Avo::ApplicationHelper
 
-  attr_reader :display_breadcrumbs
-
   prop :resource
   prop :reflection
   prop :parent_resource
@@ -14,7 +12,6 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
 
   def after_initialize
     @view = Avo::ViewInquirer.new("show")
-    @display_breadcrumbs = @reflection.blank?
   end
 
   def title
@@ -57,7 +54,7 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
     # When coming from a turbo frame, we don't want to return to that exact frame
     # for example when editing a has_one field we want to return to the parent frame
     # not the frame of the has_one field.
-    args[:return_to] = e(request.fullpath) unless request.url.include?("turbo_frame=")
+    args[:return_to] = request.url unless request.url.include?("turbo_frame=")
 
     helpers.edit_resource_path(record: @resource.record, resource: @resource, **args)
   end

data/app/controllers/avo/associations_controller.rb

@@ -249,7 +249,7 @@ module Avo
           through_foreign_key => @record.id
         ),
         additional_params,
-        fields: @attach_fields,
+        fields: @attach_fields
       )
     end
 

data/app/controllers/avo/base_application_controller.rb

@@ -247,8 +247,9 @@ module Avo
       end
     end
 
-    def mark_container_as_full_width
-      @container_full_width = true
+    def mark_container_width(width)
+      raise ArgumentError, "Invalid container width: #{width}. Must be one of #{Avo::Configuration::VALID_CONTAINER_WIDTHS}" unless Avo::Configuration::VALID_CONTAINER_WIDTHS.include?(width.to_sym)
+      @container_size = width.to_s
     end
 
     def add_initial_breadcrumbs
@@ -295,13 +296,13 @@ module Avo
     end
 
     def set_stylesheet_assets_path
+      # TODO: handle this differently maybe?
+      # We'll definitely have to change it on TW4
       # Prefer the user's tailwind config if it exists, otherwise use the default one from Avo
       @stylesheet_assets_path = if Rails.root.join("config", "avo", "tailwind.config.js").exist?
         "avo.tailwind"
-      elsif Avo::PACKED
-        "/avo-assets/avo.base"
       else
-        "avo.base"
+        "avo/application"
       end
     end
 
@@ -326,6 +327,7 @@ module Avo
 
     def decode_params
       if params[:return_to].present?
+        params[:raw_return_to] = params[:return_to]
         params[:return_to] = d(params[:return_to])
       end
     end