Add Get button (wip)

Nathanael Jourdane
1 parent c4959ce7
Showing 3 changed files with 68 additions and 16 deletions Show diff stats
js/app/controllers/EpnTapModule.js
js/app/controllers/InteropModule.js
js/app/views/EpnTapUI.js
@@ -68,6 +68,7 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.previousPageBtn = Ext.getCmp('epnTapPreviousPageBtn');
 		this.nextPageBtn = Ext.getCmp('epnTapNextPageBtn');
 		this.lastPageBtn = Ext.getCmp('epnTapLastPageBtn');
+		this.getBtn = Ext.getCmp('epnTapGetBtn');
  
 		// stores elements
 		this.servicesStore = Ext.data.StoreManager.lookup('servicesStore');
@@ -78,6 +79,14 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 	},
  
 	addUIListeners: function() {
+		this.targetNameCB.on('change', function() {
+			this.updateGetBtnStatus();
+		}, this);
+
+		this.productTypeCB.on('change', function() {
+			this.updateGetBtnStatus();
+		}, this);
+
 		this.servicesGrid.on('cellclick', function(grid, td, cellIndex, record) {
 			this.onServiceSelected(record.data['id']);
 		}, this);
@@ -101,6 +110,10 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.lastPageBtn.on('click', function() {
 			this.onLastPageBtnClicked();
 		}, this);
+
+		this.getBtn.on('click', function() {
+			this.onGetBtnClicked();
+		}, this);
 	},
  
 	/**********************
@@ -144,6 +157,16 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		this.lastPageBtn.setDisabled(last);
 	},
  
+	updateGetBtnStatus: function() {
+		var shouldEnabled = this.targetNameCB.rawValue.length > 0 && this.productTypeCB.rawValue.length > 0;
+		if(shouldEnabled) {
+			this.getBtn.enable();
+		} else {
+			this.getBtn.disable();
+		}
+
+	},
+
 	/****************************
 	*** Service filter events ***
 	****************************/
@@ -238,6 +261,13 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		AmdaAction.epnTapGetGranules(selectedService['table_name'], selectedService['access_url'], this.filter, limit, offset, this.fillGranules);
 	},
  
+	/**
+	Trigerred when the 'Get results' button is clicked.
+	*/
+	onGetBtnClicked: function() {
+		console.log('Getting results...');
+	},
+
 	/*******************
 	*** Grids events ***
 	*******************/
@@ -407,7 +407,7 @@ Ext.define(&#39;amdaDesktop.InteropModule&#39;, {
 				layout: 'anchor',
 				width: 800,
 				height: 600,
-				minWidth: 700,
+				minWidth: 650,
 				modal: true,
 				minimizable: false,
 				iconCls: this.icon,
@@ -194,7 +194,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			id: 'epnTapServiceFilterPanel',
 			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
 			region: 'north',
-			defaults: { margin: 5 },
+			defaults: { margin: '5 0 5 5'},
 			items: [{ // Left part
 				xtype : 'container',
 				flex: 1,
@@ -210,10 +210,10 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				]
 			}, { // Right part
 				xtype : 'container',
-				flex: 1,
 				items: [
 					this.createRowPerPageNf(),
-					this.createNavigationPanel()
+					this.createNavigationPanel(),
+					this.createSendButton()
 				]
  
 			}]
@@ -238,7 +238,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			valueField: 'id',
 			multiSelect: true,
 			displayField: 'name',
-			labelWidth: 80,
+			labelWidth: 71,
 			editable: false,
 			listeners: {
 				select: function(combo, records) {
@@ -275,7 +275,8 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			queryParam: 'input',
 			displayField: 'name',
 			valueField: 'id',
-			labelWidth: 80,
+			margin: '15 0 5 0',
+			labelWidth: 71,
 			minWidth: 20,
 			minChars: 2,
 			hideTrigger: true,
@@ -288,7 +289,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 				render: function(c) {
 					new Ext.ToolTip({
 						target: c.getEl(),
-						html: 'Type a text then select the correct target.'
+						html: 'Start to type a text then select a target.'
 					});
 				}
 			}
@@ -324,8 +325,9 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			xtype: 'numberfield',
 			id: 'epnTapRowsPerPageNf',
 			fieldLabel: 'Rows per page',
+			labelWidth: 85,
 			margin: '4 0 4 0',
-			width: 160,
+			width: 140,
 			height: 20,
 			value: 20,
 			minValue: 1,
@@ -355,43 +357,63 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 	*/
 	createNavigationPanel: function() {
 		return {
-			xtype: 'panel',
-			border: false,
-			margin: '2 0 2 50',
-			defaults: { margin: '0 5 0 5', width: 20, xtype: 'button', disabled: true},
+			xtype: 'container',
+			width: 145,
+			defaults: {margin: '0 5 0 0', xtype: 'button', disabled: true},
 			items: [{
 				id: 'epnTapFirstPageBtn',
 				text: '|<',
+				width: 26,
 				tooltip: 'First page'
 			}, {
 				id: 'epnTapPreviousPageBtn',
 				text: '<',
+				width: 26,
 				tooltip: 'Previous page'
 			}, {
 				xtype: 'label',
 				id: 'epnTapCurrentPageLb',
 				tooltip: 'Current page',
-				text: '-'
+				text: '0',
+				margin: 0
 			}, {
 				xtype: 'label',
-				text: '/'
+				text: '/',
+				margin: 0
 			}, {
 				xtype: 'label',
 				id: 'epnTapTotalPagesLb',
 				tooltip: 'Total pages',
-				text: '-'
+				text: '0',
 			}, {
 				id: 'epnTapNextPageBtn',
 				text: '>',
+				width: 26,
 				tooltip: 'Next page'
 			}, {
 				id: 'epnTapLastPageBtn',
 				text: '>|',
+				width: 26,
+				margin: 0,
 				tooltip: 'Last page'
 			}]
 		};
 	},
  
+	/**
+	The button used to send the query.
+	*/
+	createSendButton: function() {
+		return {
+			xtype: 'button',
+			id: 'epnTapGetBtn',
+			text: 'Get results',
+			disabled: true,
+			width: 140,
+			margin: '5 0 0 0'
+		}
+	},
+
 	/************
 	*** Grids ***
 	************/
@@ -407,7 +429,7 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 			xtype: 'panel',
 			id: 'epnTapGridsPanel',
 			layout: 'fit',
-			height: 400,
+			height: 440,
 			region: 'center',
 			items: [{
 				xtype: 'container',