search appointment, fix modal, number participant not below 0

src/client/app/css/app.css

@@ -1125,6 +1125,44 @@ h6.in-card {
     font-size: 0.75rem;
 }
 
+.search-box {
+    display: flex;
+    position: relative;
+    margin-right: 20px;
+}
+
+.search-box .fa {
+    font-size: 16px;
+    color: #ccc;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translate(0,-50%);
+
+}
+
+.search-box input {
+    width: 200px;
+    padding-right: 25px;
+}
+
+.right-content {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+@media only screen and (max-width: 500px) {
+   .float-right.search-content {
+      float: none !important;
+      margin-right: 0 !important;
+   }
+  .right-content {
+      justify-content: left;
+      padding-top: 5px;
+  }
+}
+
 h6.calendar-week {
     margin-top: 0;
     margin-bottom: 0;

src/client/app/js/app/state/Home.js

@@ -521,6 +521,29 @@ app.state.Home = function()
                             updatePaging( +$( this ).val() );
                         });
 
+                        $content.on('input', '[data-id="appointment-search-filter"]', function(e)
+                        {
+                            var searchTerm = $(this).val().toLowerCase();
+
+                            // Filter elements
+                            $('[data-type="appointment-item-container"]').each(function() {
+
+                                var $div = $(this);
+                                let appCat = $div.find('.appointment-category').text().toLowerCase();
+                                let appSub = $div.find('.appointment-subject').text().toLowerCase();
+                                let appDate = $div.find('.appointment-datetime').text().toLowerCase();
+
+                                if (appCat.includes(searchTerm) ||
+                                    appSub.includes(searchTerm) ||
+                                    appDate.includes(searchTerm) ||
+                                    searchTerm === '') {
+                                    $div.show();
+                                } else {
+                                    $div.hide();
+                                }
+                            });
+                        });
+
                         $content.on( 'click', '[data-type="appointment-short-info"]', function( e )
                         {
                             var $eTarget = $( e.target );

src/client/app/tmpl/home-appointment-item.html

@@ -58,7 +58,8 @@
                     <% displayedDateStart = mStart.format( 'ddd' ) + ' ' + mStart.format( 'D.M.' ) + ' ' + mStart.format( 'HH:mm' ) %>
                     <% displayedDateEnd = mEnd.format( 'ddd' ) + ' ' + mEnd.format( 'D.M.' ) + ' ' + mEnd.format( 'HH:mm' ) %>
                 <% } %>
-                <i class="far fa-clock"></i> <%= displayedDateStart %> - <%= displayedDateEnd %> | <i class="far fa-thumbs-up"></i> <%= a.getNumAttendeesAccepted() %> <% if ( 0 < a.getMaxAttendees() ) {    %> | <%= a.getMaxAttendees() -  a.getNumAttendeesAccepted() %> verfügbar <% }  %> | <%= group ? group.getName() : '' %>
+                <% var available = a.getMaxAttendees() -  a.getNumAttendeesAccepted() >= 0 ? a.getMaxAttendees() -  a.getNumAttendeesAccepted() : 0 %>
+                <i class="far fa-clock"></i> <%= displayedDateStart %> - <%= displayedDateEnd %> | <i class="far fa-thumbs-up"></i> <%= a.getNumAttendeesAccepted() %> <% if ( 0 < a.getMaxAttendees() ) {    %> | <%= available %> verfügbar <% }  %> | <%= group ? group.getName() : '' %>
             </div>
         </div>
         <% if ( a.getVProfileCanAttend() ) { %>

src/client/app/tmpl/home-modal-appointment-filter.html

@@ -1,4 +1,4 @@
-<form>
+<form style="overflow: auto; overflow-x: hidden; max-height: 60vh">
     <div class="row">
         <div class="col">
             <div class="form-group">

src/client/app/tmpl/home.html

@@ -79,11 +79,17 @@
             <h4>
                 <%= currentMonth %>
                 <% if ( monthHeader === null ) {    %>
-                    <span class="float-right clickable" style="margin-right: 12px">
-                        <div data-type="btn-filter"
-                             class="<%= ( false === filter.isModified ) ? 'text-primary' : 'text-danger' %>"
-                             style="font-size: smaller">
-                            <i class="fas fa-filter"></i>
+                    <span class="float-right clickable search-content" style="margin-right: 12px">
+                        <div class="right-content">
+                            <div class="search-box">
+                                <i class="fa fa-search"></i>
+                                <input data-id="appointment-search-filter" type="text" class="form-control form-control-sm">
+                            </div>
+                            <div data-type="btn-filter"
+                                 class="<%= ( false === filter.isModified ) ? 'text-primary' : 'text-danger' %>"
+                                 style="font-size: smaller">
+                                <i class="fas fa-filter"></i>
+                            </div>
                         </div>
                     </span>
                 <% }    %>