From da4f2bbd73d060fb3354e38371a76efb1dc6bf6f Mon Sep 17 00:00:00 2001
From: Jyri-Petteri Paloposki <jyri-petteri.paloposki@iki.fi>
Date: Sun, 3 Jan 2021 11:26:38 +0200
Subject: [PATCH] #38: Add a search box to the main view.

---
 qml/harbour-sailotp.qml |  2 +-
 qml/pages/MainView.qml  | 68 +++++++++++++++++++++++++++++------------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/qml/harbour-sailotp.qml b/qml/harbour-sailotp.qml
index 74d2173..4e7f960 100644
--- a/qml/harbour-sailotp.qml
+++ b/qml/harbour-sailotp.qml
@@ -65,7 +65,7 @@ ApplicationWindow
 
   // Add an entry to the list
   function appendOTP(title, secret, type, counter, fav, len, diff) {
-    listModel.append({"secret": secret, "title": title, "fav": fav, "type": type, "counter": counter, "len": len, "diff": diff, "otp": "------"});
+    listModel.append({"secret": secret, "title": title, "fav": fav, "type": type, "counter": counter, "len": len, "diff": diff, "otp": "------", "itemVisible": true});
   }
 
   // Set the OTP shown on the Cover
diff --git a/qml/pages/MainView.qml b/qml/pages/MainView.qml
index 16f077a..374d474 100644
--- a/qml/pages/MainView.qml
+++ b/qml/pages/MainView.qml
@@ -130,35 +130,63 @@ Page {
         hintText: qsTr("Pull down to add a OTP")
       }
 
-      header: Row {
-        height: Theme.itemSizeSmall
+      header: Column {
         width: parent.width
-        ProgressBar {
-          id: updateProgress
-          anchors.top: parent.top
-          // Hack to get the Progress Bar in roughly the same spot on Light and Dark Ambiances
-          anchors.topMargin: Theme.colorScheme === 0 ? Theme.paddingLarge * 1.1 : Theme.paddingSmall * 0.6
+        height: headerRow.height + searchRow.height
+        Row {
+          id: headerRow
           height: Theme.itemSizeSmall
-          width: parent.width * 0.65
-          maximumValue: 29
-          value: 29 - seconds_global
-          // Only show when there are enries
-          visible: appWin.listModel.count
+          width: parent.width
+          ProgressBar {
+            id: updateProgress
+            // Hack to get the Progress Bar in roughly the same spot on Light and Dark Ambiances
+            anchors.topMargin: Theme.colorScheme === 0 ? Theme.paddingLarge * 1.1 : Theme.paddingSmall * 0.6
+            height: Theme.itemSizeSmall
+            width: parent.width * 0.65
+            maximumValue: 29
+            value: 29 - seconds_global
+            // Only show when there are enries
+            visible: appWin.listModel.count
+          }
+          PageHeader {
+            id: header
+            anchors.top: parent.top
+            height: Theme.itemSizeSmall
+            width: parent.width * 0.35
+            title: "SailOTP"
+          }
         }
-        PageHeader {
-          id: header
-          anchors.top: parent.top
-          height: Theme.itemSizeSmall
-          width: parent.width * 0.35
-          title: "SailOTP"
+        Row {
+          id: searchRow
+          width: parent.width
+          TextField {
+            id: searchField
+            font.pixelSize: Theme.fontSizeMedium
+            width: parent.width - clearIcon.width
+            EnterKey.enabled: false
+            inputMethodHints: Qt.ImhNoPredictiveText // Qt.ImhPreferUppercase | Qt.ImhNoAutoUppercase
+            placeholderText: qsTr("Search")
+            onTextChanged: {
+              for (var i = 0; i < appWin.listModel.count; i++) {
+                appWin.listModel.get(i).itemVisible = appWin.listModel.get(i).title.toString().indexOf(searchField.text) > -1
+              }
+            }
+          }
+          IconButton {
+            id: clearIcon
+            icon.source: "image://theme/icon-m-backspace"
+            onClicked: searchField.text = ""
+            enabled: searchField.text.length > 0
+          }
         }
       }
 
       delegate: ListItem {
         id: otpListItem
         menu: otpContextMenu
-        contentHeight: Theme.itemSizeMedium
+        contentHeight: visible ? Theme.itemSizeMedium : 0
         width: parent.width
+        visible: itemVisible
 
         function remove() {
           // Show 5s countdown, then delete from DB and List
@@ -237,7 +265,7 @@ Page {
           }
         }
 
-        // Show an update button on HTOP-Type Tokens
+        // Show an update button on HOTP type tokens
         IconButton {
           icon.source: "image://theme/icon-m-refresh"
           anchors.right: parent.right