feat: Add search bar to annotation list

gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css

@@ -17,7 +17,8 @@ ol {
 .rightcolumn {
     float: right;
     width: 25%;
-    display: inline-block;
+    display: flex;
+    flex-flow: column;
     overflow: scroll;
     /* background-color: blue; */
 }
@@ -29,7 +30,9 @@ ol {
     /* background-color: yellow; */
 }
 .rightcontent {
-    margin: 10px;
+    padding: 10px;
+    flex: 1;
+    overflow: scroll;
 }
 .leftcontent {
     max-height: 100%;
@@ -51,7 +54,7 @@ ol {
     background-color: white;
 }
 .annotation-card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
 }
 .annotation-header {
     padding: 5px;
@@ -164,4 +167,9 @@ ol {
     color: black;
     font-weight: bold;
 }
+#annotation-search {
+    width: 100%;
+    padding: 5px;
+    font-size: 11px;
+}
 

gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js

@@ -267,10 +267,30 @@ function displayAnnotation(annotation) {
         dateIcon = "fas fa-clock";
     }
 
+    // declare variables
+    let display, input, filter, user, title, comment;
+    input = $('#annotation-search');
+    filter = input.val().toLowerCase();
+
+    user = annotation.userToken.toLowerCase();
+    title = annotation.body.title.toLowerCase();
+    comment = annotation.body.comment.toLowerCase();
+
+    // hiding based on user, title and comment
+    if (user.indexOf(filter) > -1 ||
+        title.indexOf(filter) > -1 ||
+        comment.indexOf(filter) > -1) {
+        display = ''
+    }
+    else {
+        display = 'none'
+    }
+
     // insert annotation card
     list.prepend(
         // list element
         $('<li>')
+            .css('display', display)
             .attr('class', 'listelement')
             .append(
                 // annotation card
@@ -296,7 +316,7 @@ function displayAnnotation(annotation) {
                                                 $('<i>').attr('class', 'fas fa-user')
                                             )
                                             .append(
-                                                $('<span>').append(annotation.userToken)
+                                                $('<span>').attr('class', 'annotation-header-data-user').append(annotation.userToken)
                                             )
                                     )
                                     .append(
@@ -371,11 +391,9 @@ function displayAnnotation(annotation) {
             .mouseleave(function () {
                 deleteHighlightedText();
             })
-            .append(function () {
-                if ($('#annotations li').filter( ".listelement" ).length > 0) {
-                    return $('<div>').attr('class', 'spacing')
-                }
-            })
+            .append(
+                $('<div>').attr('class', 'spacing')
+            )
     );
 }
 
@@ -791,3 +809,32 @@ function isAnnotationInRange(start, end) {
     }
     return false;
 }
+
+/**
+ * Display or hide annotations based on filter string
+ */
+function searchAnnotation() {
+    // declare variables
+    let input, filter;
+    input = $('#annotation-search');
+    filter = input.val().toLowerCase();
+
+    // iterate over annotation card and hide those who don't match the search query
+    $('#annotations').find('li').each(function () {
+        let user, title, comment;
+        user = $(this).find('.annotation-header-data-user').text().toLowerCase();
+        title = $(this).find('.annotation-header-data-title').text().toLowerCase();
+        comment = $(this).find('.annotation-body-text').text().toLowerCase();
+
+        // hiding based on user, title and comment
+        if (user.indexOf(filter) > -1 ||
+            title.indexOf(filter) > -1 ||
+            comment.indexOf(filter) > -1) {
+            $(this).css('display', '')
+        }
+        else {
+            $(this).css('display', 'none')
+        }
+    });
+
+}

gemeinsamforschen/src/main/webapp/assets/js/annotationWebsocket.js

@@ -8,7 +8,6 @@ function connect(targetId, targetCategory) {
 
     ws.onmessage = function (e) {
         var message = JSON.parse(e.data);
-        console.log(message.from)
 
         if (message.type === "CREATE") {
             // get annotation from server

gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp

@@ -62,6 +62,7 @@
                             </div>
                         </div>
                         <div class="rightcolumn">
+                            <input type="text" id="annotation-search" onkeyup="searchAnnotation()" placeholder="Suchen...">
                             <div class="rightcontent">
                                 <ol id="annotations">
                                 </ol>