solidus_admin 0.2.0 → 0.3.0

data/app/components/solidus_admin/tax_categories/new/component.html.erb

@@ -0,0 +1,28 @@
+<%= turbo_frame_tag :new_tax_category_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @tax_category, url: solidus_admin.tax_categories_path(page: params[:page], q: params[:q]), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name) %>
+        <%= render component("ui/forms/field").text_field(f, :tax_code) %>
+        <%= render component("ui/forms/field").text_field(f, :description) %>
+        <label class="flex gap-2 items-center">
+          <%= render component("ui/forms/checkbox").new(
+              name: "#{f.object_name}[is_default]",
+              value: "1",
+              checked: f.object.is_default
+            ) %>
+            <span class="font-semibold text-xs ml-2"><%= Spree::TaxCategory.human_attribute_name :is_default %></span>
+          <%= render component("ui/toggletip").new(text: t(".hints.is_default")) %>
+        </label>
+      </div>
+      <% modal.with_actions do %>
+        <form method="dialog">
+          <%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
+        </form>
+        <%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render component("tax_categories/index").new(page: @page) %>

data/app/components/solidus_admin/tax_categories/new/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::TaxCategories::New::Component < SolidusAdmin::TaxCategories::Index::Component
+  def initialize(page:, tax_category:)
+    @page = page
+    @tax_category = tax_category
+  end
+
+  def form_id
+    dom_id(@tax_category, "#{stimulus_id}_new_tax_category_form")
+  end
+end

data/app/components/solidus_admin/tax_categories/new/component.yml

@@ -0,0 +1,8 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  title: "New Tax Category"
+  cancel: "Cancel"
+  submit: "Add Tax Category"
+  hints:
+    is_default: "When checked, this tax category will be selected by default when creating new products or variants."

data/app/components/solidus_admin/tax_rates/index/component.rb

@@ -30,7 +30,7 @@ class SolidusAdmin::TaxRates::Index::Component < SolidusAdmin::Taxes::Component
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.tax_rates_path,
         method: :delete,
         icon: 'delete-bin-7-line',
