beerlog/qml/Views/ProductsView.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import ru.ded.beerlog 1.0

Page {

    ProductsViewModel {
        id: productsModel
    }

    RowLayout {
        anchors.fill: parent
        anchors.margins: 10

        ListView {
            id: productsList

            Layout.fillWidth: true
            Layout.preferredHeight: parent.height

            model: productsModel.products

            delegate: ItemDelegate {
                width: productsList.width

                text: modelData.name
                height: spinbox.height

                SpinBox {
                    id: spinbox

                    width: 150
                    from: 0
                    to: 100 * 100
                    stepSize: 50
                    anchors.right: parent.right
                    editable: true

                    property int decimals: 1
                    property real realValue: value / 100

                    validator: DoubleValidator {
                        bottom: Math.min(spinbox.from, spinbox.to)
                        top:  Math.max(spinbox.from, spinbox.to)
                    }

                    textFromValue: function(value, locale) {
                        return value === 0 ? "" : Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
                    }

                    valueFromText: function(text, locale) {
                        return Number.fromLocaleString(locale, text) * 100
                    }

                    onRealValueChanged: productsModel.setOrderValue(modelData.id, realValue)
                }
            }

            function reload() {
                model = undefined
                model = productsModel.products
            }
        }

        ListView {
            id: orderList

            Layout.minimumWidth: parent.width * 0.3
            Layout.preferredHeight: parent.height

            model: productsModel.order

            delegate: ItemDelegate {
                width: orderList.width

                text: "%1 x%2".arg(modelData.name).arg(modelData.count.toLocaleString(Qt.locale()))
            }

            footer: Column {
                width: orderList.width

                Label {
                    anchors.right: parent.right
                    anchors.margins: 10

                    text: qsTr("Summary: %1").arg(productsModel.orderSum.toLocaleCurrencyString(Qt.locale()))
                }

                Button {
                    anchors.right: parent.right
                    anchors.margins: 10

                    text: qsTr("Order")

                    enabled: productsModel.orderSum > 0

                    onClicked: {
                        productsModel.submitOrder()
                        productsList.reload()
                    }
                }
            }
        }
    }
}