Issue 173 grid view

app/views/datasets/filesAndFolders.scala.html

@@ -3,7 +3,7 @@
         filter: Option[String])(implicit user: Option[models.User])
 
 @import play.api.Play.current
-
+<script src="@routes.Assets.at("javascripts/jquery.cookie.js")" type="text/javascript"></script>
 <!-- Breadcrumbs -->
 @if(folderHierarchy.length > 0 ) {
     <div><h2 id='folderpath'>
@@ -362,23 +362,107 @@ <h4 class="modal-title">Tag All Marked Files</h4>
     <script>$("#empty-folder-div").show();</script>
 }
 
-<!-- Folders list -->
-<div id="folderListDiv">
-    </br>
-    @foldersList.map { folder =>
-        @folders.listitem(folder, dataset.id)
-    }
+<div class="row">
+    <div class="pull-right">
+        <div class="btn-group btn-group-sm">
+            <button id="list-view-btn" type="button" class="btn btn-link" href="#list-view">
+                <span class="glyphicon glyphicon-th-list"></span>
+            </button>
+            <button id="tile-view-btn" type="button" class="btn btn-primary" href="#tile-view">
+                <span class="glyphicon glyphicon-th-large"></span>
+            </button>
+        </div>
+    </div>
+
+    <script type="text/javascript" language="javascript">
+            var viewMode = 'tile';
+            $.cookie.raw = true;
+            $.cookie.json = true;
+            $(function() {
+                $('#tile-view-btn').click(function() {
+                    $('#tile-view').removeClass('hidden');
+                    $('#list-view').addClass('hidden');
+                    $('#tile-view-btn').addClass("btn-primary").removeClass("btn-link");
+                    $('#list-view-btn').addClass("btn-link").removeClass("btn-primary");
+
+                    viewMode = "tile";
+                    $.cookie('view-mode', 'tile', { path: '/' });
+                    console.log("setting tile " + $.cookie('view-mode'));
+                });
+                $('#list-view-btn').click(function() {
+                    $('#tile-view').addClass('hidden');
+                    $('#list-view').removeClass('hidden');
+                    $('#tile-view-btn').addClass("btn-link").removeClass("btn-primary");
+                    $('#list-view-btn').addClass("btn-primary").removeClass("btn-link");
+                    viewMode = "list";
+                    //Utilizing library from https://github.com/carhartl/jquery-cookie/tree/v1.4.1
+                    $.cookie("view-mode", "list", { path: '/' });
+                    console.log("setting list " + $.cookie('view-mode'));
+                });
+            });
+            $(document).ready(function() {
+                console.log("on load, cookies are " + $.cookie('view-mode'));
+                console.log("on load, viewMode is " + viewMode);
+                //Set the cookie, for the case when it is passed in by the parameter
+                $.cookie("view-mode", viewMode, { path: '/' });
+                if (viewMode == "list") {
+                    $('#tile-view').addClass('hidden');
+                    $('#list-view').removeClass('hidden');
+                    $('#list-view-btn').addClass('active');
+                    $('#tile-view-btn').removeClass('active');
+                }
+                else {
+                    $('#tile-view').removeClass('hidden');
+                    $('#list-view').addClass('hidden');
+                    $('#tile-view-btn').addClass('active');
+                    $('#list-view-btn').removeClass('active');
+                }
+            });
+    </script>
+
 </div>
 
