From 761ad265fa730405af5d78253a8e8715e115c3a1 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Mon, 4 Jul 2022 11:12:06 +0200
Subject: [PATCH] wf history: details

---
 .../src/main/resources/static/js/wf_history.js  | 14 +++++++++++++-
 .../main/resources/templates/wf_history.html    | 17 +++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/dnet-is-application/src/main/resources/static/js/wf_history.js b/apps/dnet-is-application/src/main/resources/static/js/wf_history.js
index 5fc4f251..1ba6fa1b 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/wf_history.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/wf_history.js
@@ -3,6 +3,8 @@ var app = angular.module('wfHistoryApp', []);
 app.controller('wfHistoryController', function($scope, $http) {			
 	$scope.workflows = [];
 	$scope.currentWf = {};
+	$scope.currDetailsKey = '';
+	$scope.currDetailsValue = '';
 	$scope.sortField = 'processId';
 	$scope.sortReverse = false;
 				
@@ -16,8 +18,18 @@ app.controller('wfHistoryController', function($scope, $http) {
 	
 	$scope.setCurrentWf = function(wf) {
 		$scope.currentWf = angular.copy(wf);
+		$scope.currDetailsKey = '';
+		$scope.currDetailsValue = '';
+		$scope.currentWf.arrayDetails = [];
+		angular.forEach(wf.details, function(v,k) {
+			$scope.currentWf.arrayDetails.push({'k':k, 'v':v});
+		});
 	}
-					
+	
+	$scope.setCurrentDetailParam = function(k, v) {
+		$scope.currDetailsKey = k;
+		$scope.currDetailsValue = v;
+	}		
 	
 	$scope.reload();			
 });
diff --git a/apps/dnet-is-application/src/main/resources/templates/wf_history.html b/apps/dnet-is-application/src/main/resources/templates/wf_history.html
index 33e43028..5265ec41 100644
--- a/apps/dnet-is-application/src/main/resources/templates/wf_history.html
+++ b/apps/dnet-is-application/src/main/resources/templates/wf_history.html
@@ -100,11 +100,24 @@
 			<div class="modal-dialog modal-xl">
 	 			<div class="modal-content">
 					<div class="modal-header">
-						<h4 class="modal-title" ng-if="mode == 'new'">Details</h4>
+						<h4 class="modal-title">Details</h4>
 						<button type="button" class="close" data-dismiss="modal">&times;</button>
 					</div>
 					<div class="modal-body">
-						{{currentWf.details}}	
+						<input type="text" class="form-control form-control-sm" ng-model="detailsFilter" placeholder="Filter..."/>
+						
+						<table class="table table-sm table-striped small mt-2" style="table-layout: fixed;">
+							<tr ng-repeat="p in currentWf.arrayDetails | filter:detailsFilter">
+								<th style="width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><a href="javascript:void(0)" ng-click="setCurrentDetailParam(p.k,p.v)">{{p.k}}</a></th>
+								<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{p.v}}</td>
+							</tr>
+						</table>
+						
+						<div class="card card-body bg-light" ng-show="currDetailsKey">
+							<b>{{currDetailsKey}}</b><br />
+							<pre>{{currDetailsValue}}</pre>
+						</div>
+	
 					</div>
 					<div class="modal-footer">
 						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>