dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #16560
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 6324: (patient) Add auto-completed for data element list in aggregate query builder.
------------------------------------------------------------
revno: 6324
committer: Tran Chau <tran.hispvietnam@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2012-03-21 12:07:15 +0700
message:
(patient) Add auto-completed for data element list in aggregate query builder.
modified:
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance*
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/org/hisp/dhis/patient/i18n_module.properties
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/struts.xml
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/addCaseAggregation.vm
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/javascript/caseaggregation.js
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/style/basic.css
dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/updateCaseAggregation.vm
--
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-maintenance/dhis-web-maintenance' (properties changed: +x to -x)
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/org/hisp/dhis/patient/i18n_module.properties'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/org/hisp/dhis/patient/i18n_module.properties 2012-03-16 07:50:14 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/org/hisp/dhis/patient/i18n_module.properties 2012-03-21 05:07:15 +0000
@@ -252,4 +252,5 @@
aggregation_query_builder=Aggregation Query Builder
patient_org_unit_registration=Beneficiary Org Unit Registration
dataset= Dataset
-filter_by_data_set = Filter by dataset
\ No newline at end of file
+filter_by_data_set = Filter by dataset
+show_all_item = Show All Items
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/struts.xml'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/struts.xml 2012-03-16 07:50:14 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/resources/struts.xml 2012-03-21 05:07:15 +0000
@@ -667,6 +667,7 @@
<result name="success" type="velocity">/main.vm</result>
<param name="page">/dhis-web-maintenance-patient/addCaseAggregation.vm</param>
<param name="javascripts">javascript/commons.js,javascript/caseaggregation.js</param>
+ <param name="stylesheets">style/basic.css</param>
</action>
<action name="showUpdateCaseAggregationForm"
@@ -674,6 +675,7 @@
<result name="success" type="velocity">/main.vm</result>
<param name="page">/dhis-web-maintenance-patient/updateCaseAggregation.vm</param>
<param name="javascripts">javascript/commons.js,javascript/caseaggregation.js</param>
+ <param name="stylesheets">style/basic.css</param>
</action>
<action name="addCaseAggregation"
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/addCaseAggregation.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/addCaseAggregation.vm 2012-03-19 09:35:42 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/addCaseAggregation.vm 2012-03-21 05:07:15 +0000
@@ -15,13 +15,13 @@
<tr>
<td><label>$i18n.getString( "description" ) <em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
- <td><input type="text" id="description" name="description" style="width:30em" class="{validate:{required:true,minlength:2}}"></td>
+ <td><input type="text" id="description" name="description" class="{validate:{required:true,minlength:2}}"></td>
</tr>
<tr>
<td><label for="dataSets">$i18n.getString( "dataset" )</label></td>
<td>
- <select id="dataSets" name="dataSets" style="width:30.5em" onchange="getDataElementsByDataset();">
+ <select id="dataSets" name="dataSets" onchange="getDataElementsByDataset();">
<option value="">[$i18n.getString('please_select')]</option>
#foreach( $dataSet in $dataSets)
<option value="$dataSet.id" #if( $dataSetId=="$dataSet.id") selected #end>$dataSet.name</option>
@@ -33,8 +33,10 @@
<tr>
<td><label for="dataElement">$i18n.getString( "dataelement" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
<td>
- <select id="aggregationDataElementId" name="aggregationDataElementId" style="width:30.5em" class="{validate:{required:true}}" >
+ <select id="aggregationDataElementId" name="aggregationDataElementId" class="{validate:{required:true}} hidden" >
</select>
+ <input type="text" id="aggregationDataElementInput" name="aggregationDataElementInput" class='autocompleted-field' >
+ <button type='button' id='dataElementsButton' class='small-button' disabled> </button>
</td>
</tr>
@@ -73,7 +75,7 @@
</tr>
<tr>
<td>
- <select id="program" name="program" style="width:20em" onChange="getProgramStages();">
+ <select id="program" name="program" onChange="getProgramStages();">
<option value="0">[$i18n.getString('please_select')]</option>
#foreach( $program in $programs )
<option value="$program.id" title='$program.name'>$encoder.htmlEncode( $program.name )</option>
@@ -89,7 +91,7 @@
</tr>
<tr>
<td>
- <select id="programStage" name="programStage" style="width:20em" onchange="getPrgramStageDataElements();" ondblclick="insertProgramStage(this);">
+ <select id="programStage" name="programStage" onchange="getPrgramStageDataElements();" ondblclick="insertProgramStage(this);">
</select>
</td>
</tr>
@@ -100,7 +102,7 @@
</tr>
<tr>
<td>
- <input type='text' style="min-width:19.8em" onkeyup="filterDE(event, this.value, 'programstageDE');"/>
+ <input type='text' onkeyup="filterDE(event, this.value, 'programstageDE');"/>
</td>
</tr>
<tr>
@@ -268,9 +270,9 @@
<tr>
<td>
- <input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/>
- <input type="button" value="$i18n.getString( 'test_condition' )" style="width:10em" onclick='testCaseAggregationCondition();'/>
- <input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='caseAggregation.action?dataSetId=$!dataSetId'" style="width:10em"/>
+ <input type="submit" value="$i18n.getString( 'add' )" />
+ <input type="button" value="$i18n.getString( 'test_condition' )" onclick='testCaseAggregationCondition();'/>
+ <input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='caseAggregation.action?dataSetId=$!dataSetId'" />
</td>
</tr>
</table>
@@ -284,4 +286,5 @@
var i18n_run_success = '$encoder.jsEscape( $i18n.getString( "run_success" ) , "'" )';
var i18n_run_fail = '$encoder.jsEscape( $i18n.getString( "run_fail" ) , "'" )';
+ var i18n_show_all_items = '$encoder.jsEscape( $i18n.getString( "show_all_item" ) , "'" )';
</script>
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/javascript/caseaggregation.js'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/javascript/caseaggregation.js 2012-03-19 07:56:03 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/javascript/caseaggregation.js 2012-03-21 05:07:15 +0000
@@ -7,8 +7,10 @@
{
var dataSets = document.getElementById( 'dataSets' );
var dataSetId = dataSets.options[ dataSets.selectedIndex ].value;
+ clearList( byId('aggregationDataElementId'));
+
if( dataSetId == "" ){
- clearList( byId('aggregationDataElementId'));
+ disabled( 'dataElementsButton' );
return;
}
@@ -17,7 +19,7 @@
id:dataSetId
}, function( json )
{
- var de = document.getElementById( 'aggregationDataElementId' );
+ var de = byId( 'aggregationDataElementId' );
clearList( de );
for ( i in json.dataElements )
@@ -32,6 +34,92 @@
de.add(option, null);
}
+
+ autoCompletedField( '' );
+ });
+}
+
+function autoCompletedField( id )
+{
+ var select = jQuery( "#aggregationDataElementId" );
+ $( "#dataElementsButton" ).unbind('click');
+ enable( 'dataElementsButton' );
+ hideById( id );
+
+ var input = jQuery( "#aggregationDataElementInput" )
+ .insertAfter( select )
+ .val( "" )
+ .autocomplete({
+ delay: 0,
+ minLength: 0,
+ source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( select.children( "option" ).map(function() {
+ var text = $( this ).text();
+ if ( this.value && ( !request.term || matcher.test(text) ) )
+ return {
+ label: text,
+ value: text,
+ option: this
+ };
+ }) );
+ },
+ select: function( event, ui ) {
+ ui.item.option.selected = true;
+ },
+ change: function( event, ui ) {
+ if ( !ui.item ) {
+ var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
+ valid = false;
+ select.children( "option" ).each(function() {
+ if ( $( this ).text().match( matcher ) ) {
+ this.selected = valid = true;
+ return false;
+ }
+ });
+ if ( !valid ) {
+ // remove invalid value, as it didn't match anything
+ $( this ).val( "" );
+ select.val( "" );
+ input.data( "autocomplete" ).term = "";
+ return false;
+ }
+ }
+ }
+ })
+ .addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
+ return $( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "</a>" )
+ .appendTo( ul );
+ };
+
+ showById('dataElementsButton');
+ var button = $( "#dataElementsButton" )
+ .attr( "title", i18n_show_all_items )
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ })
+ .removeClass( "ui-corner-all" )
+ .addClass( "ui-corner-right ui-button-icon" )
+ .click(function() {
+ // close if already visible
+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+ input.autocomplete( "close" );
+ return;
+ }
+
+ // work around a bug (likely same cause as #5265)
+ $( this ).blur();
+
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete( "search", "" );
+ input.focus();
});
}
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/style/basic.css'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/style/basic.css 2012-03-15 09:28:38 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/style/basic.css 2012-03-21 05:07:15 +0000
@@ -74,4 +74,17 @@
.dataElementDiv table
{
width:100%;
+}
+
+.small-button {
+ font-size: .8em !important;
+}
+
+.ui-autocomplete { height: 100px; overflow-y: scroll; overflow-x: hidden; }
+
+
+input.autocompleted-field
+{
+ width:25em;
+ text-align:center;
}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/updateCaseAggregation.vm'
--- dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/updateCaseAggregation.vm 2012-03-19 09:35:42 +0000
+++ dhis-2/dhis-web/dhis-web-maintenance/dhis-web-maintenance-patient/src/main/webapp/dhis-web-maintenance-patient/updateCaseAggregation.vm 2012-03-21 05:07:15 +0000
@@ -16,13 +16,13 @@
<tr>
<td><label>$i18n.getString( "description" ) <em title="$i18n.getString( "required" )" class="required">*</em></label></td>
- <td><input type="text" id="description" name="description" style="width:30em" class="{validate:{required:true}}" value="$caseAggregation.description"></td>
+ <td><input type="text" id="description" name="description" class="{validate:{required:true}}" value="$caseAggregation.description"></td>
</tr>
<tr>
<td><label for="dataSets">$i18n.getString( "dataset" )</label></td>
<td>
- <select id="dataSets" name="dataSets" style="width:30.5em" onchange="getDataElementsByDataset();">
+ <select id="dataSets" name="dataSets" onchange="getDataElementsByDataset();">
<option value="">[$i18n.getString('please_select')]</option>
#foreach( $dataSet in $dataSets)
<option value="$dataSet.id" #if( $dataSetId=="$dataSet.id") selected #end >$dataSet.name</option>
@@ -34,9 +34,10 @@
<tr>
<td><label for="dataElement">$i18n.getString( "dataelement" )<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
<td>
- <select id="aggregationDataElementId" name="aggregationDataElementId" style="width:30.5em" class="{validate:{required:true}}" >
+ <select id="aggregationDataElementId" name="aggregationDataElementId" class="{validate:{required:true}} hidden" >
<option value="$caseAggregation.aggregationDataElement.id.$caseAggregation.optionCombo.id">$caseAggregation.aggregationDataElement.name $caseAggregation.optionCombo.name</option>
</select>
+ <input id="aggregationDataElementInput" name="aggregationDataElementInput" class='autocompleted-field' value='$caseAggregation.aggregationDataElement.name $caseAggregation.optionCombo.name'><button type='button' id='dataElementsButton' class='hidden'> </button>
</td>
</tr>
<tr>
@@ -75,7 +76,7 @@
</tr>
<tr>
<td>
- <select id="program" name="program" style="width:20em" onChange="getProgramStages();">
+ <select id="program" name="program" onChange="getProgramStages();">
<option value="0">[$i18n.getString('please_select')]</option>
#foreach( $program in $programs )
<option value="$program.id" title='$program.name'>$encoder.htmlEncode( $program.name )</option>
@@ -91,7 +92,7 @@
</tr>
<tr>
<td>
- <select id="programStage" name="programStage" style="width:20em" onchange="getPrgramStageDataElements();" ondblclick="insertProgramStage(this);">
+ <select id="programStage" name="programStage" onchange="getPrgramStageDataElements();" ondblclick="insertProgramStage(this);">
</select>
</td>
</tr>
@@ -102,7 +103,7 @@
</tr>
<tr>
<td>
- <input type='text' style="min-width:19.8em" onkeyup="filterDE(event, this.value, 'programstageDE');"/>
+ <input type='text' onkeyup="filterDE(event, this.value, 'programstageDE');"/>
</td>
</tr>
<tr>
@@ -195,7 +196,7 @@
<table>
<tr>
<td>
- <select id="programFormula" name="programFormula" style="width:20em" onChange="getProgramStagesForFormula();">
+ <select id="programFormula" name="programFormula" onChange="getProgramStagesForFormula();">
<option value="0">[$i18n.getString('please_select')]</option>
#foreach( $program in $programs )
<option value="$program.id" title='$program.name'>$encoder.htmlEncode( $program.name )</option>
@@ -270,9 +271,9 @@
</tr>
<tr>
<td>
- <input type="submit" value="$i18n.getString( 'update' )" style="width:10em">
- <input type="button" value="$i18n.getString( 'test_condition' )" style="width:10em" onclick='testCaseAggregationCondition();'/>
- <input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='caseAggregation.action?dataSetId=$!dataSetId'" style="width:10em">
+ <input type="submit" value="$i18n.getString( 'update' )" >
+ <input type="button" value="$i18n.getString( 'test_condition' )" onclick='testCaseAggregationCondition();'/>
+ <input type="button" value="$i18n.getString( 'cancel' )" onclick="window.location.href='caseAggregation.action?dataSetId=$!dataSetId'" >
</td>
<tr>
</table>
@@ -288,4 +289,5 @@
var i18n_run_success = '$encoder.jsEscape( $i18n.getString( "run_success" ) , "'" )';
var i18n_run_fail = '$encoder.jsEscape( $i18n.getString( "run_fail" ) , "'" )';
+ var i18n_show_all_items = '$encoder.jsEscape( $i18n.getString( "show_all_item" ) , "'" )';
</script>
