refactor: reorder data attributes (#2823)

avo-hq · May 31, 2024 · ae408f6 · ae408f6
1 parent d997746
commit ae408f6
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 28 deletions.
diff --git a/app/components/avo/index/grid_item_component.html.erb b/app/components/avo/index/grid_item_component.html.erb
@@ -1,13 +1,14 @@
-<div
-  class="relative bg-white rounded shadow-modal flex flex-col group"
-  data-component-name="<%= self.class.to_s.underscore %>"
-  <%== item_selector_init @resource %>
-  data-resource-name="<%= @resource.class.to_s %>"
-  data-record-id="<%= @resource.record.id %>"
-  <%= try :drag_reorder_item_attributes %>
->
+<%= content_tag :div,
+  class: "relative bg-white rounded shadow-modal flex flex-col group",
+  data: {
+    component_name: self.class.to_s.underscore,
+    resource_name: @resource.class.to_s,
+    record_id: @resource.record.id,
+    **item_selector_data_attributes(@resource),
+    **(try(:drag_reorder_item_data_attributes) || {}),
+  } do %>
   <%= content_tag :div,
-    class: "relative w-full pb-3/4 rounded-t overflow-hidden #{html(:cover, :classes)}",
+    class: class_names("relative w-full pb-3/4 rounded-t overflow-hidden", html(:cover, :classes)),
     style: html(:cover, :style) do %>
     <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg) if @resource.record_selector%>
     <%= render_cover %>
@@ -21,4 +22,4 @@
       <%= render(Avo::Index::ResourceControlsComponent.new(resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, view_type: :grid, actions: actions)) %>
     </div>
   </div>
-</div>
+<% end %>
diff --git a/app/components/avo/index/resource_grid_component.html.erb b/app/components/avo/index/resource_grid_component.html.erb
@@ -1,15 +1,19 @@
 <% if @resources.present? %>
   <turbo-frame id="<%= @resource.model_key %>_list" target="_top" class="relative w-full">
-    <div class="w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 mt-8"
-    <%= try :drag_reorder_attributes %>
-    data-component-name="<%= self.class.to_s.underscore %>"
-    data-selected-resources-name="<%= @resource.model_key %>" data-selected-resources="[]">
+    <%= content_tag :div,
+      class:"w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 mt-8",
+      data: {
+        component_name: self.class.to_s.underscore,
+        selected_resources_name: @resource.model_key,
+        selected_resources: [],
+        **(try(:drag_reorder_data_attributes) || {})
+      } do %>
       <% @resources.each_with_index do |resource, index| %>
         <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_record) do %>
           <%= render(Avo::Index::GridItemComponent.new(resource: resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, actions: actions)) %>
         <% end %>
       <% end %>
-    </div>
+    <% end %>
   </turbo-frame>
 <% else %>
   <div class="bg-white rounded shadow-panel"

diff --git a/app/components/avo/index/resource_table_component.html.erb b/app/components/avo/index/resource_table_component.html.erb
@@ -39,11 +39,14 @@
     <% end %>
     <table class="w-full px-4 bg-white">
       <%= render partial: 'avo/partials/table_header', locals: {fields: @header_fields} %>
-      <tbody class="divide-y" <%= try :drag_reorder_attributes %>>
+      <%= content_tag :tbody, class: "divide-y",
+        data: {
+          **(try(:drag_reorder_data_attributes) || {}),
+        } do %>
         <% @table_row_components.each do |table_row_component| %>
           <%= render table_row_component %>
         <% end %>
-      </tbody>
+      <% end %>
     </table>
   </div>
 </turbo-frame>
diff --git a/app/components/avo/index/table_row_component.html.erb b/app/components/avo/index/table_row_component.html.erb
@@ -1,12 +1,13 @@
 <%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
-<tr
-  class="bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b"
-  data-component-name="<%= self.class.to_s.underscore %>"
-  <%== item_selector_init @resource %>
-  data-resource-name="<%= @resource.class.to_s %>"
-  data-record-id="<%= @resource.record.id %>"
-  <%= try :drag_reorder_item_attributes %>
->
+<%= content_tag :tr,
+  class: "bg-white hover:bg-gray-50 hover:shadow-row z-21 border-b",
+  data: {
+    component_name: self.class.to_s.underscore,
+    resource_name: @resource.class.to_s,
+    record_id: @resource.record.id,
+    **item_selector_data_attributes(@resource),
+    **(try(:drag_reorder_item_data_attributes) || {}),
+  } do %>
   <% if @resource.record_selector %>
     <td class="w-10">
       <div class="flex justify-center h-full">
@@ -43,4 +44,4 @@
       </div>
     </td>
   <% end %>
-</tr>
+<% end %>
diff --git a/app/helpers/avo/resources_helper.rb b/app/helpers/avo/resources_helper.rb
@@ -37,8 +37,12 @@ def filter_wrapper(name: nil, index: nil, **args, &block)
       end
     end
 
-    def item_selector_init(resource)
-      "data-resource-name='#{resource.model_key}' data-resource-id='#{resource.record.to_param}' data-controller='item-selector'"
+    def item_selector_data_attributes(resource)
+      {
+        resource_name: resource.model_key,
+        resource_id: resource.record.to_param,
+        controller: "item-selector"
+      }
     end
   end
 end