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="[email protected]" 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="[email protected]">
+                <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="[email protected]" 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', '#[email protected]', function() {
+                    $('#[email protected]').removeClass("hiddencomplete");
+                    $('#[email protected]').addClass("inline");
+                 }).on('mouseleave', '#[email protected]', function() {
+                    $('#[email protected]').removeClass("inline");
+                    $('#[email protected]').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,