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!

what about `delegate: someCondition ? Component1 : Component2`? — folibis, Apr 02 '19 at 06:34
Hi @folibis thanks for the direction, I have tried things such as `delegate: if(Object.keys(dataModel.calendarUserItems[departments[currGroupIndex]]).length > 0` or `!= {}` but am only receving errors on the bool `?` unexpected token '?' to check if the model data is not empty, or if it has objects within using length? — Ldweller, Apr 02 '19 at 18:10
@folibis I've been playing around with your suggestion since my previous comment, and are still unable to make any headway - where my `modelData`, is from an array, and certain items are not `visible`, I cannot do things such as `model.count > 0 ? Component1 : Component2`, what could my options be to either check if either there is no `modelData` at all, or if there is no `visible` items in the `SimpleRow` delegate? — Ldweller, Apr 11 '19 at 00:52
`modelData` couldn't be empty since the engine takes model as an array and apply reference to each item as `modelData` to a delegate item. As for the `visible` property, could you use `delegate: modelData.visible ? Component1 : Component2`? — folibis, Apr 11 '19 at 05:54
Hi @folibis I think the main problem I have at current is with my `readonly property var calendarUserItem: dataModel.calendarUserItems[departments[currGroupIndex]][modelData] || {}` as when the `currGroupIndex` has no data, visible or in the database, it errors and does not remove the previous `currGroupIndex` view? — Ldweller, Apr 12 '19 at 11:54
The problem is the logic, application architecture. You have to provide clear and simple API. I really can't understand what this array of arrays of arrays should do ... — folibis, Apr 12 '19 at 12:18
Hi @folibis the data is pulled from firebase - so in JSON, when pressing the button and changing the `currGroupIndex` you are actually altering the viewable path, so department1, department2, department3 ect should direct you to that child node of the full data.I will update my question soon with further details also — Ldweller, Apr 12 '19 at 13:08
@folibis I've updated my question with further information! Hopefully its clearer now! — Ldweller, Apr 13 '19 at 18:39

score 2 · Accepted Answer · edited Jun 14 '21 at 10:04

2

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!

edited Jun 14 '21 at 10:04

NG_

6,895
7
45
67

answered Apr 16 '19 at 17:26

Ldweller

327
2
16

I'm not entirely sure about your last paragraph... what's the *database*? Is it `dataModel.calendarUserItems`? Was there a specific error message? – TrebledJ Apr 17 '19 at 13:34
Hi @TrebledJ apologies, I have edited both question and answer! Hopefully this is clearer for you now! Thanks! – Ldweller Apr 17 '19 at 14:50

Can I Replace SimpleRow with Image if no modelData avaliable

1 Answers1