-<!-- Files list -->
-@currentFolder match {
-    case None => {
-        @files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.dataset, dataset.id),
-            dataset.folders.length > 0) }
-    case Some(s) => {
-        @files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.folder, UUID(s)),
-            dataset.folders.length > 0) }
-}
+<div class="row hidden" id="list-view">
+        <!-- Folders list -->
+        <div id="folderListDiv">
+        </br>
+            @foldersList.map { folder =>
+                @folders.listitem(folder, dataset.id)
+            }
+        </div>
+
+        <div id="fileListDiv">
+            <!-- Files list -->
+            @currentFolder match {
+            case None => {
+                @fileList.map { file =>
+                    @files.listitem(file, (routes.Datasets.dataset(dataset.id)), Some(dataset.id.stringify), space, None, false)
+                    }
+                }
+            case Some(s) => {
+                @fileList.map { file =>
+                    @files.listitem(file, (routes.Datasets.dataset(dataset.id)), Some(dataset.id.stringify), space, currentFolder, false)
+                    }
+                }
+            }
+        </div>
+</div>
+
+<div class="row active" id="tile-view">
+        <!-- Folders tile -->
+        <div id="folderTileDiv">
+        </br>
+            @foldersList.map { folder =>
+                @folders.tile(folder, dataset.id, "col-lg-4 col-md-4 col-sm-4")
+            }
+        </div>
+        <div id="fileTileDiv">
+            <!-- Files tile -->
+            @fileList.map { file =>
+                @files.tile(file, "col-lg-4 col-md-4 col-sm-4", (routes.Datasets.dataset(dataset.id)), false, false) 
+            }
+        </div>
+</div>
 
 <div class="row">
     <div class="col-md-12">

app/views/files/grid.scala.html

@@ -6,9 +6,11 @@
     <div class="col-md-12">
         @filesList.map { file =>
             @if(parent.resourceType == ResourceRef.folder) {
-                @files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, Some(parent.id.stringify), showMove)
+                @files.tile(file, "col-lg-4 col-md-4 col-sm-4", (routes.Datasets.dataset(dsId)), false)
+                <!-- @files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, Some(parent.id.stringify), showMove) -->
             } else {
-                @files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, None,showMove)
+                @files.tile(file, "col-lg-4 col-md-4 col-sm-4", (routes.Datasets.dataset(dsId)), false)
+                <!-- @files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, None,showMove) -->
             }
         }
     </div>

app/views/files/tile.scala.html

@@ -1,4 +1,4 @@
-@(file: models.File, classes: String, redirect: Call, showFollow: Boolean)(implicit user: Option[models.User])
+@(file: models.File, classes: String, redirect: Call, showFollow: Boolean, showAuthor: Boolean = true)(implicit user: Option[models.User])
 
 @import _root_.util.Formatters.humanReadableByteCount
 @import api.Permission
@@ -8,20 +8,35 @@
         <div class="pull-left">
             <span class="glyphicon glyphicon-file"></span>
         </div>
+        @if(user.isDefined) {
+            <a href="javascript: void(0)" title="Click to mark file for bulk actions" class="pull-right fileselect" data-id="@file.id">
+                <span class="glyphicon glyphicon-plus"></span>
+            </a>
+        }
         <div class="panel-body">
             @if(!file.thumbnail_id.isEmpty){
                 <a href="@(routes.Files.file(file.id))">
                     <img class="img-responsive fit-in-space" src="@(routes.Files.thumbnail(UUID(file.thumbnail_id.toString().substring(5,file.thumbnail_id.toString().length-1))))" alt="Thumbnail of @(file.filename)">
                 </a>
-            }
-            <div class="caption break-word">
+            } else {
                 <h4><a href="@(routes.Files.file(file.id))">@file.filename</a></h4>
+            }
+            <!-- <div class="caption break-word"> -->
                 <ul class="list-unstyled">
-                    <li>Author: <strong>@file.author.fullName</strong></li>
-                    <li>Uploaded: <strong>@file.uploadDate.format("dd MMM, yyyy")</strong></li>
-                    <li>Size: <strong>@humanReadableByteCount(file.length)</strong></li>
+                    @if(showAuthor){
+                        <li>Author: <strong>@file.author.fullName</strong></li>
+                    }
+                    <!-- <li>Uploaded: <strong>@file.uploadDate.format("dd MMM, yyyy")</strong></li> -->
+                    <!-- <li>Size: <strong>@humanReadableByteCount(file.length)</strong></li> -->
+                    <li>
+                        <span>
+                            @if(!file.thumbnail_id.isEmpty){
+                                <a href="@(routes.Files.file(file.id))">@file.filename</a>
+                            }    
+                        </span>
+                    </li>
                 </ul>
-            </div>
+            <!-- </div> -->
         </div>
         <ul class="list-group">
             <li class="list-group-item file-panel-footer">

app/views/folders/listitem.scala.html

