Fixed #303 Add the ability to rename rooms and recordings (GRN-18) (#304)

* <Added modal for rename>

* <Commit changes and switch branch>

* <Javascript Scaffolding for rename room feature>

* <Created room_block.js>

* <update changes>

* <Updating rename branch>

* <Update rename.js>

* <Update branch>

* <Update branch>

* <Implemented renaming of room blocks>

* <Refactoring code>

* Remove modal due to new design

* <Finished renaming of rooms>

* <Updated renaming of recordings>

* <updating branch>

* <added renaming of recordings>

* <update branch>

* <>

* <Fixed code style>

* <Fixed rspec tests>

* Update application.js

app/views/rooms/show.html.erb

@@ -25,11 +25,14 @@
   <div class="container">
     <div class="row pt-9">
       <div class="col-lg-9 col-sm-12">
-        <h1 id="user-text" class="display-3 text-left mb-3 font-weight-400"><%= @room.name %>
+        <div id="room-title" class="display-3 form-inline <%= 'edit_hover_class' if current_user.main_room != @room %>">
+          <h1 contenteditable=false id="user-text" class="display-3 text-left mb-3 font-weight-400"><%= @room.name %></h1>
           <% if current_user.main_room == @room %>
-            <i class="fas fa-home align-top home-indicator"></i>
+            <a class="disable-click"><i class="fas fa-home align-top home-indicator ml-2"></i></a>
+          <% else %>
+            <a><i id="edit-room" class="fa fa-edit align-top home-indicator ml-2" data-edit-room="<%= @room.uid %>"></i></a>
           <% end %>
-        </h1>
+        </div>
         <h4 class="text-left mb-6"><%= @room.sessions %> <%= t("room.sessions") %> | <%= @recordings.length %> <%= t("room.recordings") %></h4>
         <label class="form-label"><%= t("room.invite_participants") %></label>
         <form class="form-inline">
@@ -54,7 +57,7 @@
       </div>
     </div>
 
-    <div class="row pt-7 pb-2">
+    <div id="room_block_container" class="row pt-7 pb-2">
       <% if current_user.rooms.length > 1 %>
         <div class="col-lg-4 col-md-6 col-sm-12">
           <%= link_to current_user.main_room do %>

app/views/shared/_sessions.html.erb

@@ -37,7 +37,7 @@
                   <% end %>
                 </tr>
               </thead>
-              <tbody>
+              <tbody id="recording-table">
               <% if recordings.empty? %>
                 <tr>
                   <td colspan="7" class="text-center h4 p-6 font-weight-normal">

app/views/shared/components/_public_recording_row.html.erb

@@ -15,7 +15,13 @@
 
 <tr>
   <td>
-    <div><%= recording[:name] %></div>
+    <div>
+      <% if recording[:metadata][:name] %>
+        <%= recording[:metadata][:name] %>
+      <% else %>
+        <%= recording[:name] %>
+      <% end %>
+    </div>
     <div class="small text-muted">
       <%= t("recording.recorded_on", date: recording_date(recording[:startTime])) %>
     </div>

app/views/shared/components/_recording_row.html.erb

@@ -15,7 +15,16 @@
 
 <tr>
   <td>
-    <div><%= recording[:name] %></div>
+    <div id="recording-title" class="form-inline edit_hover_class" data-recordid="<%= recording[:recordID] %>">
+      <text id='recording-text'>
+        <% if recording[:metadata][:name] %>
+          <%= recording[:metadata][:name] %>
+        <% else %>
+          <%= recording[:name] %>
+        <% end %>
+      </text>
+      <a><i id="edit-record" class="fa fa-edit align-top ml-2" data-edit-recordid="<%= recording[:recordID] %>"></i></a>
+    </div>
     <div class="small text-muted">
       <%= t("recording.recorded_on", date: recording_date(recording[:startTime])) %>
     </div>

app/views/shared/components/_room_block.html.erb

@@ -13,7 +13,7 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
 
-<div class="card">
+<div id="<%= 'home_room_block' if room == current_user.main_room %>" data-room-uid=<%= room.uid %> class="card">
   <div class="card-body p-1">
     <table class="table table-hover table-vcenter text-wrap table-no-border">
       <tbody class="no-border-top">
@@ -27,7 +27,12 @@
           </span>
         </td>
         <td>
-          <h4 class="m-0 force-text-normal"><%= room.name %></h4>
+          <div id="room-name">
+            <h4 contenteditable="false" class="m-0 force-text-normal" ><%= room.name %></h4>
+          </div>
+          <div id="room-name-editable" style="display: none">
+            <input id="room-name-editable-input" class="form-control input-sm w-100 h-4" value="<%= room.name %>">
+          </div>
           <div class="small text-muted">
             <% if room.sessions > 0 %>
               <i><%= t("room.last_session", session: recording_date(room.last_session)) %></i>
@@ -47,6 +52,9 @@
                 <i class="dropdown-icon fas fa-cog"></i> <%= t("room.settings") %>
               <% end %>
               -->
+              <a href="" id="rename-room-button" class="dropdown-item">
+                <i class="dropdown-icon far fa-edit"></i> <%= t("rename") %>
+              </a>
               <a href="" data-toggle="modal" data-target="#deleteRoomModal_<%= room.uid %>"class="dropdown-item">
                 <i class="dropdown-icon far fa-trash-alt"></i> <%= t("delete") %>
               </a>