beerlog/qml/Views/SettingsView.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

import ru.ded.beerlog 1.0
import ru.ded.components 1.0

Page {
    id: root

    title: qsTr("Settings")

    property var controls: {
        "text": textComponent,
        "choice": choiceComponent
    }

    SettingsViewModel {
        id: settingsModel
    }

    ListView {
        anchors.fill: parent

        model: settingsModel

        delegate: SubtitledItemDelegate {
            width: parent.width

            text: model.title
            subtitle: model.subtitle || ""

            function valueAccepted() {
                model.value = editor.value
            }

            function disconnectDialog() {
                inputDialog.accepted.disconnect(valueAccepted)
            }

            onClicked: {
                inputDialog.title = model.title
                inputDialog.control = controls[model.control]
                inputDialog.initialValue = model.value
                inputDialog.choiceModel = model.choiceModel
                inputDialog.accepted.connect(valueAccepted)
                inputDialog.closed.connect(disconnectDialog)
                inputDialog.open()
            }
        }
    }

    Dialog {
        id: inputDialog

        property var choiceModel: undefined
        property var initialValue: undefined
        property alias control: editor.sourceComponent

        width: root.width * 0.8

        anchors.centerIn: parent
        parent: ApplicationWindow.overlay

        modal: true
        standardButtons: Dialog.Ok | Dialog.Cancel

        Loader {
            id: editor

            property var value: item && item.value

            anchors.fill: parent
        }
    }

    Component {
        id: textComponent

        TextField {
            id: textField

            property string value: text

            inputMethodHints: Qt.ImhNoAutoUppercase
            text: inputDialog.initialValue || ""
        }
    }

    ButtonGroup {
        id: group
    }

    Component {
        id: choiceComponent

        Column {

            property var value: group.checkedButton && group.checkedButton.valueId

            Repeater {
                model: inputDialog.choiceModel

                delegate: RadioDelegate {
                    property var valueId: modelData.id
                    text: modelData.name
                    width: parent.width
                    checked: inputDialog.initialValue === valueId
                    ButtonGroup.group: group
                }
            }
        }
    }
}