beerlog/qml/Views/SettingsView.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import Components 1.0
import ru.ded.beerlog 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: settingsService[model.name]

            onClicked: {
                inputDialog.title = model.title
                inputDialog.name = model.name
                inputDialog.control = controls[model.control]
                inputDialog.choiceModel = model.choiceModel
                inputDialog.open()
            }
        }
    }

    Dialog {
        id: inputDialog

        property string name: ""
        property var choiceModel: 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
        }

        onAccepted: {
            settingsService[inputDialog.name] = editor.value
        }
    }

    Component {
        id: textComponent

        TextField {
            id: textField

            property alias value: textField.text

            inputMethodHints: Qt.ImhNoAutoUppercase
            text: settingsService[inputDialog.name] || ""
        }
    }

    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: settingsService[inputDialog.name] === valueId
                    ButtonGroup.group: group
                }
            }
        }
    }
}