[sysui, downloads] add pull down to refresh for categories

- update ToolsColumn to ListView to have Flickable component. Fix JSONModel to handle updates.
Add pull down to refresh for categories column

Fixes: AUTOSUITE-850
Change-Id: If4170c283002ea1e921582085e7ec2e50c0919be
Reviewed-by: Grigorii Zimin <gzimin@luxoft.com>

7 files changed, 59 insertions, 42 deletions

diff --git a/apps/com.luxoft.vehicle/panels/Vehicle3DControlPanel.qml b/apps/com.luxoft.vehicle/panels/Vehicle3DControlPanel.qml
index c0aa54be..a8b84056 100644
--- a/apps/com.luxoft.vehicle/panels/Vehicle3DControlPanel.qml
+++ b/apps/com.luxoft.vehicle/panels/Vehicle3DControlPanel.qml
@@ -68,7 +68,6 @@ Item {
         anchors.top: parent.top
         anchors.left: parent.left
         width: Sizes.dp(264)
-        height: Sizes.dp(460)
         translationContext: "VehicleToolsColumn"
     }
 
diff --git a/apps/com.pelagicore.downloads/controls/DownloadsToolsColumn.qml b/apps/com.pelagicore.downloads/controls/DownloadsToolsColumn.qml
index 95dea832..65ab16c3 100644
--- a/apps/com.pelagicore.downloads/controls/DownloadsToolsColumn.qml
+++ b/apps/com.pelagicore.downloads/controls/DownloadsToolsColumn.qml
@@ -44,14 +44,52 @@ Item {
     property string serverUrl
 
     signal toolClicked(int index)
+    signal refresh()
+
+    BusyIndicator {
+        id: busyIndicator
+
+        running: false
+        anchors.horizontalCenter: root.horizontalCenter
+        opacity: 0.0;
+        visible: opacity > 0.0
+        width: Sizes.dp(100); height: width
+    }
 
     ToolsColumn {
         id: toolsColumn
 
+        property bool refreshRequired: false
+
+        interactive: true
         width: Sizes.dp(264)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
         anchors.topMargin: Sizes.dp(53)
         onClicked: root.toolClicked(currentIndex)
+        onContentYChanged: {
+            if (atYBeginning) {
+                var d = Math.abs(contentY);
+                busyIndicator.opacity = d / busyIndicator.height;
+                if (d > busyIndicator.height) {
+                    if (!busyIndicator.running) {
+                        busyIndicator.running = true;
+                        refreshRequired = true;
+                    }
+                } else {
+                    busyIndicator.running = false;
+                    // if we drag back - no refresh
+                    if (dragging)
+                        refreshRequired = false;
+                }
+            }
+        }
+        onMovementEnded: {
+            busyIndicator.opacity = 0.0;
+            if (refreshRequired) {
+                refreshRequired = false;
+                refresh();
+            }
+        }
     }
 }
diff --git a/apps/com.pelagicore.downloads/stores/DownloadsStates.qml b/apps/com.pelagicore.downloads/stores/DownloadsStates.qml
index 69db4c7c..7c9d96ae 100644
--- a/apps/com.pelagicore.downloads/stores/DownloadsStates.qml
+++ b/apps/com.pelagicore.downloads/stores/DownloadsStates.qml
@@ -304,6 +304,12 @@ DSM.StateMachine {
                         signal: jsonAppModel.onStatusChanged
                         guard: jsonAppModel.status === "loading"
                     }
+
+                    DSM.SignalTransition {
+                        targetState: fetchingCategoriesState
+                        signal: jsonCategoryModel.onStatusChanged
+                        guard: jsonCategoryModel.status === "loading"
+                    }
                 }
             }
         }
