Extract an "assignees" partial

pulling the avatars down from the "people" partial, and pulling the
add button up from the "assignment" partial.

The result is:

- the "bubbles/sidebar/assignment" partial is just the dialog box
- the "bubbles/assignees" partial contains everything about assignees
- the "bubbles/people" partial makes one render call

and I've introduced some turbo frames in the expectation of the next
commit which will load the dialog in the background.
This commit is contained in:
Mike Dalessio
2025-03-21 16:41:40 -04:00
parent 3689d7770e
commit a830ec1999
3 changed files with 23 additions and 15 deletions
+18
View File
@@ -0,0 +1,18 @@
<%= turbo_frame_tag bubble, :assignees do %>
<div class="flex">
<% bubble.assignees.each do |assignee| %>
<%= avatar_tag assignee, loading: :lazy, class: "avatar" %>
<% end %>
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="btn card__hide-on-index <%= bubble.creating? || bubble.drafted? ? "fill-highlight" : "fill-transparent" %>" data-action="click->dialog#open:stop">
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Assign</span>
</button>
<turbo-frame id="<%= dom_id(bubble, :assignment) %>">
<%= render "bubbles/sidebar/assignment", bubble: bubble %>
</turbo-frame>
</div>
</div>
<% end %>
+2 -7
View File
@@ -6,12 +6,7 @@
<div class="card__assignees flex flex-column align-center">
<span class="txt-uppercase">Assigned</span>
<div class="flex">
<% bubble.assignees.each do |assignee| %>
<%= avatar_tag assignee, loading: :lazy, class: "avatar" %>
<% end %>
<%= render "bubbles/sidebar/assignment", bubble: bubble, users: bubble.bucket.users.active %>
</div>
<%= render "bubbles/assignees", bubble: bubble %>
</div>
</div>
</div>
@@ -1,14 +1,9 @@
<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<button class="btn card__hide-on-index <%= bubble.creating? || bubble.drafted? ? "fill-highlight" : "fill-transparent" %>" data-action="click->dialog#open:stop">
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Assign</span>
</button>
<%= turbo_frame_tag bubble, :assignment do %>
<dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog">
<strong class="popup__title margin-block-start-half pad-inline-half txt-nowrap">Assign this to…</strong>
<%= form_with url: bucket_bubble_assignment_toggles_path(bubble.bucket, bubble), class: "flex flex-column full-width popup__list", data: { controller: "form" } do |form| %>
<% users.sort_by(&:name).each do |user| %>
<% bubble.bucket.users.active.sort_by(&:name).each do |user| %>
<div class="btn popup__item">
<%= form.check_box "assignee_id[]", {
checked: bubble.assigned_to?(user),
@@ -23,4 +18,4 @@
<% end %>
<% end %>
</dialog>
</div>
<% end %>