From 2977d04205539b684b990618e1ed79b1a16616d7 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Tue, 17 Jan 2023 11:55:59 +0100
Subject: [PATCH] new directives

---
 .../resources/static/html/context_viewer.html |  2 +-
 .../main/resources/static/html/contexts.html  | 11 +++----
 .../resources/static/html/dsm_add_api.html    |  2 +-
 .../main/resources/static/html/dsm_api.html   |  2 +-
 .../resources/static/html/dsm_results.html    | 10 +++---
 .../resources/static/html/dsm_search.html     |  6 ++--
 .../src/main/resources/static/html/info.html  |  2 +-
 .../static/html/parts/page_filter.html        |  4 +++
 .../static/html/parts/page_title.html         |  1 +
 .../main/resources/static/html/protocols.html |  2 +-
 .../main/resources/static/html/resources.html | 10 ++----
 .../resources/static/html/voc_editor.html     |  9 ++----
 .../src/main/resources/static/html/vocs.html  | 11 +++----
 .../resources/static/html/wf_history.html     | 11 +++----
 .../src/main/resources/static/js/is_main.js   | 31 +++++++++++++++++++
 15 files changed, 67 insertions(+), 47 deletions(-)
 create mode 100644 apps/dnet-is-application/src/main/resources/static/html/parts/page_filter.html
 create mode 100644 apps/dnet-is-application/src/main/resources/static/html/parts/page_title.html

diff --git a/apps/dnet-is-application/src/main/resources/static/html/context_viewer.html b/apps/dnet-is-application/src/main/resources/static/html/context_viewer.html
index a1c73d73..6ff22bfe 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/context_viewer.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/context_viewer.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Context Editor</h1>
+<page-title title="Context Editor"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
diff --git a/apps/dnet-is-application/src/main/resources/static/html/contexts.html b/apps/dnet-is-application/src/main/resources/static/html/contexts.html
index 38cf5405..f8ed091d 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/contexts.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/contexts.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Contexts</h1>
+<page-title title="Contexts"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
@@ -7,12 +7,9 @@
 			<p>
 				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editContextModal" ng-click="prepareNewCtx()">create a new context</button>
 			</p>
-			<p ng-show="contexts.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="ctxFilter" placeholder="Filter..." />
-			</p>
-			<p>
-				<span class="text-muted"><b>Number of contexts:</b> {{(contexts | filter:ctxFilter).length}}</span>
-			</p>
+			
+			<page-filter filter="ctxFilter" list="contexts"></page-filter>
+			
 			<table class="table table-sm table-striped">
 				<thead>
 					<tr>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html b/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
index b95bf157..5539d1fa 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Datasource Manager: Add API</h1>
+<page-title title="Datasource Manager: Add API"></page-title>
 
 <div class="container-fluid">
 	<div class="row mt-5">	
diff --git a/apps/dnet-is-application/src/main/resources/static/html/dsm_api.html b/apps/dnet-is-application/src/main/resources/static/html/dsm_api.html
index bef68f7c..35a1e8ee 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/dsm_api.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/dsm_api.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Datasource Manager: API</h1>
+<page-title title="Datasource Manager: API"></page-title>
 
 <div class="container-fluid">
 	<div class="row mt-5">	
diff --git a/apps/dnet-is-application/src/main/resources/static/html/dsm_results.html b/apps/dnet-is-application/src/main/resources/static/html/dsm_results.html
index a0092ff4..5754a8ed 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/dsm_results.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/dsm_results.html
@@ -1,8 +1,10 @@
-<h1 class="ml-3 mb-4 mt-3">Datasource Manager: Results</h1>
+<page-title title="Datasource Manager: Results"></page-title>
 
 <div class="container-fluid">
 	<div class="row mt-5">
 		<div class="col">
+			<page-filter filter="apiFilter" list="results" description="Filter in current page..." total-label="Filtered in current page"></page-filter>
+
 			<p class="text-muted">
 				<span></span><b>Number of results:</b> {{nResults}}<br />
 				<b>Page:</b> <span ng-if="nPages > 0">{{currPage + 1}} / {{nPages}}</span><span ng-if="nPages == 0">- / -</span>
