@cuba-platform/front-generator/lib/generators/polymer2/query-results/template/query-result-list.html

CUBA Platform front-end clients generator

<link rel="import" href="<%= relDirShift %>../bower_components/polymer/polymer.html">
<link rel="import" href="<%= relDirShift %>../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="<%= relDirShift %>../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="<%= relDirShift %>../bower_components/cuba-app/cuba-localize-behavior.html">
<link rel="import" href="<%= relDirShift %>../bower_components/cuba-ui/cuba-entity-list-view-behavior.html">
<link rel="import" href="<%= relDirShift %>../bower_components/cuba-data/cuba-query.html">
<link rel="import" href="<%= relDirShift %>../bower_components/cuba-styles/cuba-styles.html">
<link rel="import" href="<%= relDirShift %>../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="<%= relDirShift %>shared-styles.html">

<dom-module id="<%= componentName %>">
  <template>
    <style include="cuba-styles"></style>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
    </style>
    <cuba-query id="data"
                entity-name="<%=query.entity%>"
                query-name="<%=query.name%>"
                params="[[queryParams]]"
                data="{{entities}}"
                provide-count="true"
                count="{{entitiesCount}}"
                auto="[[active]]">
    </cuba-query>

    <app-toolbar id="toolbar" class="list-toolbar">
      <% if (fields) { %>
      <div class="filter">
<% for (let i = 0; i < fields.length; i++) { %>
<%-fields[i]%>
<%_ } _%>
      </div>
      <% } %>
      <paper-icon-button icon="refresh"
                         on-tap="reload"></paper-icon-button>
    </app-toolbar>
    <iron-selector id="selector" on-iron-activate="_handleSelectionChange" class="item-list">
      <template id="entitiesList" is="dom-repeat" items="{{entities}}">
        <div class="row">
          <div class="title">[[item._instanceName]]</div>
        </div>
      </template>
    </iron-selector>
    <template is="dom-if" if="[[moreDataAvailable]]">
      <vaadin-button on-tap="_loadMore" class="load-more">
        Load more
      </vaadin-button>
    </template>
  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       * @appliesMixin CubaLocalizeBehavior
       * @appliesMixin CubaEntityListViewBehavior
       */
      class <%= className %> extends Polymer.mixinBehaviors([CubaLocalizeBehavior, CubaEntityListViewBehavior], Polymer.Element) {
        static get is() {
          return '<%= componentName %>';
        }

        static get properties() {
          return {
            queryParams: {
              type: Object,
              value: {
                offset: 0,
                limit: 10,
                <%if (query.params) { for(let i = 0; i < query.params; i++) {%>
                  <%-query.params[i].name%>
                <%}} %>
              }
            }
          }
        }
      }

      customElements.define(<%= className %>.is, <%= className %>);
    }
  </script>
</dom-module>