Skip to content

Dynamic facilitator border and inactive button graying #1267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maebeale merged 6 commits into from
Mar 8, 2026
Merged

Dynamic facilitator border and inactive button graying #1267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
003960e
Dynamic facilitator border and inactive button graying on affiliation…
maebeale Feb 28, 2026
df9a39d
Narrow title field and rename Primary to Primary contact on affiliati…
maebeale Mar 8, 2026
d3bc595
Refactor inactive_toggle_controller to use Stimulus targets instead o…
maebeale Mar 8, 2026
3a17516
Document Stimulus shorthand action descriptors convention
maebeale Mar 8, 2026
683f4a3
Use explicit class lists and shorthand action descriptors
maebeale Mar 8, 2026
aa71ee5
Rename button target to profileButton for clarity
maebeale Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,8 @@ bundle exec bundle-audit check --update
- Controller naming: `[name]_controller.js`
- Keep controllers focused and small
- Use Tailwind CSS v4 utility classes
- **Use Stimulus targets and data attributes** to reference DOM elements — avoid `this.element.querySelector` and direct DOM queries. Declare `static targets = [...]` and use `data-[controller]-target` attributes in views.
- **Use Stimulus shorthand action descriptors and shorthand pairs** — omit the event when it's the default for that element (e.g., `input` for `<input>`/`<textarea>`, `click` for `<button>`/`<a>`, `submit` for `<form>`). Write `controller#action` not `input->controller#action` on an input element. Only specify the event when using a non-default (e.g., `change->controller#action` on an input). See [Stimulus Actions](https://stimulus.hotwired.dev/reference/actions#event-shorthand).

## Migrations

Expand Down
52 changes: 42 additions & 10 deletions app/frontend/javascript/controllers/inactive_toggle_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,60 @@
import { Controller } from "@hotwired/stimulus";

// Active themed classes used by person (sky) and organization (emerald) profile buttons
const ACTIVE_CLASSES = [
"bg-sky-50", "bg-sky-100", "bg-sky-200", "hover:bg-sky-100", "hover:bg-sky-200",
"text-sky-700", "text-sky-800", "border-sky-200", "border-sky-300",
"bg-emerald-50", "bg-emerald-100", "bg-emerald-200", "hover:bg-emerald-100", "hover:bg-emerald-200",
"text-emerald-700", "text-emerald-800", "border-emerald-200", "border-emerald-300"
];
const GRAY_CLASSES = ["bg-gray-100", "hover:bg-gray-200", "text-gray-400", "border-gray-300"];

function grayOut(el) {
ACTIVE_CLASSES.forEach((cls) => el.classList.remove(cls));
GRAY_CLASSES.forEach((cls) => el.classList.add(cls));
}

