From a5413b393a5b3a21cdc742ea0539b04f08169ec5 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Fri, 16 Dec 2022 14:13:14 +0100
Subject: [PATCH] routes

---
 .../java/eu/dnetlib/is/MainController.java    |   9 --
 .../resources/static/contexts/editor.html     |   2 +-
 .../main/resources/static/js/vocabularies.js  | 113 ++++++++++++--
 .../src/main/resources/static/vocs/editor.htm |   0
 .../main/resources/static/vocs/editor.html    | 116 ++++++++++++++
 .../src/main/resources/static/vocs/list.html  |  72 +++++++++
 .../resources/templates/vocabularies.html     |  90 -----------
 .../resources/templates/vocabularyEditor.html | 146 ------------------
 .../src/main/resources/templates/vocs.html    |  17 ++
 libs/dnet-is-common/TODO.txt                  |   4 +
 10 files changed, 311 insertions(+), 258 deletions(-)
 delete mode 100644 apps/dnet-is-application/src/main/resources/static/vocs/editor.htm
 create mode 100644 apps/dnet-is-application/src/main/resources/static/vocs/editor.html
 delete mode 100644 apps/dnet-is-application/src/main/resources/templates/vocabularies.html
 delete mode 100644 apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
 create mode 100644 apps/dnet-is-application/src/main/resources/templates/vocs.html
 create mode 100644 libs/dnet-is-common/TODO.txt

diff --git a/apps/dnet-is-application/src/main/java/eu/dnetlib/is/MainController.java b/apps/dnet-is-application/src/main/java/eu/dnetlib/is/MainController.java
index 2f2842c0..a723f456 100644
--- a/apps/dnet-is-application/src/main/java/eu/dnetlib/is/MainController.java
+++ b/apps/dnet-is-application/src/main/java/eu/dnetlib/is/MainController.java
@@ -15,7 +15,6 @@ import org.springframework.web.bind.annotation.RequestParam;
 import eu.dnetlib.data.is.context.repository.ContextRepository;
 import eu.dnetlib.data.is.resource.model.ResourceType;
 import eu.dnetlib.data.is.resource.repository.ResourceTypeRepository;
-import eu.dnetlib.data.is.vocabulary.model.Vocabulary;
 import eu.dnetlib.data.is.vocabulary.repository.VocabularyRepository;
 import eu.dnetlib.is.info.KeyValue;
 import eu.dnetlib.is.wfs.WfHistoryAjaxController;