@@ -18,11 +20,7 @@
 					</li>
 				</ul>
 			</nav>
-				
-			<p ng-show="results.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="apiFilter" placeholder="Filter in current page..."/>
-			</p>					
-
+			
 			<div class="card mb-4 small" ng-repeat="r in results|filter:apiFilter">
 				<div class="card-body">
 					<h5 class="card-title" title="{{r.id}}">{{r.name}} 
diff --git a/apps/dnet-is-application/src/main/resources/static/html/dsm_search.html b/apps/dnet-is-application/src/main/resources/static/html/dsm_search.html
index 5921afa6..b49c75a0 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/dsm_search.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/dsm_search.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Datasource Manager: Search</h1>
+<page-title title="Datasource Manager: Search"></page-title>
 
 <div class="container-fluid">
 	<div class="row mt-5">	
@@ -36,7 +36,9 @@
 			</div>
 					
 			<div class="modal-body small">
-				<input type="text" class="form-control input-sm" ng-model="filterBrowseData" placeholder="Filter..." />
+				
+				<page-filter filter="filterBrowseData" list="browseData"></page-filter>
+				
 				<table class="table table-sm table-striped mt-4" style="table-layout: fixed;">
 					<thead>
 						<tr>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/info.html b/apps/dnet-is-application/src/main/resources/static/html/info.html
index 67933729..80b08390 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/info.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/info.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Container Info</h1>
+<page-title title="Container Info"></page-title>
 
 <div class="container-fluid">
 	<div class="row">	
diff --git a/apps/dnet-is-application/src/main/resources/static/html/parts/page_filter.html b/apps/dnet-is-application/src/main/resources/static/html/parts/page_filter.html
new file mode 100644
index 00000000..0f8af4bd
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/html/parts/page_filter.html
@@ -0,0 +1,4 @@
+<p ng-show="list.length > 0">
+	<input type="text" class="form-control form-control-sm" ng-model="filter" placeholder="{{description}}" />
+	<small class="form-text text-muted"><b>{{totalLabel}}:</b> {{(list | filter:filter).length}}</small>
+</p>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/parts/page_title.html b/apps/dnet-is-application/src/main/resources/static/html/parts/page_title.html
new file mode 100644
index 00000000..09f70183
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/html/parts/page_title.html
@@ -0,0 +1 @@
+<h1 class="ml-3 mb-4 mt-3">{{title}}</h1>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/protocols.html b/apps/dnet-is-application/src/main/resources/static/html/protocols.html
index d4c1eb99..fc8820b9 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/protocols.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/protocols.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Harvesting Protocols</h1>
+<page-title title="Harvesting Protocols"></page-title>
 
 <div class="container-fluid">
 		
diff --git a/apps/dnet-is-application/src/main/resources/static/html/resources.html b/apps/dnet-is-application/src/main/resources/static/html/resources.html
index 2a238796..d273d8a6 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/resources.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/resources.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">{{typeDesc.name}}</h1>
+<page-title title="{{typeDesc.name}}"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
@@ -6,12 +6,8 @@
 			<p>
 				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newResourceModal" ng-click="prepareNewResource()">create a new resource</button>
 			</p>
-			<p ng-show="resources.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="resFilter" placeholder="Filter..." />
-			</p>
-			<p>
-				<span class="text-muted"><b>Number of resources:</b> {{(resources | filter:resFilter).length}}</span>
-			</p>
+			
+			<page-filter filter="resFilter" list="resources"></page-filter>
 
 			<div class="card mb-4" ng-repeat="r in resources|filter:resFilter">
 				<div class="card-body small">
diff --git a/apps/dnet-is-application/src/main/resources/static/html/voc_editor.html b/apps/dnet-is-application/src/main/resources/static/html/voc_editor.html
index 245d3184..acb943f2 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/voc_editor.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/voc_editor.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Vocabulary Editor</h1>
+<page-title title="Vocabulary Editor"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
@@ -14,12 +14,7 @@
 				<a class="btn btn-sm btn-success" href="/api/vocs/{{vocId}}/terms" target="_blank">Download</a>
 			</p>
 
