Space admins can create "Menu/Product Groups" and reorder them for display on their marketplace

app/components/svg_component.rb

@@ -118,4 +118,10 @@ def qr_code
       <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z" />
     SVG
   end
+
+  def bars_3
+    <<~SVG
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    SVG
+  end
 end

app/furniture/marketplace/breadcrumbs.rb

@@ -114,6 +114,11 @@
   link t("marketplace.tags.new.link_to"), marketplace.location(:new, child: :tag)
 end
 
+crumb :edit_marketplace_tag do |tag|
+  parent :marketplace_tags, tag.marketplace
+  link t("marketplace.tags.edit.link_to"), marketplace.location(:edit, child: :tag)
+end
+
 crumb :marketplace_tax_rates do |marketplace|
   parent :edit_marketplace, marketplace
   link t("marketplace.tax_rates.index.link_to"), marketplace.location(child: :tax_rates)

app/furniture/marketplace/locales/en.yml

@@ -138,6 +138,10 @@ en:
         link_to: "Payment Settings"
     tags:
       index:
-        link_to: "Tags"
+        link_to: "Product Tags"
       new:
-        link_to: "Add Tag"
+        link_to: "Add Product Tag"
+      edit:
+        link_to: "Edit Product Tag"
+      update:
+        success: "Product Tag saved!"

app/furniture/marketplace/menu_component.html.erb

@@ -1,5 +1,16 @@
-<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
-  <%- marketplace.products.with_all_rich_text.unarchived.each do |product| %>
-    <%= render Marketplace::Menu::ProductComponent.new(product:, cart:)%>
+<%- marketplace.tags.group_tag.by_position.each do |tag| %>
+  <%- unless tag.products.empty? %>
+    <h1><%= tag.label %></h1>
+    <div class="grid lg:grid-cols-3 gap-3">
+      <%- tag.products.with_all_rich_text.unarchived.each do |product| %>
+        <%= render Marketplace::Menu::ProductComponent.new(product:, cart:) %>
+      <%- end %>
+    </div>
+  <%- end %>
+<%- end %>
+<h1>Other</h1>
+<div class="grid lg:grid-cols-3 gap-3">
+  <%- marketplace.products.unarchived.without_group_tag.each do |product| %>
+    <%= render Marketplace::Menu::ProductComponent.new(product:, cart:) %>
   <%- end %>
 </div>

app/furniture/marketplace/product.rb

@@ -41,6 +41,9 @@ class Product < Record
 
     before_commit :standardize_attachment_name
 
+    scope :with_group_tag, -> { joins(:tags).merge(Tag.group_tag) }
+    scope :without_group_tag, -> { where.not(id: with_group_tag) }
+
     def standardize_attachment_name
       return unless photo.attached? && photo.blob.persisted?
       return if photo.blob.filename.to_s.start_with?(space.id.to_s)

app/furniture/marketplace/tag.rb

@@ -9,5 +9,13 @@ class Tag < Record
     validates :label, uniqueness: {case_sensitive: false, scope: :marketplace_id}
 
     location(parent: :marketplace)
+
+    positioned on: :marketplace
+
+    # Tacking `_tag` onto the end of this scope name solely to avoid
+    # collisions with ActiveRecord `groups`
+    scope :group_tag, -> { where(is_group: true) }
+    scope :not_group, -> { where(is_group: false) }
+    scope :by_position, -> { order(position: :asc) }
   end
 end

app/furniture/marketplace/tag_policy.rb

@@ -9,7 +9,7 @@ def space
     end
 
     def permitted_attributes(_params = nil)
-      %i[label]
+      %i[label is_group position]
     end
 
     def update?

app/furniture/marketplace/tags/_form.html.erb

@@ -1,6 +1,10 @@
 <%= form_with(model: tag.location) do |form| %>
