Skip to content

Commit 2a827fa

Browse files
author
Max Burnette
committed
initial stub implementation of selection features
1 parent 7c5d553 commit 2a827fa

File tree

4 files changed

+162
-44
lines changed

4 files changed

+162
-44
lines changed

‎app/views/datasets/filesAndFolders.scala.html‎

Lines changed: 124 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@(dataset: Dataset, currentFolder: Option[String], foldersList: List[Folder], folderHierarchy: List[Folder], filepage: Int, next: Boolean, fileList:List[File], fileComments: Map[UUID, Int], space: Option[String], filter: Option[String])(implicit user: Option[models.User])
1+
@(dataset: Dataset, currentFolder: Option[String], foldersList: List[Folder], folderHierarchy: List[Folder],
2+
filepage: Int, next: Boolean, fileList:List[File], fileComments: Map[UUID, Int], space: Option[String],
3+
filter: Option[String])(implicit user: Option[models.User])
24

35
<!-- Breadcrumbs -->
46
@if(folderHierarchy.length > 0 ) {
@@ -27,47 +29,126 @@
2729
});
2830
});
2931
</script>
30-
<!--label class="sortchoice" for="filename-filter">Filter:-->
31-
<table width=100%"">
32-
<td width="40%">
33-
<div class="input-group">
34-
<!-- TODO: Should the filter value reset when folder level changes? -->
35-
<input type="text" class="form-horizontal form-control" id="filename-filter" placeholder="Search folder and file names..."
36-
value="@filter.getOrElse("")"
37-
onchange="getUpdatedFilesAndFolders()">
38-
<div class="input-group-btn">
39-
<button class="btn btn-default" onclick="getUpdatedFilesAndFolders()">
40-
<span class="glyphicon glyphicon-search"></span></button>
41-
</div>
42-
</div>
43-
</td>
44-
<td width="30%">
45-
<div id="filter-box-value">
46-
&nbsp;
47-
@if(filter.getOrElse("")!="") {
48-
Filtering by <b>@filter.get</b>
49-
}
32+
33+
<table width=100%"">
34+
<td width="30%">
35+
<div class="input-group">
36+
<!-- TODO: Should the filter value reset when folder level changes? -->
37+
<input type="text" class="form-horizontal form-control" id="filename-filter" placeholder="Search folder and file names..."
38+
value="@filter.getOrElse("")"
39+
onchange="getUpdatedFilesAndFolders()">
40+
<div class="input-group-btn">
41+
<button class="btn btn-default" onclick="getUpdatedFilesAndFolders()">
42+
<span class="glyphicon glyphicon-search"></span></button>
5043
</div>
51-
</td>
52-
<td width="30%">
53-
<label class="sortchoice" for="js-sort-single">Sort By:
54-
<select class="js-sort-single">
55-
<option value="dateN">Newest</option>
56-
<option value="dateO">Oldest</option>
57-
<option value="titleA">Title (A-Z)</option>
58-
<option value="titleZ">Title (Z-A)</option>
59-
<option value="sizeL">Size (L)</option>
60-
<option value="sizeS">Size (S)</option>
61-
</select>
62-
</td>
63-
</table>
44+
</div>
45+
</td>
46+
<td width="20%">
47+
<div id="filter-box-value">
48+
&nbsp;
49+
@if(filter.getOrElse("")!="") {
50+
Filtering by <b>@filter.get</b>
51+
}
52+
</div>
53+
</td>
54+
<td width="20%" >
55+
<div id="selected-count-box"></div>
56+
</td>
57+
<td width="30%">
58+
<label class="sortchoice" for="js-sort-single">Sort By:
59+
<select class="js-sort-single">
60+
<option value="dateN">Newest</option>
61+
<option value="dateO">Oldest</option>
62+
<option value="titleA">Title (A-Z)</option>
63+
<option value="titleZ">Title (Z-A)</option>
64+
<option value="sizeL">Size (L)</option>
65+
<option value="sizeS">Size (S)</option>
66+
</select>
67+
</label>
68+
</td>
69+
</table>
6470

71+
</div>
72+
} else {
73+
<!--Still want to show multiselect box even without sorting-->
74+
<div id="selected-count-box"></div>
75+
}
6576

77+
<script type="text/javascript">
78+
function updateSelectedFileCount() {
79+
var selected = $.cookie('[email protected]');
80+
if (selected) {
81+
var fileUUIDs = selected.split(',');
82+
//$('#selected-count-box').html('Marked Files (<b>'+fileUUIDs.length+'</b>)')
83+
$('#selected-count-box').html('<div class="dropdown"><a href="#" class="dropdown-toggle" ' +
84+
'data-toggle="dropdown" aria-expanded="false"> Marked Files (<b>'+fileUUIDs.length+'</b>)' +
85+
'<b class="caret"></b></a><ul class="dropdown-menu"><li>' +
86+
'<a onclick="deleteSelectedFiles();">Delete All</a></li></ul>' +
87+
'</div>')
88+
} else {
89+
$('#selected-count-box').html('Marked Files (<b>0</b>)')
90+
}
91+
}
6692

93+
function deleteSelectedFiles() {
94+
console.log("Are you sure?");
95+
confirmDeleteMarked('@dataset.id');
96+
}
6797