-			<p ng-show="terms.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="termFilter" placeholder="Filter..." />
-			</p>
-			<p>
-				<span class="text-muted"><b>Number of terms:</b> {{(terms | filter:termFilter).length}}</span>
-			</p>
+			<page-filter filter="termFilter" list="terms"></page-filter>
 
 			<table class="table table-sm table-striped">
 				<thead>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/vocs.html b/apps/dnet-is-application/src/main/resources/static/html/vocs.html
index 6bda931f..aa6a341a 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/vocs.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/vocs.html
@@ -1,4 +1,4 @@
-<h1 class="ml-3 mb-4 mt-3">Vocabularies</h1>
+<page-title title="Vocabularies"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
@@ -6,12 +6,9 @@
 			<p>
 				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyModal" ng-click="prepareNewVoc()">create a new vocabulary</button>
 			</p>
-			<p ng-show="vocabularies.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="vocFilter" placeholder="Filter..." />
-			</p>
-			<p>
-				<span class="text-muted"><b>Number of vocabularies:</b> {{(vocabularies | filter:vocFilter).length}}</span>
-			</p>
+			
+			<page-filter filter="vocFilter" list="vocabularies"></page-filter>
+			
 			<table class="table table-sm table-striped">
 				<thead>
 					<tr>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/wf_history.html b/apps/dnet-is-application/src/main/resources/static/html/wf_history.html
index 1c19f520..ff362589 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/wf_history.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/wf_history.html
@@ -1,12 +1,11 @@
-<h1 class="ml-3 mb-4 mt-3">Workflow History</h1>
+<page-title title="Workflow History"></page-title>
 
 <div class="container-fluid">
 	<div class="row">
 		<div class="col">
-					
-			<p ng-show="workflows.length > 0">
-				<input type="text" class="form-control form-control-sm" ng-model="wfFilter" placeholder="Filter..."/>
-			</p>					
+		
+			<page-filter filter="wfFilter" list="workflows"></page-filter>
+							
 			<p class="text-muted">
 				<span ng-show="fromDate < 0 && toDate < 0"><b>Recent workflows</b> (max {{maxNumberOfRecentWfs}})</span>
 				<span ng-show="fromDate >= 0 && toDate >= 0"><b>Workflows from </b>{{fromDate | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> {{toDate | date:"yyyy-MM-dd HH:mm:ss"}}</span>
@@ -108,7 +107,7 @@
 					<b>Duration: </b>{{currentWf.duration}}<br />
 				</p>
 
-				<input type="text" class="form-control form-control-sm" ng-model="detailsFilter" placeholder="Filter..."/>
+				<page-filter filter="detailsFilter" list="currentWf.arrayDetails"></page-filter>
 						
 				<table class="table table-sm table-striped small mt-2" style="table-layout: fixed;">
 					<tr ng-repeat="p in currentWf.arrayDetails | filter:detailsFilter">
diff --git a/apps/dnet-is-application/src/main/resources/static/js/is_main.js b/apps/dnet-is-application/src/main/resources/static/js/is_main.js
index 35f182a3..6f05e43f 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/is_main.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/is_main.js
@@ -18,6 +18,37 @@ app.config(['$routeProvider', function($routeProvider) {
  		.otherwise({ redirectTo: '/info' });
 	}
 ]);
+
+app.directive('pageTitle', function() {
+	return {
+		restrict: 'E',
+		scope: { 'title': '@' },
+		templateUrl: './html/parts/page_title.html',
+		link: function(scope, element, attrs) {}
+	};
+});
+
+
+app.directive('pageFilter', function() {
+	return {
+		restrict: 'E',
+		scope: { 
+			'filter'      : '=', 
+			'list'        : '=', 
+			'description' : '@',
+			'totalLabel'  : '@'
+		},
+		templateUrl: './html/parts/page_filter.html',
+		link: function(scope, element, attrs) {
+			if (!scope.description) {
+				scope.description = 'Filter...';
+			}
+			if (!scope.totalLabel) {
+				scope.totalLabel = 'Total';
+			}
+		}
+	};
+});
 	
 app.directive('formTextfield', function() {
 	return {