Polymer – Show empty state on nested dom-repeat with filter

by Code Error
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)

_x000D_

_x000D_

<!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.

  1. Show empty state by employee – When any employee don’t have success projects show an empty state

_x000D_

_x000D_

<!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_

  1. Show empty state by company – When no employee have success projects show an empty state

_x000D_

_x000D_

<!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

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *