dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #33265
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 16972: GIS event layer option selector improved.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 16972 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2014-10-06 22:43:26 +0200
message:
GIS event layer option selector improved.
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-pivot/scripts/app.js
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js 2014-10-03 11:08:36 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js 2014-10-06 20:42:13 +0000
@@ -410,7 +410,7 @@
if (items.length) {
record.filter = 'IN:' + items.join(';');
}
-
+
return record;
},
setRecord: function(record) {
@@ -602,7 +602,7 @@
},
setOptionValues: function(optionArray) {
var options = [];
-
+
for (var i = 0; i < optionArray.length; i++) {
options.push({
code: optionArray[i],
@@ -614,7 +614,7 @@
container.valueStore.loadData(options);
this.setValue(options);
- },
+ },
listeners: {
change: function(cmp, newVal, oldVal) {
newVal = Ext.Array.from(newVal);
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js 2014-10-06 13:31:56 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-mapping/scripts/app.js 2014-10-06 20:42:13 +0000
@@ -1426,37 +1426,50 @@
}
});
- Ext.define('Ext.ux.panel.DataElementOptionContainer', {
+ Ext.define('Ext.ux.panel.OrganisationUnitGroupSetContainer', {
extend: 'Ext.container.Container',
- alias: 'widget.dataelementoptionpanel',
+ alias: 'widget.organisationunitgroupsetpanel',
layout: 'column',
bodyStyle: 'border:0 none',
style: 'margin: ' + margin,
+ addCss: function() {
+ var css = '.optionselector .x-boundlist-selected { background-color: #fff; border-color: #fff } \n';
+ css += '.optionselector .x-boundlist-selected.x-boundlist-item-over { background-color: #ddd; border-color: #ddd } \n';
+
+ Ext.util.CSS.createStyleSheet(css);
+ },
getRecord: function() {
- var valueArray = this.valueCmp.getValue().split(';'),
- record = {};
-
- for (var i = 0; i < valueArray.length; i++) {
- valueArray[i] = Ext.String.trim(valueArray[i]);
- }
-
- record.dimension = this.dataElement.id;
- record.name = this.dataElement.name;
-
- if (Ext.Array.clean(valueArray).length) {
- record.filter = this.operatorCmp.getValue() + ':' + valueArray.join(';');
- }
-
- return record;
+ var items = this.valueCmp.getValue(),
+ record = {
+ dimension: this.dataElement.id,
+ name: this.dataElement.name
+ };
+
+ // array or object
+ for (var i = 0; i < items.length; i++) {
+ if (Ext.isObject(items[i])) {
+ items[i] = items[i].code;
+ }
+ }
+
+ if (items.length) {
+ record.filter = 'IN:' + items.join(';');
+ }
+
+ return record;
},
setRecord: function(record) {
- if (Ext.isString(record.filter) && record.filter) {
+ if (Ext.isString(record.filter) && record.filter.length) {
var a = record.filter.split(':');
this.valueCmp.setOptionValues(a[1].split(';'));
}
},
initComponent: function() {
- var container = this;
+ var container = this,
+ idProperty = 'code',
+ nameProperty = 'name';
+
+ this.addCss();
this.nameCmp = Ext.create('Ext.form.Label', {
text: this.dataElement.name,
@@ -1480,8 +1493,8 @@
}
});
- this.valueStore = Ext.create('Ext.data.Store', {
- fields: ['id', 'name'],
+ this.searchStore = Ext.create('Ext.data.Store', {
+ fields: [idProperty, 'name'],
data: [],
loadOptionSet: function(optionSetId, key, pageSize) {
var store = this,
@@ -1489,25 +1502,30 @@
optionSetId = optionSetId || container.dataElement.optionSet.id;
- if (key) {
- params['key'] = key;
- }
+ //if (key) {
+ //params['key'] = key;
+ //}
params['max'] = pageSize || 15;
Ext.Ajax.request({
- url: gis.init.contextPath + '/api/optionSets/' + optionSetId + '/options.json',
+ url: gis.init.contextPath + '/api/optionSets/' + optionSetId + '.json?fields=options[' + idProperty + ',' + nameProperty + ']',
params: params,
disableCaching: false,
success: function(r) {
- var options = Ext.decode(r.responseText).options;
+ var options = Ext.decode(r.responseText).options,
+ data = [];
- for (var i = 0; i < options.length; i++) {
- options[i].id = options[i].name;
+ for (var i = 0; i < options.length; i++) {
+ if (container.valueStore.findExact(idProperty, options[i][idProperty]) === -1) {
+ data.push(options[i]);
+ }
}
-
+
store.removeAll();
- store.loadData(options);
+ store.loadData(data);
+
+ container.triggerCmp.storage = Ext.clone(options);
}
});
},
@@ -1520,12 +1538,24 @@
}
});
+ // function
+ this.filterSearchStore = function() {
+ var selected = container.valueCmp.getValue();
+
+ container.searchStore.clearFilter();
+
+ container.searchStore.filterBy(function(record) {
+ return !Ext.Array.contains(selected, record.data[idProperty]);
+ });
+ };
+
this.searchCmp = Ext.create('Ext.form.field.ComboBox', {
+ multiSelect: true,
width: 62,
style: 'margin-bottom:0',
emptyText: 'Search..',
- valueField: 'id',
- displayField: 'name',
+ valueField: idProperty,
+ displayField: nameProperty,
hideTrigger: true,
delimiter: '; ',
enableKeyEvents: true,
@@ -1533,15 +1563,15 @@
listConfig: {
minWidth: 304
},
- store: this.valueStore,
+ store: this.searchStore,
listeners: {
keyup: {
- fn: function(cb) {
- var value = cb.getValue(),
+ fn: function() {
+ var value = this.getValue(),
optionSetId = container.dataElement.optionSet.id;
// search
- container.valueStore.loadOptionSet(optionSetId, value);
+ container.searchStore.loadOptionSet(optionSetId, value);
// trigger
if (!value || (Ext.isString(value) && value.length === 1)) {
@@ -1549,17 +1579,26 @@
}
}
},
- select: function(cb) {
+ select: function() {
+ var id = Ext.Array.from(this.getValue())[0];
// value
- container.valueCmp.addOptionValue(cb.getValue());
+ if (container.valueStore.findExact(idProperty, id) === -1) {
+ container.valueStore.add(container.searchStore.getAt(container.searchStore.findExact(idProperty, id)).data);
+ }
// search
- cb.clearValue();
+ this.select([]);
+
+ // filter
+ container.filterSearchStore();
// trigger
container.triggerCmp.enable();
- }
+ },
+ expand: function() {
+ container.filterSearchStore();
+ }
}
});
@@ -1571,46 +1610,68 @@
storage: [],
handler: function(b) {
if (b.storage.length) {
- container.valueStore.removeAll();
- container.valueStore.add(Ext.clone(b.storage));
+ container.searchStore.removeAll();
+ container.searchStore.add(Ext.clone(b.storage));
}
else {
- container.valueStore.loadOptionSet();
- }
- }
- });
-
- this.valueCmp = Ext.create('Ext.form.field.Text', {
+ container.searchStore.loadOptionSet();
+ }
+ }
+ });
+
+ this.valueStore = Ext.create('Ext.data.Store', {
+ fields: ['id', 'name'],
+ listeners: {
+ add: function() {
+ container.valueCmp.select(this.getRange());
+ },
+ remove: function() {
+ container.valueCmp.select(this.getRange());
+ }
+ }
+ });
+
+ this.valueCmp = Ext.create('Ext.form.field.ComboBox', {
+ multiSelect: true,
+ style: 'margin-bottom:0',
width: 226,
- style: 'margin-bottom:0',
- addOptionValue: function(option) {
- var value = this.getValue();
-
- if (value) {
- var a = value.split(';');
-
- for (var i = 0; i < a.length; i++) {
- a[i] = Ext.String.trim(a[i]);
- };
-
- a = Ext.Array.clean(a);
-
- value = a.join('; ');
- value += '; ';
- }
-
- this.setValue(value += option);
- },
+ valueField: idProperty,
+ displayField: nameProperty,
+ emptyText: 'No selected items',
+ editable: false,
+ hideTrigger: true,
+ store: container.valueStore,
+ queryMode: 'local',
+ listConfig: {
+ cls: 'optionselector'
+ },
setOptionValues: function(optionArray) {
- var value = '';
-
+ var options = [];
+
for (var i = 0; i < optionArray.length; i++) {
- value += optionArray[i] + (i < (optionArray.length - 1) ? '; ' : '');
- }
-
- this.setValue(value);
+ options.push({
+ code: optionArray[i],
+ name: optionArray[i]
+ });
+ }
+
+ container.valueStore.removeAll();
+ container.valueStore.loadData(options);
+
+ this.setValue(options);
+ },
+ listeners: {
+ change: function(cmp, newVal, oldVal) {
+ newVal = Ext.Array.from(newVal);
+ oldVal = Ext.Array.from(oldVal);
+
+ if (newVal.length < oldVal.length) {
+ var id = Ext.Array.difference(oldVal, newVal)[0];
+ container.valueStore.removeAt(container.valueStore.findExact(idProperty, id));
+ }
+ }
}
- });
+ });
this.addCmp = Ext.create('Ext.button.Button', {
text: '+',
@@ -4424,7 +4485,7 @@
getUxType = function(element) {
if (Ext.isObject(element.optionSet) && Ext.isString(element.optionSet.id)) {
- return 'Ext.ux.panel.DataElementOptionContainer';
+ return 'Ext.ux.panel.OrganisationUnitGroupSetContainer';
}
if (element.type === 'int' || element.type === 'number') {
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-pivot/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-pivot/scripts/app.js 2014-10-06 18:46:34 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-pivot/scripts/app.js 2014-10-06 20:42:13 +0000
@@ -826,12 +826,7 @@
]
},
parameters
- ],
- listeners: {
- collapse: function() {
- this.setHeight(100);
- }
- }
+ ]
}
],
bbar: [
@@ -2706,7 +2701,7 @@
loadStore: function(data, pager, append) {
this.loadData(data, append);
this.sortStore();
-
+
this.lastPage = this.nextPage;
if (pager.pageCount > this.nextPage) {
@@ -2884,7 +2879,7 @@
loadStore: function(data, pager, append) {
this.loadData(data, append);
this.sortStore();
-
+
this.lastPage = this.nextPage;
if (pager.pageCount > this.nextPage) {
@@ -2988,7 +2983,7 @@
loadStore: function(data, pager, append) {
this.loadData(data, append);
this.sortStore();
-
+
this.lastPage = this.nextPage;
if (pager.pageCount > this.nextPage) {