@@ -41,13 +41,13 @@ class SolidusAdmin::TaxRates::Index::Component < SolidusAdmin::Taxes::Component
   def filters
     [
       {
-        presentation: Spree::Zone.model_name.human,
+        label: Spree::Zone.model_name.human,
         attribute: :zone_id,
         predicate: :eq,
         options: Spree::Zone.pluck(:name, :id),
       },
       {
-        presentation: Spree::TaxCategory.model_name.human,
+        label: Spree::TaxCategory.model_name.human,
         attribute: :tax_categories_id,
         predicate: :in,
         options: Spree::TaxCategory.pluck(:name, :id),

data/app/components/solidus_admin/taxonomies/index/component.rb

@@ -28,7 +28,7 @@ class SolidusAdmin::Taxonomies::Index::Component < SolidusAdmin::UI::Pages::Inde
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.taxonomies_path,
         method: :delete,
         icon: 'delete-bin-7-line',

data/app/components/solidus_admin/ui/button/component.rb

@@ -78,7 +78,7 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
 
     @attributes[:class] = [
       'justify-start items-center justify-center gap-1 inline-flex rounded',
-      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none',
+      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-0 [&:focus-visible]:outline-none',
       SIZES.fetch(size.to_sym),
       (TEXT_PADDINGS.fetch(size.to_sym) if @text),
       SCHEMES.fetch(scheme.to_sym),

data/app/components/solidus_admin/ui/checkbox_row/component.html.erb

@@ -0,0 +1,29 @@
+<% if @layout == :default && @options.present? %>
+  <span class="p-2 flex hover:bg-gray-50 rounded-md">
+    <span class="w-1/2"><%= @row_title %></span>
+    <span class="w-1/2 text-right">
+      <% @options.each do |option| %>
+        <label class="px-2 cursor-pointer">
+          <%= @form.check_box(@method.to_s, { checked: @form.object.try(@method.to_sym)&.include?(option[:id]), multiple: true }, option[:id], nil)%>
+          <span class="capitalize"><%= option[:label] %></span>
+        </label>
+      <% end %>
+    </span>
+  </span>
+<% end %>
+
+<% if @layout == :subsection && @options.present? %>
+  <div class="hover:bg-gray-50 rounded-md">
+    <div class="font-semibold px-2 py-2 mt-2 mb-1"><%= @row_title %></div>
+    <div class="px-4">
+      <% @options.each do |option| %>
+        <div class="py-1">
+          <label class="cursor-pointer">
+            <%= @form.check_box(@method.to_s, { checked: @form.object.try(@method.to_sym)&.include?(option[:id]), multiple: true }, option[:id], nil)%>
+            <span class="capitalize"><%= option[:label] %></span>
+          </label>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/solidus_admin/ui/checkbox_row/component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::CheckboxRow::Component < SolidusAdmin::BaseComponent
+  def initialize(options:, row_title:, form:, method:, layout: :default)
+    @options = options
+    @row_title = row_title
+    @form = form
+    @method = method
+    @layout = layout
+  end
+end

data/app/components/solidus_admin/ui/forms/address/component.html.erb

@@ -21,15 +21,33 @@
       "data-action": "change->#{stimulus_id}#loadStates"
     ) %>
 
-    <%= render component("ui/forms/field").select(
-      @name,
-      :state_id,
-      state_options,
-      object: @address,
-      value: @address.try(:state_id),
-      disabled: @address.country&.states&.empty?,
-      "data-#{stimulus_id}-target": "state"
-    ) %>
+    <%= content_tag(:div,
+      data: { "#{stimulus_id}-target": "stateNameWrapper" },
+      class: (@address.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
+        ) do %>
+      <%= render component("ui/forms/field").text_field(
+        @name,
+        :state_name,
+        object: @address,
+        value: @address.try(:state_name),
+        "data-#{stimulus_id}-target": "stateName"
+      ) %>
+    <% end %>
+    <input autocomplete="off" type="hidden" name=<%= "#{@name}[state_id]" %>>
+
+    <%= content_tag(:div,
+      data: { "#{stimulus_id}-target": "stateWrapper" },
+      class: (@address.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
+        ) do %>
+      <%= render component("ui/forms/field").select(
+        @name,
+        :state_id,
+        state_options,
+        object: @address,
+        value: @address.try(:state_id),
+        "data-#{stimulus_id}-target": "state"
+      ) %>
+    <% end %>
 
     <%= render component("ui/forms/field").text_field(@name, :phone,  object: @address) %>
   </div>

data/app/components/solidus_admin/ui/forms/address/component.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["country", "state"]
+  static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
 
   loadStates() {
     const countryId = this.countryTarget.value
@@ -13,22 +13,47 @@ export default class extends Controller {
       })
   }
 
-  updateStateOptions(data) {
+  updateStateOptions(states) {
+    if (states.length === 0) {
+      // Show state name text input if no states to choose from.
+      this.toggleStateFields(false)
+    } else {
+      // Show state select dropdown.
+      this.toggleStateFields(true)
+      this.populateStateSelect(states)
+    }
+  }
+
+  toggleStateFields(showSelect) {
+    const stateWrapper = this.stateWrapperTarget
+    const stateNameWrapper = this.stateNameWrapperTarget
     const stateSelect = this.stateTarget
+    const stateName = this.stateNameTarget
 
-    stateSelect.innerHTML = ""
 
-    if (data.length === 0) {
-      stateSelect.disabled = true
-    } else {
+    if (showSelect) {
+      // Show state select dropdown.
       stateSelect.disabled = false
-
-      data.forEach((state) => {
-        const option = document.createElement("option")
-        option.value = state.id
-        option.innerText = state.name
-        stateSelect.appendChild(option)
-      })
+      stateName.value = ""
+      stateWrapper.classList.remove('hidden')
+      stateNameWrapper.classList.add('hidden')
+    } else {
+      // Show state name text input if no states to choose from.
+      stateSelect.disabled = true
+      stateWrapper.classList.add("hidden")
+      stateNameWrapper.classList.remove("hidden")
     }
   }
+
+  populateStateSelect(states) {
+    const stateSelect = this.stateTarget
+    stateSelect.innerHTML = ""
+
+    states.forEach((state) => {
+      const option = document.createElement("option")
+      option.value = state.id
+      option.innerText = state.name
+      stateSelect.appendChild(option)
+    })
+  }
 }

data/app/components/solidus_admin/ui/forms/search/component.html.erb

@@ -23,8 +23,7 @@
       ) %>
     </div>
 
-    <details class="px-6 relative overflow-visible">
-      <summary class="hidden"></summary>
+    <div class="px-6 relative overflow-visible">
       <div
         class="
           absolute
@@ -47,6 +46,6 @@
         data-<%= stimulus_id %>-target="results"
       >
       </div>
-    </details>
+    </div>
   </div>
 </div>

data/app/components/solidus_admin/ui/forms/search/component.js

@@ -95,7 +95,7 @@ export default class extends Controller {
     }
 
     if (this.openResults && resultsHtml && this.query) {
-      if (!this.resultsTarget.parentNode.open) this.selectedIndex = 0
+      if (this.resultsTarget.parentNode.classList.contains("hidden")) this.selectedIndex = 0
 
       for (const result of this.resultTargets) {
         if (result === this.selectedResult) {
@@ -108,9 +108,9 @@ export default class extends Controller {
           result.removeAttribute("aria-selected")
         }
       }
-      this.resultsTarget.parentNode.open = true
+      this.resultsTarget.parentNode.classList.remove("hidden")
     } else {
-      this.resultsTarget.parentNode.open = false
+      this.resultsTarget.parentNode.classList.add("hidden")
     }
   }
 }

data/app/components/solidus_admin/ui/modal/component.html.erb

@@ -14,13 +14,13 @@
         <h3 class="text-xl font-semibold text-gray-900">
           <%= @title %>
         </h3>
-        <%= render component('ui/button').new(
-          tag: :a,
-          href: @close_path,
-          icon: 'close-line',
-          scheme: :ghost,
-          title: t('.close'),
-        ) %>
+        <form method="dialog">
+          <%= render component('ui/button').new(
+            icon: 'close-line',
+            scheme: :ghost,
+            title: t('.close'),
+          ) %>
+        </form>
       </header>
 
       <div class="p-4 overflow-auto">

data/app/components/solidus_admin/ui/modal/component.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.element.showModal();
+  }
+}

