From 44df5a925367cb2bb8b1d9be65cfdf3ce19cd15d Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Wed, 25 Aug 2021 00:49:52 +0200
Subject: [PATCH] Implement search for archive;

---
 css/app.css |  11 +++++-
 index.html  | 105 +++++++++++++++++++++++++++++-----------------------
 js/app.js   |   3 +-
 3 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/css/app.css b/css/app.css
index b5fc457..9a57a72 100644
--- a/css/app.css
+++ b/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;
 }
 
@@ -116,4 +117,10 @@ nav, .card {
 
 #settingsModal .form-group {
     margin-bottom: 0.5em;
+}
+
+.search-field {
+    display: inline-block;
+    max-width: 85%;
+    margin-left: 5%;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 062e27e..5102295 100644
--- a/index.html
+++ b/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,56 +251,60 @@
                     <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">
-                    <h5>Allgemeine Einstellungen</h5>
-                    <div class="form-group">
-                        <label>Logo-Pfad</label>
-                        <input type="text" v-model="dashboardLogo" class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
-                        <input type="text" v-model="ticketSystemUrl" class="form-control">
-                    </div>
-                    <br/>
-                    <div class="form-group">
-                        <label>
-                            <input type="checkbox" class="form-control-checkbox" v-model="showPT">
-                            Ab 8 Stunden nurmehr PT anzeigen
-                        </label>
-                    </div>
-                    <br/>
-                    <div class="form-group">
-                        <label>Design</label>
-                        <select v-model="theme" class="form-control">
-                            <option v-for="availableTheme in themes" :value="availableTheme.name.toLowerCase()">{{ availableTheme.name }}</option>
-                        </select>
-                    </div>
-                    <br/>
-                    <h5>Zurücksetzen & Löschen</h5>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <button class="btn btn-outline-warning btn-full-width" @click="resetToDefault()">
-                                Zurücksetzen
-                            </button>
+                <div class="modal-body row">
+                    <div class="col-md-6">
+                        <h5>Allgemeine Einstellungen</h5>
+                        <div class="form-group">
+                            <label>Logo-Pfad</label>
+                            <input type="text" v-model="dashboardLogo" class="form-control">
+                        </div>
+                        <div class="form-group">
+                            <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
+                            <input type="text" v-model="ticketSystemUrl" class="form-control">
                         </div>
-                        <div class="col-md-6">
-                            <button class="btn btn-outline-danger btn-full-width" @click="deleteAllData()">Alle Daten
-                                löschen
-                            </button>
+                        <br/>
+                        <div class="form-group">
+                            <label>
+                                <input type="checkbox" class="form-control-checkbox" v-model="showPT">
+                                Ab 8 Stunden nurmehr PT anzeigen
+                            </label>
                         </div>
+                        <br/>
+                        <div class="form-group">
+                            <label>Design</label>
+                            <select v-model="theme" class="form-control">
+                                <option v-for="availableTheme in themes" :value="availableTheme.name.toLowerCase()">{{ availableTheme.name }}</option>
+                            </select>
+                        </div>
+                        <br/>
                     </div>
-                    <br/>
-                    <h5>Import & Export</h5>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <h6>Export-Json</h6>
-                            <textarea class="form-control" rows="3" id="exportJsonInput">{{ exportJson }}</textarea>
-                            <button class="btn btn-success btn-full-width" @click="copy2Clipboard">Export-String kopieren</button>
+                    <div class="col-md-6">
+                        <h5>Zurücksetzen & Löschen</h5>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <button class="btn btn-outline-warning btn-full-width" @click="resetToDefault()">
+                                    Zurücksetzen
+                                </button>
+                            </div>
+                            <div class="col-md-6">
+                                <button class="btn btn-outline-danger btn-full-width" @click="deleteAllData()">Alle Daten
+                                    löschen
+                                </button>
+                            </div>
                         </div>
-                        <div class="col-md-6">
-                            <h6>Import</h6>
-                            <textarea class="form-control" rows="3" v-model="inputs.importJson"></textarea>
-                            <button class="btn btn-success btn-full-width" @click="importData">Import</button>
+                        <br/>
+                        <h5>Import & Export</h5>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <h6>Export-Json</h6>
+                                <textarea class="form-control" rows="3" id="exportJsonInput">{{ exportJson }}</textarea>
+                                <button class="btn btn-success btn-full-width" @click="copy2Clipboard">Export-String kopieren</button>
+                            </div>
+                            <div class="col-md-6">
+                                <h6>Import</h6>
+                                <textarea class="form-control" rows="3" v-model="inputs.importJson"></textarea>
+                                <button class="btn btn-success btn-full-width" @click="importData">Import</button>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/js/app.js b/js/app.js
index 66bc9fe..8013014 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,7 +12,8 @@ const TimeTrack = {
             },
             tickets: [],
             archive: [],
-            selectedTicket: null
+            selectedTicket: null,
+            searchQuery: ''
         }
     },
     mounted() {