ModelView.qml 7.15 KB
Newer Older
1 2 3
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
4 5
import custom.licht 1.0
import QtQuick.Controls.Material 2.3
6
import "../components"
7 8 9 10 11 12 13

GridLayout{
    anchors.leftMargin: 5
    columnSpacing: 5
    rowSpacing: 5
    columns: 4
    rows: 4
14
    id: root
15
    signal addClicked()
16
    signal removeClicked(var remove)
17 18
    property alias model : sortedView.sourceModel
    property var sortModel
19
    property alias currentItem : listView.currentItem
20
    property var currentModelData : listView.currentItem ? listView.currentItem.modelItemData : null
Leander Schulten's avatar
Leander Schulten committed
21 22 23 24 25 26
    property alias addButton: buttonAdd
    property alias removeButton: buttonRemove
    property alias addButtonEnabled: buttonAdd.enabled
    property alias removeButtonEnabled: buttonRemove.enabled
    property alias nameInputEnabled: textName.enabled
    property alias descriptionInputEnabled: textDescription.enabled
27
    property alias listView : listView
28
    property var nameFunction: null
29 30 31 32
    // a filter function used for searching. The first parameter ist the search string, the second the modelData and the third the displayed string
    property var searchFilter: (modelData, text) => text.indexOf(currentSearchText) !== -1
    property string searchHelpText;
    property string currentSearchText;
Leander Schulten's avatar
Leander Schulten committed
33

34 35
    ListView{
        Layout.fillHeight: true
Leander Schulten's avatar
Leander Schulten committed
36
        Layout.preferredWidth: Math.max(350,implicitWidth)
37 38
        Layout.columnSpan: 2
        Layout.rowSpan: parent.rows-1
39
        clip: true
40
        id:listView
41 42 43 44
        model: SortedModelVectorView{
            id: sortedView
        }

45
        delegate: ItemDelegate{
46
            property var modelItemData: modelData
47
            width: parent.width
48
            text: nameFunction ? nameFunction(modelData) : modelData.name +"("+modelData.description+")"
49
            onClicked: listView.currentIndex = index
50 51
            visible: root.searchFilter === null || root.currentSearchText.length === 0 || root.searchFilter(modelItemData, text)
            height: visible ? implicitHeight : 0
52
        }
53 54 55 56 57 58 59 60 61
        headerPositioning: ListView.OverlayHeader
        Component{
            id: header
            Pane {
                Component.onCompleted: {
                    background.radius = 0;
                }

                width: listView.width
62 63
                implicitHeight: sortRow.implicitHeight + (searchRow.implicitHeight - 4 - (36-Material.buttonHeight) * 2) * searchRow.visible + 12
                height: implicitHeight
64 65 66 67 68
                topPadding: 6
                bottomPadding: 6
                z: 2
                Material.elevation: 4
                RowLayout {
69 70 71 72 73 74
                    id: sortRow
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: searchRow.top
                    implicitHeight: sortCommboBox.implicitHeight
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
                    spacing: 8
                    Label{
                        text: "Sort by:"
                    }
                    ComboBox{
                        id: sortCommboBox
                        Layout.fillWidth: true
                        textRole: "name"
                        model: root.sortModel
                        property bool _firstTime: true
                        onCurrentIndexChanged: {
                            if(_firstTime){ // if we dont do that, we geht a weird bug that said we cant load a component (testet 5.12.3)
                                _firstTime = false;
                                return;
                            }
                            listView.model.sortPropertyName = model.get(currentIndex).sortPropertyName;
                        }
                    }
                    Button{
94
                        icon.source: sortedView.sortOrder === Qt.DescendingOrder ? "/icons/sort_order/sort-reverse-alphabetical-order.svg" : "/icons/sort_order/sort-by-alphabet.svg"
95 96
                        onClicked: sortedView.sortOrder = sortedView.sortOrder === Qt.DescendingOrder ? Qt.AscendingOrder : Qt.DescendingOrder;
                    }
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
                } // RowLayout
                RowLayout{
                    id: searchRow
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    anchors.top: sortRow.bottom
                    visible: root.filter !== null
                    spacing: 8

                    Label{
                        text: "Search:"
                    }
                    TextInputField{
                        id: searchInput
                        Layout.fillWidth: true
                        onTextChanged: currentSearchText = text
                        Keys.onEscapePressed: text = ""
                    }
                    Button{
                        Layout.preferredWidth: root.searchHelpText.length !== 0 ? implicitWidth / 2 - 4 : implicitWidth
                        flat: true
                        text: "X"
                        onClicked: searchInput.text = ""
                    }
                    Button{
                        Layout.preferredWidth: implicitWidth / 2 - 4
                        flat: true
                        text: "?"
                        visible: root.searchHelpText.length !== 0
                        ToolTip.visible: hovered
                        ToolTip.text: root.searchHelpText
                    }

                    Shortcut{
                        enabled: root.SwipeView.isCurrentItem
                        sequence: StandardKey.Find
                        onActivated: searchInput.forceActiveFocus()
                    }
                } // RowLayout
137 138 139 140 141
            }
        }

        header: sortModel ? header : null

142 143 144 145
        highlight: Rectangle{
            color: "blue"
            opacity: 0.7
        }
Leander Schulten's avatar
Leander Schulten committed
146

147 148 149 150 151
    }

    Button{
        Layout.row: parent.rows-1
        Layout.column: 0
152
        Layout.preferredWidth: listView.width/2
153
        id: buttonAdd
Leander Schulten's avatar
Leander Schulten committed
154
        text:"Add"
155
        font.pixelSize: 15
Leander Schulten's avatar
Leander Schulten committed
156
        onClicked: addClicked()
157 158 159 160
    }
    Button{
        Layout.row: parent.rows-1
        Layout.column: 1
161
        Layout.preferredWidth: listView.width/2
162
        id: buttonRemove
Leander Schulten's avatar
Leander Schulten committed
163
        text:"Remove"
164
        font.pixelSize: 15
165 166 167 168 169
        onClicked: askRemove.open();
    }
    AskWhenRemovePopup {
        id: askRemove
        onYesClicked: removeClicked(currentModelData)
170 171 172
    }


Leander Schulten's avatar
Leander Schulten committed
173
    Label{
174 175 176 177 178 179 180 181 182 183
        Layout.row: 0
        Layout.column: 2
        id:labelName
        text:"Name:"
    }
    TextInputField{
        Layout.row: 0
        Layout.column: 3
        Layout.fillWidth: true
        id:textName
184 185
        text: parent.currentModelData ? parent.currentModelData.name:""
        onTextChanged: if(parent.currentModelData) parent.currentModelData.name = text
186
    }
Leander Schulten's avatar
Leander Schulten committed
187
    Label{
188 189 190 191 192 193 194 195 196 197 198
        Layout.row: 1
        Layout.column: 2
        id:labelDescription
        text:"Description:"

    }
    TextInputField{
        Layout.row: 1
        Layout.column: 3
        Layout.fillWidth: true
        id:textDescription
199 200
        text: parent.currentModelData?parent.currentModelData.description:""
        onTextChanged: if(parent.currentModelData) parent.currentModelData.description = text
201 202 203 204 205
    }



}