export default class extends Controller {
static targets = ["endDate", "title", "row", "profileButton"]

connect() {
this.endDateInput = this.element.querySelector("input[type='date'][name*='end_date']");
if (this.endDateInput) {
this.apply();
}
// Save original classes for profile buttons and their styled children
this._savedClasses = [];
this.profileButtonTargets.forEach((btn) => {
btn.querySelectorAll("a.group, a.group span").forEach((el) => {
this._savedClasses.push({ el, className: el.className });
});
});

if (this.hasEndDateTarget) this.apply();
if (this.hasTitleTarget) this.updateBorder();
}

toggle() {
this.apply();
}

updateBorder() {
if (!this.hasTitleTarget) return;
const isFacilitator = this.titleTarget.value.toLowerCase().includes("facilitator");
this.rowTarget.style.borderLeft = `4px solid ${isFacilitator ? "#e879f9" : "#d1d5db"}`;
}

apply() {
if (!this.endDateInput) return;
const value = this.endDateInput.value;
if (!this.hasEndDateTarget) return;
const value = this.endDateTarget.value;
const isPast = value && new Date(value) < new Date(new Date().toDateString());

if (isPast) {
this.element.classList.add("bg-gray-100", "border-gray-300", "opacity-60");
this.element.classList.remove("bg-white", "border-gray-200");
this.rowTarget.classList.add("bg-gray-100", "border-gray-300", "opacity-60");
this.rowTarget.classList.remove("bg-white", "border-gray-200");
this.profileButtonTargets.forEach((btn) => {
btn.querySelectorAll("a.group, a.group span").forEach((el) => grayOut(el));
});
} else {
this.element.classList.remove("bg-gray-100", "border-gray-300", "opacity-60");
this.element.classList.add("bg-white", "border-gray-200");
this.rowTarget.classList.remove("bg-gray-100", "border-gray-300", "opacity-60");
this.rowTarget.classList.add("bg-white", "border-gray-200");
this._savedClasses.forEach(({ el, className }) => { el.className = className; });
}
}
}
140 changes: 74 additions & 66 deletions app/views/organizations/_affiliation_fields.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,84 @@
<% if allowed_to?(:manage?, Organization) %>
<% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
<div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
<% if f.object.persisted? %>id="<%= dom_id(f.object) %>"<% end %>
data-controller="inactive-toggle">
<div style="width: 350px; min-width: 350px; flex-shrink: 0;">
<% if f.object.persisted? && f.object.person.present? %>
<label class="block text-sm font-medium text-gray-700 mb-1">Person</label>
<% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
<%= person_profile_button(f.object.person, truncate_at: 30, subtitle: (f.object.person.preferred_email if show_email)) %>
<%= f.hidden_field :person_id %>
<% else %>
<%= f.input :person_id,
include_blank: true,
required: true,
input_html: {
data: {
controller: "remote-select",
remote_select_model_value: "person"
}
},
label: "Person"
%>
<% end %>
</div>
<div data-controller="inactive-toggle">
<div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
<% if f.object.persisted? %>id="<%= dom_id(f.object) %>"<% end %>
data-inactive-toggle-target="row">
<div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
<% if f.object.persisted? && f.object.person.present? %>
<label class="block text-sm font-medium text-gray-700 mb-1">Person</label>
<% show_email = f.object.person.profile_show_email? || allowed_to?(:manage?, Person) %>
<%= person_profile_button(f.object.person, truncate_at: 30, subtitle: (f.object.person.preferred_email if show_email)) %>
<%= f.hidden_field :person_id %>
<% else %>
<%= f.input :person_id,
include_blank: true,
required: true,
input_html: {
data: {
controller: "remote-select",
remote_select_model_value: "person"
}
},
label: "Person"
%>
<% end %>
</div>

<div class="w-full sm:flex-1">
<%= f.input :title,
as: :text,
input_html: {
rows: 1,
value: f.object&.title || f.object&.position || "Facilitator",
style: "height: 42px; min-height: 42px;",
data: { action: "input->affiliation-dates#recalculate" }
} %>
</div>
<div class="w-full sm:w-auto" style="min-width: 200px;">
<%= f.input :title,
as: :text,
input_html: {
rows: 1,
value: f.object&.title || f.object&.position || "Facilitator",
style: "height: 42px; min-height: 42px;",
data: {
inactive_toggle_target: "title",
action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
}
} %>
</div>

<div class="w-full sm:w-auto">
<%= f.input :start_date,
as: :string,
label: "Start",
input_html: {
type: "date",
value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->affiliation-dates#recalculate" }
} %>
</div>
<div class="w-full sm:w-auto">
<%= f.input :start_date,
as: :string,
label: "Start",
input_html: {
type: "date",
value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->affiliation-dates#recalculate" }
} %>
</div>

<div class="w-full sm:w-auto">
<%= f.input :end_date,
as: :string,
label: "End",
input_html: {
type: "date",
value: f.object.end_date&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate" }
} %>
</div>
<div class="w-full sm:w-auto">
<%= f.input :end_date,
as: :string,
label: "End",
input_html: {
type: "date",
value: f.object.end_date&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: {
inactive_toggle_target: "endDate",
action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
}
} %>
</div>

<div class="w-full sm:w-auto pb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Primary</label>
<%= f.check_box :primary_contact,
checked: f.object.primary_contact? || !f.object.persisted?,
class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
</div>
<div class="w-full sm:w-auto pb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
<%= f.check_box :primary_contact,
checked: f.object.primary_contact? || !f.object.persisted?,
class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
</div>

