native: add search support

native/AddData.qml

@@ -96,7 +96,7 @@ Window {
             name: nameT.text,
             key: keyT.text,
             amount: parseInt(amountT.text),
-            group_id: "f7604976-1e3c-49b7-841b-6a4025257c70",
+            group_id: "ff664d29-68c9-45c2-a6bc-8f378876c90d",
         });
 
         xhr.send(data);

native/MainPage.qml

@@ -4,6 +4,8 @@ import QtQuick.Layouts 2.15
 import QtQuick.Controls 2.15
 
 Rectangle {
+    visible: true
+
     SystemPalette { id: activeColors; colorGroup: SystemPalette.Active }
     SystemPalette { id: inactiveColors; colorGroup: SystemPalette.Inactive }
     SystemPalette { id: disabledColors; colorGroup: SystemPalette.Disabled }
@@ -13,6 +15,7 @@ Rectangle {
     }
 
     property string authToken: ""
+    property string searchText: "" // Property to hold the search text
 
     signal logout()
 
@@ -26,37 +29,25 @@ Rectangle {
         height: 50
         color: getColors().midlight
 
+        RowLayout {
+            anchors.fill: parent
+            spacing: 10
+            anchors.margins: 5
+
             TextField {
-            anchors {
+                id: searchField
-                verticalCenter: s1.verticalCenter
-                rightMargin: 5
-                right: loginB.left
-            }
-
                 placeholderText: qsTr("Search")
-        }
+                Layout.alignment: Qt.AlignVCenter
-
+                Layout.fillWidth: true
-        Button {
+                onTextChanged: {
-            id: loginB
+                    searchText = text
-            anchors {
+                    filterModel() // Filter model based on search text
-                verticalCenter: s1.verticalCenter
-                rightMargin: 10
-                right: s1.right
-            }
-            text: qsTr("Logout")
-
-            onClicked: {
-                logout();
                 }
             }
 
             Button {
                 text: qsTr("Add License")
-            anchors {
+                Layout.alignment: Qt.AlignVCenter
-                verticalCenter: s1.verticalCenter
-                rightMargin: 10
-                right: loginB.left
-            }
                 onClicked: {
                     // Create and show a new window
                     var newWindow = newWindowComponent.createObject(null, { authToken: authToken });
@@ -67,6 +58,16 @@ Rectangle {
                     }
                 }
             }
+
+            Button {
+                id: loginB
+                text: qsTr("Logout")
+                Layout.alignment: Qt.AlignVCenter
+                onClicked: {
+                    logout();
+                }
+            }
+        }
     }
 
     Rectangle {
@@ -79,53 +80,64 @@ Rectangle {
         }
         color: getColors().window
 
+        ColumnLayout {
+            anchors.fill: parent
+            spacing: 0
+
+            Rectangle {
+                id: header
+                color: getColors().midlight
+                height: 40
+                Layout.fillWidth: true
+
+                RowLayout {
+                    anchors.fill: parent
+                    spacing: 10
+                    anchors.margins: 5
+
+                    Text { text: qsTr("Name"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Key"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Amount"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Start"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("End"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Group"); color: getColors().text; Layout.fillWidth: true }
+                }
+            }
+
+            ListView {
+                id: listView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                boundsBehavior: Flickable.StopAtBounds
+                model: filteredApiDataModel // Use the filtered model
+
+                delegate: Rectangle {
+                    width: listView.width
+                    height: 50
+                    color: getColors().button
+
+                    RowLayout {
+                        anchors.fill: parent
+                        spacing: 10
+                        anchors.margins: 5
+
+                        Text { text: model.name; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.key; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.amount; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.start; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.end; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.group; color: getColors().text; Layout.fillWidth: true }
+                    }
+                }
+            }
+
             ListModel {
                 id: apiDataModel
             }
 
-        ListView {
+            ListModel {
-            anchors {
+                id: filteredApiDataModel
-                topMargin: 5
-                fill: s2
-            }
-            clip: true
-            boundsBehavior: Flickable.StopAtBounds
-
-            model: apiDataModel
-
-            delegate: Item {
-                width: parent.width
-                height: 50
-
-                Row {
-                    spacing: 10
-
-                    Text {
-                        text: model.name
-                        color: getColors().text
-                    }
-
-                    Text {
-                        text: model.key
-                        color: getColors().text
-                    }
-                    Text {
-                        text: model.amount
-                        color: getColors().text
-                    }
-                    Text {
-                        text: model.start
-                        color: getColors().text
-                    }
-                    Text {
-                        text: model.end
-                        color: getColors().text
-                    }
-                    Text {
-                        text: model.group
-                        color: getColors().text
-                    }
-                }
             }
         }
     }
@@ -160,6 +172,7 @@ Rectangle {
                             });
                         }
                     }
+                    filterModel() // Filter the model after loading data
                 } else {
                     console.log("Error: " + xhr.status);
                 }
@@ -167,4 +180,19 @@ Rectangle {
         }
         xhr.send();
     }
+
+    function filterModel() {
+        filteredApiDataModel.clear()
+        for (var i = 0; i < apiDataModel.count; ++i) {
+            var item = apiDataModel.get(i)
+            if (item.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ||
+                item.key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ||
+                item.amount.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ||
+                item.start.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ||
+                item.end.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ||
+                item.group.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
+                filteredApiDataModel.append(item)
+            }
+        }
+    }
 }