Allow Searching for Rooms (#2315)

* Allow Searching for Rooms

If a user has a lot of rooms, finding the correct one can be somewhat
annoying and it would be great to be able to search for or filter the
rooms in the room list.

This patch adds a very simple search functionality for this. The search
bar is hidden as long as a user has not more than six (two rows in
desktop mode) rooms. If the number of rooms exceeds this limit, a search
field is shown to quickly filter the list.

* Updates Romm Filter Style

This patch updates the room filtering according to the review requests.
It switches to the same search input style that is used at places like
the recording table.

This mans, that this also works slightly different since the input now
has a clear and a search button. The basic functionality is the same
though.

Finally, this switches from plain JavaScript to jQuery functions for
filtering.

app/assets/javascripts/room.js

@@ -142,6 +142,9 @@ $(document).on('turbolinks:load', function(){
     $("#remove-presentation").click(function(data) {
       removePreuploadPresentation($(this).data("remove"))
     })
+
+    // trigger initial room filter
+    filterRooms();
   }
 });
 
@@ -347,3 +350,20 @@ function checkIfAutoJoin() {
     $("#room-join").click()
   }
 }
+
+function filterRooms() {
+  const search_term = $('#room-search').val().toLowerCase(),
+        rooms = $('#room_block_container > div:not(:last-child)');
+        clear_room_search = $('#clear-room-search');
+
+  if (search_term) {
+    clear_room_search.show();
+  } else {
+    clear_room_search.hide();
+  }
+
+  rooms.each(function(i, room) {
+    let text = $(this).find('h4').text();
+    room.style.display = (text.toLowerCase().indexOf(search_term) < 0) ? 'none' : 'block';
+  })
+}

app/assets/stylesheets/admins.scss

@@ -24,7 +24,7 @@
   }
 }
 
-#clear-search {
+#clear-search, #clear-room-search {
   z-index: 9;
   position: absolute;
   right: 55px;
@@ -35,6 +35,10 @@
   }
 }
 
+.room-search {
+  margin: 50px 0 25px 0;
+}
+
 .tag i {
   color: white !important;
 }

app/views/rooms/show.html.erb

@@ -82,6 +82,20 @@
       </div>
     </div>
 
+    <% if current_user.ordered_rooms.length > 6 %>
+      <div class="input-group room-search">
+        <input id="room-search" type="text" class="form-control" placeholder="<%= t("room.search") %>" onChange="filterRooms()" onKeyUp="filterRooms()"></input>
+        <span id="clear-room-search" class="text-primary" onclick="$('#room-search').val(''); filterRooms()">
+          <i class="fas fa-times"></i>
+        </span>
+        <span class="input-group-append">
+          <button class="btn btn-outline-primary" type="button" onclick="filterRooms()">
+            <i class="fas fa-search"></i>
+          </button>
+        </span>
+      </div>
+    <% end %>
+
     <div id="room_block_container" class="row pt-7 pb-5">
       <% if current_user.role.get_permission("can_create_rooms") %>
         <% current_user.ordered_rooms.each do |room| %>
@@ -125,4 +139,4 @@
 <% if shared_access_allowed %>
   <%= render "shared/modals/share_room_modal" %>
   <%= render "shared/modals/remove_access_modal" %>
-<% end %>
+<% end %>

config/locales/en.yml

@@ -579,6 +579,7 @@ en:
     shared_access_success: Room shared successfully
     shared_access_error: There was an error sharing the room
     start: Start
+    search: Search for room…
     unavailable: This room is currently unavailable due to the owner's email not being verified.
     update_settings_error: There was an error updating the room settings
     update_settings_success: Room settings successfully updated