Add tags section with categories and sectors to story ideas form

app/controllers/story_ideas_controller.rb

@@ -35,6 +35,8 @@ def create
     @story_idea.updated_by = current_user
     authorize! @story_idea
 
+    assign_categories(@story_idea)
+
     if @story_idea.save
       NotificationServices::CreateNotification.call(
         noticeable: @story_idea,
@@ -59,6 +61,8 @@ def update
     @story_idea.updated_by = current_user
     authorize! @story_idea
 
+    assign_categories(@story_idea)
+
     if @story_idea.update(story_idea_params.except(:images))
       flash[:notice] = "StoryIdea was successfully updated."
       if allowed_to?(:index?, StoryIdea)
@@ -90,6 +94,15 @@ def set_form_variables
     @users = User.active.includes(:person)
     @users = @users.or(User.where(id: @story_idea.created_by_id)) if @story_idea&.created_by_id
     @users = @users.distinct.order("people.first_name, people.last_name")
+    @categories_grouped =
+      Category
+        .includes(:category_type)
+        .published
+        .order(:position, :name)
+        .group_by(&:category_type)
+        .select { |type, _| type.nil? || type.published? }
+        .sort_by { |type, _| type&.name.to_s.downcase }
+    @sectors = Sector.published.order(:name)
     @story_idea.build_primary_asset if @story_idea.primary_asset.blank?
     @story_idea.gallery_assets.build
   end
@@ -100,17 +113,25 @@ def set_story_idea
     @story_idea = StoryIdea.find(params[:id])
   end
 
+  def assign_categories(story_idea)
+    selected_category_ids = Array(params[:story_idea][:category_ids]).reject(&:blank?).map(&:to_i)
+    story_idea.categories = Category.where(id: selected_category_ids)
+
+    selected_sector_ids = Array(params[:story_idea][:sector_ids]).reject(&:blank?).map(&:to_i)
+    story_idea.sectors = Sector.where(id: selected_sector_ids)
+  end
+
   def story_idea_params
     params.require(:story_idea).permit(
       :title, :body, :youtube_url,
       :permission_given, :publish_preferences, :promoted_to_story,
       :windows_type_id, :organization_id, :workshop_id, :external_workshop_title,
       :created_by_id, :updated_by_id,
       story_populations: [],
+      category_ids: [],
+      sector_ids: [],
       primary_asset_attributes: [ :id, :file, :_destroy ],
-      gallery_assets_attributes: [ :id, :file, :_destroy ],
-      categorizable_items_attributes: [ :id, :category_id, :_destroy ],
-      category_ids: []
+      gallery_assets_attributes: [ :id, :file, :_destroy ]
     )
   end
 end

app/models/story_idea.rb

@@ -12,6 +12,7 @@ class StoryIdea < ApplicationRecord
   belongs_to :workshop, optional: true
   has_many :bookmarks, as: :bookmarkable, dependent: :destroy
   has_many :categorizable_items, dependent: :destroy, inverse_of: :categorizable, as: :categorizable
+  has_many :sectorable_items, dependent: :destroy, inverse_of: :sectorable, as: :sectorable
   has_many :notifications, as: :noticeable, dependent: :destroy
   has_many :stories
   # Asset associations
@@ -22,6 +23,7 @@ class StoryIdea < ApplicationRecord
   has_many :assets, as: :owner, dependent: :destroy
   # has_many through
   has_many :categories, through: :categorizable_items
+  has_many :sectors, through: :sectorable_items
 
   # Validations
   validates :created_by_id, presence: true

app/views/story_ideas/_form.html.erb

@@ -155,6 +155,101 @@
         </div>
       </div>
     <% end %>
+
+    <!-- Tags Section -->
+    <div class="space-y-4 mt-8">
+      <div class="tags-section" data-controller="dropdown">
+        <button
+          type="button"
+          id="tags_button"
+          class="
+            flex items-center justify-between cursor-pointer w-full
+            bg-gray-500 text-white hover:bg-gray-300 px-3 py-2 rounded-md"
+          data-action="dropdown#toggle"
+          data-dropdown-payload-param='[{"tags":"hidden"}, {"tags_arrow":"rotate-180"}, {"tags_button":"rounded-md rounded-t-md"}]'>
+          Tags
+          <svg
+            id="tags_arrow"
+            class="w-6 h-6 shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>
+
+        <div id="tags" class="hidden border border-gray-300 p-4 rounded-b-md">
+          <!-- To ensure unchecked boxes are submitted -->
+          <%= hidden_field_tag "story_idea[sector_ids][]", "" %>
+          <%= hidden_field_tag "story_idea[category_ids][]", "" %>
+
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm mb-6">
+            <!-- Header -->
+            <h3 class="text-base font-semibold text-gray-800 mb-3">
+              Sectors
+            </h3>
+
+            <!-- Checkbox List -->
+            <div class="flex flex-wrap gap-3">
+              <% @sectors.each do |sector| %>
+                <% id = "story_idea_sector_ids_#{sector.id}" %>
+
+                <label
+                  for="<%= id %>"
+                  class="
+                    flex items-center gap-2 p-3 cursor-pointer w-auto min-w-[180px] bg-white border border-gray-200
+                    rounded-lg shadow-sm hover:bg-gray-100 transition">
+                  <%= check_box_tag "story_idea[sector_ids][]",
+                                    sector.id,
+                                    @story_idea.sector_ids.include?(sector.id),
+                                    id: id,
+                                    disabled: promoted_to_story,
+                                    class: "h-4 w-4 text-blue-600 rounded" %>
+
+                  <span class="text-sm text-gray-700 whitespace-nowrap"><%= sector.name %></span>
+                </label>
+              <% end %>
+            </div>
+          </div>
+
+          <div class="form-group space-y-6">
+            <% @categories_grouped.each do |type, cats| %>
+              <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm">
+                <!-- Header -->
+                <h3 class="text-base font-semibold text-gray-800 mb-3"><%= type.name.titleize %></h3>
+
+                <!-- Checkbox List -->
+                <div class="flex flex-wrap gap-3">
+                  <% cats.each do |category| %>
+                    <% id = "story_idea_category_ids_#{category.id}" %>
+
+                    <label
+                      for="<%= id %>"
+                      class="
+                        flex items-center gap-2 p-3 cursor-pointer w-auto min-w-[180px] bg-white border
+                        border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 transition">
+                      <%= check_box_tag "story_idea[category_ids][]",
+                                        category.id,
+                                        @story_idea.category_ids.include?(category.id),
+                                        id: id,
+                                        disabled: promoted_to_story,
+                                        class: "h-4 w-4 text-blue-600 rounded" %>
+
+                      <span class="text-sm text-gray-700 whitespace-nowrap"><%= category.name %></span>
+                    </label>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <%= render "shared/form_image_fields", f: f, include_primary_asset: true %>
     <div class="action-buttons mt-8 flex justify-center gap-3 pt-6">
       <% if allowed_to?(:destroy?, f.object) && f.object.stories.none? %>