← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14280: ER, fixed periods added, periods and start/end dates separated.

 

Merge authors:
  Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 14280 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2014-03-18 15:50:42 +0100
message:
  ER, fixed periods added, periods and start/end dates separated.
modified:
  dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/app.js
  dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/core.js
  dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/styles/style.css


--
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-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/app.js	2014-03-17 12:03:26 +0000
+++ dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/app.js	2014-03-18 14:49:05 +0000
@@ -619,12 +619,12 @@
 			dimensionStore.add(getData(all));
 		};
 		ns.app.stores.dimension = dimensionStore;
-		//dimensionStore.add({id: dimConf.period.dimensionName, name: dimConf.relativePeriod.name});
 
 		colStore = getStore();
 		colStore.add({id: dimConf.organisationUnit.dimensionName, name: dimConf.organisationUnit.name});
 
 		rowStore = getStore();
+        rowStore.add({id: dimConf.period.dimensionName, name: dimConf.period.name});
 
 		filterStore = getStore();
 
@@ -824,6 +824,21 @@
             }
         };
 
+        hasDimension = function(id) {
+            var stores = [dimensionStore, colStore, rowStore, filterStore];
+
+            for (var i = 0, store, index; i < stores.length; i++) {
+                store = stores[i];
+                index = store.findExact('id', dataElementId);
+
+                if (index != -1) {
+                    return true;
+                }
+            }
+
+            return false;
+        };
+
 		window = Ext.create('Ext.window.Window', {
 			title: NS.i18n.table_layout,
 			bodyStyle: 'background-color:#fff; padding:2px',
@@ -838,6 +853,7 @@
 			filterStore: filterStore,
             addDimension: addDimension,
             removeDimension: removeDimension,
+            hasDimension: hasDimension,
 			hideOnBlur: true,
 			items: {
 				layout: 'column',
@@ -2499,6 +2515,9 @@
 			stagesByProgramStore,
             dataElementsByStageStore,
             organisationUnitGroupStore,
+            periodTypeStore,
+            fixedPeriodAvailableStore,
+            fixedPeriodSelectedStore,
 
         // cache
             stageStorage = {},
@@ -2517,13 +2536,36 @@
             selectDataElements,
             dataElement,
 
+            periodMode,
+            onPeriodModeSelect,
             getDateLink,
 			startDate,
 			endDate,
             startEndDate,
-            onRelativePeriodChange,
+
+            onPeriodChange,
+            onCheckboxAdd,
+            intervalListeners,
+            relativePeriodCmpMap = {},
+            weeks,
+            months,
+            biMonths,
+            quarters,
+            sixMonths,
+            financialYears,
+            years,
             relativePeriod,
             checkboxes = [],
+
+            fixedPeriodAvailable,
+            fixedPeriodSelected,
+            onPeriodTypeSelect,
+            periodType,
+            prevYear,
+            nextYear,
+            fixedPeriodSettings,
+            fixedPeriodAvailableSelected,
+            periods,
 			period,
 
 			treePanel,
@@ -2532,26 +2574,30 @@
 			userOrganisationUnitGrandChildren,
 			organisationUnitLevel,
 			organisationUnitGroup,
+            organisationUnitPanel,
 			toolMenu,
 			tool,
 			toolPanel,
             organisationUnit,
 
+            accordionBody,
 			accordionPanels = [],
-			panel,
 
 		// functions
 			reset,
 			setGui,
 			getView,
 			validateView,
+			panel,
 
         // constants
-            baseWidth = 442,
+            baseWidth = 446,
             toolWidth = 36,
 
             accBaseWidth = baseWidth - 2;
 
+        ns.app.relativePeriodCmpMap = relativePeriodCmpMap;
+
 		// stores
 
 		programStore = Ext.create('Ext.data.Store', {
@@ -2612,11 +2658,33 @@
 			}
 		});
 
+        periodTypeStore = Ext.create('Ext.data.Store', {
+			fields: ['id', 'name'],
+			data: ns.core.conf.period.periodTypes
+		});
+
+		fixedPeriodAvailableStore = Ext.create('Ext.data.Store', {
+			fields: ['id', 'name', 'index'],
+			data: [],
+			setIndex: function(periods) {
+				for (var i = 0; i < periods.length; i++) {
+					periods[i].index = i;
+				}
+			},
+			sortStore: function() {
+				this.sort('index', 'ASC');
+			}
+		});
+
+		fixedPeriodSelectedStore = Ext.create('Ext.data.Store', {
+			fields: ['id', 'name'],
+			data: []
+		});
+
         // components
 
             // data element
 		program = Ext.create('Ext.form.field.ComboBox', {
-			fieldLabel: NS.i18n.programs,
 			editable: false,
 			valueField: 'id',
 			displayField: 'name',
@@ -2628,7 +2696,7 @@
 			forceSelection: true,
 			queryMode: 'remote',
 			columnWidth: 0.5,
-			style: 'margin:1px 1px 2px 0',
+			style: 'margin:1px 1px 1px 0',
 			storage: {},
 			store: programStore,
             getRecord: function() {
@@ -2705,7 +2773,6 @@
 		};
 
 		stage = Ext.create('Ext.form.field.ComboBox', {
-			fieldLabel: NS.i18n.indicator,
 			editable: false,
 			valueField: 'id',
 			displayField: 'name',
@@ -2717,7 +2784,7 @@
 			queryMode: 'local',
 			forceSelection: true,
 			columnWidth: 0.5,
-			style: 'margin:1px 0 2px 1px',
+			style: 'margin:1px 0 1px 0',
 			disabled: true,
 			listConfig: {loadMask: false},
 			store: stagesByProgramStore,
@@ -2786,10 +2853,10 @@
 
 		dataElementAvailable = Ext.create('Ext.ux.form.MultiSelect', {
 			width: accBaseWidth,
-            height: 162,
+            height: 180,
 			valueField: 'id',
 			displayField: 'name',
-            style: 'margin-bottom:2px',
+            style: 'margin-bottom:1px',
 			store: dataElementsByStageStore,
 			tbar: [
 				{
@@ -2835,7 +2902,7 @@
 
         dataElementSelected = Ext.create('Ext.panel.Panel', {
 			width: accBaseWidth,
-            height: 204,
+            height: 240,
             bodyStyle: 'padding:2px 0 5px 3px; overflow-y: scroll',
             tbar: {
                 height: 27,
@@ -2947,14 +3014,14 @@
 
 				addUxFromDataElement(element);
 
-                ns.app.aggregateLayoutWindow.rowStore.add(element);
+                ns.app.aggregateLayoutWindow.colStore.add(element);
                 ns.app.queryLayoutWindow.colStore.add(element);
 			}
         };
 
         dataElement = Ext.create('Ext.panel.Panel', {
             title: '<div class="ns-panel-title-data">Data</div>',
-            bodyStyle: 'padding:2px',
+            bodyStyle: 'padding:1px',
             hideCollapseTool: true,
             items: [
                 {
@@ -2976,7 +3043,40 @@
 			}
         });
 
-            // date
+            // dates
+        periodMode = Ext.create('Ext.form.field.ComboBox', {
+            editable: false,
+            valueField: 'id',
+            displayField: 'name',
+            queryMode: 'local',
+            width: accBaseWidth,
+            listConfig: {loadMask: false},
+            style: 'padding-bottom:1px; border-bottom:1px solid #ddd; margin-bottom:1px',
+            value: 'periods',
+            store: {
+                fields: ['id', 'name'],
+                data: [
+                    {id: 'periods', name: 'Select fixed and relative periods'},
+                    {id: 'dates', name: 'Select start/end dates'}
+                ]
+            },
+            listeners: {
+                select: function(cmp) {
+                    onPeriodModeSelect(cmp.getValue());
+                }
+            }
+        });
+
+        onPeriodModeSelect = function(mode) {
+            if (mode === 'dates') {
+                startEndDate.show();
+                periods.hide();
+            }
+            else if (mode === 'periods') {
+                startEndDate.hide();
+                periods.show();
+            }
+        };
 
         getDateLink = function(text, fn, style) {
             return Ext.create('Ext.form.Label', {
@@ -3000,7 +3100,7 @@
 			labelCls: 'ns-form-item-label-top',
 			labelSeparator: '',
             width: (accBaseWidth / 2) - 1,
-			style: 'margin-right: 1px; margin-bottom: 7px; font-weight: bold; color: #333;',
+			style: 'margin:4px 1px 7px 0; color: #333;',
 			format: 'Y-m-d',
 			value: new Date( (new Date()).setMonth( (new Date()).getMonth() - 3))
 		});
@@ -3011,7 +3111,7 @@
 			labelCls: 'ns-form-item-label-top',
 			labelSeparator: '',
             width: (accBaseWidth / 2) - 1,
-			style: 'margin-left: 1px; margin-bottom: 7px; font-weight: bold; color: #333;',
+			style: 'margin:4px 1px 7px 0; color: #333;',
 			format: 'Y-m-d',
 			value: new Date()
 		});
@@ -3019,207 +3119,642 @@
         startEndDate = Ext.create('Ext.container.Container', {
             cls: 'ns-container-default',
             layout: 'column',
+            hidden: true,
             items: [
-                {
-                    xtype: 'container',
-                    cls: 'ns-container-default',
-                    items: [
-                        startDate,
-                        {
-                            xtype: 'container',
-                            cls: 'ns-container-default',
-                            layout: 'column',
-                            items: [
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    layout: 'anchor',
-                                    items: [
-                                        getDateLink('+1 year', function() {
-                                            var date = startDate.getValue();
-                                            date.setFullYear(date.getFullYear() + 1);
-                                            startDate.setValue(date);
-                                        }),
-                                        getDateLink('-1 year', function() {
-                                            var date = startDate.getValue();
-                                            date.setFullYear(date.getFullYear() - 1);
-                                            startDate.setValue(date);
-                                        }),
-                                        getDateLink((new Date()).getFullYear() + '-01-01', function() {
-                                            startDate.setValue((new Date()).getFullYear() + '-01-01');
-                                        }, 'margin-top: 7px'),
-                                        getDateLink(((new Date()).getFullYear() - 1) + '-01-01', function() {
-                                            startDate.setValue(((new Date()).getFullYear() - 1) + '-01-01');
-                                        }),
-                                        getDateLink(((new Date()).getFullYear() - 2) + '-01-01', function() {
-                                            startDate.setValue(((new Date()).getFullYear() - 2) + '-01-01');
-                                        })
-                                    ]
-                                },
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    items: [
-                                        getDateLink('+1 month', function() {
-                                            var date = startDate.getValue();
-                                            date.setMonth(date.getMonth() + 1);
-                                            startDate.setValue(date);
-                                        }),
-                                        getDateLink('-1 month', function() {
-                                            var date = startDate.getValue();
-                                            date.setMonth(date.getMonth() - 1);
-                                            startDate.setValue(date);
-                                        }),
-                                        getDateLink((new Date()).getFullYear() + '-07-01', function() {
-                                            startDate.setValue((new Date()).getFullYear() + '-07-01');
-                                        }, 'margin-top: 7px'),
-                                        getDateLink(((new Date()).getFullYear() - 1) + '-07-01', function() {
-                                            startDate.setValue(((new Date()).getFullYear() - 1) + '-07-01');
-                                        }),
-                                        getDateLink(((new Date()).getFullYear() - 2) + '-07-01', function() {
-                                            startDate.setValue(((new Date()).getFullYear() - 2) + '-07-01');
-                                        })
-                                    ]
-                                },
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    items: [
-                                        getDateLink('+1 day', function() {
-                                            var date = startDate.getValue();
-                                            date.setDate(date.getDate() + 1);
-                                            startDate.setValue(date);
-                                        }),
-                                        getDateLink('-1 day', function() {
-                                            var date = startDate.getValue();
-                                            date.setDate(date.getDate() - 1);
-                                            startDate.setValue(date);
-                                        })
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    xtype: 'container',
-                    cls: 'ns-container-default',
-                    items: [
-                        endDate,
-                        {
-                            xtype: 'container',
-                            cls: 'ns-container-default',
-                            layout: 'column',
-                            items: [
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    layout: 'anchor',
-                                    items: [
-                                        getDateLink('+1 year', function() {
-                                            var a = endDate.getRawValue().split('-'),
-                                                year = (parseInt(a[0]) + 1).toString();
-
-                                            endDate.setValue((year.length === 1 ? '0' + year : year) + '-' + a[1] + '-' + a[2]);
-                                        }),
-                                        getDateLink('-1 year', function() {
-                                            var a = endDate.getRawValue().split('-'),
-                                                year = (parseInt(a[0]) - 1).toString();
-
-                                            endDate.setValue((year.length === 1 ? '0' + year : year) + '-' + a[1] + '-' + a[2]);
-                                        }),
-                                        getDateLink((new Date()).getFullYear() + '-06-30', function() {
-                                            endDate.setValue((new Date()).getFullYear() + '-06-30');
-                                        }, 'margin-top: 7px'),
-                                        getDateLink(((new Date()).getFullYear() - 1) + '-06-30', function() {
-                                            endDate.setValue(((new Date()).getFullYear() - 1) + '-06-30');
-                                        }),
-                                        getDateLink(((new Date()).getFullYear() - 2) + '-06-30', function() {
-                                            endDate.setValue(((new Date()).getFullYear() - 2) + '-06-30');
-                                        })
-                                    ]
-                                },
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    items: [
-                                        getDateLink('+1 month', function() {
-                                            var a = endDate.getRawValue().split('-'),
-                                                month = (parseInt(a[1]) + 1).toString();
-
-                                            endDate.setValue(a[0] + '-' + (month.length === 1 ? '0' + month : month) + '-' + a[2]);
-                                        }),
-                                        getDateLink('-1 month', function() {
-                                            var a = endDate.getRawValue().split('-'),
-                                                month = (parseInt(a[1]) - 1).toString();
-
-                                            endDate.setValue(a[0] + '-' + (month.length === 1 ? '0' + month : month) + '-' + a[2]);
-                                        }),
-                                        getDateLink((new Date()).getFullYear() + '-12-31', function() {
-                                            endDate.setValue((new Date()).getFullYear() + '-12-31');
-                                        }, 'margin-top: 7px'),
-                                        getDateLink(((new Date()).getFullYear() - 1) + '-12-31', function() {
-                                            endDate.setValue(((new Date()).getFullYear() - 1) + '-12-31');
-                                        }),
-                                        getDateLink(((new Date()).getFullYear() - 2) + '-12-31', function() {
-                                            endDate.setValue(((new Date()).getFullYear() - 2) + '-12-31');
-                                        })
-                                    ]
-                                },
-                                {
-                                    xtype: 'container',
-                                    cls: 'ns-container-default',
-                                    columnWidth: 0.3,
-                                    items: [
-                                        getDateLink('+1 day', function() {
-                                            var date = endDate.getValue();
-                                            date.setDate(date.getDate() + 1);
-                                            endDate.setValue(date);
-                                        }),
-                                        getDateLink('-1 day', function() {
-                                            var date = endDate.getValue();
-                                            date.setDate(date.getDate() - 1);
-                                            endDate.setValue(date);
-                                        })
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                }
+                startDate,
+                endDate
+
+                //{
+                    //xtype: 'container',
+                    //cls: 'ns-container-default',
+                    //items: [
+                        //startDate,
+                        //{
+                            //xtype: 'container',
+                            //cls: 'ns-container-default',
+                            //layout: 'column',
+                            //items: [
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //layout: 'anchor',
+                                    //items: [
+                                        //getDateLink('+1 year', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setFullYear(date.getFullYear() + 1);
+                                            //startDate.setValue(date);
+                                        //}),
+                                        //getDateLink('-1 year', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setFullYear(date.getFullYear() - 1);
+                                            //startDate.setValue(date);
+                                        //}),
+                                        //getDateLink((new Date()).getFullYear() + '-01-01', function() {
+                                            //startDate.setValue((new Date()).getFullYear() + '-01-01');
+                                        //}, 'margin-top: 7px'),
+                                        //getDateLink(((new Date()).getFullYear() - 1) + '-01-01', function() {
+                                            //startDate.setValue(((new Date()).getFullYear() - 1) + '-01-01');
+                                        //}),
+                                        //getDateLink(((new Date()).getFullYear() - 2) + '-01-01', function() {
+                                            //startDate.setValue(((new Date()).getFullYear() - 2) + '-01-01');
+                                        //})
+                                    //]
+                                //},
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //items: [
+                                        //getDateLink('+1 month', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setMonth(date.getMonth() + 1);
+                                            //startDate.setValue(date);
+                                        //}),
+                                        //getDateLink('-1 month', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setMonth(date.getMonth() - 1);
+                                            //startDate.setValue(date);
+                                        //}),
+                                        //getDateLink((new Date()).getFullYear() + '-07-01', function() {
+                                            //startDate.setValue((new Date()).getFullYear() + '-07-01');
+                                        //}, 'margin-top: 7px'),
+                                        //getDateLink(((new Date()).getFullYear() - 1) + '-07-01', function() {
+                                            //startDate.setValue(((new Date()).getFullYear() - 1) + '-07-01');
+                                        //}),
+                                        //getDateLink(((new Date()).getFullYear() - 2) + '-07-01', function() {
+                                            //startDate.setValue(((new Date()).getFullYear() - 2) + '-07-01');
+                                        //})
+                                    //]
+                                //},
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //items: [
+                                        //getDateLink('+1 day', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setDate(date.getDate() + 1);
+                                            //startDate.setValue(date);
+                                        //}),
+                                        //getDateLink('-1 day', function() {
+                                            //var date = startDate.getValue();
+                                            //date.setDate(date.getDate() - 1);
+                                            //startDate.setValue(date);
+                                        //})
+                                    //]
+                                //}
+                            //]
+                        //}
+                    //]
+                //},
+                //{
+                    //xtype: 'container',
+                    //cls: 'ns-container-default',
+                    //items: [
+                        //endDate,
+                        //{
+                            //xtype: 'container',
+                            //cls: 'ns-container-default',
+                            //layout: 'column',
+                            //items: [
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //layout: 'anchor',
+                                    //items: [
+                                        //getDateLink('+1 year', function() {
+                                            //var a = endDate.getRawValue().split('-'),
+                                                //year = (parseInt(a[0]) + 1).toString();
+
+                                            //endDate.setValue((year.length === 1 ? '0' + year : year) + '-' + a[1] + '-' + a[2]);
+                                        //}),
+                                        //getDateLink('-1 year', function() {
+                                            //var a = endDate.getRawValue().split('-'),
+                                                //year = (parseInt(a[0]) - 1).toString();
+
+                                            //endDate.setValue((year.length === 1 ? '0' + year : year) + '-' + a[1] + '-' + a[2]);
+                                        //}),
+                                        //getDateLink((new Date()).getFullYear() + '-06-30', function() {
+                                            //endDate.setValue((new Date()).getFullYear() + '-06-30');
+                                        //}, 'margin-top: 7px'),
+                                        //getDateLink(((new Date()).getFullYear() - 1) + '-06-30', function() {
+                                            //endDate.setValue(((new Date()).getFullYear() - 1) + '-06-30');
+                                        //}),
+                                        //getDateLink(((new Date()).getFullYear() - 2) + '-06-30', function() {
+                                            //endDate.setValue(((new Date()).getFullYear() - 2) + '-06-30');
+                                        //})
+                                    //]
+                                //},
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //items: [
+                                        //getDateLink('+1 month', function() {
+                                            //var a = endDate.getRawValue().split('-'),
+                                                //month = (parseInt(a[1]) + 1).toString();
+
+                                            //endDate.setValue(a[0] + '-' + (month.length === 1 ? '0' + month : month) + '-' + a[2]);
+                                        //}),
+                                        //getDateLink('-1 month', function() {
+                                            //var a = endDate.getRawValue().split('-'),
+                                                //month = (parseInt(a[1]) - 1).toString();
+
+                                            //endDate.setValue(a[0] + '-' + (month.length === 1 ? '0' + month : month) + '-' + a[2]);
+                                        //}),
+                                        //getDateLink((new Date()).getFullYear() + '-12-31', function() {
+                                            //endDate.setValue((new Date()).getFullYear() + '-12-31');
+                                        //}, 'margin-top: 7px'),
+                                        //getDateLink(((new Date()).getFullYear() - 1) + '-12-31', function() {
+                                            //endDate.setValue(((new Date()).getFullYear() - 1) + '-12-31');
+                                        //}),
+                                        //getDateLink(((new Date()).getFullYear() - 2) + '-12-31', function() {
+                                            //endDate.setValue(((new Date()).getFullYear() - 2) + '-12-31');
+                                        //})
+                                    //]
+                                //},
+                                //{
+                                    //xtype: 'container',
+                                    //cls: 'ns-container-default',
+                                    //columnWidth: 0.3,
+                                    //items: [
+                                        //getDateLink('+1 day', function() {
+                                            //var date = endDate.getValue();
+                                            //date.setDate(date.getDate() + 1);
+                                            //endDate.setValue(date);
+                                        //}),
+                                        //getDateLink('-1 day', function() {
+                                            //var date = endDate.getValue();
+                                            //date.setDate(date.getDate() - 1);
+                                            //endDate.setValue(date);
+                                        //})
+                                    //]
+                                //}
+                            //]
+                        //}
+                    //]
+                //}
             ]
         });
 
-        onRelativePeriodChange = function() {
-            if (period.isNoRelativePeriods()) {
-                startEndDate.enable();
-
+            // relative periods
+        onPeriodChange = function() {
+            if ((period.isRelativePeriods() || fixedPeriodSelectedStore.getRange().length) && !ns.app.aggregateLayoutWindow.hasDimension(dimConf.period.dimensionName)) {
+                ns.app.aggregateLayoutWindow.rowStore.add({id: dimConf.period.dimensionName, name: dimConf.period.name});
+            }
+            else {
                 ns.app.aggregateLayoutWindow.removeDimension(dimConf.period.dimensionName);
             }
-            else if (!startEndDate.isDisabled()) {
-                startEndDate.disable();
-
-                ns.app.aggregateLayoutWindow.rowStore.add({id: dimConf.period.dimensionName, name: dimConf.relativePeriod.name});
-            }
-        };
-
-        relativePeriod = {
-			xtype: 'container',
-            cls: 'ns-container-default',
-            style: 'margin-top: 13px; padding-top: 6px; border-top: 1px dashed #ccc',
-            width: accBaseWidth,
+        };
+
+        onCheckboxAdd = function(cmp) {
+            if (cmp.xtype === 'checkbox') {
+                checkboxes.push(cmp);
+                relativePeriodCmpMap[cmp.relativePeriodId] = cmp;
+            }
+        };
+
+        intervalListeners = {
+            added: function(cmp) {
+                onCheckboxAdd(cmp);
+            },
+            change: function() {
+                if (relativePeriod.getRecords().length < 2) {
+                    onPeriodChange();
+                }
+            }
+        };
+
+        weeks = Ext.create('Ext.container.Container', {
+            columnWidth: 0.34,
+            bodyStyle: 'border-style:none; padding:0 0 0 8px',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.weeks,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_WEEK',
+                    boxLabel: NS.i18n.last_week
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_4_WEEKS',
+                    boxLabel: NS.i18n.last_4_weeks
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_12_WEEKS',
+                    boxLabel: NS.i18n.last_12_weeks
+                }
+            ]
+        });
+
+        months = Ext.create('Ext.container.Container', {
+            columnWidth: 0.33,
+            bodyStyle: 'border-style:none',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.months,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_MONTH',
+                    boxLabel: NS.i18n.last_month
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_3_MONTHS',
+                    boxLabel: NS.i18n.last_3_months
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_12_MONTHS',
+                    boxLabel: NS.i18n.last_12_months,
+                    checked: true
+                }
+            ]
+        });
+
+        biMonths = Ext.create('Ext.container.Container', {
+            columnWidth: 0.33,
+            bodyStyle: 'border-style:none',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.bimonths,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_BIMONTH',
+                    boxLabel: NS.i18n.last_bimonth
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_6_BIMONTHS',
+                    boxLabel: NS.i18n.last_6_bimonths
+                }
+            ]
+        });
+
+        quarters = Ext.create('Ext.container.Container', {
+            columnWidth: 0.34,
+            bodyStyle: 'border-style:none; padding:5px 0 0 8px',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.quarters,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_QUARTER',
+                    boxLabel: NS.i18n.last_quarter
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_4_QUARTERS',
+                    boxLabel: NS.i18n.last_4_quarters
+                }
+            ]
+        });
+
+        sixMonths = Ext.create('Ext.container.Container', {
+            columnWidth: 0.33,
+            bodyStyle: 'border-style:none; padding:5px 0 0',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.sixmonths,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_SIX_MONTH',
+                    boxLabel: NS.i18n.last_sixmonth
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_2_SIXMONTHS',
+                    boxLabel: NS.i18n.last_2_sixmonths
+                }
+            ]
+        });
+
+        financialYears = Ext.create('Ext.container.Container', {
+            columnWidth: 0.33,
+            bodyStyle: 'border-style:none; padding:5px 0 0',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.financial_years,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_FINANCIAL_YEAR',
+                    boxLabel: NS.i18n.last_financial_year
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_5_FINANCIAL_YEARS',
+                    boxLabel: NS.i18n.last_5_financial_years
+                }
+            ]
+        });
+
+        years = Ext.create('Ext.container.Container', {
+            columnWidth: 0.35,
+            bodyStyle: 'border-style:none; padding:5px 0 0 8px',
+            defaults: {
+                labelSeparator: '',
+                style: 'margin-bottom:2px',
+                listeners: intervalListeners
+            },
+            items: [
+                {
+                    xtype: 'label',
+                    text: NS.i18n.years,
+                    cls: 'ns-label-period-heading'
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'THIS_YEAR',
+                    boxLabel: NS.i18n.this_year
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_YEAR',
+                    boxLabel: NS.i18n.last_year
+                },
+                {
+                    xtype: 'checkbox',
+                    relativePeriodId: 'LAST_5_YEARS',
+                    boxLabel: NS.i18n.last_5_years
+                }
+            ]
+        });
+
+        relativePeriod = Ext.create('Ext.container.Container', {
 			hideCollapseTool: true,
 			autoScroll: true,
-			valueComponentMap: {},
-			getRecords: function() {
-				var map = this.valueComponentMap,
+			style: 'border:0 none; padding:2px 0 0 7px',
+			items: [
+				{
+					xtype: 'container',
+					layout: 'column',
+					items: [
+                        weeks,
+						months,
+                        biMonths
+					]
+				},
+				{
+					xtype: 'container',
+					layout: 'column',
+                    style: 'padding-top:4px',
+					items: [
+						quarters,
+						sixMonths,
+						financialYears
+					]
+				},
+				{
+					xtype: 'container',
+					layout: 'column',
+                    style: 'padding-top:4px',
+					items: [
+                        years
+					]
+				}
+			],
+            getRecords: function() {
+                var a = [];
+
+                for (var i = 0; i < checkboxes.length; i++) {
+                    if (checkboxes[i].getValue()) {
+                        a.push(checkboxes[i].relativePeriodId);
+                    }
+                }
+
+                return a;
+            }
+		});
+
+            // fixed periods
+		fixedPeriodAvailable = Ext.create('Ext.ux.form.MultiSelect', {
+			cls: 'ns-toolbar-multiselect-left',
+            width: accBaseWidth / 2,
+            height: 160,
+			valueField: 'id',
+			displayField: 'name',
+			store: fixedPeriodAvailableStore,
+			tbar: [
+				{
+					xtype: 'label',
+					text: NS.i18n.available,
+					cls: 'ns-toolbar-multiselect-left-label'
+				},
+				'->',
+				{
+					xtype: 'button',
+					icon: 'images/arrowright.png',
+					width: 22,
+					handler: function() {
+						ns.core.web.multiSelect.select(fixedPeriodAvailable, fixedPeriodSelected);
+                        onPeriodChange();
+					}
+				},
+				{
+					xtype: 'button',
+					icon: 'images/arrowrightdouble.png',
+					width: 22,
+					handler: function() {
+						ns.core.web.multiSelect.selectAll(fixedPeriodAvailable, fixedPeriodSelected, true);
+                        onPeriodChange();
+					}
+				},
+				' '
+			],
+			listeners: {
+				afterrender: function() {
+					this.boundList.on('itemdblclick', function() {
+						ns.core.web.multiSelect.select(fixedPeriodAvailable, fixedPeriodSelected);
+                        onPeriodChange();
+					}, this);
+				}
+			}
+		});
+
+		fixedPeriodSelected = Ext.create('Ext.ux.form.MultiSelect', {
+			cls: 'ns-toolbar-multiselect-right',
+            width: accBaseWidth / 2,
+			height: 160,
+			valueField: 'id',
+			displayField: 'name',
+			ddReorder: false,
+			store: fixedPeriodSelectedStore,
+			tbar: [
+				' ',
+				{
+					xtype: 'button',
+					icon: 'images/arrowleftdouble.png',
+					width: 22,
+					handler: function() {
+						ns.core.web.multiSelect.unselectAll(fixedPeriodAvailable, fixedPeriodSelected);
+                        onPeriodChange();
+					}
+				},
+				{
+					xtype: 'button',
+					icon: 'images/arrowleft.png',
+					width: 22,
+					handler: function() {
+						ns.core.web.multiSelect.unselect(fixedPeriodAvailable, fixedPeriodSelected);
+                        onPeriodChange();
+					}
+				},
+				'->',
+				{
+					xtype: 'label',
+					text: NS.i18n.selected,
+					cls: 'ns-toolbar-multiselect-right-label'
+				}
+			],
+			listeners: {
+				afterrender: function() {
+					this.boundList.on('itemdblclick', function() {
+						ns.core.web.multiSelect.unselect(fixedPeriodAvailable, fixedPeriodSelected);
+                        onPeriodChange();
+					}, this);
+				}
+			}
+		});
+
+        onPeriodTypeSelect = function(value) {
+            var ptype = new PeriodType(),
+
+                periods = ptype.get(value).generatePeriods({
+                    offset: periodType.periodOffset,
+                    filterFuturePeriods: true,
+                    reversePeriods: true
+                });
+
+            fixedPeriodAvailableStore.setIndex(periods);
+            fixedPeriodAvailableStore.loadData(periods);
+            ns.core.web.multiSelect.filterAvailable(fixedPeriodAvailable, fixedPeriodSelected);
+        };
+
+        periodType = Ext.create('Ext.form.field.ComboBox', {
+            cls: 'ns-combo',
+            style: 'margin-right:1px; margin-bottom:1px',
+            width: accBaseWidth - 62 - 62 - 2,
+            valueField: 'id',
+            displayField: 'name',
+            emptyText: NS.i18n.select_period_type,
+            editable: false,
+            queryMode: 'remote',
+            store: periodTypeStore,
+            periodOffset: 0,
+            listeners: {
+                select: function(cmp) {
+                    onPeriodTypeSelect(cmp.getValue());
+                }
+            }
+        });
+
+        prevYear = Ext.create('Ext.button.Button', {
+            text: NS.i18n.prev_year,
+            style: 'border-radius:1px; margin-right:1px',
+            height: 24,
+            handler: function() {
+                if (periodType.getValue()) {
+                    periodType.periodOffset--;
+                    onPeriodTypeSelect(periodType.getValue());
+                }
+            }
+        });
+
+        nextYear = Ext.create('Ext.button.Button', {
+            text: NS.i18n.next_year,
+            style: 'border-radius:1px',
+            height: 24,
+            handler: function() {
+                if (periodType.getValue()) {
+                    periodType.periodOffset--;
+                    onPeriodTypeSelect(periodType.getValue());
+                }
+            }
+        });
+
+        fixedPeriodSettings = Ext.create('Ext.container.Container', {
+            layout: 'column',
+            bodyStyle: 'border-style:none',
+            style: 'margin-top:0px',
+            items: [
+                periodType,
+                prevYear,
+                nextYear
+            ]
+        });
+
+        fixedPeriodAvailableSelected = Ext.create('Ext.container.Container', {
+            layout: 'column',
+            bodyStyle: 'border-style:none; padding-bottom:2px',
+            items: [
+                fixedPeriodAvailable,
+                fixedPeriodSelected
+            ]
+        });
+
+        periods = Ext.create('Ext.container.Container', {
+            bodyStyle: 'border-style:none',
+            getRecords: function() {
+                var map = relativePeriodCmpMap,
+                    selectedPeriods = fixedPeriodSelected.getValue(),
 					records = [];
 
+                for (var i = 0; i < selectedPeriods.length; i++) {
+                    records.push({id: selectedPeriods[i]});
+                }
+
 				for (var rp in map) {
 					if (map.hasOwnProperty(rp) && map[rp].getValue()) {
 						records.push({id: map[rp].relativePeriodId});
@@ -3227,337 +3762,60 @@
 				}
 
 				return records.length ? records : null;
-			},
-			items: [
-				{
-					xtype: 'container',
-                    cls: 'ns-container-default',
-					layout: 'column',
-					items: [
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.34,
-							style: 'padding: 0 0 0 6px',
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom: 2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.weeks,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_WEEK',
-									boxLabel: NS.i18n.last_week
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_4_WEEKS',
-									boxLabel: NS.i18n.last_4_weeks
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_12_WEEKS',
-									boxLabel: NS.i18n.last_12_weeks
-								}
-							]
-						},
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.33,
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.months,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_MONTH',
-									boxLabel: NS.i18n.last_month
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_3_MONTHS',
-									boxLabel: NS.i18n.last_3_months
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_12_MONTHS',
-									boxLabel: NS.i18n.last_12_months
-								}
-							]
-						},
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.33,
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.bimonths,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_BIMONTH',
-									boxLabel: NS.i18n.last_bimonth
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_6_BIMONTHS',
-									boxLabel: NS.i18n.last_6_bimonths
-								}
-							]
-						}
-					]
-				},
-				{
-                    xtype: 'container',
-                    cls: 'ns-container-default',
-                    layout: 'column',
-					items: [
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.34,
-							style: 'padding: 5px 0 0 6px',
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.quarters,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_QUARTER',
-									boxLabel: NS.i18n.last_quarter
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_4_QUARTERS',
-									boxLabel: NS.i18n.last_4_quarters
-								}
-							]
-						},
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.33,
-							style: 'padding: 5px 0 0',
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.sixmonths,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_SIX_MONTH',
-									boxLabel: NS.i18n.last_sixmonth
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_2_SIXMONTHS',
-									boxLabel: NS.i18n.last_2_sixmonths
-								}
-							]
-						},
-						{
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.33,
-							style: 'padding: 5px 0 0',
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.financial_years,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_FINANCIAL_YEAR',
-									boxLabel: NS.i18n.last_financial_year
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_5_FINANCIAL_YEARS',
-									boxLabel: NS.i18n.last_5_financial_years
-								}
-							]
-						}
-
-						//{
-							//xtype: 'panel',
-							//layout: 'anchor',
-							//bodyStyle: 'border-style:none; padding:5px 0 0 46px',
-							//defaults: {
-								//labelSeparator: '',
-								//style: 'margin-bottom:2px',
-							//},
-							//items: [
-								//{
-									//xtype: 'label',
-									//text: 'Options',
-									//cls: 'ns-label-period-heading-options'
-								//},
-								//rewind
-							//]
-						//}
-					]
-				},
-				{
-                    xtype: 'container',
-                    cls: 'ns-container-default',
-                    layout: 'column',
-					items: [
-                        {
-							xtype: 'container',
-                            cls: 'ns-container-default',
-							columnWidth: 0.35,
-							style: 'padding: 5px 0 0 6px',
-							defaults: {
-								labelSeparator: '',
-								style: 'margin-bottom:2px',
-								listeners: {
-									added: function(chb) {
-										if (chb.xtype === 'checkbox') {
-											checkboxes.push(chb);
-											relativePeriod.valueComponentMap[chb.relativePeriodId] = chb;
-										}
-									},
-									change: function() {
-										onRelativePeriodChange();
-									}
-								}
-							},
-							items: [
-								{
-									xtype: 'label',
-									text: NS.i18n.years,
-									cls: 'ns-label-period-heading'
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'THIS_YEAR',
-									boxLabel: NS.i18n.this_year
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_YEAR',
-									boxLabel: NS.i18n.last_year
-								},
-								{
-									xtype: 'checkbox',
-									relativePeriodId: 'LAST_5_YEARS',
-									boxLabel: NS.i18n.last_5_years
-								}
-							]
-						}
-					]
-				}
-			]
-		};
-
-        period = Ext.create('Ext.panel.Panel', {
+            },
+            items: [
+                fixedPeriodSettings,
+                fixedPeriodAvailableSelected,
+                relativePeriod
+            ]
+        });
+
+		period = Ext.create('Ext.panel.Panel', {
             title: '<div class="ns-panel-title-period">Periods</div>',
-            bodyStyle: 'padding:5px 2px 2px',
+            bodyStyle: 'padding:1px',
             hideCollapseTool: true,
             width: accBaseWidth,
-            checkboxes: checkboxes,
-            isNoRelativePeriods: function() {
-				var a = this.checkboxes;
+            isRelativePeriods: function() {
+				var a = checkboxes;
+				for (var i = 0; i < a.length; i++) {
+					if (a[i].getValue()) {
+						return true;
+					}
+				}
+				return false;
+			},
+			getDimension: function() {
+				var config = {
+						dimension: dimConf.period.objectName,
+						items: []
+					};
+
+				fixedPeriodSelectedStore.each( function(r) {
+					config.items.push({
+						id: r.data.id,
+						name: r.data.name
+					});
+				});
+
+				for (var i = 0; i < checkboxes.length; i++) {
+					if (checkboxes[i].getValue()) {
+						config.items.push({
+							id: checkboxes[i].relativePeriodId,
+							name: ''
+						});
+					}
+				}
+
+				return config.items.length ? config : null;
+			},
+			resetRelativePeriods: function() {
+				var a = checkboxes;
+				for (var i = 0; i < a.length; i++) {
+					a[i].setValue(false);
+				}
+			},
+			isNoRelativePeriods: function() {
+				var a = checkboxes;
 				for (var i = 0; i < a.length; i++) {
 					if (a[i].getValue()) {
 						return false;
@@ -3566,20 +3824,21 @@
 				return true;
 			},
             items: [
+                periodMode,
                 startEndDate,
-                relativePeriod
-            ],
-            listeners: {
-				added: function(cmp) {
-					accordionPanels.push(cmp);
+                periods
+			],
+			listeners: {
+				added: function() {
+					accordionPanels.push(this);
 				}
 			}
-        });
+		});
 
             // organisation unit
 		treePanel = Ext.create('Ext.tree.Panel', {
 			cls: 'ns-tree',
-			height: 333,
+			height: 433,
             bodyStyle: 'border:0 none',
 			style: 'border-top: 1px solid #ddd; padding-top: 1px',
 			displayField: 'name',
@@ -4044,7 +4303,7 @@
 			activeOnTop: true,
 			cls: 'ns-accordion',
 			bodyStyle: 'border:0 none',
-			height: 500,
+			height: 550,
 			items: [
                 dataElement,
                 period,
@@ -4180,7 +4439,7 @@
             view.startDate = startDate.getSubmitValue();
             view.endDate = endDate.getSubmitValue();
 
-            view.relativePeriods = relativePeriod.getRecords();
+            view.periods = periods.getRecords();
 
             view.dataElements = [];
 
@@ -4192,7 +4451,7 @@
 
             view.organisationUnits = treePanel.getDimension().items;
 
-            if (!(view.program && view.stage && ((view.startDate && view.endDate) || view.relativePeriods.length))) {
+            if (!(view.program && view.stage && ((view.startDate && view.endDate) || view.periods.length))) {
 				return;
 			}
 
@@ -4673,7 +4932,7 @@
 				else {
 					layout.sorting = {
 						id: id,
-						direction: 'DESC'
+						direction: 'ASC'
 					};
 				}
 
@@ -4795,11 +5054,11 @@
 				}
 
 				// pe
-				if (Ext.isArray(view.relativePeriods)) {
+				if (Ext.isArray(view.periods)) {
 					paramString += '&dimension=pe:';
 
-					for (var i = 0; i < view.relativePeriods.length; i++) {
-						paramString += view.relativePeriods[i].id + (i < view.relativePeriods.length - 1 ?  ';' : '');
+					for (var i = 0; i < view.periods.length; i++) {
+						paramString += view.periods[i].id + (i < view.periods.length - 1 ?  ';' : '');
 					}
 				}
 				else {
@@ -4995,9 +5254,11 @@
 		// viewport
 
         aggregateButton = Ext.create('Ext.button.Button', {
-			flex: 1,
+			//flex: 1,
+            width: 223,
 			param: 'aggregate',
-            text: '<b>Aggregated</b><br/>Aggregated event report',
+            text: '<b>Aggregated values</b><br/>Show aggregated event report',
+            style: 'margin-right:1px',
             pressed: true,
             listeners: {
 				mouseout: function(cmp) {
@@ -5008,9 +5269,11 @@
         paramButtonMap[aggregateButton.param] = aggregateButton;
 
 		caseButton = Ext.create('Ext.button.Button', {
-			flex: 1,
+			//flex: 1,'
+            width: 224,
 			param: 'query',
-            text: '<b>Case-based</b><br/>Case-based event report',
+            text: '<b>Individual cases</b><br/>Show case-based event report',
+            style: 'margin-right:1px',
 			listeners: {
 				mouseout: function(cmp) {
 					cmp.addCls('x-btn-default-toolbar-small-over');
@@ -5020,7 +5283,7 @@
         paramButtonMap[caseButton.param] = caseButton;
 
 		typeToolbar = Ext.create('Ext.toolbar.Toolbar', {
-			style: 'padding-top:1px; background:#f5f5f5; border:0 none',
+			style: 'padding:1px; background:#f5f5f5; border:0 none',
             height: 41,
             getType: function() {
 				return aggregateButton.pressed ? 'aggregate' : 'query';
@@ -5065,7 +5328,7 @@
 		accordionBody = LayerWidgetEvent();
 
 		accordion = Ext.create('Ext.panel.Panel', {
-			bodyStyle: 'border-style:none; padding:2px; padding-bottom:0; overflow-y:scroll;',
+			bodyStyle: 'border-style:none; padding:1px; padding-bottom:0; overflow-y:scroll;',
 			panels: accordionBody.accordionPanels,
 			setThisHeight: function(mx) {
 				var panelHeight = this.panels.length * 28,
@@ -5598,7 +5861,7 @@
 			periodRecords = recMap[dimConf.period.objectName] || [];
 			for (var i = 0, periodRecord, checkbox; i < periodRecords.length; i++) {
 				periodRecord = periodRecords[i];
-				checkbox = relativePeriod.valueComponentMap[periodRecord.id];
+				checkbox = ns.app.relativePeriodCmpMap[periodRecord.id];
 				if (checkbox) {
 					checkbox.setValue(true);
 				}
@@ -5766,13 +6029,13 @@
 				afterrender: function() {
 
 					// resize event handler
-					westRegion.on('resize', function() {
-						var panel = accordion.getExpandedPanel();
+					//westRegion.on('resize', function() {
+						//var panel = accordion.getExpandedPanel();
 
-						if (panel) {
+						//if (panel) {
 							//panel.onExpand(); //todo
-						}
-					});
+						//}
+					//});
 
 					// left gui
 					var viewportHeight = westRegion.getHeight(),
@@ -5816,7 +6079,7 @@
 						Ext.getBody().fadeIn({
 							duration: 500
 						});
-					}, 300 );
+					}, 300);
 				}
 			}
 		});

=== modified file 'dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/core.js	2014-03-13 10:28:05 +0000
+++ dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/scripts/core.js	2014-03-18 09:01:54 +0000
@@ -124,8 +124,6 @@
 
 			conf.layout = {
 				west_width: 452,
-				west_fieldset_width: 416,
-				west_width_padding: 4,
 				west_fill: 2,
 				west_fill_accordion_indicator: 59,
 				west_fill_accordion_dataelement: 59,

=== modified file 'dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/styles/style.css	2014-02-26 15:07:27 +0000
+++ dhis-2/dhis-web/dhis-web-event-reports/src/main/webapp/dhis-web-event-reports/app/styles/style.css	2014-03-18 10:27:33 +0000
@@ -55,7 +55,8 @@
 .x-grid-cell-inner,
 .x-form-item-label,
 .x-window-header-text-default {
-	font: normal 11px arial,sans-serif,ubuntu,consolas;
+	font-size: 11px;
+    font-family: arial,sans-serif,ubuntu,consolas;
 }
 
 body.x-windows {
@@ -173,6 +174,8 @@
 	clear: none;
 	display: block;
 	margin-bottom: 2px !important;
+    font-weight: bold;
+    color: #333;
 }
 
 .ns-container-default {