D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ui

This commit is contained in:
Michele Artini 2022-06-22 15:47:19 +02:00
parent 4d6bc4b327
commit e4e3ea6110
5 changed files with 133 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dnet-is-application/src/main/java/eu/dnetlib/is/vocabulary/VocabularyRestController.java
View File

@ -49,7 +49,7 @@ public class VocabularyRestController extends AbstractDnetController {
public List<Vocabulary> listVocs() { public List<Vocabulary> listVocs() {
return vocabularyRepository.findAll() return vocabularyRepository.findAll()
.stream() .stream()
.sorted((v1, v2) -> StringUtils.compare(v1.getName(), v2.getName())) .sorted((v1, v2) -> StringUtils.compareIgnoreCase(v1.getId(), v2.getId()))
.collect(Collectors.toList()); .collect(Collectors.toList());
} }

21
apps/dnet-is-application/src/main/resources/static/js/vocabularies.js
View File

@ -24,14 +24,23 @@ app.controller('vocabulariesController', function($scope, $http) {
$scope.prepareEditVoc = function(voc) { $scope.prepareEditVoc = function(voc) {
$scope.mode = 'edit'; $scope.mode = 'edit';
$scope.tmpVoc = { $scope.tmpVoc = angular.copy(voc);
'id' : voc.id,
'name' : voc.name,
'description' : voc.description
};
} }
$scope.saveVocabulary = function(voc) { $scope.saveVocabulary = function(voc) {
if ($scope.mode == 'new') {
var found = false;
angular.forEach($scope.vocabularies, function(v) {
if (voc.id == v.id) { found = true; };
});
if (found) {
alert("Insertion failed: vocabulary already exists !");
return;
}
}
$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"; $http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
$http.post('./api/vocs/?' + $.now(), voc).then(function successCallback(res) { $http.post('./api/vocs/?' + $.now(), voc).then(function successCallback(res) {
$scope.vocabularies = res.data; $scope.vocabularies = res.data;

46
apps/dnet-is-application/src/main/resources/static/js/vocabularyEditor.js
View File

@ -3,6 +3,10 @@ var app = angular.module('vocabularyApp', []);
app.controller('vocabularyController', function($scope, $http, $location) { app.controller('vocabularyController', function($scope, $http, $location) {
$scope.terms = []; $scope.terms = [];
$scope.vocId = vocId(); $scope.vocId = vocId();
$scope.editTermCode = '';
$scope.tmpTerm = {};
$scope.mode = '';
$scope.currTerm = [];
$scope.reload = function() { $scope.reload = function() {
$http.get('./api/vocs/'+ encodeURIComponent($scope.vocId) + '/terms?' + $.now()).then(function successCallback(res) { $http.get('./api/vocs/'+ encodeURIComponent($scope.vocId) + '/terms?' + $.now()).then(function successCallback(res) {
@ -11,17 +15,53 @@ app.controller('vocabularyController', function($scope, $http, $location) {
alert('ERROR: ' + res.data.message); 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' : '',
'englishName' : '',
'nativeName' : '',
'synonyms' : []
};
}
$scope.prepareEditTerm = function(term) {
$scope.mode = 'edit';
$scope.editTermCode = term.code;
$scope.tmpTerm = angular.copy(term);
}
$scope.newTerm = function(code, englishName, nativeName) { $scope.saveTerm = function(term) {
$http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"; $http.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
alert("TO SAVE HERE - " + term.code);
//TODO //TODO
if ($scope.editTermCode != '' && $scope.editTermCode != $scope.tmpTerm.code) {
$scope.callDeleteTerm($scope.editTermCode);
}
}; };
$scope.deleteTerm = function(code) { $scope.deleteTerm = function(code) {
if (confirm("Are you sure ?")) { if (confirm("Are you sure ?")) {
//TODO $scope.callDeleteTerm(code);
} }
}; };
$scope.callDeleteTerm = function(code) {
alert("TO DELETE HERE - " + code);
// TODO
};
$scope.reload(); $scope.reload();
}); });

4
apps/dnet-is-application/src/main/resources/static/vocabularies.html
View File

@ -11,6 +11,10 @@
td { td {
vertical-align: middle !important; vertical-align: middle !important;
} }
label {
font-weight: bold;
}
</style> </style>
<body ng-app="vocabulariesApp" ng-controller="vocabulariesController"> <body ng-app="vocabulariesApp" ng-controller="vocabulariesController">

73
apps/dnet-is-application/src/main/resources/templates/vocabularyEditor.html
View File

@ -11,6 +11,9 @@
td { td {
vertical-align: middle !important; vertical-align: middle !important;
} }
label {
font-weight: bold;
}
</style> </style>
<script th:inline="javascript"> <script th:inline="javascript">
@ -31,6 +34,10 @@
<b>Name: </b><span th:text="${vocName}"></span><br /> <b>Name: </b><span th:text="${vocName}"></span><br />
<b>Description: </b><span th:text="${vocDesc}"></span> <b>Description: </b><span th:text="${vocDesc}"></span>
</p> </p>
<hr />
<p>
<a href="javascript:void(0)" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</a>
</p>
<p ng-show="terms.length > 0"> <p ng-show="terms.length > 0">
<input type="text" class="form-control form-control-sm" ng-model="termFilter" placeholder="Filter..."/> <input type="text" class="form-control form-control-sm" ng-model="termFilter" placeholder="Filter..."/>
@ -57,15 +64,75 @@
<th>{{t.code}}</th> <th>{{t.code}}</th>
<td>{{t.englishName}}</td> <td>{{t.englishName}}</td>
<td>{{t.nativeName}}</td> <td>{{t.nativeName}}</td>
<td>{{t.synonyms.length}} synonym(s)</td> <td>
<td align="right"><button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.id)">delete</button></td> <a href="javascript:void(0)"
data-toggle="modal" data-target="#showSynonymsModal"
ng-show="t.synonyms.length > 0"
ng-click="setCurrTerm(t)">{{t.synonyms.length}} synonym(s)</a>
<span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</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> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </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>English Name</label>
<input type="text" class="form-control" ng-model="tmpTerm.englishName" />
</div>
<div class="form-group">
<label>Native Name</label>
<input type="text" class="form-control" ng-model="tmpTerm.nativeName" />
</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)">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="showSynonymsModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Synonyms of {{currTerm.code}}</h4>
</div>
<div class="modal-body">
<div ng-repeat="s in currTerm.synonyms">
<span class="badge badge-primary" >{{s}}</span>
<br />
</div>
</div>
</div>
</div>
</div>
</body> </body>
<script src="common/js/jquery.min.js"></script> <script src="common/js/jquery.min.js"></script>