=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js' --- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js 2014-06-18 07:58:40 +0000 +++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js 2014-06-18 08:53:12 +0000 @@ -2462,6 +2462,9 @@ dataElementGroup, dataElementDetailLevel, dataElement, + dataSetLabel, + dataSetSearch, + dataSetFilter, dataSetAvailable, dataSetSelected, dataSet, @@ -2794,29 +2797,67 @@ dataSetAvailableStore = Ext.create('Ext.data.Store', { fields: ['id', 'name'], - proxy: { - type: 'ajax', - url: ns.core.init.contextPath + '/api/dataSets.json?fields=id,name', - reader: { - type: 'json', - root: 'dataSets' - }, - pageParam: false, - startParam: false, - limitParam: false - }, + lastPage: null, + nextPage: 1, + isPending: false, + reset: function() { + this.removeAll(); + this.lastPage = null; + this.nextPage = 1; + this.isPending = false; + dataSetSearch.hideFilter(); + }, + loadPage: function(filter, append) { + var store = this, + path = '/dataSets.json?fields=id,name' + (filter ? '&filter=name:like:' + filter : ''); + + filter = filter || dataSetFilter.getValue() || null; + + if (!append) { + this.lastPage = null; + this.nextPage = 1; + } + + if (store.nextPage === store.lastPage) { + return; + } + + store.isPending = true; + + Ext.Ajax.request({ + url: ns.core.init.contextPath + '/api' + path, + params: { + page: store.nextPage, + pageSize: 15 + }, + failure: function() { + store.isPending = false; + }, + success: function(r) { + var response = Ext.decode(r.responseText), + data = response.dataSets || [], + pager = response.pager; + + store.loadStore(data, pager, append); + } + }); + }, + loadStore: function(data, pager, append) { + this.loadData(data, append); + this.lastPage = this.nextPage; + + if (pager.pageCount > this.nextPage) { + this.nextPage++; + } + + this.isPending = false; + ns.core.web.multiSelect.filterAvailable({store: dataSetAvailableStore}, {store: dataSetSelectedStore}); + }, storage: {}, + parent: null, + isLoaded: false, sortStore: function() { this.sort('name', 'ASC'); - }, - isLoaded: false, - listeners: { - load: function(s) { - this.isLoaded = true; - - ns.core.web.storage.internal.add(s); - ns.core.web.multiSelect.filterAvailable({store: s}, {store: dataSetSelectedStore}); - } } }); ns.app.stores.dataSetAvailable = dataSetAvailableStore; @@ -3449,6 +3490,71 @@ } }; + dataSetLabel = Ext.create('Ext.form.Label', { + text: NS.i18n.available, + cls: 'ns-toolbar-multiselect-left-label', + style: 'margin-right:5px' + }); + + dataSetSearch = Ext.create('Ext.button.Button', { + width: 22, + height: 22, + cls: 'ns-button-icon', + style: 'background: url(images/search_14.png) 3px 3px no-repeat', + showFilter: function() { + dataSetLabel.hide(); + this.hide(); + dataSetFilter.show(); + dataSetFilter.reset(); + }, + hideFilter: function() { + dataSetLabel.show(); + this.show(); + dataSetFilter.hide(); + dataSetFilter.reset(); + }, + handler: function() { + this.showFilter(); + } + }); + + dataSetFilter = Ext.create('Ext.form.field.Trigger', { + cls: 'ns-trigger-filter', + emptyText: 'Filter available..', + height: 22, + hidden: true, + enableKeyEvents: true, + fieldStyle: 'height:22px; border-right:0 none', + style: 'height:22px', + onTriggerClick: function() { + if (this.getValue()) { + this.reset(); + this.onKeyUp(); + } + }, + onKeyUp: function() { + var store = dataSetAvailableStore; + store.loadPage(this.getValue(), false); + }, + listeners: { + keyup: { + fn: function(cmp) { + cmp.onKeyUp(); + }, + buffer: 100 + }, + show: function(cmp) { + cmp.focus(false, 50); + }, + focus: function(cmp) { + cmp.addCls('ns-trigger-filter-focused'); + }, + blur: function(cmp) { + cmp.removeCls('ns-trigger-filter-focused'); + } + } + }); + dataSetAvailable = Ext.create('Ext.ux.form.MultiSelect', { cls: 'ns-toolbar-multiselect-left', width: (ns.core.conf.layout.west_fieldset_width - ns.core.conf.layout.west_width_padding) / 2, @@ -3456,11 +3562,9 @@ displayField: 'name', store: dataSetAvailableStore, tbar: [ - { - xtype: 'label', - text: NS.i18n.available, - cls: 'ns-toolbar-multiselect-left-label' - }, + dataSetLabel, + dataSetSearch, + dataSetFilter, '->', { xtype: 'button', @@ -3480,7 +3584,15 @@ } ], listeners: { - afterrender: function() { + render: function(ms) { + var el = Ext.get(ms.boundList.getEl().id + '-listEl').dom; + + el.addEventListener('scroll', function(e) { + if (isScrolled(e) && !dataSetAvailableStore.isPending) { + dataSetAvailableStore.loadPage(null, true); + } + }); + this.boundList.on('itemdblclick', function() { ns.core.web.multiSelect.select(this, dataSetSelected); }, this); @@ -3558,8 +3670,9 @@ ); if (!dataSetAvailableStore.isLoaded) { - dataSetAvailableStore.load(); - } + dataSetAvailableStore.isLoaded = true; + dataSetAvailableStore.loadPage(null, false); + } }, items: [ {