filesAndFolders.scala.html

@(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])

@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'>
        <a href="javascript:updatePageAndFolder(0, '')"><span class="glyphicon glyphicon-home"></span></a>
        @folderHierarchy.map { cFolder =>
            > <a href="javascript:updatePageAndFolder(0, '@cFolder.id.stringify')"> @cFolder.displayName</a>
        }
    </h2></div>
}

<!-- Filtering & sorting tools, if enabled -->
@if(play.Play.application().configuration().getBoolean("sortInMemory")) {
    <div>
    <script type="text/javascript">
    $(document).ready(function() {
      $(".js-sort-single").select2({minimumResultsForSearch: Infinity});
      var order = 'dateN';
      if($.cookie('sort-order') != null) {
        order = $.cookie('sort-order').replace(/['"]+/g, '');
      }
      $(".js-sort-single").val(order).trigger("change");
      $(".js-sort-single").on('select2:select', function (evt) {
        $.cookie('sort-order', $(".js-sort-single").val(), { path: '/' });
        updatePageAndFolder(@filepage,'@currentFolder.getOrElse("")', $(".js-sort-single").val());
      });
    });
    </script>

    <table width=100%"">
        <td width="30%">
            <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="20%">
            <div id="filter-box-value">
                &nbsp;
                @if(filter.getOrElse("")!="") {
                    Filtering by <b>@filter.get</b>
                }
            </div>
        </td>
        <td width="20%" >
            <div id="selected-count-box">Marked Files (<b>0</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>
            </label>
        </td>
    </table>

    </div>
} else {
    <!--Still want to show multiselect box even without sorting-->
    <div id="selected-count-box"></div>
}

<script type="text/javascript">
    function updateSelectedFileCount() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            var fileUUIDs = selected.split(',');
            $('#selected-count-box').html('<div class="dropdown"><a href="#" class="dropdown-toggle" ' +
                    'data-toggle="dropdown" aria-expanded="false"> Marked Files (<b>'+fileUUIDs.length+'</b>)' +
                    '<b class="caret"></b></a><ul class="dropdown-menu">' +
                    @* TODO: Need better solution than cookies to support 'Show Only Marked' request
                    '<li><a onclick="showOnlyMarked();"><span class="glyphicon glyphicon-ok"/>&nbsp;Show Only Marked</a></li>' +
                    '<li><a onclick="showAllFiles();"><span class="glyphicon glyphicon-ok"/>&nbsp;Show All Files</a></li>' +
                    *@
                    '<li><a onclick="markVisibleFiles();"><span class="glyphicon glyphicon-check"/>&nbsp;Mark Visible</a></li>' +
                    '<li><a onclick="downloadMarked();"><span class="glyphicon glyphicon-download-alt"/>&nbsp;Download</a></li>' +
                    '<li><a onclick="submitMarked();"><span class="glyphicon glyphicon-send"/>&nbsp;Submit</a></li>' +
                    '<li><a onclick="confirmTagMarked();"><span class="glyphicon glyphicon-tag"/>&nbsp;Tag</a></li>' +
                    '<li><a onclick="confirmDeleteMarked();"><span class="glyphicon glyphicon-trash"/>&nbsp;Delete</a></li>' +
                    '<li><a onclick="clearMarked();"><span class="glyphicon glyphicon-erase"/>&nbsp;Unmark All</a></li></ul>' +
                    '</div>')
        } else {
            $('#selected-count-box').html('<div class="dropdown"><a href="#" class="dropdown-toggle" ' +
                    'data-toggle="dropdown" aria-expanded="false"> Marked Files (<b>0</b>)' +
                    '<b class="caret"></b></a><ul class="dropdown-menu">' +
                    @* TODO: Need better solution than cookies to support 'Show Only Marked' request
                    '<li><a onclick="showOnlyMarked();"><span class="glyphicon glyphicon-ok"/>&nbsp;Show Only Marked</a></li>' +
                    '<li><a onclick="showAllFiles();"><span class="glyphicon glyphicon-ok"/>&nbsp;Show All Files</a></li>' +
                    *@
                    '<li><a onclick="markVisibleFiles();"><span class="glyphicon glyphicon-check"/>&nbsp;Mark Visible</a></li>' +
                    //'<li><a onclick="downloadMarked();"><span class="glyphicon glyphicon-download-alt"/>&nbsp;Download</a></li>' +
                    //'<li><a onclick="submitMarked();"><span class="glyphicon glyphicon-send"/>&nbsp;Submit</a></li>' +
                    //'<li><a onclick="confirmTagMarked();"><span class="glyphicon glyphicon-tag"/>&nbsp;Tag</a></li>' +
                    //'<li><a onclick="confirmDeleteMarked();"><span class="glyphicon glyphicon-trash"/>&nbsp;Delete</a></li>' +
                    //'<li><a onclick="clearMarked();"><span class="glyphicon glyphicon-erase"/>&nbsp;Unmark All</a></li></ul>' +
                    '</div>')
        }
    }

    function markVisibleFiles() {
        var selected = "@{fileList.map(f => f.id.stringify).mkString(",")}";
        $.cookie('selected-files-@dataset.id', selected);
        var fileUUIDs = selected.split(',');
        for (idx in fileUUIDs) {
            file_id = fileUUIDs[idx];
            $("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-plus');
            $("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-ok');
        }
        updateSelectedFileCount();
    }

    function confirmDeleteMarked() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            selected = selected.split(',');
            if (selected.length > 0) {
                var msg = "Are you sure you want to delete "+String(selected.length)+" marked files?";

                var modalHTML = '<div id="confirm-delete" class="modal fade" role="dialog">';
                modalHTML += '<div class="modal-dialog">';
                modalHTML += '<div class="modal-content">';
                modalHTML += '<div class="modal-header">';
                modalHTML += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
                modalHTML += '<h4 class="modal-title">Confirm</h4>';
                modalHTML += '</div>';
                modalHTML += '<div class="modal-body">';
                modalHTML += '<p>' + msg + '</p>';
                modalHTML += '</div>';
                modalHTML += '<div class="modal-footer">';
                modalHTML += '<button type="button" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>';
                modalHTML += '<a type="button" class="btn btn-primary" id="OKModalButton" onclick="deleteAllMarked();" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> OK</a>';
                modalHTML += '</div>';
                modalHTML += '</div>';
                modalHTML += '</div>';
                modalHTML += '</div>';

                var confirmModal = $(modalHTML);
                confirmModal.modal();
                confirmModal.modal("show");
            } else {
                notify("No files currently marked", "warning")
            }
        } else {
            notify("No files currently marked", "warning")
        }
    }

    function deleteAllMarked() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            selected = selected.split(',');
            for (entry in selected) {
                var request = jsRoutes.api.Files.removeFile(selected[entry]).ajax({
                    type: 'DELETE'
                });
                // If this is in request.done, only one ID gets removed in the for loop, so remove them all now
                removeFileFromMarked(selected[entry]);
                request.done(function (response, textStatus, jqXHR) {
                    getUpdatedFilesAndFolders();
                });
                request.fail(function (jqXHR, textStatus, errorThrown){
                    console.error("The following error occured: " + textStatus, errorThrown);
                    notify("Could not delete marked file "+selected[entry]+": " + errorThrown, "error");
                    // Add it back to selected list
                    addFileToMarked(selected[entry]);
                });
            }
        }
    }

    function showOnlyMarked() {
        console.log("Not implemented.")
    }

    // Download selected files as Zip
    function downloadMarked() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            window.open(jsRoutes.api.Datasets.downloadPartial('@dataset.id', selected).url, '_blank');
        } else {
            notify("No files selected.")
        }
    }

    // Submit selected files to extractor
    function submitMarked() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            window.open("@routes.Extractors.submitSelectedExtractions(dataset.id).url", "_self");
        } else {
            notify("No files selected.")
        }
    }

    function confirmTagMarked() {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            var modalHTML = `
            <div id="enter-tag" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Tag All Marked Files</h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                Multiple tags may be entered, separated by commas.
                            </p>
                            <input maxlength="@play.api.Play.configuration.getInt("clowder.tagLength").getOrElse(100)"
                                type="text" id="bulk-tag-selector" class="form-control add-resource" placeholder="Enter a tag...">

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                            <a type="button" class="btn btn-primary" id="OKModalButton" onclick="tagMarked()"><span class="glyphicon glyphicon-ok"></span> OK</a>
                        </div>
                    </div>
                </div>
            </div>
            `;

            var confirmModal = $(modalHTML);
            confirmModal.modal();
            confirmModal.modal("show");
        } else {
            notify("No files currently marked", "warning")
        }
    }

    function tagMarked() {
        var tag = $('#bulk-tag-selector')[0].value;
        if (tag.length > 0) {
            var selected = $.cookie('selected-files-@dataset.id');
            if (selected) {
                selected = selected.split(',');
                for (entry in selected) {
                    var request = jsRoutes.api.Files.addTags(selected[entry]).ajax({
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            "tags": tag.split(',')
                        })
                    });
                    request.done(function (response, textStatus, jqXHR) {
                        getUpdatedFilesAndFolders();
                    });
                    request.fail(function (jqXHR, textStatus, errorThrown) {
                        console.error("The following error occured: " + textStatus, errorThrown);
                        notify("Could not tag marked file " + selected[entry] + ": " + errorThrown, "error");
                    });
                }
            }
        }





        if (tag.length > 0) {
            var request = jsRoutes.api.Selected.tagAll(tag.split(",")).ajax({
                type: 'POST'
            });
            request.done(function (response, textStatus, jqXHR) {
                notify("Tag(s) successfully added.", "success", false, 2000);
            });
            request.fail(function (jqXHR, textStatus, errorThrown){
                console.error("The following error occured: " + textStatus, errorThrown);
                notify("Could not tag selections: " + errorThrown, "error");
            });

        } else {
            console.log("No tag was provided.")
        }
        $("#enter-tag").modal("hide")
    }

    function clearMarked() {
        // Set cookie to empty, redraw the file list to get corrected display
        $.cookie('selected-files-@dataset.id', "");
        getUpdatedFilesAndFolders();
    }

    function addFileToMarked(file_id) {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            if (selected.indexOf(file_id) == -1)
                selected += ","+file_id;
        } else {
            selected = file_id;
        }
        $.cookie('selected-files-@dataset.id', selected);

        $("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-plus');
        $("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-ok');
        updateSelectedFileCount();
    }

    function removeFileFromMarked(file_id) {
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected && selected.indexOf(file_id) > -1) {
            selected = selected.replace(file_id+',', '').replace(','+file_id, '').replace(file_id, '');
            $.cookie('selected-files-@dataset.id', selected, {expires: 14});
        }

        $("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-ok');
        $("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-plus');
        updateSelectedFileCount();
    }

    $(document).ready(function() {
        $('.fileselect').click(function() {
            var file_id = $(this).data("id");
            if ($("a[data-id='" + file_id + "'] span.glyphicon").hasClass('glyphicon-plus')) {
                addFileToMarked(file_id)
            } else {
                removeFileFromMarked(file_id);

            }
        });

        // Check cookie for any selected files in this dataset and update icons + toolbar
        var selected = $.cookie('selected-files-@dataset.id');
        if (selected) {
            var fileUUIDs = selected.split(',');
            for (idx in fileUUIDs) {
                file_id = fileUUIDs[idx];
                $("a[data-id='"+file_id+"'] span.glyphicon").removeClass('glyphicon-plus');
                $("a[data-id='"+file_id+"'] span.glyphicon").addClass('glyphicon-ok');
            }
        }
        updateSelectedFileCount();
    });
</script>

<!-- Show message when the folder is empty -->
<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>
}

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

<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">
        <ul class="pager">
                <!-- The following items have to be links due to the way the list items render them. Ideally, they should be buttons. -->
            @if(filepage > 0) {
                <li class="previous"><a id="prevlink" title="Page backwards" href="javascript:updatePageAndFolder(@(filepage-1), '@currentFolder')"><span class="glyphicon glyphicon-chevron-left"></span>Previous</a></li>
            }
            @if(next) {
                <li class ="next"><a id="nextlink" title="Page forwards"  href="javascript:updatePageAndFolder(@(filepage+1),'@currentFolder')">Next<span class="glyphicon glyphicon-chevron-right"></span></a></li>
            }
        </ul>
    </div>
</div>
<script src="@routes.Assets.at("javascripts/follow-button.js")" type="text/javascript"></script>