Implement search for archive;

css/app.css

@@ -95,8 +95,9 @@ nav, .card {
     margin-bottom: 1px;
 }
 
-#showTicketsModal .showTicketsModalDialog,
-#showArchivedTicketsModal .showArchivedTicketsModalDialog{
+#settingsModal .modal-dialog,
+#showTicketsModal .modal-dialog,
+#showArchivedTicketsModal .modal-dialog {
     max-width: 900px;
 }
 
@@ -117,3 +118,9 @@ nav, .card {
 #settingsModal .form-group {
     margin-bottom: 0.5em;
 }
+
+.search-field {
+    display: inline-block;
+    max-width: 85%;
+    margin-left: 5%;
+}

index.html

@@ -194,7 +194,7 @@
                 <div class="modal-body">
                     <div class="row">
                         <template v-for="(ticket, ticketIndex) in archive">
-                            <div class="col-md-6">
+                            <div class="col-md-6" v-if="searchQuery === '' || ticket.number.search(searchQuery) >= 0 || (ticket.description && ticket.description.search(searchQuery)) >= 0">
                                 <h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
                                 <div v-if="ticket.description">
                                     <p class="blockquote">{{ ticket.description }}</p>
@@ -232,6 +232,13 @@
                         </template>
                     </div>
                 </div>
+                <div class="modal-footer row">
+                    <div class="col-sm-6"></div>
+                    <div class="col-sm-6">
+                        <i class="fas fa-search"></i>
+                        <input @keydown="$forceUpdate()" type="text" class="form-control search-field float-right" v-model="searchQuery" placeholder="Suche..">
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -244,7 +251,8 @@
                     <h5 class="modal-title"><i class="fas fa-sliders-h"></i> Einstellungen</h5>
                     <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body row">
+                    <div class="col-md-6">
                         <h5>Allgemeine Einstellungen</h5>
                         <div class="form-group">
                             <label>Logo-Pfad</label>
@@ -269,6 +277,8 @@
                             </select>
                         </div>
                         <br/>
+                    </div>
+                    <div class="col-md-6">
                         <h5>Zurücksetzen & Löschen</h5>
                         <div class="row">
                             <div class="col-md-6">
@@ -297,6 +307,7 @@
                             </div>
                         </div>
                     </div>
+                </div>
                 <div class="modal-footer">
                     <button class="btn btn-primary" v-on:click="updateStorage()" data-dismiss="modal">Speichern</button>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>

js/app.js

@@ -12,7 +12,8 @@ const TimeTrack = {
             },
             tickets: [],
             archive: [],
-            selectedTicket: null
+            selectedTicket: null,
+            searchQuery: ''
         }
     },
     mounted() {