add creation and editing product properties using UI components

admin/app/components/solidus_admin/properties/edit/component.html.erb

@@ -0,0 +1,17 @@
+<%= turbo_frame_tag :edit_property_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @property, url: solidus_admin.property_path(@property), html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :presentation, class: "required") %>
+      </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("properties/index").new(page: @page) %>

admin/app/components/solidus_admin/properties/edit/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Properties::Edit::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, property:)
+    @page = page
+    @property = property
+  end
+
+  def form_id
+    dom_id(@property, "#{stimulus_id}_edit_property_form")
+  end
+end

admin/app/components/solidus_admin/properties/edit/component.yml

@@ -0,0 +1,4 @@
+en:
+  title: "Edit Property"
+  cancel: "Cancel"
+  submit: "Update Property"

admin/app/components/solidus_admin/properties/index/component.rb

@@ -14,14 +14,21 @@ def search_url
   end
 
   def row_url(property)
-    spree.edit_admin_property_path(property)
+    spree.edit_admin_property_path(property, _turbo_frame: :edit_property_modal)
+  end
+
+  def turbo_frames
+    %w[
+      new_property_modal
+      edit_property_modal
+    ]
   end
 
   def page_actions
     render component("ui/button").new(
       tag: :a,
       text: t('.add'),
-      href: spree.new_admin_property_path,
+      href: solidus_admin.new_property_path, data: { turbo_frame: :new_property_modal },
       icon: "add-line",
     )
   end

admin/app/components/solidus_admin/properties/new/component.html.erb

@@ -0,0 +1,18 @@
+<%= turbo_frame_tag :new_property_modal do %>
+  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+    <%= form_for @property, url: solidus_admin.properties_path, html: { id: form_id } do |f| %>
+      <div class="flex flex-col gap-6 pb-4">
+        <%= render component("ui/forms/field").text_field(f, :name, class: "required") %>
+        <%= render component("ui/forms/field").text_field(f, :presentation, class: "required") %>
+      </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("properties/index").new(page: @page) %>

admin/app/components/solidus_admin/properties/new/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::Properties::New::Component < SolidusAdmin::BaseComponent
+  def initialize(page:, property:)
+    @page = page
+    @property = property
+  end
+
+  def form_id
+    dom_id(@property, "#{stimulus_id}_new_property_form")
+  end
+end

admin/app/components/solidus_admin/properties/new/component.yml

@@ -0,0 +1,4 @@
+en:
+  title: "New Property"
+  cancel: "Cancel"
+  submit: "Add Property"

admin/app/controllers/solidus_admin/properties_controller.rb

@@ -4,7 +4,11 @@ module SolidusAdmin
   class PropertiesController < SolidusAdmin::BaseController
     include SolidusAdmin::ControllerHelpers::Search
 
+    before_action :find_property, only: %i[edit update]
+
     def index