@@ -59,6 +59,7 @@ <h3 id="h-edit-@folder.id" class="hiddencomplete">
                                 </div>
                             </li>
                         }
+                    </div>
                 </div>
             </div>
         </div>

app/views/folders/tile.scala.html

@@ -0,0 +1,60 @@
+@(folder: Folder, parentDataset: UUID, classes: String)(implicit user: Option[models.User])
+
+@import api.Permission
+<div class="post-box @classes" id="@folder.id-tile">
+    <div class="panel panel-default folder-panel">
+        <div class="pull-left">
+            <!-- <a href="javascript:updatePageAndFolder(0, '@folder.id.stringify')"> -->
+                <span class="glyphicon glyphicon-folder-close"></span>
+            <!-- </a> -->
+        </div>
+        <div class="panel-body">
+            <div id="folder-title-@folder.id">
+                <h3 id ="@folder.id-name" class="inline">
+                    <a href="javascript:updatePageAndFolder(0, '@folder.id.stringify')">@folder.displayName</a>
+                </h3>
+                @if(Permission.checkPermission(Permission.AddResourceToDataset, ResourceRef(ResourceRef.dataset, parentDataset))) {
+                    <h3 id="h-edit-@folder.id" class="hiddencomplete">
+                        <a id="edit-@folder-id" href="javascript:updateFolderName('@parentDataset', '@folder.id')" title="Click to edit folder name">
+                            <span class ="glyphicon glyphicon-edit" aria-hidden ="true"></span>
+                        </a>
+                    </h3>
+                }
+            </div>
+        </div>
+
+        <ul class="list-group">
+            <li class="list-group-item folder-panel-footer">
+                <span class="glyphicon glyphicon-folder-close"></span> @folder.folders.length
+                <span class="glyphicon glyphicon-file"></span> @folder.files.length
+                @if(user.isDefined) {
+                    @if(Permission.checkPermission(Permission.RemoveResourceFromDataset, ResourceRef(ResourceRef.dataset, parentDataset))){
+                        <button onclick="confirmDeleteResource('folder','folder','@(folder.id)','@(folder.displayName.replace("'","&#39;"))', '@parentDataset', '/')" class="btn btn-link" title="Delete folder">
+                            <span class="glyphicon glyphicon-trash"></span></button>
+                    } else {
+                        <div class="inline" title="No permission to delete the folder">
+                            <button disabled class="btn btn-link"><span class="glyphicon glyphicon-trash"></span></button>
+                        </div>
+                    }
+                }
+            </li>
+        </ul>
+    </div>
+</div>
+<script>
+
+    $(document).ready(function(){
+
+        @if(user.isDefined) {
+            if(@Permission.checkPermission(Permission.AddResourceToDataset, ResourceRef(ResourceRef.dataset, parentDataset))) {
+                 $(document).on('mouseenter', '#folder-title-@folder.id', function() {
+                    $('#h-edit-@folder.id').removeClass("hiddencomplete");
+                    $('#h-edit-@folder.id').addClass("inline");
+                 }).on('mouseleave', '#folder-title-@folder.id', function() {
+                    $('#h-edit-@folder.id').removeClass("inline");
+                    $('#h-edit-@folder.id').addClass("hiddencomplete");
+                 });
+            }
+        }
+    });
+</script>

app/views/metadatald/search.scala.html

