[Interest] QML: How to dynamically create filter groups in DelegateModel based on another model?

[Viktória Nemkin]

Hello!

I want to create a QML application where I have a bunch of Buttons that you
can click on. These Buttons are categorized into groups.

At the top of the page there are CategoryButtons. When you click on one of
the CategoryButtons all the Buttons in that category appear on the page.
The Buttons not in that category remain hidden.

To accomplish this I have created two ListModels, one for the
CategoryButtons and one for the Buttons:

ListModel {

    id: categoryButtonsModel

    ListElement {

        name: "Super Awesome Category"

        filterKey: "super"

    }

    ListElement {

        name: "Slightly More Awesome Category"

        filterKey: "slight"

    }

}


ListModel {

    id: buttonsModel

    ListElement {

        name: "Cool Button"

        filterKey: "super"

    }

    ListElement {

        name: "Geek Button"

        filterKey: "super"

    }

    ListElement {

        name: "Hipster Button"

        filterKey: "slight"

    }

}


I have added a property to all of these called filterKey. I want all
Buttons to be in the category that has the same filterKey that they have.

Then created the views:

ListView {

    id: categoryButtonsView

    model: categoryButtonsModel

    delegate: Button {

        text: name

        onClicked: buttonsDelegateModel.filterOnGroup = filterKey

    }

    orientation: Qt.Horizontal

    height: 50

    anchors.top: parent.top

    anchors.left: parent.left

    anchors.right: parent.right

}


ListView {

    id: buttonsView

    model: buttonsDelegateModel

    anchors.top: categoryButtonsView.bottom

    anchors.left: parent.left

    anchors.right: parent.right

    anchors.bottom: parent.bottom

}


Then I have added a DelegateModel to filter my buttons:

DelegateModel {

    id: buttonsDelegateModel

    model: buttonsModel

    delegate:  Button {

        text: name

    }


    filterOnGroup: "super"


    groups: [

        DelegateModelGroup {

            includeByDefault: false

            name: "super"

            Component.onCompleted: {

                for (var i = 0; i < buttonsModel.count; i++ ) {

                    var entry = buttonsModel.get(i);

                    if(entry.filterKey === name) insert(entry);

                }

            }

        },

        DelegateModelGroup {

            includeByDefault: false

            name: "slight"

            Component.onCompleted: {

                for (var i = 0; i < buttonsModel.count; i++ ) {

                    var entry = buttonsModel.get(i);

                    if(entry.filterKey === name) insert(entry);

                }

            }

        }

    ]

}


This code works perfectly. I have one problem only:

The groups property of the above DelegateModel is basically some generic
code and the filterKeys in CategoryButtonsModel. I want to generate groups
based on CategoryButtonsModel so I don't have to specify the same things
two times.

I have tried using a Repeater but it does not seem to generate a list?

I have tried some javascript like this, but it is full of problems: :)

groups: {

            var result = [];

            var component = Qt.createComponent(DelegateModelGroup);

            for(var i=0; i<categoryButtonsModel.count; ++i) {

                var curr = component.createObject(buttonsDelegateModel, {

                                                      "includeByDefault": false,

                                                      "name":
categoryButtonsModel.get(i).filterKey,


                                                  });

                curr.Component.onCompleted = fillGroupFromModel(curr);

                result.push(curr);

            }

            return result;

        }


        function fillGroupFromModel(group) {

            for (var i = 0; i < gridModel.count; i++ ) {

                var entry = gridModel.get(i);

                if(entry.filterKey === group.name) group.insert(entry);

            }

        }



When I run this version I get a Component is not ready error. And this
looks like overcomplicating the problem.

How can I generate the groups list from CategoryButtonsModel dynamically?

Thank you for your time.

Regards,
Viki
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160518/c9cbdea7/attachment.html>