lpio/app/html/views/dashboard-select/lp-dashboard-select.html

The last dashboard app you'll ever need

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../api/lp-api.html">

<dom-module id="lp-dashboard-select">
    <style>
        .iron-selected {
            background: #6ac174;
        }
    </style>
    <template>
        <lp-api id="api" state="{{state}}"></lp-api>
        <paper-tabs id="selector" attr-for-selected="id" selected="{{selectedId}}">
            <template is="dom-repeat" items="{{state.dashboards.dashboards}}">
                <paper-tab id="{{item._id}}">{{item.name}}</paper-tab>
            </template>
        </paper-tabs>
    </template>
</dom-module>
<script>
    (function () {
        Polymer({
            is: 'lp-dashboard-select',

            properties: {
                state: {
                    type: Object,
                    readonly: true
                },
                selectedId:{
                    type: String,
                    observer: 'selectedIdChanged'
                }
            },

            observers:['dashboardsChanged(state.dashboards.dashboards)'],

            dashboardsChanged:function(dashboards){
                if(this.selectedId == '' || this.selectedId == undefined){
                    if(_.isArray(dashboards) && dashboards.length > 0 ){
                        this.$.selector.select(_.first(dashboards)._id);
                    }
                }
            },

            selectedIdChanged: function(newValue, oldValue){
                if(_.isString(newValue) && newValue.length > 5){
                    this.$.api.dispatch({key:'app', type:'setCurrentDashboard',id:newValue});
                }
            }
        });
    })();
</script>