primitive color picker, asset form

API/api.cpp

@@ -111,12 +111,18 @@ API::RequestId API::requestCurrencies (const SuccessListHandler& success, const
     return registerAndSend(std::move(list));
 }
 
-API::RequestId API::addAsset (const QString& title, const QString& icon, const QColor& color, const QJSValue& finished) {
+API::RequestId API::addAsset (
+    const QString& title,
+    const QString& icon,
+    const QColor& color,
+    Models::Currency::ID currency,
+    const QJSValue& finished
+) {
     qDebug() << "Adding asset...";
     if (magpie.getState() != Models::Magpie::Authenticated)
         return callCallback(finished, "Can not add assets in current state"), 0;
 
-    auto add = std::make_unique<Request::AddAsset>(title, icon, color, 1, magpie.getAddress());
+    auto add = std::make_unique<Request::AddAsset>(title, icon, color, currency, magpie.getAddress());
     add->setAuthorizationToken(magpie.getAccessToken());
     connect(add.get(), &Request::AddAsset::success, std::bind(&API::callCallback, this, finished, QString(), QJSValueList{QJSValue(true)}));
     connect(add.get(), &Request::AddAsset::error, std::bind(&API::callCallback, this, finished, std::placeholders::_1, QJSValueList{QJSValue(false)}));

API/api.h

@@ -40,7 +40,13 @@ public slots:
     RequestId test(const QString& path, const QJSValue& finished = QJSValue());
     RequestId sendRegister(const QString& login, const QString& password, const QJSValue& finished = QJSValue());
     RequestId sendLogin(const QString& login, const QString& password, const QJSValue& finished = QJSValue());
-    RequestId addAsset(const QString& title, const QString& icon, const QColor& color, const QJSValue& finished = QJSValue());
+    RequestId addAsset(
+        const QString& title,
+        const QString& icon,
+        const QColor& color,
+        Models::Currency::ID currency,
+        const QJSValue& finished = QJSValue()
+    );
     RequestId deleteAsset(unsigned int id, const QJSValue& finished = QJSValue());
 
 private slots:

API/requests/addasset.cpp

@@ -3,13 +3,16 @@
 
 #include "addasset.h"
 
-Request::AddAsset::AddAsset (const QString& title, const QString& icon, const QColor& color, unsigned int currency, const QUrl& baseUrl):
+Request::AddAsset::AddAsset (
+    const QString& title,
+    const QString& icon,
+    const QColor& color,
+    Models::Currency::ID currency,
+    const QUrl& baseUrl
+):
     Post(createUrl(baseUrl, "/addAsset"), {
-        {"title", title},
+    {"title", title}, {"icon", icon}, {"currency", std::to_string(currency).c_str()}, {"color", std::to_string(color.rgba()).c_str()}
-        {"icon", icon},
+})
-        {"currency", std::to_string(currency).c_str()},
-        {"color", std::to_string(color.rgba()).c_str()}
-    })
 {
     emptyResult = true;
 }

API/requests/addasset.h

@@ -6,6 +6,7 @@
 #include <QColor>
 
 #include "post.h"
+#include "models/currencies.h"
 
 namespace Request {
 
@@ -13,7 +14,13 @@ class AddAsset : public Post {
     Q_OBJECT
 
 public:
-    AddAsset (const QString& title, const QString& icon, const QColor& color, unsigned int currency, const QUrl& baseUrl);
+    AddAsset (
+            const QString& title,
+            const QString& icon,
+            const QColor& color,
+            Models::Currency::ID currency,
+            const QUrl& baseUrl
+    );
 };
 
 }

qml/Application/Assets.qml

@@ -31,7 +31,7 @@ Item {
             model: Magpie.assets
             spacing: 5
             delegate: Components.AssetLine {
-                height: 20
+                height: 30
                 width: listView.width
             }
         }

qml/Application/Root.qml