68-
</label>
69-
</div>
70-
}
98+
$(document).ready(function() {
99+
$('.fileselect').click(function() {
100+
var file_id = $(this).data("id");
101+
102+
if ($("a[data-id='" + file_id + "'] span.glyphicon").hasClass('glyphicon-plus')) {
103+
// SELECT THE FILE
104+
// TODO: Add Clear All option
105+
var selected = $.cookie('[email protected]');
106+
if (selected) {
107+
if (selected.indexOf(file_id) == -1)
108+
selected += ","+file_id;
109+
} else {
110+
selected = file_id;
111+
}
112+
$.cookie('[email protected]', selected);
113+
114+
$("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-plus');
115+
$("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-ok');
116+
updateSelectedFileCount();
117+
} else {
118+
// DESELECT THE FILE
119+
var selected = $.cookie('[email protected]');
120+
if (selected && selected.indexOf(file_id) > -1) {
121+
selected = selected.replace(file_id+',', '').replace(','+file_id, '').replace(file_id, '');
122+
$.cookie('[email protected]', selected, {expires: 14});
123+
}
124+
125+
$("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-ok');
126+
$("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-plus');
127+
updateSelectedFileCount();
128+
// TODO: plain jquery cookies? logout could still see them. play uses key
129+
// TODO: show only marked files
130+
// TODO: Downloading selected files as Zip - look at downloading folders tasks
131+
// make separate tasks for my SIMPL task for a sprint with more granularity
132+
133+
// TODO: convert selection datasets to a collection
134+
// TODO: Selections become Favorites
135+
// TODO: recently viewed list?
136+
}
137+
});
138+
139+
// Check cookie for any selected files in this dataset and update icons + toolbar
140+
var selected = $.cookie('[email protected]');
141+
if (selected) {
142+
var fileUUIDs = selected.split(',');
143+
for (idx in fileUUIDs) {
144+
file_id = fileUUIDs[idx];
145+
$("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-plus');
146+
$("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-ok');
147+
}
148+
updateSelectedFileCount();
149+
}
150+
});
151+
</script>
71152

72153
<!-- Show message when the folder is empty -->
73154
<div style="display: none" id="empty-folder-div"><h4>
@@ -91,8 +172,12 @@
91172

92173
<!-- Files list -->
93174
@currentFolder match {
94-
case None => { @files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.dataset, dataset.id), dataset.folders.length > 0) }
95-
case Some(s) => { @files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.folder, UUID(s)), dataset.folders.length > 0)}
175+
case None => {
176+
@files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.dataset, dataset.id),
177+
dataset.folders.length > 0) }
178+
case Some(s) => {
179+
@files.grid(fileList, fileComments, dataset.id, space, ResourceRef(ResourceRef.folder, UUID(s)),
180+
dataset.folders.length > 0) }
96181
}
97182

98183
<div class="row">

‎app/views/files/grid.scala.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@
44

55
<div class="row" id="tile-view">
66
<div class="col-md-12">
7-
87
@filesList.map { file =>
98
@if(parent.resourceType == ResourceRef.folder) {
109
@files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, Some(parent.id.stringify), showMove)
1110
} else {
1211
@files.listitem(file, (routes.Datasets.dataset(dsId)), Some(dsId.stringify), space, None,showMove)
1312
}
14-
1513
}
16-
1714
</div>
1815
</div>

‎app/views/files/listitem.scala.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
@import _root_.util.Formatters.humanReadableByteCount
44
<div class="panel panel-default file-panel" id="@file.id-listitem">
55
<div class="panel-body">
6+
@if(user.isDefined) {
7+
<a href="javascript: void(0)" title="Click to mark file for bulk actions" class="pull-right fileselect" data-id="@file.id">
8+
<span class="glyphicon glyphicon-plus"></span>
9+
</a>
10+
}
11+
612
<div class="row">
713
<div class="col-md-2 col-sm-2 col-lg-2">
814
@if(!file.thumbnail_id.isEmpty){
@@ -87,8 +93,6 @@ <h3><a href="@(routes.Files.file(file.id, dataset, space, folder))">@file.filena
8793
}
8894
case None => {}
8995
}
90-
91-
9296
</ul>
9397
</div>
9498
</div>

‎public/javascripts/deleteUtils.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,38 @@ function confirmDeleteSelected() {
4848
}
4949
}
5050

51+
function confirmDeleteMarked(datasetId) {
52+
console.log(datasetId);
53+
var selected = $.cookie('selected-files-'+datasetId);
54+
if (selected) {
55+
var msg = "Are you sure you want to delete the selected files?";
56+
57+
var modalHTML = '<div id="confirm-delete" class="modal fade" role="dialog">';
58+
modalHTML += '<div class="modal-dialog">';
59+
modalHTML += '<div class="modal-content">';
60+
modalHTML += '<div class="modal-header">';
61+
modalHTML += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
62+
modalHTML += '<h4 class="modal-title">Confirm</h4>';
63+
modalHTML += '</div>';
64+
modalHTML += '<div class="modal-body">';
65+
modalHTML += '<p>' + msg + '</p>';
66+
modalHTML += '</div>';
67+
modalHTML += '<div class="modal-footer">';
68+
modalHTML += '<button type="button" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>';
69+
modalHTML += '<a type="button" class="btn btn-primary" id="OKModalButton" href="javascript:deleteAllSelections()"><span class="glyphicon glyphicon-ok"></span> OK</a>';
70+
modalHTML += '</div>';
71+
modalHTML += '</div>';
72+
modalHTML += '</div>';
73+
modalHTML += '</div>';
74+
75+
var confirmModal = $(modalHTML);
76+
confirmModal.modal();
77+
confirmModal.modal("show");
78+
} else {
79+
notify("No files currently selected", "warning")
80+
}
81+
}
82+
5183
function confirmDeleteTemplate(message, resourceType, resourceId, isreload, url) {
5284
var modalHTML = '<div id="confirm-delete" class="modal fade" role="dialog">';
5385
modalHTML += '<div class="modal-dialog">';

0 commit comments

Comments
 (0)