Can I Replace SimpleRow with Image if no modelData avaliable

Question

I have a ListView, where the currently displayed modelData changes as a button cycles through several department options. If one of these departments has no data, my delegate continues showing the previous list data until it reaches a new section of modelData with data.

What I want to do, is when the model is 'empty' (being undefined, which may happen when the key it's looking for is yet to be created in my Firebase Database, or no items are currently visible), text/image is shown instead; i.e, "Move along now, nothing to see here".

My model is drawn from JSON, an example is below. and my calendarUserItems is the root node of multiple children within my Firebase Database, the aim of my AppButton.groupCycle was too add a further direction to each child node, filtering the data by this to view and edit within the page.

A sample of my code is:

Page {
id: adminPage

property var departments: [1,2,3,4]
property int currGroupIndex: 0

    AppButton {
        id: groupCycle   
        text: "Viewing: " + departments[currGroupIndex]
        onClicked: {
            if (currGroupIndex == departments.length - 1)
                currGroupIndex = 0;
            else
                currGroupIndex++;
        }
    }

    ListView {

        model: Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]])

        delegate: modelData.visible ? currentGroupList : emptyHol

        Component {
            id: emptyHol
            AppText {
                text: "nothing to see here move along now!"
            }
        }
        Component {
            id: currentGroupList
            SimpleRow {
                id: container                

                readonly property var calendarUserItem: dataModel.calendarUserItems[departments[currGroupIndex]][modelData] || {}

                visible: container.calendarUserItem.status === "pending" ? true : false
                 // only pending items visible
                 // remaining code for simple row
            }
        }
    }
}

an example of JSON within my dataModel.calendarUserItems is:

"groupName": [
    { "department1": 
        { "1555111624727" : {
              "creationDate" : 1555111624727,
              "date" : "2019-03-15T12:00:00.000",
              "name" : "Edward Lawrence",
              "status": "pending"
             },
//several of these entries within department1
        },
    },
    { "department2":
        { "1555111624727" : {
              "creationDate" : 1555111624456,
              "date" : "2019-05-1T12:00:00.000",
              "name" : "Katie P",
              "status": 1
             },
//several of these entries within department2
        },
    }
//departments 3 & 4 as the same
]

If departments 2 and 3 have modelData, yet 1 and 4 do not, I want the text to display instead, and the ListView emptied, instead of showing the previous modelData.

I have tried playing with the image/text visibility but the issue lays more with clearing the modelData and I'm unsure where to begin?

Any help is greatly appreciated!

Answer 1

I have achieved the display by using the following as my delegate:

delegate: {
  if (!(departments[currGroupIndex] in dataModel.calendarUserItems) ) {
    return emptyHol;
  }
  var subgroups = Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]]);
  for (var i in subgroups) {
    var subgroup = dataModel.calendarUserItems[departments[currGroupIndex]][subgroups[i]];
    modelArr.push(subgroup);
  }
  var modelObect = modelArr.find( function(obj) { return obj.status === "pending"; } );
  
  if (modelObect === undefined) {
    return emptyHol;
  }            
  return currentGroupList;
}

Then when my AppButton.groupCycle is pressed, I have added modelArr = [] to clear the array on each press, this works as intended.

Thanks!