Skip to content
Snippets Groups Projects
Commit e90511d6 authored by Sven Kästle's avatar Sven Kästle
Browse files

feat: Add edit button and open edit modal on click

parent 4abef401
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+ 2
− 2
View file @ e90511d6
...@@ -85,7 +85,7 @@ ol { ...@@ -85,7 +85,7 @@ ol {
color: #e6e6e6; color: #e6e6e6;
text-decoration: none; text-decoration: none;
} }
.annotation-header-title { .annotation-header-data {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
width: calc(100% - 40px); width: calc(100% - 40px);
...@@ -123,7 +123,7 @@ ol { ...@@ -123,7 +123,7 @@ ol {
.annotation-footer span { .annotation-footer span {
margin-left: 5px; margin-left: 5px;
} }
.annotation-footer-delete { .annotation-footer-edit {
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
} }
......
gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+ 80
− 11
View file @ e90511d6
...@@ -44,8 +44,6 @@ $(document).ready(function() { ...@@ -44,8 +44,6 @@ $(document).ready(function() {
location.href="givefeedback.jsp?token=" + getUserTokenFromUrl(); location.href="givefeedback.jsp?token=" + getUserTokenFromUrl();
}); });
/** /**
* validation of annotation create form inside the modal * validation of annotation create form inside the modal
*/ */
...@@ -72,6 +70,32 @@ $(document).ready(function() { ...@@ -72,6 +70,32 @@ $(document).ready(function() {
} }
}); });
/**
* validation of annotation edit form inside the modal
*/
$('#annotation-edit-form').validate({
rules: {
title: {
required: true,
maxlength: 120
},
comment: {
required: true,
maxlength: 400
}
},
messages: {
title: {
required: "Ein Titel wird benötigt",
maxlength: "Maximal 120 Zeichen erlaubt"
},
comment: {
required: "Ein Kommentar wird benötigt",
maxlength: "Maximal 400 Zeichen erlaubt"
}
}
});
/** /**
* Save button of the annotation create modal * Save button of the annotation create modal
* hide modal and build new annotation * hide modal and build new annotation
...@@ -91,7 +115,22 @@ $(document).ready(function() { ...@@ -91,7 +115,22 @@ $(document).ready(function() {
}); });
/** /**
* Clear the title and comment input field of the modal * Edit button of the annotation edit modal
* hide modal and alter the annotation
*/
$('#btnEdit').click(function () {
if ($('#annotation-edit-form').valid()) {
// get title and comment from form
var title = $('#annotation-edit-form-title').val();
var comment = $('#annotation-edit-form-comment').val();
// hide and clear the modal
$('#annotation-edit-modal').modal('hide');
}
});
/**
* Clear the title and comment input field of the create modal
*/ */
$('#annotation-create-modal').on('hidden.bs.modal', function(){ $('#annotation-create-modal').on('hidden.bs.modal', function(){
// clear title // clear title
...@@ -100,6 +139,16 @@ $(document).ready(function() { ...@@ -100,6 +139,16 @@ $(document).ready(function() {
$('#annotation-form-comment').val('') $('#annotation-form-comment').val('')
}); });
/**
* Clear the title and comment input field of the edit modal
*/
$('#annotation-edit-modal').on('hidden.bs.modal', function(e){
// clear title
$('#annotation-edit-form-title').val('');
// clear comment
$('#annotation-edit-form-comment').val('')
});
documentText = $('#documentText').html(); documentText = $('#documentText').html();
// fetch annotations from server on page start // fetch annotations from server on page start
...@@ -220,7 +269,7 @@ function displayAnnotation(annotation) { ...@@ -220,7 +269,7 @@ function displayAnnotation(annotation) {
// fetch list of annotations // fetch list of annotations
var list = $('#annotations') var list = $('#annotations')
var deleteIcon = "fas fa-trash"; var editIcon = "fas fa-edit";
var dateIcon = "fas fa-calendar"; var dateIcon = "fas fa-calendar";
if (isTimestampToday(annotation.timestamp)) { if (isTimestampToday(annotation.timestamp)) {
dateIcon = "fas fa-clock"; dateIcon = "fas fa-clock";
...@@ -246,7 +295,7 @@ function displayAnnotation(annotation) { ...@@ -246,7 +295,7 @@ function displayAnnotation(annotation) {
.css('background-color', getUserColor(annotation.userToken)) .css('background-color', getUserColor(annotation.userToken))
.append( .append(
// header data // header data
$('<div>').attr('class', 'annotation-header-title') $('<div>').attr('class', 'annotation-header-data')
.append( .append(
// user // user
$('<div>').attr('class', 'overflow-hidden') $('<div>').attr('class', 'overflow-hidden')
...@@ -264,7 +313,7 @@ function displayAnnotation(annotation) { ...@@ -264,7 +313,7 @@ function displayAnnotation(annotation) {
$('<i>').attr('class', 'fas fa-bookmark') $('<i>').attr('class', 'fas fa-bookmark')
) )
.append( .append(
$('<span>').append(annotation.body.title) $('<span>').attr('class', 'annotation-header-data-title').append(annotation.body.title)
) )
) )
) )
...@@ -283,22 +332,23 @@ function displayAnnotation(annotation) { ...@@ -283,22 +332,23 @@ function displayAnnotation(annotation) {
// annotation body // annotation body
$('<div>').attr('class', 'annotation-body') $('<div>').attr('class', 'annotation-body')
.append( .append(
$('<p>').attr('class', 'overflow-hidden').append(annotation.body.comment) $('<p>').attr('class', 'overflow-hidden annotation-body-text').append(annotation.body.comment)
) )
) )
.append( .append(
// annotation footer // annotation footer
$('<div>').attr('class', 'annotation-footer') $('<div>').attr('class', 'annotation-footer')
.append( .append(
// delete // edit
function () { function () {
if (userToken == annotation.userToken) { if (userToken == annotation.userToken) {
return $('<div>').attr('class', 'annotation-footer-delete') return $('<div>').attr('class', 'annotation-footer-edit')
.append( .append(
$('<i>').attr('class', deleteIcon) $('<i>').attr('class', editIcon)
) )
.click(function () { .click(function () {
deleteAnnotationHandler($(this).closest('li'), annotation.id) // deleteAnnotationHandler($(this).closest('li'), annotation.id)
editAnnotationHandler($(this).closest('.annotation-card'))
}) })
} }
} }
...@@ -528,3 +578,22 @@ function saveNewAnnotation(title, comment, startCharacter, endCharacter) { ...@@ -528,3 +578,22 @@ function saveNewAnnotation(title, comment, startCharacter, endCharacter) {
}); });
} }
/**
* Open edit modal with title and comment from given card
*
* @param card The clicked annotation card
*/
function editAnnotationHandler(card) {
// get title and comment
var title = card.find('.annotation-header-data-title').text();
var comment = card.find('.annotation-body-text').text();
// set title and comment
$('#annotation-edit-form-title').val(title);
$('#annotation-edit-form-comment').val(comment);
// display annotation edit modal
$('#annotation-edit-modal').modal("show");
}
gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
+ 33
− 0
View file @ e90511d6
...@@ -112,6 +112,39 @@ ...@@ -112,6 +112,39 @@
</div> </div>
</div> </div>
</div> </div>
<!-- annotation edit modal -->
<div id="annotation-edit-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header flex">
<h4 class="modal-title flex-one">Annotation bearbeiten</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- modal body -->
<div class="modal-body">
<form id="annotation-edit-form">
<div class="form-group">
<label for="annotation-form-title" class="col-form-label">Titel:</label>
<input type="text" class="form-control" id="annotation-edit-form-title" name="title">
</div>
<div class="form-group">
<label for="annotation-form-comment" class="col-form-label">Kommentar:</label>
<textarea class="form-control resize-vertical" id="annotation-edit-form-comment" name="comment"></textarea>
</div>
</form>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button id="btnEdit" type="button" class="btn btn-success">Bearbeiten</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment