From 04651ea65d996eae4ef7d8c94757cf9f9eb119e5 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Tue, 8 Dec 2020 00:20:58 +0100
Subject: [PATCH] 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     | 20 ++++++++++++++++++++
 app/assets/stylesheets/admins.scss |  6 +++++-
 app/views/rooms/show.html.erb      | 16 +++++++++++++++-
 config/locales/en.yml              |  1 +
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/room.js b/app/assets/javascripts/room.js
index d0853152..1089f215 100644
--- a/app/assets/javascripts/room.js
+++ b/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';
+  })
+}
diff --git a/app/assets/stylesheets/admins.scss b/app/assets/stylesheets/admins.scss
index 65036144..f83ae097 100644
--- a/app/assets/stylesheets/admins.scss
+++ b/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;
 }
diff --git a/app/views/rooms/show.html.erb b/app/views/rooms/show.html.erb
index 3addc386..5f6c0f00 100644
--- a/app/views/rooms/show.html.erb
+++ b/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 %>
\ No newline at end of file
+<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 186313ac..e797b5c1 100755
--- a/config/locales/en.yml
+++ b/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