[CITE-162] Implemented a new View Modal for Giles uploaded and Extracted

citesphere/src/main/java/edu/asu/diging/citesphere/web/user/GilesDocumentController.java

@@ -37,7 +37,7 @@ public class GilesDocumentController {
     public void get(HttpServletResponse response, @PathVariable String itemId, @PathVariable String fileId, Authentication authentication) {
 
         ICitation citation = citationManager.getCitation(itemId);
-        Optional<IGilesUpload> uploadOptional = citation.getGilesUploads().stream().filter(u -> u.getUploadedFile() != null).filter(g -> g.getUploadedFile().getId().equals(fileId)).findFirst();
+        Optional<IGilesUpload> uploadOptional = citation.getGilesUploads().stream().filter(u -> u.getUploadedFile() != null).filter(g -> g.getUploadedFile().getId().equals(fileId) || g.getExtractedText().getId().equals(fileId) || g.getPages().stream().filter(p -> p!=null).anyMatch(a -> a.getImage().getId().equals(fileId) || a.getText().getId().equals(fileId) || a.getOcr().getId().equals(fileId) || a.getAdditionalFiles().stream().filter(f -> f!=null).anyMatch(f -> f.getId().equals(fileId)))).findFirst();
         if (!uploadOptional.isPresent()) {
             response.setStatus(org.apache.http.HttpStatus.SC_NOT_FOUND);
             return;

citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html

@@ -30,8 +30,9 @@
 	});
 
 	$(document).ready(function(){
-
+		
 		$("#uploadFileIcon").click(function() {
+
 	        $("#uploadFileModal").modal('show');
 	    });
 
@@ -75,8 +76,40 @@
 	    $('.btn-nav').each(function() {
 	    	$(this).attr("href", $(this).attr("href") + "&" + queryParams);
 	    })
+
+	    $(".view-link").click(function() {
+           var item = $(this).parent()
+           showFiles('viewUpload', item[0]);
+
+		});
 	});
 
+	function showFiles(modalName, item) {
+
+		var uploadItem = $(item);
+		var modalNameLCase = modalName.toLowerCase();
+
+		$("#uploadedFileName").attr('href', uploadItem.attr("upload-href"));
+		$("#uploadedFileName").text(uploadItem.attr("data-"+modalNameLCase+"-uploadedFile-filename"));
+
+		$("#extractedFileName").attr('href', uploadItem.attr("extractedText-href"));
+		$("#extractedFileName").text(uploadItem.attr("data-"+modalNameLCase+"-extractedText-filename"));
+		$(uploadItem).children().each(function() {
+		   $(this).children().each(function() {
+           		$('.modal-body ul').append('<li class="list-group-item"><i class="icon-giles"></i><a href="'+ $(this).attr("image-href")+'">'+$(this).attr("data-"+modalNameLCase+"-image-filename")+'</a></li>');
+           		$('.modal-body ul').append('<li class="list-group-item"><i class="icon-giles"></i><a href="'+ $(this).attr("pageText-href")+'">'+$(this).attr("data-"+modalNameLCase+"-pageText-filename")+'</a></li>');
+           		$('.modal-body ul').append('<li class="list-group-item"><i class="icon-giles"></i><a href="'+ $(this).attr("pageOcr-href")+'">'+$(this).attr("data-"+modalNameLCase+"-pageOcr-filename")+'</a></li>');
+           		$(this).children().each(function() {
+           			$(this).children().each(function() {
+           				$('.modal-body ul').append('<li class="list-group-item"><i class="icon-giles"></i><a href="'+ $(this).attr("additionalFiles-href")+'">'+$(this).attr("data-"+modalNameLCase+"-additionalFiles-filename")+'</a></li>');
+                   })
+               })
+           })
+       }) 
+
+	   $("#"+modalNameLCase+"Modal").modal('show');
+	}
+
 </script>
 </head>
 
@@ -329,19 +362,71 @@ <h2 style="margin-top: 0">
         <h3 style="margin-top: 0">Files</h3>
 
         <ul class="list-group" >
-	        <li class="list-group-item" th:each="upload:${citation.gilesUploads}">
+	        <li class="list-group-item" th:each="upload, status:${citation.gilesUploads}">
 	        <i class="icon-giles"></i>
+
 	        <span th:if="${upload.uploadedFile?.filename}">
-	        <a th:href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${upload.uploadedFile?.id}|}">[[${upload.uploadedFile?.filename}]]</a>
+	        	<span th:id="|upload${status.index}|" class="upload-item" th:data-viewupload-uploadId="${upload.uploadId}" th:upload-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${upload.uploadedFile?.id}|}" th:data-viewupload-uploadedFile-filename="${upload.uploadedFile?.filename}" th:extractedText-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${upload.extractedText?.id}|}" th:data-viewupload-extractedText-filename="${upload.extractedText?.filename}" >
+
+	        	<th:block th:each="pages, status:${upload.pages}">
+				   <span class="page-item">
+				       <span th:id="|pages${status.index}|" class="page-item" th:data-viewupload-uploadId="${upload.uploadId}" th:image-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${pages.image?.id}|}" th:data-viewupload-image-filename="${pages.image?.filename}" th:pageText-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${pages.text?.id}|}" th:data-viewupload-pageText-filename="${pages.text?.filename}" th:pageOcr-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${pages.ocr?.id}|}" th:data-viewupload-pageOcr-filename="${pages.ocr?.filename}" >
+
+				        <th:block th:each="additionalFiles, status:${pages.additionalFiles}">
+                        <span class="additional-item" th:if="${additionalFiles?.filename}">
+                             <span th:id="|additionalFiles${status.index}|" class="additional-item" th:data-viewupload-uploadId="${upload.uploadId}" th:additionalFiles-href="@{|/auth/group/${zoteroGroupId}/items/${citation.key}/giles/${additionalFiles?.id}|}" th:data-viewupload-additionalFiles-filename="${additionalFiles?.filename}" >
+					 	     </span>
+                        </span>
+                        </th:block>
+                        </span>
+                        </span> 
+                </th:block>
+                <a class="view-link">[[${upload.uploadedFile?.filename}]]</a>
+	        </span>
 	        </span>
 	        <span th:unless="${upload.documentStatus != null && (upload.documentStatus != T(edu.asu.diging.citesphere.model.bib.GilesStatus).SUBMITTED || T(edu.asu.diging.citesphere.model.bib.GilesStatus).NEW)}">
 	        File is being processed... ([[${upload.progressId}]])
 	        </span>
 	        <span th:if="${upload.documentStatus == T(edu.asu.diging.citesphere.model.bib.GilesStatus).FAILED}" class="label label-danger">Failed [[${upload.progressId}]]</span>
 	        <span th:if="${upload.documentStatus == T(edu.asu.diging.citesphere.model.bib.GilesStatus).NEW}" class="label label-default">In Queue</span>
 	        <span th:if="${upload.documentStatus == T(edu.asu.diging.citesphere.model.bib.GilesStatus).SUBMITTED}" class="label label-default">Processing</span>
-	        </li>
+
+
+	       </li>
         </ul>
+
+	    <div class="modal fade" id="viewuploadModal" 
+			tabIndex="-1" role="dialog"
+			aria-labelledby="viewUploadModal" aria-hidden="true">
+			<div class="modal-dialog" role="document">
+            <div class="modal-content">
+               <div class="modal-header">
+                   <h4 class="modal-title" id="viewUploadModal">
+                        Files uploaded to and extracted by Giles
+                    </h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                  <ul class="list-group" >
+                     <li class="list-group-item" >
+                     <i class="icon-giles"></i>
+                     <a id="uploadedFileName"> </a>
+                     </li>
+                     <li class="list-group-item">
+                     <i class="icon-giles"></i>
+                     <a id="extractedFileName"> </a>
+                     </li>
+                   </ul>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button>
+                </div>
+            </div>
+       </div>
+    </div>
+
 	</div>
 
 	</div>