From e90511d61ae0680e10ae0a49eb92cfd09724957d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Tue, 10 Jul 2018 09:46:30 +0200
Subject: [PATCH] feat: Add edit button and open edit modal on click
---
.../webapp/assets/css/annotationStyle.css | 4 +-
.../main/webapp/assets/js/annotationScript.js | 91 ++++++++++++++++---
.../main/webapp/pages/annotation-document.jsp | 33 +++++++
3 files changed, 115 insertions(+), 13 deletions(-)
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index b69d4dc4..3019f607 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -85,7 +85,7 @@ ol {
color: #e6e6e6;
text-decoration: none;
}
-.annotation-header-title {
+.annotation-header-data {
display: flex;
flex-flow: column;
width: calc(100% - 40px);
@@ -123,7 +123,7 @@ ol {
.annotation-footer span {
margin-left: 5px;
}
-.annotation-footer-delete {
+.annotation-footer-edit {
margin-right: 5px;
cursor: pointer;
}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index 7ca85071..60ba08d4 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -44,8 +44,6 @@ $(document).ready(function() {
location.href="givefeedback.jsp?token=" + getUserTokenFromUrl();
});
-
-
/**
* validation of annotation create form inside the modal
*/
@@ -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
* hide modal and build new annotation
@@ -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(){
// clear title
@@ -100,6 +139,16 @@ $(document).ready(function() {
$('#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();
// fetch annotations from server on page start
@@ -220,7 +269,7 @@ function displayAnnotation(annotation) {
// fetch list of annotations
var list = $('#annotations')
- var deleteIcon = "fas fa-trash";
+ var editIcon = "fas fa-edit";
var dateIcon = "fas fa-calendar";
if (isTimestampToday(annotation.timestamp)) {
dateIcon = "fas fa-clock";
@@ -246,7 +295,7 @@ function displayAnnotation(annotation) {
.css('background-color', getUserColor(annotation.userToken))
.append(
// header data
- $('<div>').attr('class', 'annotation-header-title')
+ $('<div>').attr('class', 'annotation-header-data')
.append(
// user
$('<div>').attr('class', 'overflow-hidden')
@@ -264,7 +313,7 @@ function displayAnnotation(annotation) {
$('<i>').attr('class', 'fas fa-bookmark')
)
.append(
- $('<span>').append(annotation.body.title)
+ $('<span>').attr('class', 'annotation-header-data-title').append(annotation.body.title)
)
)
)
@@ -283,22 +332,23 @@ function displayAnnotation(annotation) {
// annotation body
$('<div>').attr('class', 'annotation-body')
.append(
- $('<p>').attr('class', 'overflow-hidden').append(annotation.body.comment)
+ $('<p>').attr('class', 'overflow-hidden annotation-body-text').append(annotation.body.comment)
)
)
.append(
// annotation footer
$('<div>').attr('class', 'annotation-footer')
.append(
- // delete
+ // edit
function () {
if (userToken == annotation.userToken) {
- return $('<div>').attr('class', 'annotation-footer-delete')
+ return $('<div>').attr('class', 'annotation-footer-edit')
.append(
- $('<i>').attr('class', deleteIcon)
+ $('<i>').attr('class', editIcon)
)
.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) {
});
}
+
+
+/**
+ * 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");
+}
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
index 1b1515c1..db090cfc 100644
--- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
@@ -112,6 +112,39 @@
</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">×</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>
</body>
--
GitLab