import QtQuick 2.9 import QtQuick.Controls 2.4 DataListView { id: control property var listData: ({}) signal closeAll() onListDataChanged: { model = listData[ root.listKey ] === undefined ? 0:listData[ root.listKey ].length } model: listData[ root.listKey ] === undefined ? 0:listData[ root.listKey ].length delegate: ItemDelegate { id: partDel property int ind: index property var thisData: listData[ "participants" ][index] state: "closed" width: parent.width height: 70 opacity: 0 scale: 0.9 onThisDataChanged: { fadeInPa.start() } ParallelAnimation { id: fadeInPa NumberAnimation { target: partDel; property: "opacity"; from: 0; to: 1.0; duration: 400 } NumberAnimation { target: partDel; property: "scale"; from: 0.8; to: 1.0; duration: 400 } } text: "" onClicked: { if(state === "closed"){ // close all other delegates control.closeAll() state = "opened" } else { state = "closed" } } Connections { target: control onCloseAll: { partDel.state = "closed" } } Rectangle { anchors.fill: parent width: partDel.width color: partDel.ind % 2 == 0 ? "white":"lightgrey" opacity: 0.2 } Column { id: partDelCol anchors { top: parent.top left: parent.left right: parent.right margins: 5 } height: 70 - 2 * anchors.margins Row { id: partDelFirstRow width: parent.width height: parent.height - partDelSecondRow.height Label { id: resultRankLa height: parent.height width: parent.width * 0.1 enabled: text !== "" fontSizeMode: Text.Fit font.bold: true font.pixelSize: Math.abs( partDelSecondRow.height > 0 ? height * 0.6:height * 0.4 ) verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter text: listData[ "participants" ][index]["result_rank"] === undefined ? "":listData[ "participants" ][index]["result_rank"] } Label { id: nameLa height: parent.height width: parent.width * 0.5 fontSizeMode: Text.Fit font.bold: true font.pixelSize: Math.abs( partDelSecondRow.height > 0 ? height * 0.6:height * 0.4 ) verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft minimumPixelSize: 1 text: listData[ "participants" ][index]["firstname"] + " " + listData[ "participants" ][index]["lastname"] } Label { id: fedLa height: parent.height width: parent.width * 0.4 fontSizeMode: Text.Fit font.bold: false font.pixelSize: Math.abs( partDelSecondRow.height > 0 ? height * 0.4:height * 0.3 ) minimumPixelSize: height * 0.3 elide: "ElideRight" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter text: "(" + (listData[ "display_athlete" ] === "nation" ? listData[ "participants" ][index]["nation"] : listData[ "participants" ][index]["federation"]) + ")" onLinkActivated: { Qt.openUrlExternally(link) } } } Row { id: partDelSecondRow width: parent.width height: pointsLa.enabled ? parent.height / 2:0 Item { id: spacer height: parent.height width: resultRankLa.width } Label { id: pointsLa width: enabled ? parent.width * 0.25:0 height: enabled ? parent.height:0 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft fontSizeMode: Text.Fit font.pixelSize: Math.abs( height * 0.6 ) minimumPixelSize: 1 text: listData[ "participants" ][partDel.ind]["points"] === undefined ? "":"points: "+listData[ "participants" ][partDel.ind]["points"] } } } Column { id: detailResultsCol anchors { top: partDelCol.bottom left: parent.left right: parent.right margins: 5 } height: enabled ? ( 20 + spacing ) * detailResultRowRep.model:0 Repeater { id: detailResultRowRep property var compResults: getCompResults() model: compResults.length function getCompResults() { var obj = control.listData["route_names"] var resultData = [] for(var prop in obj) { // go through the whole array and search for data keys if (obj.hasOwnProperty(prop) && control.listData["participants"][partDel.ind]["result" + prop.replace(" ", "")] !== undefined ) { resultData.unshift([prop, obj[prop].replace("\n", " - ")]) //console.log("found " + obj[prop] + " at index " + prop) } } return resultData } delegate: Row { width: parent.width height: detailResultsCol.height / detailResultRowRep.model - detailResultsCol.spacing visible: height > 0 Item { id: spacer_ height: parent.height width: parent.width * 0.15 } Label { height: parent.height width: parent.width / 2 fontSizeMode: Text.Fit font.bold: true font.pixelSize: Math.abs( partDelSecondRow.height > 0 ? height * 0.6:height * 0.4 ) verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft minimumPixelSize: 1 text: detailResultRowRep.compResults[index][1] } Label { id: detailResultListLa height: parent.height width: parent.width * 0.35 fontSizeMode: Text.Fit font.pixelSize: Math.abs( partDelSecondRow.height > 0 ? height * 0.6:height * 0.4 ) verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft minimumPixelSize: 1 text: control.listData["participants"][partDel.ind]["result"+detailResultRowRep.compResults[index][0].replace(" ", "")] === undefined ? "":control.listData["participants"][partDel.ind]["result"+detailResultRowRep.compResults[index][0].replace(" ", "")].replace("\n", " ") } Behavior on height { NumberAnimation { duration: 200 } } } } } states: [ State { name: "closed" PropertyChanges { target: partDel height: 70 } PropertyChanges { target: detailResultsCol enabled: false } }, State { name: "opened" PropertyChanges { target: partDel height: 70 + detailResultsCol.height } PropertyChanges { target: detailResultsCol enabled: true } } ] transitions: [ Transition { from: "*" to: "*" NumberAnimation { properties: "height" duration: 200 } } ] } }