-
-<%= render "text_field", attribute: :label, form: form %>
-
-<%= form.submit %>
+  <div class="flex flex-col gap-5">
+    <div>
+      <%= render "text_field", attribute: :label, form: form %>
+      <%= form.label :is_group, "Is this a menu group?" %>
+      <%= form.check_box :is_group %>
+    </div>
+    <%= form.submit %>
+  </div>
 <%- end %>

app/furniture/marketplace/tags/edit.html.erb

@@ -0,0 +1,2 @@
+<%- breadcrumb :edit_marketplace_tag, mtag %>
+<%= render "form", tag: mtag %>

app/furniture/marketplace/tags/index.html.erb

@@ -1,16 +1,40 @@
 <%- breadcrumb :marketplace_tags, marketplace %>
 <%= render CardComponent.new do |card| %>
-  <%- marketplace.tags.each do |tag| %>
-    <div id="<%= dom_id(tag)%>" class="flex flex-row gap-3">
-      <span class="flex-grow">
-        <%= tag.label %>
-      </span>
+  <div class="flex flex-col gap-4">
+    <div>
+      <h1>Menu Groups</h1>
+      <%- if marketplace.tags.group_tag.empty? %>
+        There are currently no tags marked as Menu Groups
+      <% else %>
+        <p>Drag and drop to change the order in which groups will display on your Marketplace</p>
+        <ul data-tag-list-test data-controller="sortable" data-sortable-animation-value="150" data-sortable-resource-name-value="tag" class="flex flex-col gap-2 p-0">
+          <%- marketplace.tags.group_tag.by_position.each do |tag| %>
+            <li data-sortable-update-url="<%= polymorphic_path(tag.location) %>" id="<%= dom_id(tag)%>" class="items-center rounded-md bg-gray-50 px-2 py-1 font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 list-none cursor-move">
+              <%= render SvgComponent.new(icon: "bars_3", classes: "w-6 h-6 inline-block") %>
+              <%= link_to tag.label, tag.location(:edit) %>
+            </li>
+          <%- end %>
+        <%- end%>
+      </ul>
     </div>
-  <%- end %>
-  <%- card.with_footer(variant: :action_bar) do %>
-    <%- new_tag = marketplace.tags.new %>
-    <%- if policy(new_tag).create? %>
-      <%= link_to t("marketplace.tags.new.link_to"), marketplace.location(:new, child: :tag), class: "button w-full" %>
-    <%- end %>
-  <%- end %>
+    <div>
+      <h1>Tags</h1>
+      <p>Adding tags to your products like "vegan" or "discounted" will help shoppers more easily find what they want</p>
+      <div class="flex space-x-2">
+        <%- marketplace.tags.not_group.each do |tag| %>
+          <span id="<%= dom_id(tag)%>" class="rounded-md bg-gray-50 px-2 py-1 font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+            <%= link_to tag.label, tag.location(:edit) %>
+          </span>
+        <%- end %>
+      </div>
+    </div>
+    <div>
+      <%- card.with_footer(variant: :action_bar) do %>
+        <%- new_tag = marketplace.tags.new %>
+        <%- if policy(new_tag).create? %>
+          <%= link_to t("marketplace.tags.new.link_to"), marketplace.location(:new, child: :tag), class: "button w-full" %>
+        <%- end %>
+      <%- end %>
+    </div>
+  </div>
 <%- end %>

app/furniture/marketplace/tags_controller.rb

@@ -12,6 +12,24 @@ def new
       authorize(mtag)
     end
 
+    def edit
+      authorize(mtag)
+    end
+
+    def update
+      if authorize(mtag).update(mtag_params)
+        # POST requests to reorder tags (Stimulus Sortable) are sent with an
+        # html content-type so they cannot be handled by a JS responder.
+        if request.xhr?
+          render json: {}, status: :ok
+        else
+          redirect_to marketplace.location(child: :tags)
+        end
+      else
+        render :edit
+      end
+    end
+
     def create
       if authorize(mtag).save
         redirect_to marketplace.location(child: :tags)

app/javascript/controllers/index.js

@@ -3,6 +3,8 @@
 // ./bin/rails generate stimulus controllerName
 
 import { application } from "./application.js";
