[Disbursements] Improve organization selector (#8591)

## Summary of the problem

It can be difficult to select organizations as an admin (especially on
mobile) because the native dropdown lists thousands of organizations.


## Describe your changes

I've built a custom dropdown component we can use on the disbursements
page (and in the future, elsewhere, too).

For admins, it shows the organization ID and moves the balance into a
tooltip.

Here's a video:


https://github.com/user-attachments/assets/0e893cc8-62db-462b-be5e-9ae4086c60f1

And here's a screenshot on dark mode:

<img width="479" alt="image"
src="https://github.com/user-attachments/assets/96229c44-6bde-4482-beb1-353dab219c72">


Reverts #8590

---------

Co-authored-by: Sam Poder <[email protected]>
Co-authored-by: Gary Tou <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 4 people

app/assets/stylesheets/components/_forms.scss

@@ -287,7 +287,8 @@ label {
 
 $select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%238492a6" viewbox="0 0 32 32"><path d="M0 6 L32 6 L16 28 z"/></svg>');
 
-select {
+select,
+.input.input--select {
   background-image: #{$select};
   background-repeat: no-repeat;
   background-position: right 0.75rem center;

app/assets/stylesheets/components/_tooltips.scss

@@ -74,6 +74,13 @@
     transform: translateX(50%);
   }
 
+  .tooltipped--i:after {
+    bottom: 50%;
+    right: 0.5rem;
+    margin-top: 0.5rem;
+    transform: translateY(50%);
+  }
+
   .tooltipped--xl {
     &:after {
       max-width: none;

app/controllers/disbursements_controller.rb

@@ -45,22 +45,26 @@ def new
       name: params[:message]
     )
 
+    user_event_ids = current_user.organizer_positions.reorder(sort_index: :asc).pluck(:event_id)
+
     @allowed_source_events = if current_user.admin?
-                               Event.all.reorder(Event::CUSTOM_SORT).includes(:plan)
+                               Event.select(:name, :id, :demo_mode, :slug).all.reorder(Event::CUSTOM_SORT).includes(:plan)
                              else
                                current_user.events.not_hidden.filter_demo_mode(false)
-                             end
+                             end.to_enum.with_index.sort_by { |e, i| [user_event_ids.index(e.id) || Float::INFINITY, i] }.map(&:first)
     @allowed_destination_events = if current_user.admin?
-                                    Event.all.reorder(Event::CUSTOM_SORT).includes(:plan)
+                                    Event.select(:name, :id, :demo_mode, :can_front_balance, :slug).all.reorder(Event::CUSTOM_SORT).includes(:plan)
+                                  elsif @source_event&.plan&.unrestricted_disbursements_enabled?
+                                    Event.select(:name, :id, :demo_mode, :can_front_balance, :slug).indexable.includes(:plan)
                                   else
-                                    current_user.events.not_hidden.without(@source_event).filter_demo_mode(false)
-                                  end
+                                    current_user.events.not_hidden.filter_demo_mode(false)
+                                  end.to_enum.with_index.sort_by { |e, i| [user_event_ids.index(e.id) || Float::INFINITY, i] }.map(&:first)
 
     authorize @disbursement
   end
 
   def create
-    @source_event = Event.find(disbursement_params[:source_event_id])
+    @source_event = Event.find_by_public_id(disbursement_params[:source_event_id])
     @destination_event = Event.find_by_public_id(disbursement_params[:event_id]) || Event.friendly.find(disbursement_params[:event_id])
     @disbursement = Disbursement.new(destination_event: @destination_event, source_event: @source_event)
 
@@ -103,6 +107,10 @@ def create
   rescue ArgumentError, ActiveRecord::RecordInvalid => e
     flash[:error] = e.message
     redirect_to new_disbursement_path(source_event_id: @source_event)
+  rescue ActiveRecord::RecordNotFound => e
+    skip_authorization
+    flash[:error] = "Organization not found: #{e.id}"
+    redirect_to new_disbursement_path(source_event_id: @source_event)
   end
 
   def edit

app/javascript/controllers/organization_select_controller.js

@@ -0,0 +1,219 @@
+import { Controller } from '@hotwired/stimulus'
+import fuzzysort from 'fuzzysort'
+
+export default class extends Controller {
+  static targets = [
+    'dropdown',
+    'menu',
+    'search',
+    'organization',
+    'wrapper',
+    'field',
+    'other',
+  ]
+  static values = {
+    state: Boolean,
+  }
+
+  connect() {
+    const organizations = {}
+
+    const open = () => {
+      // eslint-disable-next-line no-undef
+      $(this.menuTarget).slideDown()
+      this.searchTarget.style.display = 'block'
+      this.dropdownTarget.style.display = 'none'
+      this.searchTarget.select()
+    }
+
+    const close = () => {
+      // eslint-disable-next-line no-undef
+      $(this.menuTarget).slideUp()
+      this.searchTarget.style.display = 'none'
+      this.dropdownTarget.style.display = 'flex'
+    }
+
+    const filter = async () => {
+      const orgValues = Object.values(organizations)
+
+      const result = fuzzysort.go(this.searchTarget.value, orgValues, {
+        keys: ['name', 'id', 'slug'],
+        all: false,
+        threshold: -500000,
+        limit: 50,
+      })
+
+      const visible =
+        result.length > 0
+          ? result.map(r => r.obj)
+          : this.searchTarget.value.length > 0
+            ? []
+            : orgValues
+                .sort((a, b) => a.index - b.index)
+
+                .slice(0, 50)
+
+      firstOrganization = visible[0]
+
+      const shownElements = visible.map(o => o.organization)
+
+      if (this.hasOtherTarget && this.searchTarget.value.length > 0) {
+        shownElements.push(this.otherTarget)
+
+        if (shownElements.length == 1)
+          firstOrganization = organizations['other']
+        const { button } = organizations['other']
+
+        const searchMatchesSelected =
+          this.searchTarget.value == this.dropdownTarget.value
+
+        Object.assign(
+          button.style,
+          searchMatchesSelected
+            ? {
+                backgroundColor: 'var(--info)',
+                color: 'white',
+              }
+            : {
+                backgroundColor: 'unset',
+                color: 'unset',
+              }
+        )
+
+        this.otherTarget.querySelector('.other-name').innerText =
+          `Other (${this.searchTarget.value})`
+      }
+
+      const hiddenElements = this.allOrganizations.filter(
+        el => !shownElements.includes(el)
+      )
+
+      for (const element of shownElements) {
+        element.parentElement.appendChild(element)
+        element.style.display = 'block'
+      }
+
+      for (const element of hiddenElements) {
+        element.style.display = 'none'
+      }
+    }
+
+    for (const organization of this.allOrganizations) {
+      const { name, id, fee, index, slug } = organization.dataset
+      const button = organization.children[0]
+
+      const select = () => {
+        const previouslySelected =
+          organizations[this.dropdownTarget.children[1].value]
+        if (previouslySelected) {
+          Object.assign(previouslySelected.button.style, {
+            backgroundColor: 'unset',
+            color: 'unset',
+          })
+          previouslySelected.button.children[1].style.color = ''
+        }
+
+        Object.assign(button.style, {
+          backgroundColor: 'var(--info)',
+          color: 'white',
+        })
+        button.children[1].style.color = 'white'
+
+        const fieldValue = this.dropdownTarget.children[1]
+        fieldValue.innerText = button.children[0].innerText
+
+        const newValue = id == 'other' ? this.searchTarget.value : id
+        fieldValue.value = newValue
+        fieldValue.dataset.fee = fee
+        this.dropdownTarget.value = newValue
+        this.dropdownTarget.dispatchEvent(new CustomEvent('feechange'))
+
+        close()
+      }
+
+      organizations[id] = {
+        name,
+        id,
+        index,
+        organization,
+        button,
+        select,
+        fee,
+        slug,
+        visible: true,
+      }
+
+      // Select the organization when clicked
+      button.onclick = e => {
+        e.preventDefault()
+        select()
+      }
+    }
+
+    let firstOrganization = organizations[Object.keys(organizations)[0]]
+
+    // Open the dropdown when activated by keyboard
+    this.dropdownTarget.onkeypress = ({ key }) => {
+      if (key === 'Enter' || key === ' ') {
+        open()
+        return false
+      }
+    }
+
+    // Open the dropdown when clicked
+    this.dropdownTarget.onmousedown = e => e.preventDefault()
+    this.dropdownTarget.onclick = open
+
+    // Close dropdown when clicking outside
+    window.addEventListener('click', ({ target }) => {
+      if (
+        !this.wrapperTarget.contains(target) &&
+        !this.dropdownTarget.contains(target)
+      )
+        close()
+    })
+
+    // Select first organization when pressing enter on search
+    this.searchTarget.onkeypress = ({ key }) => {
+      if (key === 'Enter') {
+        firstOrganization?.select?.()
+        this.dropdownTarget.focus()
+        return false
+      }
+    }
+
+    // Close dropdown when pressing escape
+    this.searchTarget.onkeydown = ({ key }) => {
+      if (key === 'Escape') close()
+      this.dropdownTarget.focus()
+    }
+
+    const debounce = (callback, waitTime) => {
+      let timer
+      return (...args) => {
+        clearTimeout(timer)
+        timer = setTimeout(() => {
+          callback(...args)
+        }, waitTime)
+      }
+    }
+
+    if (this.dropdownTarget.children[1].value) {
+      const selected = organizations[this.dropdownTarget.children[1].value]
+      if (selected) {
+        selected.select()
+      }
+    }
+
+    // Filter organizations when searching
+    this.searchTarget.oninput = debounce(filter, 100)
+  }
+
+  get allOrganizations() {
+    if (this.hasOtherTarget) {
+      return [...this.organizationTargets, this.otherTarget]
+    }
+
+    return this.organizationTargets
+  }
+}

app/views/disbursements/_form.html.erb

@@ -1,57 +1,10 @@
 <% disabled = @source_event.present? && !policy(@source_event).create_transfer? %>
 
-<%= form_with(model: disbursement, local: true, url: disbursements_path, html: { "x-data" => "{ fee: null, event_id: null }" }) do |form| %>
+<%= form_with(model: disbursement, local: true, url: disbursements_path, html: { "x-data" => "{fee: null, event_id: null}" }) do |form| %>
   <%= form_errors(disbursement, "Disbursements") %>
 
-  <div class="field event-select-target">
-    <%= form.label :source_event_id, "From" %>
-    <%= form.collection_select(:source_event_id,
-                                @allowed_source_events,
-                                :id,
-                                current_user.admin? ? :admin_dropdown_description : :disbursement_dropdown_description,
-                                { prompt: "Select one…", disabled: ->(e) { e != @source_event && !policy(e).create_transfer? || (!current_user.admin? && e.balance_available <= 0) } },
-                                required: true,
-                                disabled: ) %>
-  </div>
-
-  <div class="field event-select-target">
-    <%= form.label :destination_event_id_select, "To" %>
-    <%= form.select(:event_id,
-                  (@allowed_destination_events.map do |event|
-                    [
-                      current_user.admin? ? event.admin_dropdown_description : event.disbursement_dropdown_description,
-                      event.id,
-                      {
-                        "data-fee": event.revenue_fee.to_s,
-                        "data-event_id": event.id
-                      },
-                    ]
-                  end) +
-                  (@source_event&.plan&.unrestricted_disbursements_enabled? && !admin_signed_in? ? [[
-                    "Other",
-                    "other",
-                    {
-                      "data-fee": "null",
-                      "data-event_id": "other"
-                    },
-                  ]] : []),
-                  { prompt: "Select one…" },
-                  required: true,
-                  disabled:,
-                  "x-on:input" => "fee = $event.target.options[$event.target.selectedIndex].dataset.fee; event_id = $event.target.options[$event.target.selectedIndex].dataset.event_id; console.log(event_id)") %>
-    <% unless admin_signed_in? %>
-      <% if @source_event&.plan&.unrestricted_disbursements_enabled? %>
-        <template x-if="event_id == 'other'">
-          <div class="mt2">
-            <%= form.label :destination_event_id_select, "Destination event's slug" %>
-            <%= form.text_field :event_id, placeholder: "hack_the_seas", required: true, disabled:, data: { behavior: "extract_slug" } %>
-          </div>
-        </template>
-      <% else %>
-        <span class="muted">You can transfer to any organization you're a part of.</span>
-      <% end %>
-    <% end %>
-  </div>
+  <%= render partial: "select_organization", locals: { form: form, field_name: "source_event_id", disabled: disabled, events: @allowed_source_events, default_event: @source_event, sending: true } %>
+  <%= render partial: "select_organization", locals: { form: form, field_name: "event_id", disabled: disabled, events: @allowed_destination_events, default_event: nil, receiving: true, allow_custom_events: @source_event&.plan&.unrestricted_disbursements_enabled? } %>
 
   <% if admin_signed_in? %>
     <div class="admin-tools field field--checkbox" x-show="fee > 0" x-cloak x-transition.duration.500ms>

app/views/disbursements/_select_organization.html.erb

@@ -0,0 +1,50 @@
+<%# locals: (form:, field_name:, disabled:, events:, default_event:, lazy_load_balances: false, sending: false, receiving: false, allow_custom_events: false) %>
+
+<div class="field" data-controller="organization-select">
+    <%= form.label field_name, sending ? "From" : "To" %>
+    <select name="disbursement[<%= field_name %>]" id="disbursement_<%= field_name %>" <%= "disabled" if disabled %> class="bg-[transparent] dark:bg-darkless input input--select flex items-center select-none cursor-pointer disabled:cursor-default" data-organization-select-target="dropdown">
+        <option value>Select one...</option>
+        <option <%= "default" if default_event.present? %> value="<%= default_event.public_id if default_event.present? %>"><%= default_event.name if default_event.present? %></option>
+    </select>
+
+    <div data-organization-select-target="wrapper" style="max-width: 384px;">
+        <input data-organization-select-target="search" style="display: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" type="text" placeholder="Search">
+
+        <div data-organization-select-target="menu" style="display: none; border-width: 1px; border-style: solid; border-top: none; max-width: 384px; border-top-left-radius: 0px; border-top-right-radius: 0px;" class="border-smoke rounded-md dark:border-black overflow-hidden h-40">
+            <div class="w-full h-full rounded-md overflow-y-scroll" style="border-top-left-radius: 0px; border-top-right-radius: 0px; content-visibility: auto;">
+                <div>
+                    <% events.each_with_index.map do |event, i| %>
+                    <% disabled_message = nil %>
+                    <% disabled_message = "Insufficient balance" if sending && !current_user.admin? && event.balance_available <= 0 %>
+                    <% disabled_message = "HCB transfers disabled" if sending && !policy(event).create_transfer? %>
+                    <div data-id="<%= event.public_id %>" data-slug="<%= event.slug %>" data-name="<%= event.name %>" data-organization-select-target="organization" style="<%= i > 50 ? "display: none" : "" %>" data-index="<%= i %>">
+                        <button <%= "disabled" if disabled_message %> aria-label="<%= disabled_message %>" class="<%= "tooltipped tooltipped--i" if disabled_message %> text-[length:inherit] border-none bg-[transparent] w-full flex justify-between p-2 cursor-pointer disabled:cursor-default hover:bg-smoke hover:dark:bg-darkless transition-colors duration-150">
+                            <div class="text-left"><%= event.name %></div>
+                            <div class="text-muted pl-2">
+                                <% if current_user.admin? %>
+                                    <%= event.id %>
+                                <% else %>
+                                    <%= turbo_frame_tag "event_balance_#{event.public_id}", src: event_async_balance_path(event, symbol: true), data: { turbo_permanent: true, controller: "cached-frame", action: "turbo:frame-render->cached-frame#cache" }, loading: :lazy do %>
+                                        <strong>-</strong>
+                                    <% end %>
+                                <% end %>
+                            </div>
+                        </button>
+                        <hr class="my-0">
+                    </div>
+                    <% end %>
+                    <% if receiving && allow_custom_events %>
+                    <div data-id="other" data-organization-select-target="other">
+                        <button class="text-[length:inherit] border-none bg-[transparent] w-full flex justify-between p-2 cursor-pointer disabled:cursor-default hover:bg-smoke hover:dark:bg-darkless transition-colors duration-150">
+                            <div class="text-left other-name"></div>
+                            <div></div>
+                        </button>
+                        <hr class="my-0">
+                    </div>
+                    <% end %>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>