From d2c50fc2e59e50ca94ecb3ae975e63d51fc0c365 Mon Sep 17 00:00:00 2001
From: jopejoe1 <johannes@joens.email>
Date: Fri, 12 Jul 2024 00:10:46 +0200
Subject: [PATCH] native: convert from list to table

---
 native/MainPage.qml | 66 +++++++++++++++++++--------------------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/native/MainPage.qml b/native/MainPage.qml
index 4fd807c..0b23aba 100644
--- a/native/MainPage.qml
+++ b/native/MainPage.qml
@@ -1,17 +1,16 @@
 import QtQuick 2.15
-import QtQuick.Window 2.15
-import QtQuick.Layouts 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 2.15
 
 Rectangle {
-    visible: true
+    id: root
 
     SystemPalette { id: activeColors; colorGroup: SystemPalette.Active }
     SystemPalette { id: inactiveColors; colorGroup: SystemPalette.Inactive }
     SystemPalette { id: disabledColors; colorGroup: SystemPalette.Disabled }
 
     function getColors() {
-        return root.active ? activeColors : inactiveColors;
+        return active ? activeColors : inactiveColors;
     }
 
     property string authToken: ""
@@ -99,54 +98,46 @@ Rectangle {
             spacing: 0
 
             Rectangle {
-                id: header
+                height: 50
+                width: parent.width
                 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 }
+                    Text { text: qsTr("Name"); color: getColors().text; Layout.preferredWidth: 150; font.bold: true }
+                    Text { text: qsTr("Key"); color: getColors().text; Layout.preferredWidth: 150; font.bold: true }
+                    Text { text: qsTr("Amount"); color: getColors().text; Layout.preferredWidth: 100; font.bold: true }
+                    Text { text: qsTr("Start"); color: getColors().text; Layout.preferredWidth: 100; font.bold: true }
+                    Text { text: qsTr("End"); color: getColors().text; Layout.preferredWidth: 100; font.bold: true }
+                    Text { text: qsTr("Group"); color: getColors().text; Layout.preferredWidth: 150; font.bold: true }
                 }
             }
 
-            ScrollView {
+            ListView {
+                id: listView
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                model: filteredApiDataModel // Use the filtered model
 
-                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: (index % 2 === 0) ? getColors().button : getColors().highlight // Alternating row colors
 
-                    delegate: Rectangle {
-                        width: listView.width
-                        height: 50
-                        color: (index % 2 === 0) ? getColors().button : getColors().highlight // Alternating row colors
+                    RowLayout {
+                        anchors.fill: parent
+                        spacing: 10
+                        anchors.margins: 5
 
-                        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 }
-                        }
+                        Text { text: model.name; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                        Text { text: model.key; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
+                        Text { text: model.amount; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                        Text { text: model.start; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                        Text { text: model.end; color: getColors().text; Layout.preferredWidth: 100; elide: Text.ElideRight }
+                        Text { text: model.group; color: getColors().text; Layout.preferredWidth: 150; elide: Text.ElideRight }
                     }
                 }
             }
@@ -197,7 +188,6 @@ Rectangle {
                                 amount: jsonResponse[i].licenses[ii].amount ? jsonResponse[i].licenses[ii].amount.toString() : "∞",
                                 key: jsonResponse[i].licenses[ii].key
                             });
-
                         }
                     }
                     filterModel() // Filter the model after loading data