data/app/components/solidus_admin/ui/modal/component.rb

@@ -3,7 +3,7 @@
 class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
   renders_one :actions
 
-  def initialize(title:, close_path: nil, open: true, **attributes)
+  def initialize(title:, close_path: nil, open: false, **attributes)
     @title = title
     @close_path = close_path
     @attributes = attributes

data/app/components/solidus_admin/ui/pages/index/component.html.erb

@@ -1,7 +1,7 @@
 <%= page do %>
   <% if @tabs %>
     <%= page_header do %>
-      <%= page_header_title title %>
+      <%= render_title %>
     <% end %>
 
     <%= page_header do %>
@@ -18,7 +18,7 @@
 
   <% else %>
     <%= page_header do %>
-      <%= page_header_title title %>
+      <%= render_title %>
 
       <%= page_header_actions do %>
         <%= page_actions %>
@@ -26,5 +26,19 @@
     <% end %>
   <% end %>
 
-  <%= render_table %>
+  <%= page_with_sidebar do %>
+    <%= page_with_sidebar_main do %>
+      <%= render_table %>
+    <% end %>
+
+    <% if sidebar %>
+      <%= page_with_sidebar_aside do %>
+        <%= sidebar %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% turbo_frames.each do |frame| %>
+    <%= turbo_frame_tag frame %>
+  <% end %>
 <% end %>

