From 15cb1f7fe19896b1caf01889eb9a1d36a1d608a1 Mon Sep 17 00:00:00 2001
From: "Stanko K.R." <stanko@stanko.io>
Date: Mon, 15 Dec 2025 16:00:11 +0100
Subject: [PATCH] Add UI to prevent assigning more than 10 asignees

---
 .../cards/assignments_controller.rb           | 15 +++++++----
 .../assignment_limit_controller.js            | 26 +++++++++++++++++++
 app/views/cards/assignments/new.html.erb      | 15 ++++++++---
 3 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/controllers/assignment_limit_controller.js

diff --git a/app/controllers/cards/assignments_controller.rb b/app/controllers/cards/assignments_controller.rb
index 396fd3a5f..3e9fe1d48 100644
--- a/app/controllers/cards/assignments_controller.rb
+++ b/app/controllers/cards/assignments_controller.rb
@@ -8,11 +8,16 @@ class Cards::AssignmentsController < ApplicationController
   end
 
   def create
-    @card.toggle_assignment @board.users.active.find(params[:assignee_id])
-
-    respond_to do |format|
-      format.turbo_stream
-      format.json { head :no_content }
+    if @card.toggle_assignment @board.users.active.find(params[:assignee_id])
+      respond_to do |format|
+        format.turbo_stream
+        format.json { head :no_content }
+      end
+    else
+      respond_to do |format|
+        format.turbo_stream
+        format.json { head :unprocessable_entity }
+      end
     end
   end
 end
diff --git a/app/javascript/controllers/assignment_limit_controller.js b/app/javascript/controllers/assignment_limit_controller.js
new file mode 100644
index 000000000..06f630c59
--- /dev/null
+++ b/app/javascript/controllers/assignment_limit_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { limit: Number, count: Number }
+  static targets = ["unassigned", "limitMessage"]
+
+  connect() {
+    this.updateState()
+  }
+
+  countValueChanged() {
+    this.updateState()
+  }
+
+  updateState() {
+    const atLimit = this.countValue >= this.limitValue
+
+    this.unassignedTargets.forEach(el => {
+      el.hidden = atLimit
+    })
+
+    if (this.hasLimitMessageTarget) {
+      this.limitMessageTarget.hidden = !atLimit
+    }
+  }
+}
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index 6692a53f0..9267875cc 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -1,10 +1,12 @@
 <%= turbo_frame_tag @card, :assignment do %>
   <%= tag.div class: "max-width full-width", data: {
 				action: "turbo:before-cache@document->dialog#close dialog:show@document->navigable-list#reset keydown->navigable-list#navigate filter:changed->navigable-list#reset",
-				controller: "filter navigable-list",
+				controller: "filter navigable-list assignment-limit",
 				dialog_target: "dialog",
 				navigable_list_focus_on_selection_value: false,
-				navigable_list_actionable_items_value: true } do %>
+				navigable_list_actionable_items_value: true,
+				assignment_limit_limit_value: Assignment::LIMIT,
+				assignment_limit_count_value: @card.assignments.count } do %>
 
     <div class="flex align-start justify-space-between">
       <strong class="popup__title">Assign this to…</strong>
@@ -19,7 +21,14 @@
         <span class="visually-hidden"><%= Current.user.name %></span>
       <% end %>
       <%= render collection: @assigned_to, partial: "user", locals: { card: @card } %>
-      <%= render collection: @users, partial: "user", locals: { card: @card } %>
+      <li class="popup__item txt-small color-tint" hidden data-assignment-limit-target="limitMessage">
+        You can't have more than <%= Assignment::LIMIT %> assignees
+      </li>
+      <% @users.each do |user| %>
+        <span data-assignment-limit-target="unassigned">
+          <%= render "user", card: @card, user: user %>
+        </span>
+      <% end %>
     </ul>
   <% end %>
 <% end %>