-
 import MenuController from "./menu_controller.js";
+import Sortable from "@stimulus-components/sortable";
+
 application.register("menu", MenuController);
+application.register("sortable", Sortable);

db/migrate/20240514174529_add_position_index_to_marketplace_tags.rb

@@ -0,0 +1,7 @@
+class AddPositionIndexToMarketplaceTags < ActiveRecord::Migration[7.1]
+  disable_ddl_transaction!
+
+  def change
+    add_index :marketplace_tags, [:bazaar_id, :position], unique: true, algorithm: :concurrently
+  end
+end

db/schema.rb

@@ -247,6 +247,7 @@
     t.boolean "is_group", default: false, null: false
     t.integer "position", default: 0, null: false
     t.uuid "marketplace_id", null: false
+    t.index ["marketplace_id", "position"], name: "index_marketplace_tags_on_marketplace_id_and_position", unique: true
     t.index ["marketplace_id"], name: "index_marketplace_tags_on_marketplace_id"
   end
 

db/seeds.rb

@@ -4,6 +4,8 @@
 OPERATOR_EMAIL = "[email protected]"
 MEMBER_EMAIL = "[email protected]"
 
+raise "Your database contains data. Run `rails db:seed:replant` to truncate and re-seed it." if Space.exists?
+
 FactoryBot.create(:person, :operator, name: "Ollie Operator", email: OPERATOR_EMAIL)
 
 space = FactoryBot.create(:space, :with_members, :with_entrance, name: "Stevie's Space")
@@ -30,7 +32,15 @@
   description: "A marvelous marketplace for magic merchandise.",
   hero_image: FactoryBot.create(:media)
 )
