Polymer – Show empty state on nested dom-repeat with filter
Posted By: Anonymous
I have a nested dom-repeat
to first iterate employees in company and then iterate projects of the employee, also when iterating projects I’m using a filter to get only success projects.
Tried to use renderedItems but it’s giving number of employees always. Instead i need a way to know the status when no employee have any succeeded projects. (simply when no items listed)
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>_x000D_
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />_x000D_
<script src="script.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<test-element></test-element>_x000D_
<dom-module id="test-element">_x000D_
<template>_x000D_
<div>_x000D_
<h1>Test Element</h1>_x000D_
<h3>Rendered Count: [[renderedCount]]</h3>_x000D_
<template is="dom-if" if="{{!renderedCount}}">_x000D_
<img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">_x000D_
</template>_x000D_
<template is="dom-repeat" items="{{employees}}" as="employee" rendered-item-count="{{renderedCount}}">_x000D_
<template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject">_x000D_
<span>Test 1 [[employeeProject.name]]</span>_x000D_
<br>_x000D_
</template>_x000D_
</template>_x000D_
</div>_x000D_
</template>_x000D_
<script>_x000D_
Polymer({_x000D_
is: 'test-element',_x000D_
properties: {_x000D_
employees: {_x000D_
type: Array,_x000D_
value: function() {_x000D_
return [{_x000D_
name: 'user1',_x000D_
projects: [{_x000D_
name: 'proj1',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj2',_x000D_
status: true_x000D_
}, {_x000D_
name: 'proj3',_x000D_
status: true_x000D_
}]_x000D_
}, {_x000D_
name: 'user2',_x000D_
projects: [{_x000D_
name: 'proj4',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj5',_x000D_
status: false_x000D_
}]_x000D_
}]_x000D_
}_x000D_
},_x000D_
renderedCount: {_x000D_
type: Number_x000D_
}_x000D_
},_x000D_
_x000D_
_filterProjects: function() {_x000D_
return function(item) {_x000D_
return item.status;_x000D_
};_x000D_
}_x000D_
});_x000D_
</script>_x000D_
</dom-module>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_
Solution
I have tried few ways to resolve this issue and identified two types on showing empty state. (Actually got the help from polymer slack channel and thought of sharing the information with some samples)
You can try by changing the employee array in following code samples, by setting projects status true or false to see the empty state changing.
- Show empty state by employee – When any employee don’t have success projects show an empty state
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>_x000D_
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />_x000D_
<script src="script.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<test-element></test-element>_x000D_
<dom-module id="test-element">_x000D_
<template>_x000D_
<div>_x000D_
<h1>Company Projects</h1>_x000D_
<template is="dom-repeat" items="{{employees}}" as="employee" rendered-item-count="{{renderedCount}}">_x000D_
<br>_x000D_
<b><span>[[employee.name]]</span></b>_x000D_
<br>_x000D_
<div hidden$="{{_computeEmpty(employee.innercount)}}">_x000D_
<img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">_x000D_
</div>_x000D_
<br>_x000D_
<template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject" rendered-item-count="{{employee.innercount}}">_x000D_
<span>Project: [[employeeProject.name]]</span>_x000D_
<br>_x000D_
_x000D_
</template>_x000D_
_x000D_
</template>_x000D_
</div>_x000D_
</template>_x000D_
_x000D_
<script>_x000D_
Polymer({_x000D_
is: 'test-element',_x000D_
properties: {_x000D_
employees: {_x000D_
type: Array,_x000D_
value: function() {_x000D_
return [{_x000D_
name: 'user1',_x000D_
projects: [{_x000D_
name: 'proj1',_x000D_
status: true_x000D_
}, {_x000D_
name: 'proj2',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj3',_x000D_
status: false_x000D_
}]_x000D_
}, {_x000D_
name: 'user2',_x000D_
projects: [{_x000D_
name: 'proj4',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj5',_x000D_
status: false_x000D_
}]_x000D_
}]_x000D_
}_x000D_
},_x000D_
renderedCount: {_x000D_
type: Number_x000D_
},_x000D_
innercount: {_x000D_
type: Number_x000D_
}_x000D_
},_x000D_
_computeEmpty: function(projects) {_x000D_
return (projects > 0);_x000D_
},_x000D_
_filterProjects: function() {_x000D_
return function(item) {_x000D_
return item.status;_x000D_
};_x000D_
}_x000D_
});_x000D_
</script>_x000D_
</dom-module>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_
- Show empty state by company – When no employee have success projects show an empty state
<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/webcomponentsjs/webcomponents-lite.js"></script>_x000D_
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.6.0/lib/polymer/polymer.html" />_x000D_
<script src="script.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<test-element></test-element>_x000D_
<dom-module id="test-element">_x000D_
<template>_x000D_
<div>_x000D_
<h1>Company Projects</h1>_x000D_
<br>_x000D_
<b><span>Succeeded Projects</span></b>_x000D_
<br>_x000D_
<br>_x000D_
<div hidden$="{{!showEmptyState}}">_x000D_
<img src="https://emptyensemble.com/wp-content/themes/emptyensemble2015/assets/images/empty_ensemble_empty_set_logo.png" alt="Mountain View" style="width:250px;height:250px;">_x000D_
</div>_x000D_
<template is="dom-repeat" items="{{employees}}" as="employee">_x000D_
<template is="dom-repeat" items="{{employee.projects}}" filter="{{_filterProjects()}}" as="employeeProject" rendered-item-count="{{renderedCount}}">_x000D_
<span>[[employee.name]]: [[employeeProject.name]]</span>_x000D_
<br>_x000D_
_x000D_
</template>_x000D_
_x000D_
</template>_x000D_
</div>_x000D_
</template>_x000D_
_x000D_
<script>_x000D_
Polymer({_x000D_
is: 'test-element',_x000D_
properties: {_x000D_
employees: {_x000D_
type: Array,_x000D_
value: function() {_x000D_
return [{_x000D_
name: 'user1',_x000D_
projects: [{_x000D_
name: 'proj1',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj2',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj3',_x000D_
status: false_x000D_
}]_x000D_
}, {_x000D_
name: 'user2',_x000D_
projects: [{_x000D_
name: 'proj4',_x000D_
status: false_x000D_
}, {_x000D_
name: 'proj5',_x000D_
status: false_x000D_
}]_x000D_
}]_x000D_
}_x000D_
},_x000D_
renderedCount: {_x000D_
type: Number,_x000D_
observer: '_onInnerRenderedCountChanged'_x000D_
},_x000D_
showEmptyState: {_x000D_
type: Boolean,_x000D_
value: true_x000D_
}_x000D_
},_x000D_
_onInnerRenderedCountChanged: function(newValue, oldValue) {_x000D_
if (newValue > 0) {_x000D_
this.set('showEmptyState', false);_x000D_
}_x000D_
},_x000D_
_filterProjects: function() {_x000D_
return function(item) {_x000D_
return item.status;_x000D_
};_x000D_
}_x000D_
});_x000D_
</script>_x000D_
</dom-module>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
_x000D_
_x000D_
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.