From 3e56318c003b9e6102ebf0bf6da10f4aa3f63da3 Mon Sep 17 00:00:00 2001 From: Hoang Nguyen Date: Fri, 19 Feb 2021 22:35:49 +1000 Subject: [PATCH 1/3] add tile for search --- app/views/datasets/filesAndFolders.scala.html | 116 +++++++++++++++--- app/views/files/grid.scala.html | 6 +- app/views/files/tile.scala.html | 27 ++-- app/views/folders/listitem.scala.html | 1 + app/views/folders/tile.scala.html | 60 +++++++++ app/views/searchResults.scala.html | 84 ++++++++++++- ... search_collection_result_list.handlebars} | 0 .../search_collection_result_tile.handlebars | 32 +++++ ... => search_dataset_result_list.handlebars} | 0 .../search_dataset_result_tile.handlebars | 32 +++++ ...ars => search_file_result_list.handlebars} | 0 .../search_file_result_tile.handlebars | 29 +++++ 12 files changed, 359 insertions(+), 28 deletions(-) create mode 100644 app/views/folders/tile.scala.html rename public/templates/metadata/{search_collection_result.handlebars => search_collection_result_list.handlebars} (100%) create mode 100644 public/templates/metadata/search_collection_result_tile.handlebars rename public/templates/metadata/{search_dataset_result.handlebars => search_dataset_result_list.handlebars} (100%) create mode 100644 public/templates/metadata/search_dataset_result_tile.handlebars rename public/templates/metadata/{search_file_result.handlebars => search_file_result_list.handlebars} (100%) create mode 100644 public/templates/metadata/search_file_result_tile.handlebars diff --git a/app/views/datasets/filesAndFolders.scala.html b/app/views/datasets/filesAndFolders.scala.html index 50775d38b..74976355a 100644 --- a/app/views/datasets/filesAndFolders.scala.html +++ b/app/views/datasets/filesAndFolders.scala.html @@ -3,7 +3,7 @@ filter: Option[String])(implicit user: Option[models.User]) @import play.api.Play.current - + @if(folderHierarchy.length > 0 ) {

@@ -364,23 +364,107 @@

Tag All Marked Files

} - -
-
- @foldersList.map { folder => - @folders.listitem(folder, dataset.id) - } +
+
+
+ + +
+
+ + +
- -@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) } -} + + +
+ +
+
+ @foldersList.map { folder => + @folders.tile(folder, dataset.id, "col-lg-4 col-md-4 col-sm-4") + } +
+
+ + @fileList.map { file => + @files.tile(file, "col-lg-4 col-md-4 col-sm-4", (routes.Datasets.dataset(dataset.id)), false, false) + } +
+
diff --git a/app/views/files/grid.scala.html b/app/views/files/grid.scala.html index 58f19da71..348dbd4e8 100644 --- a/app/views/files/grid.scala.html +++ b/app/views/files/grid.scala.html @@ -6,9 +6,11 @@
@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) + } 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) + } }
diff --git a/app/views/files/tile.scala.html b/app/views/files/tile.scala.html index 5d116ef16..730fa17f8 100644 --- a/app/views/files/tile.scala.html +++ b/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 @@ -13,15 +13,25 @@ Thumbnail of @(file.filename) - } -
+ } else {

@file.filename

+ } +
    -
  • Author: @file.author.fullName
    • -
  • Uploaded: @file.uploadDate.format("dd MMM, yyyy")
    • -
  • Size: @humanReadableByteCount(file.length)
    • + @if(showAuthor){ +
  • Author: @file.author.fullName
    • + } + + +
  • + + @if(!file.thumbnail_id.isEmpty){ + @file.filename + } + +
-
+
} + + + } diff --git a/app/views/folders/listitem.scala.html b/app/views/folders/listitem.scala.html index 8262b8720..64cc71763 100644 --- a/app/views/folders/listitem.scala.html +++ b/app/views/folders/listitem.scala.html @@ -59,6 +59,7 @@

} +
diff --git a/app/views/folders/tile.scala.html b/app/views/folders/tile.scala.html new file mode 100644 index 000000000..3b2d726ef --- /dev/null +++ b/app/views/folders/tile.scala.html @@ -0,0 +1,60 @@ +@(folder: Folder, parentDataset: UUID, classes: String)(implicit user: Option[models.User]) + +@import api.Permission +
+
+
+ + + +
+
+
+