data/app/components/solidus_admin/ui/pages/index/component.rb

@@ -5,9 +5,20 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
 
   Tab = Struct.new(:text, :href, :current, keyword_init: true)
 
-  def tabs
-    nil
-  end
+  # Template methods
+  def tabs; end
+  def model_class; end
+  def back_url; end
+  def search_key; end
+  def search_url; end
+  def page_actions; end
+  def sidebar; end
+  def sortable_options; end
+  def row_url(_record); end
+  def batch_actions; []; end
+  def scopes; []; end
+  def filters; []; end
+  def columns; []; end
 
   def initialize(page:)
     @page = page
@@ -18,18 +29,10 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
     false
   end
 
-  def model_class
-    nil
-  end
-
   def title
     model_class.model_name.human.pluralize
   end
 
-  def search_key
-    nil
-  end
-
   def search_params
     params[:q]
   end
@@ -38,38 +41,10 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
     :q
   end
 
-  def search_url
-    nil
-  end
-
-  def table_id
-    stimulus_id
-  end
-
   def rows
     @page.records
   end
 
-  def row_url(_record)
-    nil
-  end
-
-  def batch_actions
-    []
-  end
-
-  def scopes
-    []
-  end
-
-  def filters
-    []
-  end
-
-  def columns
-    []
-  end
-
   def prev_page_path
     solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
   end
@@ -91,8 +66,13 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
     }
   end
 
-  def sortable_options
-    nil
+  def render_title
+    back_url = self.back_url
+
+    safe_join [
+      (page_header_back back_url if back_url),
+      page_header_title(title),
+    ]
   end
 
   def render_table
@@ -113,7 +93,13 @@ class SolidusAdmin::UI::Pages::Index::Component < SolidusAdmin::BaseComponent
     )
   end
 
-  def page_actions
-    nil
+  def render_sidebar
+    sidebar = self.sidebar
+
+    page_with_sidebar_aside { sidebar } if sidebar
+  end
+
+  def turbo_frames
+    []
   end
 end

data/app/components/solidus_admin/ui/panel/component.html.erb

@@ -22,29 +22,18 @@
   <% end %>
 
   <% if @title %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+    <%= render_section do %>
       <h2>
-        <span class="font-semibold text-xl"><%= @title %></span>
+        <span class="font-semibold text-base"><%= @title %></span>
         <%= render component("ui/toggletip").new(text: @title_hint) if @title_hint %>
       </h2>
-    </section>
+    <% end %>
   <% end %>
 
   <% sections.each do |section| %>
     <%= section %>
   <% end %>
 
-  <% if content.present? %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
-      <%= content %>
-    </section>
-  <% end %>
-
-  <% if action? %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
-      <div class="flex justify-between items-center">
-        <%= action %>
-      </div>
-    </section>
-  <% end %>
+  <%= render_section { content } if content.present? %>
+  <%= render_section { tag.div(action, class: "flex justify-between items-center") } if action? %>
 </div>

data/app/components/solidus_admin/ui/panel/component.rb

@@ -10,13 +10,8 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
     )
   }
 
