Clean up search box behavior and update Changelog

Author: Max Burnette

CHANGELOG.md

@@ -14,6 +14,7 @@ of these changes a reindex of Elasticsearch is required. This can be started by
 - API add tags endpoint now returns the added tags.
   [CATS-1053](https://opensource.ncsa.illinois.edu/jira/browse/CATS-1053)
 - Ability to search by creator name and email address for all resources.
+- Ability to filter the files and folders in a dataset when sorting is enabled.
 
 ### Fixed
 - Ability to delete tags on file page.

app/controllers/Datasets.scala

@@ -661,17 +661,22 @@ class Datasets @Inject() (
           }
 
         val filteredFiles = filter match {
-          case Some(filt) => files.get(childFiles).found.filter(f => f.filename.contains(filt))
+          case Some(filt) => files.get(childFiles).found.filter(f => f.filename.toLowerCase.contains(filt.toLowerCase))
           case None => files.get(childFiles).found
         }
 
+        val filteredFolders = filter match {
+          case Some(filt) => folders.get(childFolders).found.filter(f => f.name.toLowerCase.contains(filt.toLowerCase))
+          case None => folders.get(childFolders).found
+        }
+
         val (foldersList: List[Folder], limitFileList: List[File]) =
           if (play.Play.application().configuration().getBoolean("sortInMemory")) {
-            (SortingUtils.sortFolders(childFolders.flatMap(f => folders.get(f)), sortOrder).slice(limit * filepageUpdate, limit * (filepageUpdate + 1)),
-              SortingUtils.sortFiles(filteredFiles, sortOrder).slice(limit * filepageUpdate - childFolders.length, limit * (filepageUpdate + 1) - childFolders.length))
+            (SortingUtils.sortFolders(filteredFolders, sortOrder).slice(limit * filepageUpdate, limit * (filepageUpdate + 1)),
+              SortingUtils.sortFiles(filteredFiles, sortOrder).slice(limit * filepageUpdate - filteredFolders.length, limit * (filepageUpdate + 1) - filteredFolders.length))
           } else {
-            (childFolders.reverse.slice(limit * filepageUpdate, limit * (filepageUpdate + 1)).flatMap(f => folders.get(f)),
-              childFiles.reverse.slice(limit * filepageUpdate - childFolders.length, limit * (filepageUpdate + 1) - childFolders.length).flatMap(f => files.get(f)))
+            (folders.get(childFolders.reverse.slice(limit * filepageUpdate, limit * (filepageUpdate + 1))).found,
+              files.get(childFiles.reverse.slice(limit * filepageUpdate - childFolders.length, limit * (filepageUpdate + 1) - childFolders.length)).found)
           }
 
         // Get comment counts per file

app/views/dataset.scala.html

@@ -605,7 +605,6 @@ <h4>Statistics</h4>
 
     $(function() {
             $(window).on('fileDelete hashchange', function() {
-
                 getUpdatedFilesAndFolders();
             });
 

app/views/datasets/filesAndFolders.scala.html

@@ -27,28 +27,56 @@
       });
     });
     </script>
-
     <!--label class="sortchoice" for="filename-filter">Filter:-->
-    <input class="form-horizontal" id="filename-filter" placeholder="Filter filenames..."
-        value="@filter.getOrElse("")"
-        onchange="getUpdatedFilesAndFolders()">
+        <table width=100%"">
+            <td width="40%">
+                <div class="input-group">
+                    <!-- TODO: Should the filter value reset when folder level changes? -->
+                    <input type="text" class="form-horizontal form-control" id="filename-filter" placeholder="Search folder and file names..."
+                    value="@filter.getOrElse("")"
+                    onchange="getUpdatedFilesAndFolders()">
+                    <div class="input-group-btn">
+                        <button class="btn btn-default" onclick="getUpdatedFilesAndFolders()">
+                            <span class="glyphicon glyphicon-search"></span></button>
+                    </div>
+                </div>
+            </td>
+            <td width="30%">
+                <div id="filter-box-value">
+                    &nbsp;
+                    @if(filter.getOrElse("")!="") {
+                        Filtering by <b>@filter.get</b>
+                    }
+                </div>
+            </td>
+            <td width="30%">
+                <label class="sortchoice" for="js-sort-single">Sort By:
+                    <select class="js-sort-single">
+                        <option value="dateN">Newest</option>
+                        <option value="dateO">Oldest</option>
+                        <option value="titleA">Title (A-Z)</option>
+                        <option value="titleZ">Title (Z-A)</option>
+                        <option value="sizeL">Size (L)</option>
+                        <option value="sizeS">Size (S)</option>
+                    </select>
+            </td>
+        </table>
+
+
 
-    <label class="sortchoice" for="js-sort-single">Sort By:
-    <select class="js-sort-single">
-      <option value="dateN">Newest</option>
-      <option value="dateO">Oldest</option>
-      <option value="titleA">Title (A-Z)</option>
-      <option value="titleZ">Title (Z-A)</option>
-      <option value="sizeL">Size (L)</option>
-      <option value="sizeS">Size (S)</option>
-    </select>
 
     </label>
     </div>
 }
 
 <!-- Show message when the folder is empty -->
-<div style="display: none" id="empty-folder-div"><h4>Folder is empty</h4></div>
+<div style="display: none" id="empty-folder-div"><h4>
+    @if(!filter.isEmpty) {
+        No results found
+    } else {
+        Folder is empty
+    }
+</h4></div>
 @if(foldersList.size == 0 && fileList.size == 0 ){
     <script>$("#empty-folder-div").show();</script>
 }