Add user store credit: Load modal with turbo frame

Author: tvdeyen

admin/app/components/solidus_admin/users/store_credits/edit_amount/component.html.erb

@@ -1,6 +1,6 @@
-<%= turbo_frame_tag :edit_amount_modal do %>
+<%= turbo_frame_tag :resource_modal, target: "_top" do %>
   <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
-    <%= form_for @store_credit, url: solidus_admin.update_amount_user_store_credit_path(@user, @store_credit), method: :put, html: { id: form_id } do |f| %>
+    <%= form_for @store_credit, url: form_url, method: :put, html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :amount, class: "required") %>
         <%= render component("ui/forms/field").select(
@@ -20,4 +20,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("users/store_credits/show").new(user: @user, store_credit: @store_credit, events: @store_credit_events) %>

admin/app/components/solidus_admin/users/store_credits/edit_amount/component.rb

@@ -1,17 +1,20 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Users::StoreCredits::EditAmount::Component < SolidusAdmin::BaseComponent
-  def initialize(user:, store_credit:, events:, reasons:)
+class SolidusAdmin::Users::StoreCredits::EditAmount::Component < SolidusAdmin::Resources::Edit::Component
+  def initialize(user:, store_credit:, reasons:)
     @user = user
-    @store_credit = store_credit
-    @store_credit_events = events
+    super(store_credit)
     @store_credit_reasons = reasons
   end
 
   def form_id
     dom_id(@store_credit, "#{stimulus_id}_edit_amount_form")
   end
 
+  def form_url
+    solidus_admin.update_amount_user_store_credit_path(@user, @store_credit, **search_filter_params)
+  end
+
   def store_credit_reasons_select_options
     # Placeholder + Store Credit Reasons
     "<option value>#{t('.choose_reason')}</option>" + options_from_collection_for_select(@store_credit_reasons, :id, :name)

admin/app/components/solidus_admin/users/store_credits/edit_memo/component.html.erb

@@ -1,6 +1,6 @@
-<%= turbo_frame_tag :edit_memo_modal do %>
+<%= turbo_frame_tag :resource_modal, target: "_top" do %>
   <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
-    <%= form_for @store_credit, url: solidus_admin.update_memo_user_store_credit_path(@user, @store_credit), method: :put, html: { id: form_id } do |f| %>
+    <%= form_for @store_credit, url: form_url, method: :put, html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :memo) %>
       </div>
@@ -13,4 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("users/store_credits/show").new(user: @user, store_credit: @store_credit, events: @store_credit_events) %>

admin/app/components/solidus_admin/users/store_credits/edit_memo/component.rb

@@ -1,13 +1,16 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Users::StoreCredits::EditMemo::Component < SolidusAdmin::BaseComponent
-  def initialize(user:, store_credit:, events:)
+class SolidusAdmin::Users::StoreCredits::EditMemo::Component < SolidusAdmin::Resources::Edit::Component
+  def initialize(user:, store_credit:)
     @user = user
-    @store_credit = store_credit
-    @store_credit_events = events
+    super(store_credit)
   end
 
   def form_id
     dom_id(@store_credit, "#{stimulus_id}_edit_memo_form")
   end
+
+  def form_url
+    solidus_admin.update_memo_user_store_credit_path(@user, @store_credit, **search_filter_params)
+  end
 end

admin/app/components/solidus_admin/users/store_credits/edit_validity/component.html.erb

@@ -1,6 +1,6 @@
-<%= turbo_frame_tag :edit_validity_modal do %>
+<%= turbo_frame_tag :resource_modal, target: "_top" do %>
   <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
-    <%= form_for @store_credit, url: solidus_admin.invalidate_user_store_credit_path(@user, @store_credit), method: :put, html: { id: form_id } do |f| %>
+    <%= form_for @store_credit, url: form_url, method: :put, html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").select(
           f,
@@ -19,4 +19,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("users/store_credits/show").new(user: @user, store_credit: @store_credit, events: @store_credit_events) %>

admin/app/components/solidus_admin/users/store_credits/edit_validity/component.rb

@@ -1,17 +1,20 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Users::StoreCredits::EditValidity::Component < SolidusAdmin::BaseComponent
-  def initialize(user:, store_credit:, events:, reasons:)
+class SolidusAdmin::Users::StoreCredits::EditValidity::Component < SolidusAdmin::Resources::Edit::Component
+  def initialize(user:, store_credit:, reasons:)
     @user = user
-    @store_credit = store_credit
-    @store_credit_events = events
+    super(store_credit)
     @store_credit_reasons = reasons
   end
 
   def form_id
     dom_id(@store_credit, "#{stimulus_id}_edit_validity_form")
   end
 
+  def form_url
+    solidus_admin.invalidate_user_store_credit_path(@user, @store_credit, **search_filter_params)
+  end
+
   def store_credit_reasons_select_options
     # Placeholder + Store Credit Reasons
     "<option value>#{t('.choose_reason')}</option>" + options_from_collection_for_select(@store_credit_reasons, :id, :name)

