diff --git a/app/javascript/controllers/filteredlist_controller.js b/app/javascript/controllers/filteredlist_controller.js index 102ba2d30ee97f5808332a9a631e7f317d69fcc8..c65811729b2ff2c576d046e095f87f16a57f89af 100644 --- a/app/javascript/controllers/filteredlist_controller.js +++ b/app/javascript/controllers/filteredlist_controller.js @@ -15,10 +15,22 @@ export default class extends Controller { this.filter = debounce(this.filter_nodebounce.bind(this), 300); } + expand() { + this.listTarget.classList.remove("hidden"); + this.inputTarget.classList.remove("rounded-b-md"); + this.filter_nodebounce(); + } + + contract() { + this.listTarget.classList.add("hidden"); + this.inputTarget.classList.add("rounded-b-md"); + this.filter_nodebounce(); + } + filter_nodebounce() { const query = this.inputTarget.value.toLowerCase(); - if (query) { + if (query || !this.listTarget.classList.contains("hidden")) { this.clearTarget.classList.remove("hidden"); } else { this.clearTarget.classList.add("hidden"); @@ -37,6 +49,6 @@ export default class extends Controller { clear_filter() { this.inputTarget.value = ''; this.filter_nodebounce(); - this.inputTarget.focus(); + this.contract(); } } diff --git a/app/views/assignments/_filteredlist.html.erb b/app/views/assignments/_filteredlist.html.erb index 06ed8449c4d4c690b2c0e6df00ec028468abd0ba..e4e5f2f16afd939429c90535f0ca44bf42b37f3a 100644 --- a/app/views/assignments/_filteredlist.html.erb +++ b/app/views/assignments/_filteredlist.html.erb @@ -3,10 +3,10 @@ <input type="text" data-filteredlist-target="input" - data-action="input->filteredlist#filter" + data-action="input->filteredlist#filter focus->filteredlist#expand" autocomplete="off" - class="w-full bg-white/60 border border-gray-300 rounded-t-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500" - placeholder="Filter..." + class="w-full bg-white/60 border border-gray-300 rounded-t-md rounded-b-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500" + placeholder="Assign translator (type to filter)" /> <button data-action="click->filteredlist#clear_filter" @@ -14,7 +14,7 @@ data-filteredlist-target="clear" class="absolute hidden inset-y-0 right-0 px-2 text-gray-500"> × </button> </div> - <ul data-filteredlist-target="list" class="max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2"> + <ul data-filteredlist-target="list" class="hidden max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2"> <% users.each do |user| %> <%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %> <% end %> diff --git a/app/views/assignments/_user_add.html.erb b/app/views/assignments/_user_add.html.erb index 819b115163d328c5927b7a8d415f73297f95c9cc..191b07fbe5c7ec5f757efbc1ee2690b76dbf4f2d 100644 --- a/app/views/assignments/_user_add.html.erb +++ b/app/views/assignments/_user_add.html.erb @@ -4,7 +4,7 @@ <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>"> <span style="color: <%= user.text_color %>"><%= user.name %></span> <button type="button" class="group relative -mr-1 size-3.5 rounded-sm hover:bg-gray-500/20"> - <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session) } do %> + <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session), action: "filteredlist#contract" } do %> <span class="sr-only">Add</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke-width="1" class="size-3.5 stroke-gray-600/50 group-hover:stroke-gray-600/75 fill-gray-600/50" style="stroke: <%= user.text_color %>; fill: <%= user.text_color %>"> <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" /> diff --git a/app/views/sessions/_session.html.erb b/app/views/sessions/_session.html.erb index 59e85926d325bd87fbd3ee6fa0e96bd2c2a6d3d4..b2ab250d8eeadb2896b00c0c922120a9418bc787 100644 --- a/app/views/sessions/_session.html.erb +++ b/app/views/sessions/_session.html.erb @@ -83,8 +83,8 @@ </ul> <% end %> </div> - <small class="hidden">unassigned (<%= unassigned_users.length %>)</small> - <hr class="hidden"> - <%# render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %> + <hr> + <small>unassigned (<%= unassigned_users.length %>)</small> + <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %> </div> <% end %>