delete paper

src/main/resources/public/js/papers.js

@@ -1,19 +1,52 @@
 var urlPapers = "/api/1.0/papers";
 var urlPaperStatuses = "/api/1.0/papers/statuses";
+var urlDeletePaper = "/api/1.0/papers/";
 
-function showPapers(papersElement) {
+function showPapers(papersElement, paperRowClass) {
     getFromRest(urlPapers, function (paperList) {
         paperList.forEach(function (paper, index) {
-            $(papersElement).parent().append("<div class='row text-left'>" +
-                "                <div class='col-md-12'>" +
+            $(papersElement).parent().append("<div class='row text-left paper-row'>" +
+                "                <div class='col-md-11'>" +
                 "                <span class='fa-stack fa-1x'>\n" +
                 "                  <i class='fa fa-circle fa-stack-2x " + getPaperStatusClass(paper.status) + "'></i>" +
                 "                  <i class='fa fa-file-text-o fa-stack-1x fa-inverse'></i>" +
                 "                </span>" +
                 "                    <a href='paper?id=" + paper.id + "" +
-                "'><span>" + paper.title + "</span></a>" +
+                "'><span>" + paper.title + "</span></a></div>" +
+                "<div class='col-md-1'>" +
+                "<span class='remove-paper d-none' onclick=\"deletePaper(" + paper.id + ",'" + papersElement + "', '" + paperRowClass + "')\">" +
+                "<i class=\"fa fa-trash\" aria-hidden=\"true\"></i></span>" +
                 "                </div></div>");
         });
+
+        $(paperRowClass).mouseenter(function (event) {
+            var paperRow = $(event.target).closest(paperRowClass);
+            $(paperRow).css("background-color", "#f8f9fa");
+            $(paperRow).find(".remove-paper").removeClass("d-none");
+
+        });
+        $(paperRowClass).mouseleave(function (event) {
+            var paperRow = $(event.target).closest(paperRowClass);
+            $(paperRow).css("background-color", "white");
+            $(paperRow).closest(paperRowClass).find(".remove-paper").addClass("d-none");
+        });
+    });
+}
+
+function deletePaper(id, papersElement, paperRowClass) {
+    $("#remove-paper-modal").modal('show');
+
+    $("#modal-btn-yes").on("click", function () {
+        deleteFromRest(urlDeletePaper + id, function () {
+            showFeedbackMessage("Статья удалена");
+            $(paperRowClass).remove();
+            showPapers(papersElement, paperRowClass);
+        });
+        $("#remove-paper-modal").modal('hide');
+    });
+
+    $("#modal-btn-no").on("click", function () {
+        $("#remove-paper-modal").modal('hide');
     });
 }
 

src/main/resources/templates/papers/papers.html

@@ -28,12 +28,24 @@
         </div>
     </section>
 
+    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-paper-modal">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h8 class="modal-title" id="myModalLabel">Удалить статью?</h8>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" id="modal-btn-yes">Да</button>
+                    <button type="button" class="btn btn-primary" id="modal-btn-no">Нет</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="/js/papers.js"></script>
     <script>
         $(document).ready(function () {
-            showPapers($("#paper-list"));
-            // only for demo
-            //addPaper("название", "DRAFT", "comment", false);
+            showPapers("#paper-list", ".paper-row");
         });
     </script>
 </div>