spincycle
Version:
A reactive message router and object manager that lets clients subscribe to object property changes on the server
253 lines (223 loc) • 10.2 kB
HTML
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="spin-list.html">
<dom-module id="spin-allmodels">
<template>
<style>
</style>
<div>
<h4>{{model}}</h4>
<paper-button raised on-tap="newModel">New {{model}}</paper-button>
<div style="display:flex;flex-direction: row">
<paper-dropdown-menu value="{{searchproperty}}" label="Search property" style="margin-right:10px">
<paper-menu class="dropdown-content" selected="name" attr-for-selected="data-value">
<template is="dom-repeat" items="[[modelproperties]]">
<paper-item data-value="{{item.name}}">{{item.name}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-input label="Search Value" value="{{searchvalue}}"></paper-input>
</div>
shownItems={{shownItems.length}}
<spin-list client="{{client}}" delete="true" model="[[model]]" itemselected="{{listitemselected}}" spinids="[[shownItems]]" show="true"></spin-list>
<template is="dom-repeat" items="[[listpages]]" as="p">
<paper-button on-tap="selectPage" value="{{p.foo}}"> {{p.foo}}</paper-button>
</template>
</div>
</template>
<script>
Polymer({
is: 'spin-allmodels',
properties:
{
client:{type:'Object'},
model: {type: 'String', observer: 'onModelChange'},
incallbacks: {type: 'Object'},
listitemselected: {type: 'Object', notify:true, observer: 'onListItemSelected'},
itemselected: {type: 'Object', notify:true},
searchvalue: {type:'String',observer:'onSearchChange'},
searchproperty: {type:'String',observer:'onSearchChange' }
},
ready: function()
{
// set up defaults
this.itemsPerPage = 20
this.listpages = []
this.currentPage = 0
this.outCallbacks =
{
onSelect: this.onSelect.bind(this),
onDelete: this.onDelete.bind(this)
}
this.renderStuff()
},
onListItemSelected: function(item)
{
console.log('spin-allmodels onListItemSelected for "'+this.model+'"')
console.dir(item)
this.set('itemselected', item)
},
onSearchChange:function(e)
{
//if(this.searchproperty && this.searchvalue)
//{
if(this.client)
{
this.fetchPage()
}
//}
},
onModelChange: function()
{
if(this.model)
{
this.renderStuff()
}
},
renderStuff: function()
{
if(this.client && this.model)
{
this.client.emitMessage({target: 'getModelFor', modelname: this.model}).then(function(mprops)
{
console.log('alltypes got model for '+this.model)
var props = []
mprops.forEach(function(p)
{
if(p != 'kind' && p != 'order')
{
props.push(p)
}
})
props.push({name:'id'})
this.set('modelproperties', props)
}.bind(this))
if(this.listenerid)
{
this.client.deRegisterPopulationChangesSubscriber({ type: this.oldmodel, listenerid: this.listenerid})
}
this.oldmodel = this.model
// Draw quick-select bar
this.drawQuickSelectBar()
// Retrieve itemsPerPage items and send array if ids to list
this.fetchPage()
// registerForPopulationChangesFor
this.client.registerPopulationChangeSubscriber({ type: this.model, cb: function(popchange)
{
console.log('spin-allmodels --------------------population change callback for '+this.model)
console.dir(arguments)
this.client.emitMessage({target: '_count' + this.model + 's'}).then(function (count) {
console.log('spin-allmodels .. count is now '+count)
})
this.fetchPage()
}.bind(this)}).then(function(listenid)
{
this.listenerid = listenid
}.bind(this))
}
},
onSelect: function(item)
{
//console.log('onSelect called at spin-allmodels')
if(this.incallbacks && this.incallbacks.onSelect)
{
this.incallbacks.onSelect(item)
}
},
onDelete:function(item)
{
console.log('onDelete called at spin-allmodels')
console.dir(item)
if(this.incallbacks && this.incallbacks.onDelete)
{
this.incallbacks.onDelete(item)
}
if(confirm('Really delete object '+item.name+' ?'))
{
this.client.emitMessage({target: '_delete' + this.model, obj:{type: item.type, id: item.id}}).then(function (count)
{
console.log(item.type+' id '+item.id+' deleted')
this.fetchPage()
}.bind(this))
}
},
drawQuickSelectBar: function()
{
// Call count for model
//console.log('drawQuickSelectbar. this is')
//console.dir(this)
this.client.emitMessage({target: '_count' + this.model + 's'}).then(function (count) {
//console.log('spin-allmodels count ' + this.model + ' got ' + count + ' back')
var pagecount = parseInt(count/this.itemsPerPage) + (count % parseInt(this.itemsPerPage/2) > 0 ? 1 : 0)
this.splice('listpages', 0, this.listpages.length)
for(var i = 0; i < pagecount; i++)
{
this.push('listpages', {foo:i})
}
}.bind(this))
},
fetchPage: function()
{
if(this.model)
{
console.log('------------------------------------- spin-allmodels fetchpage called for '+this.model)
var q = {property: this.searchproperty, wildcard:true, value: this.searchvalue, limit:this.itemsPerPage, skip: this.itemsPerPage*this.currentPage}
console.dir(q)
this.client.emitMessage({ target:'_list'+this.model+'s', query: q}).then(function(newlist)
{
console.log('spin-allmodels fetchpage got '+newlist.length+' items back')
//console.dir(newlist)
newlist.sort(function(a,b)
{
return a.name == b.name ? 0 : a.name < b.name ? -1 : 1
})
if(!this.shownItems)
{
var ids = []
newlist.forEach(function(el)
{
//console.log('allmodels pushing id '+el.id+' to ids list')
ids.push(el.id)
})
this.set('shownItems', ids)
}
else
{
this.splice('shownItems', 0, this.shownItems.length)
var nids = []
newlist.forEach(function(el)
{
//console.log('adding new item '+el.name+' to showItems id list')
nids.push(el.id)
}.bind(this))
this.set('shownItems', nids)
this.drawQuickSelectBar()
}
}.bind(this))
}
},
attached: function()
{
},
selectPage: function(e,o)
{
console.log('------------------------------------- spin-allmodels selectPage called')
console.dir(e.model)
var w = e.model.p.foo
this.currentPage = w
this.fetchPage()
},
newModel: function()
{
//console.log('newModel called')
this.client.emitMessage({target: '_create' + this.model, obj:{type: this.model}}).then(function (newModel)
{
//console.log('new model of type '+this.model+' created')
//console.dir(newModel)
}.bind(this))
}
});
</script>
</dom-module>