solidus_admin 0.1.0 → 0.3.0

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::TaxCategories::Edit::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}_edit_tax_category_form")
+  end
+end

data/app/components/solidus_admin/tax_categories/edit/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: "Edit Tax Category"
+  cancel: "Cancel"
+  submit: "Update 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_categories/index/component.rb

@@ -1,28 +1,43 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::TaxCategories::Index::Component < SolidusAdmin::BaseComponent
-  include SolidusAdmin::Layout::PageHelpers
+class SolidusAdmin::TaxCategories::Index::Component < SolidusAdmin::Taxes::Component
+  def row_url(tax_category)
+    spree.edit_admin_tax_category_path(tax_category, _turbo_frame: :edit_tax_category_modal)
+  end
+
+  def model_class
+    Spree::TaxCategory
+  end
 
-  def initialize(page:)
-    @page = page
+  def search_url
+    solidus_admin.tax_categories_path
   end
 
-  def title
-    Spree::TaxCategory.model_name.human.pluralize
+  def page_actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: solidus_admin.new_tax_category_path, data: { turbo_frame: :new_tax_category_modal },
+      icon: "add-line",
+      class: "align-self-end w-full",
+    )
   end
 
-  def prev_page_path
-    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+  def turbo_frames
+    %w[
+      new_tax_category_modal
+      edit_tax_category_modal
+    ]
   end
 
-  def next_page_path
-    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+  def search_key
+    :name_or_description_cont
   end
 
   def batch_actions
     [
       {
-        display_name: t('.batch_actions.delete'),
+        label: t('.batch_actions.delete'),
         action: solidus_admin.tax_categories_path,
         method: :delete,
         icon: 'delete-bin-7-line',
@@ -30,14 +45,6 @@ class SolidusAdmin::TaxCategories::Index::Component < SolidusAdmin::BaseComponen
     ]
   end
 
-  def scopes
-    []
-  end
-
-  def filters
-    []
-  end
-
   def columns
     [
       :name,
@@ -47,9 +54,9 @@ class SolidusAdmin::TaxCategories::Index::Component < SolidusAdmin::BaseComponen
         header: :is_default,
         data: ->(tax_category) {
           if tax_category.is_default?
-            component('ui/badge').new(name: t('.yes'), color: :green)
+            component('ui/badge').yes
           else
-            component('ui/badge').new(name: t('.no'), color: :graphite_light)
+            component('ui/badge').no
           end
         },
       },

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

@@ -1,28 +1,36 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::TaxRates::Index::Component < SolidusAdmin::BaseComponent
-  include SolidusAdmin::Layout::PageHelpers
+class SolidusAdmin::TaxRates::Index::Component < SolidusAdmin::Taxes::Component
+  def row_url(tax_rate)
+    spree.edit_admin_tax_rate_path(tax_rate)
+  end
 
-  def initialize(page:)
-    @page = page
+  def model_class
+    Spree::TaxRate
   end
 
-  def title
-    Spree::TaxRate.model_name.human.pluralize
+  def search_url
+    solidus_admin.tax_rates_path
   end
 
-  def prev_page_path
-    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+  def actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: spree.new_admin_tax_rate_path,
+      icon: "add-line",
+      class: "align-self-end w-full",
+    )
   end
 
-  def next_page_path
-    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+  def search_key
+    :name_or_description_cont
   end
 
   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',
@@ -30,20 +38,16 @@ class SolidusAdmin::TaxRates::Index::Component < SolidusAdmin::BaseComponent
     ]
   end
 
-  def scopes
-    []
-  end
-
   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/taxes/component.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Taxes::Component < SolidusAdmin::BaseComponent
-  include SolidusAdmin::Layout::PageHelpers
-  renders_one :actions
-
-  def initialize(model_class:)
-    @model_class = model_class
+class SolidusAdmin::Taxes::Component < SolidusAdmin::UI::Pages::Index::Component
+  def title
+    safe_join([
+      tag.div(t(".title")),
+      tag.div(t(".subtitle"), class: "font-normal text-sm text-gray-500"),
+    ])
   end
 
   def tabs
@@ -13,12 +13,12 @@ class SolidusAdmin::Taxes::Component < SolidusAdmin::BaseComponent
       {
         text: Spree::TaxCategory.model_name.human.pluralize,
         href: solidus_admin.tax_categories_path,
-        "aria-current": @model_class == Spree::TaxCategory,
+        current: model_class == Spree::TaxCategory,
       },
       {
         text: Spree::TaxRate.model_name.human.pluralize,
         href: solidus_admin.tax_rates_path,
-        "aria-current": @model_class == Spree::TaxRate,
+        current: model_class == Spree::TaxRate,
       },
     ]
   end

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

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-class SolidusAdmin::Taxonomies::Index::Component < SolidusAdmin::BaseComponent
-  include SolidusAdmin::Layout::PageHelpers
-
-  def initialize(page:)
-    @page = page
+class SolidusAdmin::Taxonomies::Index::Component < SolidusAdmin::UI::Pages::Index::Component
+  def model_class
+    Spree::Taxonomy
   end
 
-  def title
-    Spree::Taxonomy.model_name.human.pluralize
+  def row_url(taxonomy)
+    spree.edit_admin_taxonomy_path(taxonomy)
   end
 
-  def prev_page_path
-    solidus_admin.url_for(**request.params, page: @page.number - 1, only_path: true) unless @page.first?
+  def sortable_options
+    {
+      url: ->(taxonomy) { solidus_admin.move_taxonomy_path(taxonomy) },
+      param: 'position',
+    }
   end
 
-  def next_page_path
-    solidus_admin.url_for(**request.params, page: @page.next_param, only_path: true) unless @page.last?
+  def page_actions
+    render component("ui/button").new(
+      tag: :a,
+      text: t('.add'),
+      href: spree.new_admin_taxonomy_path,
+      icon: "add-line",
+    )
   end
 
   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

@@ -0,0 +1,44 @@
+<%= page do %>
+  <% if @tabs %>
+    <%= page_header do %>
+      <%= render_title %>
+    <% end %>
+
+    <%= page_header do %>
+      <% rendered_tabs = capture do %>
+        <% @tabs.each do %>
+          <%= render(component("ui/button").new(tag: :a, scheme: :ghost, text: _1.text, 'aria-current': _1.current, href: _1.href)) %>
+        <% end %>
+      <% end %>
+      <%= page_header_title rendered_tabs %>
+      <%= page_header_actions do %>
+        <%= page_actions %>
+      <% end %>
+    <% end %>
+
+  <% else %>
+    <%= page_header do %>
+      <%= render_title %>
+
+      <%= page_header_actions do %>
+        <%= page_actions %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= 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 %>