Delete slide button in the Table

apps/table.css

@@ -38,3 +38,15 @@ nav li:not(.active):hover a{
 	color: black !important;
 }
 
+#deleteBtn{
+	margin-left: 0.6em;
+}
+#deleteBtn i{
+	color: white;
+}
+#open-delete{
+	display: inline-flex;
+}
+.DelButton{
+	display: none;
+}

apps/table.html

@@ -222,6 +222,26 @@ <h3 class="text-center h3 mb-0">Available Slides</h3>
 
 	</div>
 
+
+	<!--Delete Modal -->
+	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+			<h5 class="modal-title" id="deleteModalLabel">Delete confirmation</h5>
+			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+				<span aria-hidden="true">&times;</span>
+			</button>
+			</div>
+			<div class="modal-body" id="confirmDeleteContent"></div>
+			<div class="modal-footer">
+			<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+			<button type="button" id='confirmDelete' data-dismiss="modal" class="btn btn-danger">Yes</button>
+			</div>
+		</div>
+		</div>
+	</div>
+
 	<div class="text-center text-white bg-dark p-3" style="position: static;bottom: 0;width: 100%;">
 		<p class="p">Copyright © 2020 caMicroscope</p>
 	</div>
@@ -306,8 +326,9 @@ <h3 class="text-center h3 mb-0">Available Slides</h3>
 							else if (!d[key]) rs.push('')
 							else rs.push(d[key])
 						});
-						const btn = `<button class="btn btn-success" data-id='${rs[0]}' onclick='openView(this)'>Open</button>`
+						const btn = `<div id='open-delete'> <button class="btn btn-success" data-id='${rs[0]}' onclick='openView(this)'>Open</button> <button type='button' class='btn btn-danger DelButton' id='deleteBtn' data-id='${rs[0]}' data-name='${rs[1]}' onclick='deleteSld(this)' data-toggle='modal'> <i class='fas fa-trash-alt' ></i> </button></div>`
 						rs.push(btn);
+						checkUserPermissions();
 						return rs;
 					});
 				} else {
@@ -459,7 +480,42 @@ <h3 class="text-center h3 mb-0">Available Slides</h3>
 			alert('No Data Id');
 		}
 	}
-	//window.addEventListener('resize', ()=>{$('#datatables').stacktable()});
+
+	$(document).ready(function(){
+		checkUserPermissions();
+		$('#deleteModal').on('hidden.bs.modal', function (e) {
+			initialize();
+		  });
+	});
+	function checkUserPermissions(){
+		let userType=getUserType();
+		let permissions;
+		getUserPermissions(userType).then(function(response){
+			return response.json();   
+		}).then(function(data) {
+			// console.log(data);
+			permissions = data;
+			if(permissions.slide.delete == true)
+				$(".DelButton").css("display","block");
+		});
+	}
+	function deleteSld(e) {
+		const oid = e.dataset.id;
+		const oname = e.dataset.name;		
+		const store = new Store('../data/');
+		if (oid) {
+			$('#confirmDeleteContent').html(`Are you sure you want to delete the slide ${oname} with id ${oid} ?`);
+			$('#deleteModal').modal('toggle');
+			$("#confirmDelete").unbind( "click" );
+			$("#confirmDelete").click(function(){
+				store.deleteSlide(oid);
+			});			
+		} else {
+			alert('No Data Id');
+		}
+	}
+
+
 	document.addEventListener('DOMContentLoaded', initialize);
 </script>
 

common/util.js

@@ -793,6 +793,19 @@ function getUserType() {
     return 'Null';
   }
 }
+
+function getUserPermissions(userType) {
+  const url = '/data/User/wcido';
+  const query = {
+    'ut': userType,
+  };
+  return fetch(url + '?' + objToParamStr(query), {
+    method: 'GET',
+    credentials: 'include',
+    mode: 'cors',
+  });
+}
+
 function getUserId() {
   let token_info = parseJwt(getCookie("token"));
   let uid = "";

core/Store.js

@@ -620,6 +620,24 @@ class Store {
       },
     }).then(this.errorHandler);
   }
+
+  /**
+   * delete slide
+   * @param {object} id - the slide object id
+   * @return {promise} - promise which resolves with response
+   **/
+  deleteSlide(id) {
+    const suffix = 'Slide/delete';
+    const url = this.base + suffix;
+    const query = {
+      '_id': id,
+    };
+    return fetch(url + '?' + objToParamStr(query), {
+      method: 'DELETE',
+      credentials: 'include',
+      mode: 'cors',
+    }).then(this.errorHandler);
+  }
 }
 
 try {