@@ -24,9 +24,32 @@ Item {
 
     Component {
         id: addAssetForm
-        Forms.AddAsset {
+        Forms.Asset {
             onCancel: stack.pop()
-            onSuccess: stack.pop()
+            onConfirm: function (title, icon, color, currency) {
+                if (modal.inProgress)
+                    return;
+
+                modal.inProgress = true;
+                modal.status = qsTr("Creating new asset ") + " " + title + "...";
+                modal.open();
+
+                API.addAsset(title, icon, color, currency, function (err, result) {
+                    if (!modal.inProgress)
+                        return;
+
+                    modal.inProgress = false;
+                    if (err)
+                        modal.status = err;
+                    else
+                        modal.status = qsTr("Success");
+
+                    if (!!result) {
+                        modal.close();
+                        stack.pop()
+                    }
+                });
+            }
         }
     }
 

qml/Components/AssetLine.qml

@@ -31,6 +31,7 @@ Item {
 
             Icon {
                 anchors.fill: parent
+                anchors.margins: 2
                 iconName: line.icon
                 color: pickColor(line.color)
             }

qml/Components/CMakeLists.txt

@@ -13,6 +13,7 @@ qt_add_qml_module(magpieComponents
         AssetLine.qml
         IconPicker.qml
         Icon.qml
+        ColorPicker.qml
 )
 
 target_link_libraries(magpie PRIVATE magpieComponents)

qml/Components/ColorPicker.qml

@@ -0,0 +1,102 @@
+//  SPDX-FileCopyrightText: 2023 Yury Gubich <blue@macaw.me>
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+
+ComboBox {
+    property color color: "green"
+
+    id: box
+    model: [
+        "darkgreen", "green",
+        "limegreen", "lawngreen",
+        "darkturquoise", "lightseagreen",
+        "cyan", "deepskyblue",
+        "dodgerblue", "royalblue",
+        "navy","midnightblue",
+        "indigo", "purple",
+        "darkviolet", "darkorchid",
+        "magenta", "violet",
+        "crimson", "red",
+        "firebrick", "darkred",
+        "orangered", "orange",
+        "goldenrod", "gold",
+        "yellow", "lightyellow",
+        "ivory", "white",
+        "lightgrey", "grey",
+        "slategrey", "darkgrey",
+        "dimgrey", "black"
+    ]
+    contentItem: Rectangle {
+        color: box.color
+    }
+
+    onActivated: index => box.color = model[index]
+    Component.onCompleted: {
+        popup.background.color = box.background.color
+        popup.background.border.color = box.background.border.color
+        popup.background.border.width = box.background.border.width
+    }
+
+    popup: Popup {
+        id: popup
+
+        y: box.height + 1
+        width: box.width
+        implicitHeight: contentItem.implicitHeight + padding * 2
+        padding: 1
+
+        contentItem: GridView {
+            id: view
+            property int cellSize: (popup.width) / 8
+
+            cellWidth: cellSize - 0.5;
+            cellHeight: cellSize;
+
+            clip: true
+            implicitHeight: contentHeight
+            model: box.popup.visible ? box.model : null
+            currentIndex: box.highlightedIndex
+
+            delegate: MenuItem {
+                required property color modelData
+                required property int index
+
+                width: view.cellSize
+                height: view.cellSize
+                padding: 2
+
+                highlighted: view.currentIndex === index
+                contentItem: Rectangle {
+                    color: modelData
+                    radius: box.background.radius
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        box.currentIndex = index;
+                        box.activated(index)
+                        popup.close();
+                    }
+                }
+
+                HoverHandler {
+                    id: hover
+                    cursorShape: Qt.PointingHandCursor
+                    onHoveredChanged: {
+                        if (hovered)
+                            view.currentIndex = index;
+                    }
+                }
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+
+        background: Rectangle {
+            radius: box.background.radius
+        }
+    }
+}

qml/Components/IconPicker.qml

@@ -20,10 +20,12 @@ ComboBox {
         }
     }
     contentItem: View {
-        icon: currentText
+        icon: box.icon
         padding: 5
     }
 
+    onActivated: index => box.icon = model[index]
+
     component View: Row {
         required property string icon
 

qml/Forms/Asset.qml

@@ -8,9 +8,18 @@ import magpie
 import magpie.Components as Components
 
 Item {
-    signal success
+    property string name: qsTr("New asset")
+    property string icon: "wallet"
+    property color color: "green"
+    property int currency: 1
+
+    property string title: qsTr("New asset")
+
+    signal confirm (name: string, icon: string, color: color, currency: int)
     signal cancel
 
+    id: form
+
     Column {
         id: inner
         spacing: 5
@@ -18,7 +27,7 @@ Item {
 
         Label {
             anchors.horizontalCenter: parent.horizontalCenter
-            text: qsTr("New asset")
+            text: title
             font.pixelSize: 14
         }
 
@@ -36,7 +45,9 @@ Item {
 
             TextField {
                 id: titleField
-                text: "New Asset"
+                text: name
+
+                onTextChanged: name = text
             }
 
             Label {
@@ -45,15 +56,36 @@ Item {
 
             Components.IconPicker {
                 id: iconField
-                icon: "list-add"
+                icon: form.icon
+
+                onIconChanged: form.icon = icon
             }
 
             Label {
                 text: qsTr("Color") + ":";
             }
 
-            TextField {
+            Components.ColorPicker {
                 id: colorField
+                color: form.color
+
+                onColorChanged: form.color = colorField.color
+            }
+
+            Label {
+                text: qsTr("Currency") + ":";
+            }
+
+            ComboBox {
+                id: currencyField
+
+                textRole: "title" //"code"
+                valueRole: "id"
+
+                model: Magpie.currencies
+
+                Component.onCompleted: currentIndex = indexOfValue(currency)
+                onActivated: index => currency = currentValue
             }
         }
 
@@ -66,47 +98,14 @@ Item {
             }
 
             Button {
-                text: qsTr("Create")
+                text: qsTr("Confirm")
-                onClicked: inner.confirm()
+                onClicked: inner.onConfirmClick()
             }
         }
 
-        Components.Modal {
+        function onConfirmClick () {
-            id: modal
-        }
-
-        function confirm () {
             //TODO validation
-            send(titleField.text, iconField.icon, colorField.text);
+            confirm(name, icon, form.color, currency);
-        }
-
-        function send (title, icon, color) {
-            if (modal.inProgress)
-                return;
-
-            titleField.text = title;
-            iconField.icon = icon;
-            colorField.text = color;
-
-            modal.inProgress = true;
-            modal.status = qsTr("Creating new asset ") + " " + title + "...";
-            modal.open();
-
-            API.addAsset(title, icon, "blue", function (err, result) {
-                if (!modal.inProgress)
-                    return;
-
-                modal.inProgress = false;
-                if (err)
-                    modal.status = err;
-                else
-                    modal.status = qsTr("Success");
-
-                if (!!result) {
-                    modal.close();
-                    success();
-                }
-            });
         }
     }
 }

qml/Forms/CMakeLists.txt

@@ -11,7 +11,7 @@ qt_add_qml_module(magpieForms
     QML_FILES
         Login.qml
         Register.qml
-        AddAsset.qml
+        Asset.qml
 )
 
 target_link_libraries(magpie PRIVATE magpieForms)