@@ -68,14 +67,6 @@ public class MainController {
 	@GetMapping("/contexts")
 	public void contexts() {}
 
-	@GetMapping("/vocabularyEditor")
-	public void vocabularyEditor(@RequestParam final String id, final ModelMap map) {
-		final Vocabulary voc = vocabularyRepository.getById(id);
-		map.put("vocId", voc.getId());
-		map.put("vocName", voc.getName());
-		map.put("vocDesc", voc.getDescription());
-	}
-
 	@GetMapping("/wf_history")
 	public void wfHistory(final ModelMap map,
 		@RequestParam(required = false, defaultValue = "-1") final Long from,
diff --git a/apps/dnet-is-application/src/main/resources/static/contexts/editor.html b/apps/dnet-is-application/src/main/resources/static/contexts/editor.html
index 1f490902..ac36dc61 100644
--- a/apps/dnet-is-application/src/main/resources/static/contexts/editor.html
+++ b/apps/dnet-is-application/src/main/resources/static/contexts/editor.html
@@ -6,7 +6,7 @@
 					data-target="#showParametersModal" ng-click="loadContextParameters()">[show]</a>
 			</p>
 			<p>
-				<a class="btn btn-sm btn-info" href="./resources?type=context">Return to contexts list</a> <a class="btn btn-sm btn-success" href="/api/contexts/{{ctxId}}" target="_blank">Download</a>
+				<a class="btn btn-sm btn-info" href="#!/list">Return to contexts list</a> <a class="btn btn-sm btn-success" href="/api/contexts/{{ctxId}}" target="_blank">Download</a>
 			</p>
 
 			<ul>
diff --git a/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js b/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
index cfbe79a2..4db8384c 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
@@ -1,17 +1,24 @@
-var app = angular.module('vocabulariesApp', []);			
+var app = angular.module('vocabulariesApp', ['ngRoute']);			
 
-app.controller('vocabulariesController', function($scope, $http) {			
+
+app.config(['$routeProvider', function($routeProvider) {
+	$routeProvider
+ 		.when('/list', { templateUrl: 'vocs/list.html', controller: 'vocListController' })
+		.when('/edit', { templateUrl: 'vocs/editor.html', controller: 'vocEditorController' })
+  		.otherwise({ redirectTo: '/list' });
+ 	}
+]);
+
+app.controller('vocListController', function($scope, $http, $location) {			
 	$scope.vocabularies = [];
 	$scope.tmpVoc = {};
 	$scope.mode = '';		
-				
-	$scope.reload = function() {			
-		$http.get('./ajax/vocs/?' + $.now()).then(function successCallback(res) {			
-			$scope.vocabularies = res.data;			
-		}, function errorCallback(res) {			
-			alert('ERROR: ' + res.data.message);			
-		});			
-	};
+		
+	$http.get('./ajax/vocs/?' + $.now()).then(function successCallback(res) {			
+		$scope.vocabularies = res.data;			
+	}, function errorCallback(res) {			
+		alert('ERROR: ' + res.data.message);			
+	});			
 	
 	$scope.prepareNewVoc = function() {
 		$scope.mode = 'new';
@@ -60,6 +67,88 @@ app.controller('vocabulariesController', function($scope, $http) {
 			});			
 		}			
 	};			
-
-	$scope.reload();			
+});
+
+app.controller('vocEditorController', function($scope, $http, $location, $routeParams) {			
+	$scope.terms = [];				
+	$scope.vocId = $routeParams.id;
+	$scope.vocInfo = {};
+	$scope.editTermCode = '';
+	$scope.tmpTerm = {};
+	$scope.mode = '';
+	$scope.currTerm = [];
+	
+	$scope.baseUrl = './ajax/vocs/' + encodeURIComponent($scope.vocId);
+	
+	$http.get($scope.baseUrl + '?' + $.now()).then(function successCallback(res) {			
+		$scope.vocInfo = res.data;			
+
+		$http.get($scope.baseUrl + '/terms?' + $.now()).then(function successCallback(res) {			
+			$scope.terms = res.data;			
+		}, function errorCallback(res) {			
+			alert('ERROR: ' + res.data.message);			
+		});			
+	}, function errorCallback(res) {			
+		alert('ERROR: ' + res.data.message);			
+	});			
+	
+	$scope.setCurrTerm = function(term) {
+		$scope.currTerm = angular.copy(term);
+	}
+	
+	$scope.prepareNewTerm = function() {
+		$scope.mode = 'new';
+		$scope.editTermCode = '';
+		$scope.tmpTerm = {
+			'code'     : '',
+			'name'     : '',
+			'encoding' : 'OPENAIRE',
+			'synonyms' : []
+		};
+	}
+
+	$scope.prepareEditTerm = function(term) {
+		$scope.mode = 'edit';
+		$scope.editTermCode = term.code;
+		$scope.tmpTerm = angular.copy(term);
+	}
+	
+					
+	$scope.saveTerm = function(term) {					
+
+		var url = $scope.baseUrl + '/terms?' + $.now();
+		
+		$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
+		$http.post(url, term).then(function successCallback(res) {			
+			if ($scope.editTermCode != '' && $scope.editTermCode != $scope.tmpTerm.code) {
+				var deleteUrl = $scope.baseUrl + '/terms/' + encodeURIComponent($scope.editTermCode) + '?' + $.now();
+				$http.delete(deleteUrl).then(function successCallback(res) {			
+					$scope.terms = res.data;
+					alert("Term replaced");
+				}, function errorCallback(res) {			
+					alert('ERROR: ' + res.data.message);			
+				});
+			} else {
+				$scope.terms = res.data;
+				alert("Term saved");
+			}
+		}, function errorCallback(res) {			
+			alert('ERROR: ' + res.data.message);			
+		});	
+					
+	};			
+
+	$scope.deleteTerm = function(code) {			
+		if (confirm("Are you sure ?")) {			
+			var url = $scope.baseUrl + '/terms/' + encodeURIComponent(code) + '?' + $.now();
+
+			$http.delete(url).then(function successCallback(res) {			
+				$scope.terms = res.data;
+				alert("Term deleted");
+			}, function errorCallback(res) {			
+				alert('ERROR: ' + res.data.message);			
+			});
+		}			
+	};			
+
 });
diff --git a/apps/dnet-is-application/src/main/resources/static/vocs/editor.htm b/apps/dnet-is-application/src/main/resources/static/vocs/editor.htm
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/dnet-is-application/src/main/resources/static/vocs/editor.html b/apps/dnet-is-application/src/main/resources/static/vocs/editor.html
new file mode 100644
index 00000000..95a0d9e0
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/vocs/editor.html
@@ -0,0 +1,116 @@
+
+<div class="container-fluid">
+	<div class="row">
+		<div class="col">
+			<p>
+				<b>Vocabulary ID: </b><span th:text="${vocId}"></span><br /> <b>Vocabulary Name: </b><span th:text="${vocName}"></span><br /> <b>Description: </b><span th:text="${vocDesc}"></span>
+			</p>
+			<p>
+				<a class="btn btn-sm btn-info" href="#!/list">Return to vocabulary list</a>
+				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</button>
+				<a class="btn btn-sm btn-success" th: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>
+
+			<table class="table table-sm table-striped">
+				<thead>
+					<tr>
+						<th style="width: 20%">Code</th>
+						<th style="width: 20%">Name</th>
+						<th style="width: 10%">Encoding</th>
+						<th style="width: 40%">Synonyms</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr ng-show="(terms|filter:termFilter).length == 0">
+						<td colspan="5" class="text-muted">no terms</td>
+					</tr>
+					<tr ng-repeat="t in terms|filter:termFilter">
+						<th>{{t.code}}</th>
+						<td>{{t.name}}</td>
+						<td><span class="badge badge-warning">{{t.encoding}}</span></td>
+						<td><span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span> <span class="badge badge-primary mr-1" ng-repeat="s in t.synonyms">{{s.term}}</span></td>
+						<td align="right">
+							<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)">edit</button>
+							<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+
+<!-- Modals -->
+
+<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
+				<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
+				<button type="button" class="close" data-dismiss="modal">&times;</button>
+			</div>
+			<div class="modal-body">
+				<form>
+					<div class="form-group">
+						<label>Code</label> <input type="text" class="form-control" ng-model="tmpTerm.code" />
+					</div>
+					<div class="form-group">
+						<label>Name</label> <input type="text" class="form-control" ng-model="tmpTerm.name" />
+					</div>
+					<div class="form-group">
+						<label>Encoding</label> <input type="text" class="form-control" ng-model="tmpTerm.encoding" />
+					</div>
+
+					<div class="form-group">
+						<table class="table table-sm table-striped">
+							<thead>
+								<tr>
+									<th>Synonym</th>
+									<th>Encoding</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr ng-show="tmpTerm.synonyms.length == 0">
+									<td colspan="3">0 synonym(s)</td>
+								</tr>
+								<tr ng-repeat="s in tmpTerm.synonyms">
+									<td>{{s.term}}</td>
+									<td>{{s.encoding}}</td>
+									<td align="right"><button class="btn btn-sm btn-danger" type="button" ng-click="tmpTerm.synonyms.splice($index, 1)">
+											<i class="fa fa-trash"></i>
+										</button></td>
+								</tr>
+							</tbody>
+							<tfoot>
+								<tr ng-init="newSynomym=newEncoding=''">
+									<td><input type="text" class="form-control form-control-sm" placeholder="new synomym..." ng-model="newSynomym" /></td>
+									<td><input type="text" class="form-control form-control-sm" placeholder="encoding..." ng-model="newEncoding" /></td>
+									<td align="right">
+										<button type="button" class="btn btn-sm btn-outline-success" ng-click="tmpTerm.synonyms.push({'term': newSynomym, 'encoding': newEncoding}); newSynomym=newEncoding=''" ng-disabled="!newSynomym">
+											<i class="fa fa-plus"></i>
+										</button>
+									</td>
+								</tr>
+							</tfoot>
+
+						</table>
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
+				<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)" ng-disabled="newSynomym || !tmpTerm.code || !tmpTerm.name">Submit</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/apps/dnet-is-application/src/main/resources/static/vocs/list.html b/apps/dnet-is-application/src/main/resources/static/vocs/list.html
index e69de29b..98acfc83 100644
--- a/apps/dnet-is-application/src/main/resources/static/vocs/list.html
+++ b/apps/dnet-is-application/src/main/resources/static/vocs/list.html
@@ -0,0 +1,72 @@
+<div class="container-fluid">
+	<div class="row">
+		<div class="col">
+			<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>
+			<table class="table table-sm table-striped">
+				<thead>
+					<tr>
+						<th style="width: 25%">ID</th>
+						<th style="width: 25%">Name</th>
+						<th>Description</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr ng-show="(vocabularies|filter:vocFilter).length == 0">
+						<td colspan="4" class="text-muted">no vocabularies</td>
+					</tr>
+					<tr ng-repeat="v in vocabularies|filter:vocFilter">
+						<th><a href="#!/edit?id={{v.id}}">{{v.id}}</a></th>
+						<td>{{v.name}}</td>
+						<td>{{v.description}}</td>
+						<td align="right">
+							<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyModal" ng-click="prepareEditVoc(v)">edit</button>
+							<button type="button" class="btn btn-sm btn-danger" ng-click="deleteVocabulary(v.id)">delete</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+
+<!-- Modals -->
+
+<div class="modal fade" tabindex="-1" id="editVocabularyModal">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 class="modal-title" ng-if="mode == 'new'">New vocabulary</h4>
+				<h4 class="modal-title" ng-if="mode == 'edit'">Edit vocabulary</h4>
+				<button type="button" class="close" data-dismiss="modal">&times;</button>
+			</div>
+			<div class="modal-body">
+				<form>
+					<div class="form-group">
+						<label>ID</label> <input ng-show="mode == 'new'" type="text" class="form-control" ng-model="tmpVoc.id" /> <input ng-show="mode == 'edit'" type="text" readonly class="form-control-plaintext"
+							ng-model="tmpVoc.id" />
+					</div>
+					<div class="form-group">
+						<label>Name</label> <input type="text" class="form-control" ng-model="tmpVoc.name" />
+					</div>
+					<div class="form-group">
+						<label>Description</label>
+						<textarea class="form-control" ng-model="tmpVoc.description"></textarea>
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
+				<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveVocabulary(tmpVoc)" ng-disabled="!tmpVoc.id || !tmpVoc.name">Submit</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/apps/dnet-is-application/src/main/resources/templates/vocabularies.html b/apps/dnet-is-application/src/main/resources/templates/vocabularies.html
deleted file mode 100644
index 534edee1..00000000
--- a/apps/dnet-is-application/src/main/resources/templates/vocabularies.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-	<head th:replace="fragments/mainParts.html :: htmlHeader('Vocabularies')"></head>
-	
-	<body ng-app="vocabulariesApp" ng-controller="vocabulariesController">
-	
-		<nav th:replace="fragments/mainParts.html :: mainMenu('Vocabularies')"></nav>
-	
-		<div class="container-fluid">
-			<div class="row">	
-				<div class="col">
-					<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>				
-					<table class="table table-sm table-striped">
-						<thead>
-							<tr>
-								<th style="width: 25%">ID</th>
-								<th style="width: 25%">Name</th>
-								<th>Description</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr ng-show="(vocabularies|filter:vocFilter).length == 0">
-								<td colspan="4" class="text-muted">no vocabularies</td>
-							</tr>
-							<tr ng-repeat="v in vocabularies|filter:vocFilter">
-								<th><a href="vocabularyEditor?id={{v.id}}">{{v.id}}</a></th>
-								<td>{{v.name}}</td>
-								<td>{{v.description}}</td>
-								<td align="right">
-									<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyModal" ng-click="prepareEditVoc(v)" >edit</button>
-									<button type="button" class="btn btn-sm btn-danger" ng-click="deleteVocabulary(v.id)">delete</button>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Modals -->
-		
-		<div class="modal fade" tabindex="-1" id="editVocabularyModal">
-			<div class="modal-dialog modal-lg">
-	 			<div class="modal-content">
-					<div class="modal-header">
-						<h4 class="modal-title" ng-if="mode == 'new'">New vocabulary</h4>
-						<h4 class="modal-title" ng-if="mode == 'edit'">Edit vocabulary</h4>
-						<button type="button" class="close" data-dismiss="modal">&times;</button>
-					</div>
-					<div class="modal-body">
-						<form>
-							<div class="form-group">
-								<label>ID</label>
-								<input  ng-show="mode == 'new'" type="text" class="form-control" ng-model="tmpVoc.id" />
-								<input  ng-show="mode == 'edit'" type="text" readonly class="form-control-plaintext" ng-model="tmpVoc.id" />
-							</div>
-							<div class="form-group">
-								<label>Name</label>
-								<input type="text" class="form-control" ng-model="tmpVoc.name" />
-							</div>
-							<div class="form-group">
-								<label>Description</label>
-								<textarea class="form-control" ng-model="tmpVoc.description"></textarea>
-							</div>
-						</form>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
-						<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveVocabulary(tmpVoc)" ng-disabled="!tmpVoc.id || !tmpVoc.name">Submit</button>
-					</div>
-				</div>
-			</div>
-		</div>
-			
-	</body>
-	
-	<th:block th:replace="fragments/mainParts.html :: scripts"></th:block>
-
-	<script src="js/vocabularies.js"></script>
-</html>
\ No newline at end of file
diff --git a/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html b/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
deleted file mode 100644
index 1afb641c..00000000
--- a/apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
+++ /dev/null
@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-	<head th:replace="fragments/mainParts.html :: htmlHeader('Vocabulary Editor')"></head>
-
-	<script th:inline="javascript">
-		/*<![CDATA[*/
-		function vocId() { return /*[[${vocId}]]*/ ''; }
-		/*]]>*/
-	</script>
-	
-	
-	<body ng-app="vocabularyApp" ng-controller="vocabularyController">
-	
-		<nav th:replace="fragments/mainParts.html :: mainMenu('Vocabulary Editor')"></nav>
-	
-		<div class="container-fluid">
-			<div class="row">	
-				<div class="col">
-					<p>
-						<b>Vocabulary ID: </b><span th:text="${vocId}"></span><br />
-						<b>Vocabulary Name: </b><span th:text="${vocName}"></span><br />
-						<b>Description: </b><span th:text="${vocDesc}"></span>
-					</p>
-					<p>
-						<a class="btn btn-sm btn-info" href="./resources?type=vocabulary">Return to vocabulary list</a>					
-						<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</button>
-						<a class="btn btn-sm btn-success" th: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>
-							
-					<table class="table table-sm table-striped">
-						<thead>
-							<tr>
-								<th style="width: 20%">Code</th>
-								<th style="width: 20%">Name</th>
-								<th style="width: 10%">Encoding</th>
-								<th style="width: 40%">Synonyms</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr ng-show="(terms|filter:termFilter).length == 0">
-								<td colspan="5" class="text-muted">no terms</td>
-							</tr>
-							<tr ng-repeat="t in terms|filter:termFilter">
-								<th>{{t.code}}</th>
-								<td>{{t.name}}</td>
-								<td><span class="badge badge-warning">{{t.encoding}}</span></td>
-								<td>
-									<span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span>
-									<span class="badge badge-primary mr-1" ng-repeat="s in t.synonyms">{{s.term}}</span>
-								</td>
-								<td align="right">
-									<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)" >edit</button>
-									<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-		
-		<!-- Modals -->
-		
-		<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
-			<div class="modal-dialog modal-lg">
-	 			<div class="modal-content">
-					<div class="modal-header">
-						<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
-						<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
-						<button type="button" class="close" data-dismiss="modal">&times;</button>
-					</div>
-					<div class="modal-body">
-						<form>
-							<div class="form-group">
-								<label>Code</label>
-								<input  type="text" class="form-control" ng-model="tmpTerm.code" />
-							</div>
-							<div class="form-group">
-								<label>Name</label>
-								<input type="text" class="form-control" ng-model="tmpTerm.name" />
-							</div>
-							<div class="form-group">
-								<label>Encoding</label>
-								<input type="text" class="form-control" ng-model="tmpTerm.encoding" />
-							</div>
-							
-							<div class="form-group">
-								<table class="table table-sm table-striped">
-									<thead>
-										<tr>
-											<th>Synonym</th>
-											<th>Encoding</th>
-											<th></th>
-										</tr>
-									</thead>
-									<tbody>
-										<tr ng-show="tmpTerm.synonyms.length == 0">
-										<td colspan="3">0 synonym(s)</td>
-										</tr>
-										<tr ng-repeat="s in tmpTerm.synonyms">
-											<td>{{s.term}}</td>
-											<td>{{s.encoding}}</td>
-											<td align="right"><button class="btn btn-sm btn-danger" type="button" ng-click="tmpTerm.synonyms.splice($index, 1)"><i class="fa fa-trash"></i></button></td>
-										</tr>
-									</tbody>
-									<tfoot>
-										<tr ng-init="newSynomym=newEncoding=''">
-											<td><input type="text" class="form-control form-control-sm" placeholder="new synomym..." ng-model="newSynomym" /></td>
-											<td><input type="text" class="form-control form-control-sm" placeholder="encoding..." ng-model="newEncoding" /></td>
-											<td align="right">
-												<button type="button" class="btn btn-sm btn-outline-success"
-													ng-click="tmpTerm.synonyms.push({'term': newSynomym, 'encoding': newEncoding}); newSynomym=newEncoding=''"
-													ng-disabled="!newSynomym">
-													<i class="fa fa-plus"></i>
-												</button>
-											</td>
-										</tr>											
-									</tfoot>
-									
-								</table>
-							</div>
-						</form>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
-						<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)" ng-disabled="newSynomym || !tmpTerm.code || !tmpTerm.name">Submit</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	
-	</body>
-	
-	<th:block th:replace="fragments/mainParts.html :: scripts"></th:block>
-
-	<script src="js/vocabularyEditor.js"></script>
-</html>
\ No newline at end of file
diff --git a/apps/dnet-is-application/src/main/resources/templates/vocs.html b/apps/dnet-is-application/src/main/resources/templates/vocs.html
new file mode 100644
index 00000000..d2e139b4
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/templates/vocs.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+	<head th:replace="fragments/mainParts.html :: htmlHeader('Vocabularies')"></head>
+	
+	<body ng-app="vocabulariesApp">
+	
+		<nav th:replace="fragments/mainParts.html :: mainMenu('Vocabularies')"></nav>
+	
+		<div ng-view></div>
+			
+	</body>
+	
+	<th:block th:replace="fragments/mainParts.html :: scripts"></th:block>
+
+	<script src="js/vocabularies.js"></script>
+</html>
\ No newline at end of file
diff --git a/libs/dnet-is-common/TODO.txt b/libs/dnet-is-common/TODO.txt
new file mode 100644
index 00000000..6349d133
--- /dev/null
+++ b/libs/dnet-is-common/TODO.txt
@@ -0,0 +1,4 @@
+- Cache
+- Spinner durante il caricamento
+- Astrarre le chiamate Ajax con Spinner
+- Nuove pagine