avo 1.24.2 → 2.1.0

data/app/{views/avo/partials/_paginator.html.erb → components/avo/paginator_component.html.erb}

@@ -1,24 +1,21 @@
 <%
-  per_page_options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, @index_params[:per_page].to_i]
+  per_page_options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, index_params[:per_page].to_i]
 
-  if @parent_resource.present?
+  if parent_resource.present?
     per_page_options.prepend Avo.configuration.via_per_page
   end
 
   per_page_options = per_page_options.sort.uniq
 %>
-
-<div class="bg-white px-4 flex items-center justify-between aborder-t aborder-slate-200 sm:px-6 rounded-xl">
-  <div class="hidden sm:flex-2 sm:flex sm:items-center sm:justify-between">
+<div class="flex flex-col sm:flex-row items-center justify-between aborder-t aborder-slate-200 rounded-xl space-y-2 sm:space-y-0">
+  <div class="flex-2 sm:flex sm:items-center sm:justify-between">
     <div>
       <div class="text-sm leading-5 text-slate-600 flex items-center">
-        <div class="mr-2"><%== pagy_info @pagy %></div>
-
         <div data-controller="per-page">
           <div class="flex items-center">
             <%= select_tag 'per_page',
-              options_for_select(per_page_options, @index_params[:per_page]),
-              class: 'appearance-none inline-flex bg-slate-100 disabled:bg-slate-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
+              options_for_select(per_page_options, index_params[:per_page]),
+              class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
               data: {
                 'turbo-frame': turbo_frame,
                 'per-page-target': 'selector',
@@ -26,12 +23,11 @@
               }
             %> <%= t('avo.per_page').downcase %>
           </div>
-
           <% per_page_options.each do |option| %>