+ @folder.displayName +

+ @if(Permission.checkPermission(Permission.AddResourceToDataset, ResourceRef(ResourceRef.dataset, parentDataset))) { +

+ + + +

+ } +
+
+ +
    +
  • + @folder.folders.length + @folder.files.length + @if(user.isDefined) { + @if(Permission.checkPermission(Permission.RemoveResourceFromDataset, ResourceRef(ResourceRef.dataset, parentDataset))){ + + } else { +
    + +
    + } + } +
    • +
+
+
+ \ No newline at end of file diff --git a/app/views/searchResults.scala.html b/app/views/searchResults.scala.html index df4388f89..bcb90d8b0 100644 --- a/app/views/searchResults.scala.html +++ b/app/views/searchResults.scala.html @@ -97,6 +97,14 @@

Search

+
+ + +

Results

@@ -114,8 +122,60 @@

Search

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: '/search' }); + if (viewMode != 'tile'){ + viewMode = "tile"; + console.log("setting tile " + $.cookie('view-mode')); + // update view if needed + if (searchResult != null) { + updateResults(searchResult, true); + } + } + }); + $('#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: '/search' }); + + if(viewMode != 'list'){ + viewMode = "list"; + console.log("setting list " + $.cookie('view-mode')); + if (searchResult != null) { + updateResults(searchResult, true); + } + } + }); + }); $(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) { @@ -165,6 +225,9 @@

Search

}); request.done(function(resp, status, err){ + // save it for later + searchResult = resp; + count += resp.scanned_size; searching = false; @@ -211,7 +274,12 @@

Search

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, @@ -222,7 +290,12 @@

Search

} 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, @@ -234,7 +307,12 @@

Search

} 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, diff --git a/public/templates/metadata/search_collection_result.handlebars b/public/templates/metadata/search_collection_result_list.handlebars similarity index 100% rename from public/templates/metadata/search_collection_result.handlebars rename to public/templates/metadata/search_collection_result_list.handlebars diff --git a/public/templates/metadata/search_collection_result_tile.handlebars b/public/templates/metadata/search_collection_result_tile.handlebars new file mode 100644 index 000000000..d65f8ee33 --- /dev/null +++ b/public/templates/metadata/search_collection_result_tile.handlebars @@ -0,0 +1,32 @@ +
+
+
+
+ {{#if thumbnail}} + + Thumbnail of {{name}} + + {{else}} + + + + {{/if}} +
+
+

{{name}}

+
+
+

+ {{created}} +

+ {{#if description}} +

{{description}}

+ {{/if}} +
+
+
+
+
+
\ No newline at end of file diff --git a/public/templates/metadata/search_dataset_result.handlebars b/public/templates/metadata/search_dataset_result_list.handlebars similarity index 100% rename from public/templates/metadata/search_dataset_result.handlebars rename to public/templates/metadata/search_dataset_result_list.handlebars diff --git a/public/templates/metadata/search_dataset_result_tile.handlebars b/public/templates/metadata/search_dataset_result_tile.handlebars new file mode 100644 index 000000000..d4827a2b0 --- /dev/null +++ b/public/templates/metadata/search_dataset_result_tile.handlebars @@ -0,0 +1,32 @@ +
+
+
+
+ {{#if thumbnail}} + + Thumbnail of {{name}} + + {{else}} + + + + {{/if}} +
+
+

{{name}}

+
+
+

+ {{created}} +

+ {{#if description}} +

{{description}}

+ {{/if}} +
+
+
+
+
+
\ No newline at end of file diff --git a/public/templates/metadata/search_file_result.handlebars b/public/templates/metadata/search_file_result_list.handlebars similarity index 100% rename from public/templates/metadata/search_file_result.handlebars rename to public/templates/metadata/search_file_result_list.handlebars diff --git a/public/templates/metadata/search_file_result_tile.handlebars b/public/templates/metadata/search_file_result_tile.handlebars new file mode 100644 index 000000000..2d08c77b9 --- /dev/null +++ b/public/templates/metadata/search_file_result_tile.handlebars @@ -0,0 +1,29 @@ +
+
+
+
+ {{#if thumbnail}} + + Thumbnail of {{name}} + + {{else}} + + + + {{/if}} +
+
+

{{name}}

+
+
+

+ {{created}} +

+
+
+
+
+
+
\ No newline at end of file From 7660d3786232291f83fa417b0658781eb7d8b635 Mon Sep 17 00:00:00 2001 From: Hoang Nguyen Date: Sun, 21 Feb 2021 08:18:02 +1000 Subject: [PATCH 2/3] tile view added to search --- app/views/files/tile.scala.html | 8 ++++--- app/views/searchResults.scala.html | 22 +++++++++---------- .../search_collection_result_tile.handlebars | 4 ++-- .../search_dataset_result_tile.handlebars | 4 ++-- .../search_file_result_tile.handlebars | 4 ++-- 5 files changed, 21 insertions(+), 21 deletions(-) diff --git a/app/views/files/tile.scala.html b/app/views/files/tile.scala.html index 730fa17f8..bfea643f7 100644 --- a/app/views/files/tile.scala.html +++ b/app/views/files/tile.scala.html @@ -8,6 +8,11 @@
+ @if(user.isDefined) { + + + + }
@if(!file.thumbnail_id.isEmpty){ @@ -47,9 +52,6 @@

@file.filename

} - - - } diff --git a/app/views/searchResults.scala.html b/app/views/searchResults.scala.html index bcb90d8b0..f20b57266 100644 --- a/app/views/searchResults.scala.html +++ b/app/views/searchResults.scala.html @@ -107,8 +107,8 @@

Search

Results

-
+
@@ -135,28 +135,26 @@

Search

$('#tile-view-btn').addClass("btn-primary").removeClass("btn-link"); $('#list-view-btn').addClass("btn-link").removeClass("btn-primary"); - $.cookie('view-mode', 'tile', { path: '/search' }); + $.cookie('view-mode', 'tile', { path: '/' }); if (viewMode != 'tile'){ viewMode = "tile"; - console.log("setting tile " + $.cookie('view-mode')); - // update view if needed - if (searchResult != null) { - updateResults(searchResult, true); - } + // 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: '/search' }); + $.cookie("view-mode", "list", { path: '/' }); if(viewMode != 'list'){ viewMode = "list"; - console.log("setting list " + $.cookie('view-mode')); - if (searchResult != null) { - updateResults(searchResult, true); - } + performNewSearch(); } }); }); diff --git a/public/templates/metadata/search_collection_result_tile.handlebars b/public/templates/metadata/search_collection_result_tile.handlebars index d65f8ee33..83d3f86a7 100644 --- a/public/templates/metadata/search_collection_result_tile.handlebars +++ b/public/templates/metadata/search_collection_result_tile.handlebars @@ -1,5 +1,5 @@ -
-
+
+
{{#if thumbnail}} diff --git a/public/templates/metadata/search_dataset_result_tile.handlebars b/public/templates/metadata/search_dataset_result_tile.handlebars index d4827a2b0..6b4415414 100644 --- a/public/templates/metadata/search_dataset_result_tile.handlebars +++ b/public/templates/metadata/search_dataset_result_tile.handlebars @@ -1,5 +1,5 @@ -
-
+
+
{{#if thumbnail}} diff --git a/public/templates/metadata/search_file_result_tile.handlebars b/public/templates/metadata/search_file_result_tile.handlebars index 2d08c77b9..ae9b8587d 100644 --- a/public/templates/metadata/search_file_result_tile.handlebars +++ b/public/templates/metadata/search_file_result_tile.handlebars @@ -1,5 +1,5 @@ -
-
+
+
{{#if thumbnail}} From 7e624d13e2770b0b4ef996547b52d65b2e40a4e2 Mon Sep 17 00:00:00 2001 From: Hoang Nguyen Date: Tue, 11 May 2021 00:54:59 +1000 Subject: [PATCH 3/3] fix incorrect handlebar --- app/views/metadatald/search.scala.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/metadatald/search.scala.html b/app/views/metadatald/search.scala.html index eaf3e4311..74844f383 100644 --- a/app/views/metadatald/search.scala.html +++ b/app/views/metadatald/search.scala.html @@ -519,7 +519,7 @@

Search Metadata within Space: "@space.name"

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 @@

Search Metadata within Space: "@space.name"

} 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,