app/resources/qml/Components/CompetitionCalendarDelegate.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls.impl 2.12
import QtQuick.Controls.Material.impl 2.12

ColoredItemDelegate {
    id: competitionDel

    property bool over
    property var thisData: control.widgetData["competitions"][index]

    property string name: thisData["name"]
    property string date: thisData["date_span"]
    property var cats: thisData["cats"]
    property int catId: thisData["cat_id"] === undefined ? 0:thisData["cat_id"]

    property bool thisIsFavored: control.compFavorites.indexOf(parseInt(thisData['WetId'])) >= 0
    property bool includedByFavorites: control.displayedCompCats.indexOf(-1) >= 0 && thisIsFavored
    property bool includedByFilter: control.displayedCompCats.indexOf(parseInt(thisData['cat_id'])) >= 0
    property bool thisIsVisible: includedByFavorites || includedByFilter

    function updateVisibility() {
        competitionDel.includedByFilter = control.displayedCompCats.indexOf(parseInt(competitionDel.thisData['cat_id'])) >= 0
        competitionDel.thisIsFavored = control.compFavorites.indexOf(parseInt(thisData['WetId'])) >= 0
        competitionDel.includedByFavorites = control.displayedCompCats.indexOf(-1) >= 0 && thisIsFavored
    }

    width: control.width
    height: thisIsVisible ? compDelCol.height + 10 : 0

    enabled: ((thisData["cats"] !== undefined && thisData["cats"].length > 0) || competitionDel.thisData["homepage"] !== undefined || getCompInfoUrls(index).length > 0) && height > 0
    //visible: includedByFilter

    opacity: 0
    scale: 0.9

    Connections {
        target: control
        function onDisplayedCompCatsChanged() {
            competitionDel.updateVisibility()
        }

        function onCompFavoritesChanged() {
            competitionDel.updateVisibility()
        }
    }

    onThisDataChanged: {
        if(thisIsVisible){
            fadeInPa.start()
        }
    }

    onThisIsVisibleChanged: {
        if(thisIsVisible){
            fadeInPa.start()
        }
        else {
            fadeOutPa.start()
        }
    }

    Behavior on height {
        NumberAnimation {
            duration: 400
        }
    }

    onClicked: {
        control.openComp(index)
    }

    ParallelAnimation {
        id: fadeInPa
        NumberAnimation { target: competitionDel; property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { target: competitionDel; property: "scale"; from: 0.8; to: 1.0; duration: 400 }
    }

    ParallelAnimation {
        id: fadeOutPa
        NumberAnimation { target: competitionDel; property: "opacity"; from: 1; to: 0; duration: 400 }
        NumberAnimation { target: competitionDel; property: "scale"; from: 1; to: 0.8; duration: 400 }
    }

    Material.background: control.getCompCatData(catId) === undefined ? app.federalColor:control.getCompCatData(catId)["bgcolor"]

    Column {
        id: compDelCol

        anchors.centerIn: parent

        width: parent.width * 0.97

        spacing: 10

        RowLayout {
            width: parent.width
            Label {
                id: nameLa

                width: parent.width
                Layout.fillWidth: true

                font.bold: true
                wrapMode: Text.WordWrap

                text: name

            }

            ToolButton {
                id: bookmarkTb

                text: "\uf005"
                font.family: competitionDel.thisIsFavored ? fa5solid.name : fa5regular.name

                onClicked: {
                    control.editFavorites(!competitionDel.thisIsFavored, parseInt(thisData['WetId']))
                }

                Layout.alignment: Layout.Right

                Behavior on font.family {
                    SequentialAnimation {
                        NumberAnimation {
                            property: "scale"
                            target: bookmarkTb
                            duration: 75
                            to: 0.8
                        }
                        NumberAnimation {
                            property: "scale"
                            target: bookmarkTb
                            duration: 75
                            to: 1
                        }
                    }
                }
            }
        }

        Label {
            id: dateLa

            text: date
        }
    }

    Rectangle {
        id: bottomLineRa

        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        height: 1

        color: "lightgrey"

    }
}