-  renders_many :sections, ->(wide: false, high: false, **args, &block) do
-    tag.section(**args, class: "
-      border-gray-100 border-t w-full first-of-type:border-t-0
-      #{'px-6' unless wide}
-      #{'py-6' unless high}
-      #{args[:class]}
-    ", &block)
+  renders_many :sections, ->(**args, &block) do
+    render_section(**args, &block)
   end
 
   renders_many :menus, ->(name, url, **args) do
@@ -33,4 +28,13 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
     @title = title
     @title_hint = title_hint
   end
+
+  def render_section(wide: false, high: false, **args, &block)
+    tag.section(**args, class: "
+      border-gray-100 border-t w-full first-of-type:border-t-0
+      #{'px-6' unless wide}
+      #{'py-4' unless high}
+      #{args[:class]}
+    ", &block)
+  end
 end

data/app/components/solidus_admin/ui/table/component.js

@@ -104,7 +104,15 @@ export default class extends Controller {
     if (this.modeValue === "batch") {
       this.toggleCheckbox(event.currentTarget)
     } else {
-      window.Turbo.visit(event.params.url)
+      const url = new URL(event.params.url, "http://dummy.com")
+      const params = new URLSearchParams(url.search)
+      const frameId = params.get('_turbo_frame')
+      const frame = frameId ? { frame: frameId } : {}
+      // remove the custom _turbo_frame param from url search:
+      params.delete('_turbo_frame')
+      url.search = params.toString()
+
+      window.Turbo.visit(url.pathname + url.search, frame)
     }
   }
 
@@ -117,8 +125,29 @@ export default class extends Controller {
     }
   }
 
+  selectedRows() {
+    return this.checkboxTargets.filter((checkbox) => checkbox.checked)
+  }
+
+  confirmAction(event) {
+    const message = event.params.message
+      .replace(
+        "${count}",
+        this.selectedRows().length
+      ).replace(
+        "${resource}",
+        this.selectedRows().length > 1 ?
+        event.params.resourcePlural :
+        event.params.resourceSingular
+      )
+
+    if (!confirm(message)) {
+      event.preventDefault()
+    }
+  }
+
   render() {
-    const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
+    const selectedRows = this.selectedRows()
 
     if (this.hasSearchFieldTarget) {
       this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")

data/app/components/solidus_admin/ui/table/component.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
-  BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
   Column = Struct.new(:header, :data, :col, :wrap, keyword_init: true)
-  Filter = Struct.new(:presentation, :combinator, :attribute, :predicate, :options, keyword_init: true)
-  Scope = Struct.new(:name, :label, :default, keyword_init: true)
   Sortable = Struct.new(:url, :param, :animation, :handle, keyword_init: true)
+  Scope = Struct.new(:label, :name, :default, keyword_init: true)
+  Filter = Struct.new(:label, :combinator, :attribute, :predicate, :options, keyword_init: true)
+  BatchAction = Struct.new(:label, :icon, :action, :require_confirmation, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
   private_constant :BatchAction, :Column, :Filter, :Scope, :Sortable
 
   class Data < Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, keyword_init: true) # rubocop:disable Lint/StructNewOverride,Style/StructInheritance
@@ -18,6 +18,10 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       self.batch_actions = batch_actions.to_a.map { |action| BatchAction.new(**action) }
     end
 
+    def singular_name
+      self[:class].model_name.human if self[:class]
+    end
+
     def plural_name
       self[:class].model_name.human.pluralize if self[:class]
     end
@@ -97,7 +101,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   end
 
   def render_batch_action_button(batch_action)
-    render component("ui/button").new(
+    params = {
       name: request_forgery_protection_token,
       value: form_authenticity_token(form_options: {
         action: batch_action.action,
@@ -108,14 +112,26 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
       form: batch_actions_form_id,
       type: :submit,
       icon: batch_action.icon,
-      text: batch_action.display_name,
+      text: batch_action.label,
       scheme: :secondary,
-    )
+    }
+
+    if batch_action.require_confirmation
+      params["data-action"] = "click->#{stimulus_id}#confirmAction"
+      params["data-#{stimulus_id}-message-param"] = t(
+        ".action_confirmation",
+        action: batch_action.label.downcase
+      )
+      params["data-#{stimulus_id}-resource-singular-param"] = @data.singular_name.downcase
+      params["data-#{stimulus_id}-resource-plural-param"] = @data.plural_name.downcase
+    end
+
+    render component("ui/button").new(**params)
   end
 
   def render_ransack_filter_dropdown(filter, index)
     render component("ui/table/ransack_filter").new(
-      presentation: filter.presentation,
+      presentation: filter.label,
       search_param: @search.name,
       combinator: filter.combinator,
       attribute: filter.attribute,