Untitled

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ListModel {
        id: bikeModelId

        ListElement {
            name: "Cube Stereo"
            type: "Fullsuspension MTB"
        }
        ListElement {
            name: "Trek Fuel"
            type: "Fullsuspension MTB"

        }
        ListElement {
            name: "Trek Slash"
            type: "Fullsuspension MTB"
        }
        ListElement {
            name: "Cube Nuroad"
            type: "Gravebike"
        }
    }

    Component {
        id: bikeHeaderDelegateId

        Rectangle {
            width: parent.width
            height: 50
            color: "lightblue"
            border.color: "blue"
            RowLayout {
                spacing: 2
                anchors.fill: parent

                Text {
                    text: "Name"
                    font.pixelSize: 30
                    Layout.alignment: Qt.AlignLeft
                    Layout.margins: 5
                }

                Text {
                    text: "Bike type"
                    font.pixelSize: 30
                    Layout.alignment: Qt.AlignRight
                    Layout.margins: 5
                }
            }
        }

    }

    Component {
        id: bikeFooterDelegateid

        Rectangle {
            width: parent.width
            height: 50
            color: "lightblue"
            border.color: "blue"

            Text {
                text: "count: " + bikeModelId.count
                font.pixelSize: 30
            }
        }
    }

    Component {
        id: bikeDelegateId

        Rectangle {
            id: wrapper
            width: parent.width
            height: 50
            color: "lightgreen"
            border.color: "green"

            RowLayout {
                spacing: 2
                anchors.fill: parent

                Text {
                    id: nameTextId
                    text: name
                    font.pixelSize: 30
                    Layout.alignment: Qt.AlignLeft
                    Layout.margins: 5
                }

                Text {
                    id: typeTextId
                    text: type
                    font.pixelSize: 30
                    Layout.alignment: Qt.AlignRight
                    Layout.margins: 5
                }
                Button {
                    id: delButtonId
                    text: "delete"
                    Layout.alignment: Qt.AlignRight
                    Layout.margins: 5
                    highlighted: buttonAreaId.containsMouse? true: false
                    palette {
                        button: "red"
                    }

                    onClicked: {

                        if (index < bikeModelId.count)
                            bikeModelId.remove(index);
                    }
                    MouseArea {
                        id: buttonAreaId
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: delButtonId.clicked()
                    }
                }
            }
            MouseArea {
                width: parent.width - delButtonId.width
                height: 50
                onClicked: {
                    bikeViewId.currentIndex = index
                    animId.restart()
                }
            }

            ListView.onRemove: SequentialAnimation {
                NumberAnimation {
                    target: wrapper
                    property: "scale"
                    to: 0
                    duration: 1000
                }
            }
            ListView.onAdd: SequentialAnimation {
                NumberAnimation {
                    target: wrapper
                    property: "scale"
                    from: 0
                    to: 1
                    duration: 1000
                }
            }

        }

    }
    Component {
        id: selectionDelegateId
        Rectangle {

            width: parent.width
            color: "transparent"
            border.color: "red"
            border.width: 4
            z: 3
            opacity: 0.5
        }

    }


    SequentialAnimation {
        id: animId
        PropertyAnimation {
            target: bikeViewId.highlightItem
            property: "opacity"
            to: 0
            duration: 1000
        }
        NumberAnimation {
            duration: 1
        }

        PropertyAnimation {
            target: bikeViewId.highlightItem
            property: "opacity"
            to: 1
            duration: 1000
        }
    }
    ColumnLayout {
        anchors.fill: parent
        ListView {
            id: bikeViewId
            //anchors.fill: parent
            model: bikeModelId
            delegate: bikeDelegateId
            header: bikeHeaderDelegateId
            footer: bikeFooterDelegateid
            highlight: selectionDelegateId
            Layout.fillWidth: true
            Layout.fillHeight: true
            keyNavigationEnabled: true
            focus: true
            Keys.onUpPressed: bikeViewId.decrementCurrentIndex()
            Keys.onDownPressed: bikeViewId.incrementCurrentIndex()
        }

        Rectangle {
            width: parent.width
            height: 50
            color: "gray"
            Layout.fillWidth: true

            RowLayout {
                spacing: 2
                anchors.fill: parent
                TextInput {
                    id: bikeNameInputId
                    text: "Bike model"
                    cursorVisible: true
                    Layout.alignment: Qt.AlignLeft
                    font.pixelSize: 30
                    focus: true
                }
                ComboBox {
                    id: bikeTypeInputId
                    width: 200
                    model: ["Fullsuspension MTB", "Gravebike", "Hardtail"]
                    Layout.alignment: Qt.AlignRight
                }
            }
            Keys.onReturnPressed: {
                bikeModelId.append({"name": bikeNameInputId.text, "type": bikeTypeInputId.currentText})
                bikeNameInputId.clear()
            }
        }
    }
}