+      set_index_page
+
       properties = apply_search_to(
         Spree::Property.order(created_at: :desc, id: :desc),
         param: :q,
@@ -19,6 +23,76 @@ def index
       end
     end
 
+    def new
+      @property = Spree::Property.new
+
+      set_index_page
+
+      respond_to do |format|
+        format.html { render component('properties/new').new(page: @page, property: @property) }
+      end
+    end
+
+    def create
+      @property = Spree::Property.new(property_params)
+
+      if @property.save
+        respond_to do |format|
+          flash[:notice] = t('.success')
+
+          format.html do
+            redirect_to solidus_admin.properties_path, status: :see_other
+          end
+
+          format.turbo_stream do
+            render turbo_stream: '<turbo-stream action="refresh" />'
+          end
+        end
+      else
+        set_index_page
+
+        respond_to do |format|
+          format.html do
+            page_component = component('properties/new').new(page: @page, property: @property)
+            render page_component, status: :unprocessable_entity
+          end
+        end
+      end
+    end
+
+    def edit
+      set_index_page
+
+      respond_to do |format|
+        format.html { render component('properties/edit').new(page: @page, property: @property) }
+      end
+    end
+
+    def update
+      if @property.update(property_params)
+        respond_to do |format|
+          flash[:notice] = t('.success')
+
+          format.html do
+            redirect_to solidus_admin.properties_path, status: :see_other
+          end
+
+          format.turbo_stream do
+            render turbo_stream: '<turbo-stream action="refresh" />'
+          end
+        end
+      else
+        set_index_page
+
+        respond_to do |format|
+          format.html do
+            page_component = component('properties/edit').new(page: @page, property: @property)
+            render page_component, status: :unprocessable_entity
+          end
+        end
+      end
+    end
+
     def destroy
       @properties = Spree::Property.where(id: params[:id])
 
@@ -29,5 +103,24 @@ def destroy
       flash[:notice] = t('.success')
       redirect_to properties_path, status: :see_other
     end
+
+    private
+
+    def find_property
+      @property = Spree::Property.find(params[:id])
+    end
+
+    def property_params
+      params.require(:property).permit(:name, :presentation)
+    end
+
+    def set_index_page
+      properties = apply_search_to(
+        Spree::Property.unscoped.order(id: :desc),
+        param: :q,
+      )
+
+      set_page_and_extract_portion_from(properties)
+    end
   end
 end

admin/config/locales/properties.en.yml

@@ -4,3 +4,7 @@ en:
       title: "Properties"
       destroy:
         success: "Properties were successfully removed."
+      create:
+        success: "Property was successfully created."
+      update:
+        success: "Property was successfully updated."

admin/config/routes.rb

@@ -56,7 +56,7 @@
   end
 
   admin_resources :promotions, only: [:index, :destroy]
-  admin_resources :properties, only: [:index, :destroy]
+  admin_resources :properties, except: [:show]
   admin_resources :option_types, only: [:index, :destroy], sortable: true
   admin_resources :taxonomies, only: [:index, :destroy], sortable: true
   admin_resources :promotion_categories, only: [:index, :destroy]

admin/spec/features/properties_spec.rb

@@ -21,4 +21,91 @@
     expect(page).not_to have_content("Type prop")
     expect(Spree::Property.count).to eq(1)
   end
+
+  context "creating a new property" do
+    it "creates a new product property" do
+      visit "/admin/properties"
+      click_on "Add new"
+
+      fill_in "Name", with: "Color"
+      fill_in "Presentation", with: "Cool Color"
+      click_on "Add Property"
+
+      expect(page).to have_content("Property was successfully created.")
+      expect(page).to have_content("Color")
+      expect(page).to have_content("Cool Color")
+      expect(Spree::Property.count).to eq(1)
+    end
+
+    it "shows validation errors" do
+      visit "/admin/properties"
+      click_on "Add new"
+
+      fill_in "Name", with: ""
+      click_on "Add Property"
+
+      expect(page).to have_content("can't be blank")
+      expect(Spree::Property.count).to eq(0)
+    end
+  end
+
+  context "editing an existing property" do
+    let!(:property) { create(:property, name: "Color", presentation: "Cool Color") }
+
+    it "updates the property" do
+      visit "/admin/properties"
+      # Find the row containing the property with name "Color"
+      find('tr', text: 'Color').click
+
+      fill_in "Name", with: "Size"
+      fill_in "Presentation", with: "Cool Size"
+      click_on "Update Property"
+
+      expect(page).to have_content("Property was successfully updated.")
+      expect(page).to have_content("Size")
+      expect(page).to have_content("Cool Size")
+      expect(Spree::Property.count).to eq(1)
+    end
+
+    it "shows validation errors" do
+      visit "/admin/properties"
+      find('tr', text: 'Color').click
+
+      fill_in "Name", with: ""
+      click_on "Update Property"
+
+      expect(page).to have_content("can't be blank")
+      expect(Spree::Property.count).to eq(1)
+    end
+  end
+
+  context "editing an existing property" do
+    let!(:property) { create(:property, name: "Color", presentation: "Cool Color") }
+
+    it "updates the property" do
+      visit "/admin/properties"
+      # Find the row containing the property with name "Color"
+      find('tr', text: 'Color').click
+
+      fill_in "Name", with: "Size"
+      fill_in "Presentation", with: "Cool Size"
+      click_on "Update Property"
+
+      expect(page).to have_content("Property was successfully updated.")
+      expect(page).to have_content("Size")
+      expect(page).to have_content("Cool Size")
+      expect(Spree::Property.count).to eq(1)
+    end
+
+    it "shows validation errors" do
+      visit "/admin/properties"
+      find('tr', text: 'Color').click
+
+      fill_in "Name", with: ""
+      click_on "Update Property"
+
+      expect(page).to have_content("can't be blank")
+      expect(Spree::Property.count).to eq(1)
+    end
+  end
 end