diff --git a/apps/com.pelagicore.downloads/stores/DownloadsStore.qml b/apps/com.pelagicore.downloads/stores/DownloadsStore.qml
index 98728495..ee9ab822 100644
--- a/apps/com.pelagicore.downloads/stores/DownloadsStore.qml
+++ b/apps/com.pelagicore.downloads/stores/DownloadsStore.qml
@@ -298,6 +298,9 @@ Item {
 
     ListModel {
         id: categoryListModel
+        function refresh() {
+            jsonCategoryModel.refresh();
+        }
     }
 
     JSONModel {
diff --git a/apps/com.pelagicore.downloads/stores/JSONModel.qml b/apps/com.pelagicore.downloads/stores/JSONModel.qml
index e18cf4ef..76d2beea 100644
--- a/apps/com.pelagicore.downloads/stores/JSONModel.qml
+++ b/apps/com.pelagicore.downloads/stores/JSONModel.qml
@@ -43,8 +43,8 @@ ListModel {
 
     function refresh() {
         status = "loading"
-        clear();
         JSONBackend.serverCall(url, data, function(data) {
+            clear();
             if (data === 0) {
                 status = "error";
 
diff --git a/apps/com.pelagicore.downloads/views/DownloadsView.qml b/apps/com.pelagicore.downloads/views/DownloadsView.qml
index ca7fa916..212ecf48 100644
--- a/apps/com.pelagicore.downloads/views/DownloadsView.qml
+++ b/apps/com.pelagicore.downloads/views/DownloadsView.qml
@@ -183,6 +183,7 @@ Item {
             model: root.store.categoryModel
             serverUrl: root.store.appServerUrl
             onToolClicked: root.store.selectCategory(index)
+            onRefresh: root.store.categoryModel.refresh()
         }
 
         DownloadAppList {
diff --git a/plugins/controls/ToolsColumn.qml b/plugins/controls/ToolsColumn.qml
index e297ab58..c4ccd896 100644
--- a/plugins/controls/ToolsColumn.qml
+++ b/plugins/controls/ToolsColumn.qml
@@ -40,7 +40,7 @@ import shared.utils 1.0
 /*!
     \qmltype ToolsColumn
     \inqmlmodule controls
-    \inherits ColumnLayout
+    \inherits ListView
     \since 5.11
     \brief The tools column component for Neptune 3 UI applications.
 
@@ -101,11 +101,13 @@ import shared.utils 1.0
     \endqml
 */
 
-ColumnLayout {
+ListView {
     id: root
 
-    width: Sizes.dp(135)
+    implicitWidth: Sizes.dp(135)
+    implicitHeight: root.contentHeight
     spacing: Sizes.dp(24)
+    interactive: false
 
     /*!
         \qmlproperty enumeration ToolsColumn::iconFillMode
@@ -134,36 +136,14 @@ ColumnLayout {
     property real iconRectHeight: 0
 
     /*!
-        \qmlproperty int ToolsColumn::currentIndex
-
-        This property holds the current selected index of the tools column.
-
-        This property's default is 0.
-    */
-    property int currentIndex: 0
-
-    /*!
         \qmlproperty string ToolsColumn::currentText
         \readonly
 
         This property holds the current selected text of the tools column.
     */
-    readonly property string currentText: model && model.count > currentIndex
-                                                ?  model.get(currentIndex).text
-                                                : ""
-    /*!
-        \qmlproperty string ToolsColumn::currentItem
-
-        This property holds the current selected item of the tools column.
-    */
-    property Item currentItem: repeater.itemAt(currentIndex)
-
-    /*!
-        \qmlproperty var ToolsColumn::model
-
-        This property holds the model to be delegated in the tools column.
-    */
-    property alias model: repeater.model
+    readonly property string currentText: model && currentIndex > -1 && model.count > currentIndex
+                                          ?  model.get(currentIndex).text
+                                          : ""
 
     /*!
         \qmlproperty string ToolsColumn::translationContext
@@ -184,13 +164,8 @@ ColumnLayout {
 
     ButtonGroup { id: buttonGroup }
 
-    Repeater {
-        id: repeater
-
-        ToolButton {
-            Layout.preferredWidth: root.width
-            Layout.preferredHeight: Sizes.dp(140)
-            Layout.alignment: Qt.AlignHCenter
+    delegate: ToolButton {
+            height: Sizes.dp(140); width: root.width
             objectName: model.objectName ? model.objectName : ""
             baselineOffset: 0
             iconFillMode: root.iconFillMode
@@ -212,11 +187,6 @@ ColumnLayout {
             }
             ButtonGroup.group: buttonGroup
         }
-    }
-
-    Item {
-        Layout.fillHeight: true
-    }
 
     Connections {
         target: root.model