dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #37492
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 19168: EV boolean ui selection control improved.
Merge authors:
Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 19168 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2015-05-19 15:22:58 +0200
message:
EV boolean ui selection control 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-event-visualizer/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 2015-05-19 13:09:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-reports/scripts/app.js 2015-05-19 13:21:58 +0000
@@ -657,93 +657,6 @@
}
});
- //Ext.define('Ext.ux.panel.DataElementBooleanContainer', {
- //extend: 'Ext.container.Container',
- //alias: 'widget.dataelementbooleanpanel',
- //layout: 'column',
- //bodyStyle: 'border:0 none',
- //style: 'margin: ' + margin,
- //getRecord: function() {
- //var record = {};
-
- //record.dimension = this.dataElement.id;
- //record.name = this.dataElement.name;
-
- //if (this.valueCmp.getValue()) {
- //record.filter = 'EQ:' + this.valueCmp.getValue();
- //}
-
- //return record;
- //},
- //setRecord: function(record) {
- //if (record.filter) {
- //this.valueCmp.setValue(record.filter.split(':')[1]);
- //}
- //},
- //initComponent: function() {
- //var container = this;
-
- //this.nameCmp = Ext.create('Ext.form.Label', {
- //text: this.dataElement.name,
- //flex: 1,
- //style: 'padding:' + namePadding
- //});
-
- //this.addCmp = Ext.create('Ext.button.Button', {
- //cls: 'ns-linkbutton',
- //style: 'padding: 0',
- //height: 18,
- //text: 'Duplicate',
- //handler: function() {
- //container.duplicateDataElement();
- //}
- //});
-
- //this.removeCmp = Ext.create('Ext.button.Button', {
- //cls: 'ns-linkbutton',
- //style: removeCmpStyle,
- //height: 18,
- //text: 'Remove',
- //handler: function() {
- //container.removeDataElement();
- //}
- //});
-
- //this.valueCmp = Ext.create('Ext.form.field.ComboBox', {
- //valueField: 'id',
- //displayField: 'name',
- //queryMode: 'local',
- //editable: false,
- //width: nameCmpWidth,
- //style: 'margin-bottom:0',
- //value: 'true',
- //store: {
- //fields: ['id', 'name'],
- //data: [
- //{id: 'true', name: ER.i18n.yes},
- //{id: 'false', name: ER.i18n.no}
- //]
- //}
- //});
-
- //this.items = [
- //{
- //xtype: 'container',
- //layout: 'hbox',
- //width: nameCmpWidth,
- //items: [
- //this.nameCmp,
- //this.addCmp,
- //this.removeCmp
- //]
- //},
- //this.valueCmp
- //];
-
- //this.callParent();
- //}
- //});
-
Ext.define('Ext.ux.panel.DataElementBooleanContainer', {
extend: 'Ext.container.Container',
alias: 'widget.dataelementbooleanpanel',
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js 2015-05-13 17:16:35 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-visualizer/scripts/app.js 2015-05-19 13:21:58 +0000
@@ -656,31 +656,55 @@
}
});
- Ext.define('Ext.ux.panel.DataElementBooleanContainer', {
+ Ext.define('Ext.ux.panel.DataElementBooleanContainer', {
extend: 'Ext.container.Container',
alias: 'widget.dataelementbooleanpanel',
layout: 'column',
bodyStyle: 'border:0 none',
style: 'margin: ' + margin,
getRecord: function() {
- var record = {};
-
- record.dimension = this.dataElement.id;
- record.name = this.dataElement.name;
-
- if (this.valueCmp.getValue()) {
- record.filter = 'EQ:' + this.valueCmp.getValue();
+ 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.length) {
+ var a = record.filter.split(':');
+ this.valueCmp.setOptionValues(a[1].split(';'));
}
+ },
+ getRecordsByCode: function(options, codeArray) {
+ var records = [];
- return record;
- },
- setRecord: function(record) {
- if (record.filter) {
- this.valueCmp.setValue(record.filter.split(':')[1]);
+ for (var i = 0; i < options.length; i++) {
+ for (var j = 0; j < codeArray.length; j++) {
+ if (options[i].code === codeArray[j]) {
+ records.push(options[i]);
+ }
+ }
}
+
+ return records;
},
initComponent: function() {
- var container = this;
+ var container = this,
+ idProperty = 'id',
+ nameProperty = 'name';
this.nameCmp = Ext.create('Ext.form.Label', {
text: this.dataElement.name,
@@ -708,23 +732,146 @@
}
});
- this.valueCmp = Ext.create('Ext.form.field.ComboBox', {
+ this.operatorCmp = Ext.create('Ext.form.field.ComboBox', {
valueField: 'id',
displayField: 'name',
queryMode: 'local',
editable: false,
- width: nameCmpWidth,
style: 'margin-bottom:0',
- value: 'true',
+ width: operatorCmpWidth,
+ value: 'IN',
store: {
fields: ['id', 'name'],
data: [
- {id: 'true', name: EV.i18n.yes},
- {id: 'false', name: EV.i18n.no}
+ {id: 'IN', name: 'One of'}
]
}
});
+ this.getData = function(idArray) {
+ var data = [], yes = {}, no = {};
+
+ yes[idProperty] = 'true';
+ yes[nameProperty] = NS.i18n.yes;
+ no[idProperty] = 'false';
+ no[nameProperty] = NS.i18n.no;
+
+ for (var i = 0; i < idArray.length; i++) {
+ if (idArray[i] === 'true' || idArray[i] === true) {
+ data.push(yes);
+ }
+ else if (idArray[i] === 'false' || idArray[i] === false) {
+ data.push(no);
+ }
+ }
+
+ return data;
+ };
+
+ this.searchStore = Ext.create('Ext.data.Store', {
+ fields: [idProperty, nameProperty],
+ data: container.getData(['true', 'false'])
+ });
+
+ // function
+ this.filterSearchStore = function(isLayout) {
+ var selected = container.valueCmp.getValue();
+
+ // hack, using internal method to activate dropdown before filtering
+ if (isLayout) {
+ container.searchCmp.onTriggerClick();
+ container.searchCmp.collapse();
+ }
+
+ // filter
+ 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: operatorCmpWidth,
+ style: 'margin-bottom:0',
+ emptyText: 'Select..',
+ valueField: idProperty,
+ displayField: nameProperty,
+ queryMode: 'local',
+ listConfig: {
+ minWidth: nameCmpWidth - operatorCmpWidth
+ },
+ store: this.searchStore,
+ listeners: {
+ select: function() {
+ var id = Ext.Array.from(this.getValue())[0];
+
+ // value
+ if (container.valueStore.findExact(idProperty, id) === -1) {
+ container.valueStore.add(container.searchStore.getAt(container.searchStore.findExact(idProperty, id)).data);
+ }
+
+ // search
+ this.select([]);
+
+ // filter
+ container.filterSearchStore();
+ },
+ expand: function() {
+ container.filterSearchStore();
+ }
+ }
+ });
+
+ this.valueStore = Ext.create('Ext.data.Store', {
+ fields: [idProperty, nameProperty],
+ 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: nameCmpWidth - operatorCmpWidth - operatorCmpWidth,
+ valueField: idProperty,
+ displayField: nameProperty,
+ emptyText: 'No selected items',
+ editable: false,
+ hideTrigger: true,
+ store: container.valueStore,
+ queryMode: 'local',
+ listConfig: {
+ minWidth: 266,
+ cls: 'ns-optionselector'
+ },
+ setOptionValues: function(codeArray) {
+ container.valueStore.removeAll();
+ container.valueStore.loadData(container.getData(codeArray));
+
+ this.setValue(codeArray);
+ container.filterSearchStore(true);
+ container.searchCmp.blur();
+ },
+ 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.items = [
{
xtype: 'container',
@@ -736,6 +883,8 @@
this.removeCmp
]
},
+ this.operatorCmp,
+ this.searchCmp,
this.valueCmp
];