<div class="w-full text-right admin-only">
<%= link_to_remove_association "Remove",
f,
class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
<div class="w-full text-right admin-only">
<%= link_to_remove_association "Remove",
f,
class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
</div>
</div>
</div>
<% else %>
Expand Down
140 changes: 74 additions & 66 deletions app/views/people/_affiliation_fields.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,86 @@
<% if allowed_to?(:manage?, Person) %>
<% expired = f.object.inactive? || (f.object.end_date.present? && f.object.end_date < Date.current) %>
<div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
data-controller="inactive-toggle">
<div style="width: 350px; min-width: 350px; flex-shrink: 0;">
<% if f.object.persisted? && f.object.organization.present? %>
<label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
<%= organization_profile_button(f.object.organization, truncate_at: 30) %>
<%= f.hidden_field :organization_id %>
<% else %>
<%= f.input :organization_id,
include_blank: true,
required: true,
input_html: {
data: {
controller: "remote-select",
remote_select_model_value: "organization"
}
},
error: "Organization can't be blank",
prompt: "Search by name",
label: "Organization",
label_html: { class: "block text-sm font-medium text-gray-700 mb-1 " } %>
<% end %>
</div>
<div data-controller="inactive-toggle">
<div class="nested-fields flex flex-wrap gap-x-4 gap-y-1 items-end mb-4 rounded-lg border p-3 <%= expired ? 'bg-gray-100 border-gray-300 opacity-60' : 'bg-white border-gray-200' %>"
style="border-left: 4px solid <%= f.object.facilitator? ? '#e879f9' : '#d1d5db' %>"
data-inactive-toggle-target="row">
<div style="width: 350px; min-width: 350px; flex-shrink: 0;" data-inactive-toggle-target="profileButton">
<% if f.object.persisted? && f.object.organization.present? %>
<label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
<%= organization_profile_button(f.object.organization, truncate_at: 30) %>
<%= f.hidden_field :organization_id %>
<% else %>
<%= f.input :organization_id,
include_blank: true,
required: true,
input_html: {
data: {
controller: "remote-select",
remote_select_model_value: "organization"
}
},
error: "Organization can't be blank",
prompt: "Search by name",
label: "Organization",
label_html: { class: "block text-sm font-medium text-gray-700 mb-1 " } %>
<% end %>
</div>

<div class="w-full sm:w-auto" style="min-width: 200px;">
<div class="pt-1">
<%= f.input :title,
as: :text,
input_html: {
rows: 1,
value: f.object.title || f.object.position || "Facilitator",
style: "height: 42px; min-height: 42px;",
data: {
inactive_toggle_target: "title",
action: "affiliation-dates#recalculate inactive-toggle#updateBorder"
}
} %>
</div>
</div>

<div class="w-full sm:flex-1">
<div class="pt-1">
<%= f.input :title,
as: :text,
<div class="w-full sm:w-auto">
<%= f.input :start_date,
as: :string,
label: "Start",
input_html: {
rows: 1,
value: f.object.title || f.object.position || "Facilitator",
style: "height: 42px; min-height: 42px;",
data: { action: "input->affiliation-dates#recalculate" }
type: "date",
value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->affiliation-dates#recalculate" }
} %>
</div>
</div>

<div class="w-full sm:w-auto">
<%= f.input :start_date,
as: :string,
label: "Start",
input_html: {
type: "date",
value: (f.object.start_date || (Date.current unless f.object.persisted?))&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->affiliation-dates#recalculate" }
} %>
</div>

<div class="w-full sm:w-auto">
<%= f.input :end_date,
as: :string,
label: "End",
input_html: {
type: "date",
value: f.object.end_date&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: { action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate" }
} %>
</div>
<div class="w-full sm:w-auto">
<%= f.input :end_date,
as: :string,
label: "End",
input_html: {
type: "date",
value: f.object.end_date&.strftime("%Y-%m-%d"),
class: "rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 text-sm",
data: {
inactive_toggle_target: "endDate",
action: "change->inactive-toggle#toggle change->affiliation-dates#recalculate"
}
} %>
</div>

<div class="w-full sm:w-auto pb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Primary</label>
<%= f.check_box :primary_contact,
checked: f.object.primary_contact? || !f.object.persisted?,
class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
</div>
<div class="w-full sm:w-auto pb-3">
<label class="block text-sm font-medium text-gray-700 mb-1">Primary contact</label>
<%= f.check_box :primary_contact,
checked: f.object.primary_contact? || !f.object.persisted?,
class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
</div>

<div class="w-full text-right admin-only">
<%= link_to_remove_association "Remove",
f,
class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
<div class="w-full text-right admin-only">
<%= link_to_remove_association "Remove",
f,
class: "text-sm text-gray-400 hover:text-red-600 underline whitespace-nowrap admin-only bg-blue-100 rounded px-2 py-1" %>
</div>
</div>
</div>
<% else %>
Expand Down