-            <% if @parent_resource.present? %>
-              <%= link_to "Change to #{option} items per page", related_resources_path(@parent_resource.model_class, @resource.model_class, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
+            <% if parent_resource.present? %>
+              <%= link_to "Change to #{option} items per page", helpers.related_resources_path(parent_resource.model_class, resource.model_class, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
             <% else %>
-              <%= link_to "Change to #{option} items per page", resources_path(resource: @resource, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
+              <%= link_to "Change to #{option} items per page", helpers.resources_path(resource: resource, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
             <% end %>
           <% end %>
         </div>
@@ -39,10 +35,14 @@
     </div>
   </div>
   <div class="flex">
-    <div class="flex-2 sm:flex sm:items-center sm:justify-between">
-      <%# @todo: add first & last page. make the first and last buttons rounded %>
+    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left">
+      <% if @pagy.count > 0 %>
+        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
+      <% end %>
+
       <% if @pagy.pages > 1 %>
-        <%== pagy_nav @pagy %>
+        <%# @todo: add first & last page. make the first and last buttons rounded %>
+        <%== helpers.pagy_nav @pagy %>
       <% end %>
     </div>
   </div>

data/app/components/avo/paginator_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Avo::PaginatorComponent < ViewComponent::Base
+  attr_reader :pagy
+  attr_reader :turbo_frame
+  attr_reader :index_params
+  attr_reader :resource
+  attr_reader :parent_resource
+
+  def initialize(resource: nil, parent_resource: nil, pagy:, turbo_frame:, index_params:)
+    @pagy = pagy
+    @turbo_frame = turbo_frame
+    @index_params = index_params
+    @resource = resource
+    @parent_resource = parent_resource
+  end
+end

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

@@ -1,34 +1,46 @@
 <div <%== data_attributes %>>
-  <div class="mb-6">
-    <div>
-      <% if display_breadcrumbs? %>
-        <div class="breadcrumbs">
-          <%= 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 %>
+  <% if render_header? %>
+    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mb-6">
+      <div class="overflow-hidden mr-4">
+        <% if display_breadcrumbs? %>
+          <div class="breadcrumbs truncate mb-2">
+            <%= 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" data-target="title">
+          <%= @title %>
         </div>
-      <% end %>
-      <div class="text-2xl tracking-normal font-bold text-gray-800 truncate" data-target="title">
-        <%= @title %>
-      </div>
-      <div class="text-sm tracking-normal text-gray-600" data-target="description">
-        <%== description %>
+
+        <% if description.present? %>
+        <div class="text-base tracking-normal font-medium text-gray-600 truncate" data-target="description">
+          <%== description %>
+        </div>
+        <% end %>
       </div>
-    </div>
 
-    <div>
-      <div class="flex justify-end space-x-2 mb-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">
         <%= tools %>
       </div>
     </div>
-  </div>
+  <% end %>
 
-  <div class="relative bg-white rounded-xl shadow-xl mb-8 <%= @body_classes %>">
+  <div class="relative <%= white_panel_classes %> <%= @body_classes %>">
     <%= body %>
   </div>
 
-  <div class="relative mb-8">
+  <div class="relative">
     <%= bare_content %>
   </div>
 
+  <% if footer_tools.present? %>
+    <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 %>

data/app/components/avo/panel_component.rb

@@ -1,9 +1,12 @@
 # frozen_string_literal: true
 
 class Avo::PanelComponent < ViewComponent::Base
+  attr_reader :title
+
   renders_one :tools
   renders_one :body
   renders_one :bare_content
+  renders_one :footer_tools
   renders_one :footer
 
   def initialize(title: nil, description: nil, body_classes: nil, data: {}, display_breadcrumbs: false, index: nil)
@@ -17,6 +20,10 @@ class Avo::PanelComponent < ViewComponent::Base
 
   private
 
+  def white_panel_classes
+    'bg-white rounded shadow'
+  end
+
   def data_attributes
     @data.merge({'panel-index': @index}).map do |key, value|
       " data-#{key}=\"#{value}\""
@@ -24,12 +31,20 @@ class Avo::PanelComponent < ViewComponent::Base
   end
 
   def display_breadcrumbs?
-    @display_breadcrumbs
+    @display_breadcrumbs == true && Avo.configuration.display_breadcrumbs == true
   end
 
   def description
     return @description if @description.present?
 
-    '&nbsp;'
+    ""
+  end
+
+  def render_header?
+    @title.present? || description.present? || tools.present? || display_breadcrumbs?
+  end
+
+  def render_footer_tools?
+    footer_tools.present?
   end
 end

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

@@ -0,0 +1,3 @@
+<%= link_to @path, class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-blue-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
+  <%= @icon if @icon.present? %> <%= @label %>
+<% end %>

data/app/components/avo/profile_item_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::ProfileItemComponent < ViewComponent::Base
+  def initialize(label: nil, icon: nil, path: nil, active: :inclusive, target: nil)
+    @label = label
+    @icon = icon
+    @path = path
+    @active = active
+    @target = target
+  end
+end

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

@@ -0,0 +1,4 @@
+<%= hidden_field_tag :via_resource_class, params[:via_resource_class] if params[:via_resource_class] %>
+<%= hidden_field_tag :via_resource_id, params[:via_resource_id] if params[:via_resource_id] %>
+<%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
+<%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>

data/app/components/avo/referrer_params_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Avo::ReferrerParamsComponent < ViewComponent::Base
+  attr_reader :back_path
+
+  def initialize(back_path: nil)
+    @back_path = back_path
+  end
+end

data/app/components/avo/resource_component.rb

@@ -17,7 +17,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     if @reflection.present?
       reflection_resource = ::Avo::App.get_resource_by_model_name(@reflection.active_record.name)
       reflection_resource.hydrate(model: @parent_model) if @parent_model.present?
-      association_name = params['related_name']
+      association_name = params["related_name"]
 
       if association_name.present?
         method_name = "#{policy_method}_#{association_name}?".to_sym

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

@@ -1,16 +1,9 @@
-<div class="flex items-start 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="w-48 md:w-64 px-8" data-slot="label">
-      <%= @field.name %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
-    </div>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, dash_if_blank: @dash_if_blank, full_width: @full_width) do %>
+  <div class="self-center <% if @full_width %> w-full <% else %> w-full md:w-8/12 <% end %>" data-slot="value">
+    <% if @field.value.blank? and @dash_if_blank %>
+      —
+    <% else %>
+      <%= content %>
+    <% end %>
   </div>
-  <div class="flex-1 flex flex-row h-full ml-2 min-h-inherit">
-    <div class="px-6 py-3 self-center <% if @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
-      <% if @field.value.blank? and @dash_if_blank %>
-        —
-      <% else %>
-        <%= content %>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

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

@@ -7,9 +7,5 @@ class Avo::Show::FieldWrapperComponent < ViewComponent::Base
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
     @full_width = full_width
-
-    if (@index != 0) || @displayed_in_modal
-      @classes += " border-t"
-    end
   end
 end

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

@@ -0,0 +1,51 @@
+<div class="fixed z-[60] application-sidebar hidden lg:flex h-full bg-white text-white w-64 border-r" data-mobile-target="sidebar">
+  <div class="flex flex-col w-full h-full">
+    <div class="flex justify-between">
+      <%= render partial: "avo/partials/logo" %>
+      <div class="flex items-center mr-4">
+        <%= helpers.a_button class: "lg:hidden", icon: 'menu-back', data: { action: 'click->mobile#toggleSidebar' } %>
+      </div>
+    </div>
+    <div class="flex-1 flex flex-col justify-between overflow-auto mt-3">
+      <div class="space-y-6">
+        <%= render Avo::SidebarItemComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil?  %>
+
+        <% if dashboards.present? %>
+          <div>
+            <%= render Avo::SidebarHeadingComponent.new label: t('avo.dashboards'), icon: helpers.svg('dashboards-icon', class: 'h-4') %>
+
+            <div class="w-full space-y-1">
+              <% dashboards.sort_by { |r| r.navigation_label }.each do |dashboard| %>
+                <%= render Avo::SidebarItemComponent.new label: dashboard.navigation_label, path: dashboard.navigation_path %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <div>
+          <%= render Avo::SidebarHeadingComponent.new label: t('avo.resources'), icon: helpers.svg('resources-icon', class: 'h-4') %>
+
+          <div class="w-full space-y-1">
+            <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
+              <%= render Avo::SidebarItemComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource) %>
+            <% end %>
+          </div>
+        </div>
+
+        <% if tools.present? %>
+          <div>
+            <%= render Avo::SidebarHeadingComponent.new label: t('avo.tools'), icon: helpers.svg('tools-icon', class: 'h-4') %>
+
+            <div class="w-full space-y-1">
+              <% tools.each do |partial| %>
+                <%= render partial: "/avo/sidebar/items/#{partial}" %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%= helpers.render_license_warnings %>
+    <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
+  </div>
+</div>

data/app/components/avo/sidebar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Avo::SidebarComponent < ViewComponent::Base
+  def dashboards
+    return [] if Avo::App.license.lacks_with_trial(:dashboards)
+
+    Avo::App.get_dashboards(helpers._current_user).select do |dashboard|
+      dashboard.is_visible?
+    end
+  end
+
+  def resources
+    Avo::App.resources_navigation(helpers._current_user)
+  end
+
+  def tools
+    return [] if Avo::App.license.lacks_with_trial(:custom_tools)
+
+    Avo::App.get_sidebar_partials
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="flex items-center p-4 py-2 text-gray-500 text-sm uppercase font-semibold leading-none space-x-1">
+  <%= icon %> <span><%= label %></span>
+</div>

data/app/components/avo/sidebar_heading_component.rb

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

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

@@ -0,0 +1,3 @@
+<%= active_link_to @path, class: 'px-4 block mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-150', active: @active, target: @target do %>
+  <%= @label %>
+<% end %>

data/app/components/avo/sidebar_item_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Avo::SidebarItemComponent < ViewComponent::Base
+  def initialize(label: nil, path: nil, active: :inclusive, target: nil)
+    @label = label
+    @path = path
+    @active = active
+    @target = target
+  end
+end

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

@@ -0,0 +1,36 @@
+<div class="text-black border-t border-gray-200 p-4 flex">
+  <div class="flex-1 flex space-x-4">
+    <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">
+      <%= image_tag avatar, class: "object-cover min-w-full min-h-full h-full" %>
+    </div>
+    <div class="flex flex-col">
+      <div class="font-medium">
+        <%= name %>
+      </div>
+      <div class="text-xs text-gray-500 uppercase">
+        <%= title %>
+      </div>
+    </div>
+  </div>
+  <div class="relative" data-controller="toggle-panel">
+    <% if can_destroy_user? %>
+      <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle-panel#togglePanel">
+        <%= helpers.svg 'three-dots', class: 'h-4' %>
+      </a>
+      <div
+        class="hidden absolute flex flex-col inset-auto right-0 -mt-12 bg-white rounded min-w-[200px] shadow-context -translate-y-full"
+        data-toggle-panel-target="panel"
+      >
+        <%# Example link below %>
+        <%#= render Avo::ProfileItemComponent.new label: 'Profile', path: '/profile', icon: helpers.svg('user-circle', class: 'h-4 mr-1') %>
+        <%= button_to helpers.main_app.send(destroy_user_session_path),
+          method: :delete,
+          form: { "data-turbo" => "false" },
+          class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full",
+          form_class: 'flex-1' do %>
+          <%= helpers.svg 'logout', class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/avo/sidebar_profile_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class Avo::SidebarProfileComponent < ViewComponent::Base
+  attr_reader :user
+
+  def initialize(user:)
+    @user = user
+  end
+
+  def avatar
+    if user.respond_to?(:avatar) && user.avatar.present?
+      user.avatar
+    else
+      ""
+    end
+  end
+
+  def name
+    if user.respond_to?(:name) && user.name.present?
+      user.name
+    elsif user.respond_to?(:email) && user.email.present?
+      user.email
+    else
+      "Avo user"
+    end
+  end
+
+  def title
+    if user.respond_to?(:avo_title) && user.avo_title.present?
+      user.avo_title
+    else
+      ""
+    end
+  end
+
+  def destroy_user_session_path
+    "destroy_#{Avo.configuration.current_user_resource_name}_session_path".to_sym
+  end
+
+  def can_destroy_user?
+    helpers.main_app.respond_to?(destroy_user_session_path)
+  end
+end

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

@@ -1,11 +1,10 @@
 <% if name.present? %><turbo-frame id="<%= name %>"><% end %>
-  <%
-    # When rendering the frames the flashed content gets lost.
-    # By including the alerts partial, the stimulus will pick them up and display them to the user.
-  %>
-  <% if helpers.turbo_frame_request? %>
-    <%= render Avo::AlertsComponent.new if helpers.flash.present? && name.present? %>
-  <% end %>
-
-  <%= content %>
+<%
+  # When rendering the frames the flashed content gets lost.
+  # We're appending it back if it's a turbo_frame_request.
+%>
+<% if helpers.turbo_frame_request? %>
+  <%= helpers.turbo_stream_action_tag :append, target: 'alerts', template: render(Avo::FlashAlertsComponent.new(flashes: helpers.flash)) %>
+<% end %>
+<%= content %>
 <% if name.present? %></turbo-frame><% end %>

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

@@ -1,31 +1,41 @@
 <div data-model-id="<%= @resource.model.id %>">
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
-                  scope: @resource.form_scope,
-                  url: helpers.resource_path(model: @resource.model, resource: @resource),
-                  method: :put,
-                  multipart: true do |form| %>
-      <%= hidden_field_tag :referrer, back_path if params[:via_resource_class] %>
-
+        scope: @resource.form_scope,
+        url: helpers.resource_path(model: @resource.model, resource: @resource),
+        method: :put,
+        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) do |c| %>
         <% c.tools do %>
-          <div class="flex justify-end space-x-2">
-            <%= a_link back_path do %>
-              <%= helpers.svg 'arrow-left' %> <%= t('avo.cancel').capitalize %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
+            <%= t('avo.cancel').capitalize %>
+          <% end %>
+          <% if can_see_the_save_button? %>
+            <%= a_button color: :green, spinner: 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 %>
-
             <% if can_see_the_save_button? %>
-              <%= a_button color: 'green', variant: 'outlined', spinner: true, type: :submit do %>
-                <%= helpers.svg 'save' %> <%= t('avo.save').capitalize %>
+              <%= a_button color: :green, spinner: true, type: :submit, icon: 'save' do %>
+                <%= t('avo.save').capitalize %>
               <% end %>
             <% end %>
-          </div>
+          <% end %>
         <% end %>
-
         <% c.body do %>
-          <% @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 %>
-          <% end %>
+          <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 %>
+            <% end %>
+          </div>
         <% end %>
       <% end %>
     <% end %>