-FactoryBot.create(:marketplace, :full, room: marketplace_section)
+marketplace = FactoryBot.create(:marketplace, :ready_for_shopping, product_quantity: 16, room: marketplace_section)
+magic_menu_group = FactoryBot.create(:marketplace_tag, :group, marketplace: marketplace, label: "Magic")
+fire_tag = FactoryBot.create(:marketplace_tag, marketplace: marketplace, label: "🔥")
+marketplace.products.sample(8).each do |product|
+  product.tags << magic_menu_group
+end
+marketplace.products.sample(8).each do |product|
+  product.tags << fire_tag
+end
 
 journal_section = FactoryBot.create(
   :room, space:, name: "Jazzy Journal",

package.json

@@ -42,6 +42,8 @@
     "@rails/actioncable": "^7.1.3",
     "@rails/actiontext": "^7.1.3",
     "@rails/activestorage": "^7.1.3",
+    "@rails/request.js": "^0.0.9",
+    "@stimulus-components/sortable": "^5.0.1",
     "@sentry/browser": "^8.3.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",

spec/factories/marketplace/tags.rb → spec/factories/furniture/marketplace/marketplace_tag.rb

@@ -1,6 +1,11 @@
 FactoryBot.define do
   factory :marketplace_tag, class: "Marketplace::Tag" do
+    marketplace { association(:marketplace) }
     sequence(:label) { |n| "#{Faker::Food.allergen} #{n}" }
-    marketplace
+    sequence(:position) { |n| n }
+
+    trait :group do
+      is_group { true }
+    end
   end
 end

spec/furniture/marketplace/marketplace_tags_system_spec.rb

@@ -0,0 +1,68 @@
+require "rails_helper"
+
+describe "Marketplace Tags", type: :system do
+  let(:space) { create(:space, :with_entrance, :with_members) }
+  let(:marketplace) { create(:marketplace, :ready_for_shopping, room: space.entrance) }
+
+  before do
+    sign_in(space.members.first, space)
+  end
+
+  scenario "Add a marketplace tag" do
+    visit(marketplace)
+    click_link("Tags")
+    click_link("Add Product Tag")
+    fill_in("Label", with: "🚫🌾 Gluten Free")
+    click_button("Create")
+    expect(page).to have_content("🚫🌾 Gluten Free")
+  end
+
+  scenario "Edit a Marketplace Tag" do
+    visit(marketplace)
+    click_link("Tags")
+    click_link("Add Product Tag")
+    fill_in("Label", with: "🚫🌾 Gluten Free")
+    click_button("Create")
+    expect(page).to have_content("🚫🌾 Gluten Free")
+
+    click_link("🚫🌾 Gluten Free")
+    fill_in("Label", with: "🌾 Very Glutenous")
+    click_button("Save changes")
+    expect(page).to have_content("🌾 Very Glutenous")
+
+    click_link("🌾 Very Glutenous")
+    check("tag_is_group")
+    click_button("Save changes")
+    within("[data-tag-list-test]") do
+      expect(page).to have_content("🌾 Very Glutenous")
+    end
+  end
+
+  describe "Menu Groups" do
+    let!(:menu_tags) do
+      # The positioning gem won't let us manually assign positions on creation
+      create_list(:marketplace_tag, 3, :group, marketplace: marketplace).tap do |tags|
+        tags[0].update(position: :last)
+        tags[2].update(position: :first)
+      end
+    end
+
+    scenario "Displays Menu Groups in the correct order" do
+      visit(marketplace)
+      click_link("Tags")
+      within("[data-tag-list-test]") do
+        expect(page.find("li:nth-child(1)")).to have_content(menu_tags[2].label)
+        expect(page.find("li:nth-child(2)")).to have_content(menu_tags[1].label)
+        expect(page.find("li:nth-child(3)")).to have_content(menu_tags[0].label)
+      end
+    end
+  end
+
+  def visit(object_or_path)
+    if object_or_path.respond_to?(:location)
+      super(polymorphic_path(object_or_path.location))
+    else
+      super
+    end
+  end
+end

spec/furniture/marketplace/product_spec.rb

@@ -7,6 +7,42 @@
   it { is_expected.to have_many(:product_tax_rates).inverse_of(:product).dependent(:destroy) }
   it { is_expected.to have_many(:tax_rates).through(:product_tax_rates).inverse_of(:products) }
 
+  describe ".with_group_tag" do
+    subject(:with_group_tag) { described_class.with_group_tag }
+
+    let!(:untagged_product) { create(:marketplace_product) }
+    let!(:product_with_non_group_tag) do
+      create(:marketplace_product).tap { |p| p.tags << create(:marketplace_tag) }
+    end
+    let!(:product_with_group_tag) do
+      create(:marketplace_product).tap { |p| p.tags << create(:marketplace_tag, :group) }
+    end
+
+    it "returns only products with a group tag" do
+      expect(with_group_tag).to include(product_with_group_tag)
+      expect(with_group_tag).not_to include(untagged_product)
+      expect(with_group_tag).not_to include(product_with_non_group_tag)
+    end
+  end
+
+  describe ".without_group_tag" do
+    subject(:without_group_tag) { described_class.without_group_tag }
+
+    let!(:untagged_product) { create(:marketplace_product) }
+    let!(:product_with_non_group_tag) do
+      create(:marketplace_product).tap { |p| p.tags << create(:marketplace_tag) }
+    end
+    let!(:product_with_group_tag) do
+      create(:marketplace_product).tap { |p| p.tags << create(:marketplace_tag, :group) }
+    end
+
+    it "returns only products without a group tag" do
+      expect(without_group_tag).to include(untagged_product)
+      expect(without_group_tag).to include(product_with_non_group_tag)
+      expect(without_group_tag).not_to include(product_with_group_tag)
+    end
+  end
+
   describe "#name" do
     it { is_expected.to validate_presence_of(:name) }
   end

spec/furniture/marketplace/product_tags_system_spec.rb

@@ -14,7 +14,7 @@
     visit(marketplace)
     click_link("Tags")
 
-    click_link("Add Tag")
+    click_link("Add Product Tag")
 
     fill_in("Label", with: "🚫🌾 Gluten Free")