@@ -519,7 +519,7 @@ <h1>Search Metadata within Space: "@space.name"</h1>
                 var resource = response.results[i];
                 if (resource.resource_type == "dataset") {
                     var thumbnailId = (resource.thumbnail == null)? "" : jsRoutes.api.Thumbnails.get(resource.thumbnail).url;
-                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_dataset_result")");
+                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_dataset_result_tile")");
                     var html = modalTemplate(
                             {'url': jsRoutes.controllers.Datasets.dataset(resource.id).url,
                                 'name': resource.name,
@@ -531,7 +531,7 @@ <h1>Search Metadata within Space: "@space.name"</h1>
                 }
                 else if (resource.resource_type == "file") {
                     var thumbnailId = (resource.thumbnail == null)? "" : jsRoutes.api.Thumbnails.get(resource.thumbnail).url;
-                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_file_result")");
+                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_file_result_tile")");
                     var html = modalTemplate({
                         'url': jsRoutes.controllers.Files.file(resource.id).url,
                         'name': resource.name,

app/views/searchResults.scala.html

@@ -100,10 +100,18 @@ <h1>Search</h1>
 
     <div class="row top-padding">
         <div class="col-lg-12 col-md-12">
+            <div class="pull-right">
+                <button id="list-view-btn" type="button" class="btn btn-link" href="#list-view">
+                    <span class="glyphicon glyphicon-th-list"></span>
+                </button>
+                <button id="tile-view-btn" type="button" class="btn btn-primary" href="#tile-view">
+                    <span class="glyphicon glyphicon-th-large"></span>
+                </button>
+            </div>
             <div id="resultheader"><h3>Results</h3></div>
             <div id="resultlist"></div>
-            <div id="resultsfooter" style="text-align:center"></div>
         </div>
+        <div id="resultsfooter" style="text-align:center"></div>
     </div>
 
     <script src="@routes.Assets.at("javascripts/handlebars-v1.3.0.js")" type="text/javascript"></script>
@@ -117,8 +125,58 @@ <h1>Search</h1>
         var found_all = false;
         // This is set to true when waiting for an auto-scroll result to avoid duplicating request if user scrolls again
         var searching = false;
+        // view mode
+        var viewMode = 'tile';
+        $.cookie.raw = true;
+        $.cookie.json = true;
+        // search result
+        var searchResult = null;
+
+        // tile vs list
+        $(function() {
+            $('#tile-view-btn').click(function() {
+                $('#tile-view-btn').addClass("btn-primary").removeClass("btn-link");
+                $('#list-view-btn').addClass("btn-link").removeClass("btn-primary");
+
+                $.cookie('view-mode', 'tile', { path: '/' });
+                if (viewMode != 'tile'){
+                    viewMode = "tile";
+                    // not ideal, but searchResult always empty
+                    // console.log("setting list " + $.cookie('view-mode'));
+                    // if (searchResult) {
+                    //     updateResults(searchResult, true);
+                    // }
+                    performNewSearch();
+                }
+            });
+            $('#list-view-btn').click(function() {
+                $('#tile-view-btn').addClass("btn-link").removeClass("btn-primary");
+                $('#list-view-btn').addClass("btn-primary").removeClass("btn-link");
+                //Utilizing library from https://github.com/carhartl/jquery-cookie/tree/v1.4.1
+                $.cookie("view-mode", "list", { path: '/' });
+
+                if(viewMode != 'list'){
+                    viewMode = "list";
+                    performNewSearch();
+                }
+            });
+        });
 
         $(document).ready(function() {
+            // handle viewing mode first
+            console.log("on load, cookies are " + $.cookie('view-mode'));
+            console.log("on load, viewMode is " + viewMode);
+            //Set the cookie, for the case when it is passed in by the parameter
+            $.cookie("view-mode", viewMode, { path: '/search' });
+            if (viewMode == "list") {
+                $('#list-view-btn').addClass('active');
+                $('#tile-view-btn').removeClass('active');
+            }
+            else {
+                $('#tile-view-btn').addClass('active');
+                $('#list-view-btn').removeClass('active');
+            }
+
             // Hitting Enter
             $('#querybox').keyup( function(event) {
                 if (event.keyCode === 13) {
@@ -168,6 +226,9 @@ <h1>Search</h1>
             });
 
             request.done(function(resp, status, err){
+                // save it for later
+                searchResult = resp;
+
                 count += resp.scanned_size;
                 searching = false;
 
@@ -214,7 +275,12 @@ <h1>Search</h1>
                 var thumbnailId = (results[i].thumbnail == null)? "" : jsRoutes.api.Thumbnails.get(results[i].thumbnail).url;
 
                 if (results[i].resource_type == "file") {
-                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_file_result")");
+                    if (viewMode == "list") {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_file_result_list")");
+                    }
+                    else {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_file_result_tile")");
+                    }
                     var html = modalTemplate({
                         'url': jsRoutes.controllers.Files.file(results[i].id).url,
                         'name': results[i].name,
@@ -225,7 +291,12 @@ <h1>Search</h1>
                 }
 
                 if (results[i].resource_type == "dataset") {
-                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_dataset_result")");
+                    if (viewMode == "list") {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_dataset_result_list")");
+                    }
+                    else {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_dataset_result_tile")");
+                    }
                     var html = modalTemplate(
                             {'url': jsRoutes.controllers.Datasets.dataset(results[i].id).url,
                                 'name': results[i].name,
@@ -237,7 +308,12 @@ <h1>Search</h1>
                 }
 
                 if (results[i].resource_type == "collection") {
-                    var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_collection_result")");
+                    if (viewMode == "list") {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_collection_result_list")");
+                    }
+                    else {
+                        var modalTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/metadata/search_collection_result_tile")");
+                    }
                     var html = modalTemplate(
                             {'url': jsRoutes.controllers.Collections.collection(results[i].id).url,
                                 'name': results[i].name,

public/templates/metadata/search_collection_result_tile.handlebars

@@ -0,0 +1,32 @@
+<div class="panel collection-panel col-md-4 col-lg-4 col-sm-4" id="@collection.id-listitem">
+    <div style="margin-left: 10px; margin-right: 10px">
+        <div class="row">
+            <div style="text-align: center">
+            {{#if thumbnail}}
+                <a href="{{url}}">
+                    <img class="img-responsive fit-in-space"
+                         src="{{thumbnail}}"
+                         alt="Thumbnail of {{name}}">
+                </a>
+            {{else}}
+                <a href="{{url}}">
+                    <span class="searchicon glyphicon collection-background"></span>
+                </a>
+            {{/if}}
+            </div>
+            <div>
+                <h4><a href="{{url}}">{{name}}</a></h4>
+                <div class="row">
+                    <div class="col-md-8 col-lg-8 col-sm-8">
+                        <p>
+                            <span>{{created}}</span>
+                        </p>
+                        {{#if description}}
+                            <p class="abstractsummary">{{description}}</p>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

public/templates/metadata/search_dataset_result_tile.handlebars

@@ -0,0 +1,32 @@
+<div class="panel collection-panel col-md-4 col-lg-4 col-sm-4" id="@dataset.id-listitem">
+    <div style="margin-left: 10px; margin-right: 10px">
+        <div class="row">
+            <div style="text-align: center">
+            {{#if thumbnail}}
+                <a href="{{url}}">
+                    <img class="img-responsive fit-in-space"
+                         src="{{thumbnail}}"
+                         alt="Thumbnail of {{name}}">
+                </a>
+            {{else}}
+                <a href="{{url}}">
+                    <span class="searchicon glyphicon glyphicon-briefcase"></span>
+                </a>
+            {{/if}}
+            </div>
+            <div>
+                <h4><a href="{{url}}">{{name}}</a></h4>
+                <div class="row">
+                    <div class="col-md-8 col-lg-8 col-sm-8">
+                        <p>
+                            <span>{{created}}</span>
+                        </p>
+                        {{#if description}}
+                            <p class="abstractsummary">{{description}}</p>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

public/templates/metadata/search_file_result_tile.handlebars

@@ -0,0 +1,29 @@
+<div class="panel collection-panel col-md-4 col-lg-4 col-sm-4" id="@file.id-listitem">
+    <div style="margin-left: 10px; margin-right: 10px">
+        <div class="row">
+            <div style="text-align: center">
+                {{#if thumbnail}}
+                    <a href="{{url}}">
+                        <img class="img-responsive fit-in-space"
+                             src="{{thumbnail}}"
+                             alt="Thumbnail of {{name}}">
+                    </a>
+                {{else}}
+                    <a href="{{url}}">
+                        <span class="searchicon glyphicon glyphicon-file"></span>
+                    </a>
+                {{/if}}
+            </div>
+            <div>
+                <h4><a href="{{url}}">{{name}}</a></h4>
+                <div class="row">
+                    <div class="col-md-8 col-lg-8 col-sm-8">
+                        <p>
+                            <span>{{created}}</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>