admin/app/components/solidus_admin/users/store_credits/index/component.html.erb

@@ -5,9 +5,13 @@
 
     <%= page_header_actions do %>
       <%= render component("ui/button").new(
-        "data-action": "click->#{stimulus_id}#actionButtonClicked",
-        "data-#{stimulus_id}-url-param": solidus_admin.new_user_store_credit_path(user_id: @user.id, _turbo_frame: :new_store_credit_modal),
+        tag: :a,
+        href: new_store_credit_path,
+        data: {
+          turbo_frame: :resource_modal
+        },
         text: t(".add_store_credit"),
+        icon: "add-line"
       )%>
     <% end %>
   <% end %>
@@ -27,23 +31,25 @@
 
           <%= render component('ui/panel').new(title: title) do %>
             <%= render component('ui/table').new(
-                id: stimulus_id,
-                data: {
-                  class: model_class,
-                  rows: credits,
-                  fade: -> (_order) { false },
-                  columns: columns,
-                  url: -> { row_url(_1) },
-                },
-            )%>
+              id: stimulus_id,
+              data: {
+                class: model_class,
+                rows: credits,
+                fade: -> (_order) { false },
+                columns: columns
+              }
+            ) %>
           <% end %>
         <% end %>
       <% else %>
         <%= render component('ui/panel').new(title: t(".store_credit")) do %>
           <%= t(".no_credits_found") %>
           <%= render component("ui/button").new(
-            "data-action": "click->#{stimulus_id}#actionButtonClicked",
-            "data-#{stimulus_id}-url-param": solidus_admin.new_user_store_credit_path(user_id: @user.id, _turbo_frame: :new_store_credit_modal),
+            tag: :a,
+            data: {
+              turbo_frame: :resource_modal
+            },
+            href: new_store_credit_path,
             text: t(".create_one"),
           )%>
         <% end %>
@@ -55,7 +61,5 @@
     <% end %>
   <% end %>
 
-  <% turbo_frames.each do |frame| %>
-    <%= turbo_frame_tag frame %>
-  <% end %>
+  <%= turbo_frame_tag :resource_modal, target: "_top" %>
 <% end %>

admin/app/components/solidus_admin/users/store_credits/index/component.js

@@ -42,41 +42,39 @@ def tabs
     ]
   end
 
-  def turbo_frames
-    %w[
-      new_store_credit_modal
-    ]
-  end
-
   def rows
     @store_credits
   end
 
-  def row_url(store_credit)
+  def show_path(store_credit)
     solidus_admin.user_store_credit_path(@user, store_credit)
   end
 
+  def new_store_credit_path
+    solidus_admin.new_user_store_credit_path(user_id: @user.id)
+  end
+
   def columns
     [
       {
         header: :credited,
         col: { class: "w-[12%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount.to_html, class: "text-sm"
+          link_to store_credit.display_amount.to_html, show_path(store_credit), class: "body-link text-sm"
         end
       },
       {
         header: :authorized,
         col: { class: "w-[13%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount_authorized.to_html, class: "text-sm"
+          link_to store_credit.display_amount_authorized.to_html, show_path(store_credit), class: "body-link text-sm"
         end
       },
       {
         header: :used,
         col: { class: "w-[9%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount_used.to_html, class: "text-sm"
+          link_to store_credit.display_amount_used.to_html, show_path(store_credit), class: "body-link text-sm"
         end
       },
       {
@@ -90,23 +88,27 @@ def columns
         header: :created_by,
         col: { class: "w-[22%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.created_by_email, class: "font-semibold text-sm"
+          content_tag :div, store_credit.created_by_email, class: "text-sm"
         end
       },
       {
         header: :issued_on,
         col: { class: "w-[16%]" },
         data: ->(store_credit) do
-          I18n.l(store_credit.created_at.to_date)
+          content_tag :span, I18n.l(store_credit.created_at.to_date), class: "text-sm"
         end
       },
       {
         header: :invalidated,
         col: { class: "w-[15%]" },
         data: ->(store_credit) do
-          store_credit.invalidated? ? component('ui/badge').new(name: :yes, color: :red, size: :m) : component('ui/badge').new(name: :no, color: :green, size: :m)
+          if store_credit.invalidated?
+            component('ui/badge').new(name: :yes, color: :red, size: :m)
+          else
+            component('ui/badge').new(name: :no, color: :green, size: :m)
+          end
         end
-      },
+      }
     ]
   end
 end

admin/app/components/solidus_admin/users/store_credits/index/component.rb

@@ -1,6 +1,6 @@
-<%= turbo_frame_tag :new_store_credit_modal do %>
+<%= turbo_frame_tag :resource_modal, target: "_top" do %>
   <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
-    <%= form_for @store_credit, url: solidus_admin.user_store_credits_path(@user), method: :post, html: { id: form_id } do |f| %>
+    <%= form_for @store_credit, url: form_url, method: :post, html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :amount, class: "required") %>
         <%= render component("ui/forms/field").select(
@@ -28,4 +28,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("users/store_credits/index").new(user: @user, store_credits: @store_credits) %>