dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #15930
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 5892: (patient) Add autocomplete field instead of combobox for optionset dataelement in data entry form.
------------------------------------------------------------
revno: 5892
committer: Tran Chau <tran.hispvietnam@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2012-02-08 21:07:28 +0700
message:
(patient) Add autocomplete field instead of combobox for optionset dataelement in data entry form.
modified:
dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm
dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js
dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.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-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm 2012-02-07 08:39:49 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm 2012-02-08 14:07:28 +0000
@@ -1,3 +1,4 @@
+
<script>
jQuery("#entryFormContainer").ready(function(){
@@ -23,6 +24,15 @@
enable('executionDate');
}
entryFormContainerOnReady();
+
+ jQuery("#entryForm :input").each(function()
+ {
+ if( jQuery(this).attr( 'options' )!= null )
+ {
+ autocompletedField(jQuery(this).attr('id'));
+ }
+ });
+
});
</script>
@@ -93,7 +103,7 @@
#set( $id = $programStageDataElement.programStage.id + '-' + $programStageDataElement.dataElement.id + '-val' )
#if( $!programStageDataElement.dataElement.optionSet )
#set( $id = $programStageDataElement.programStage.id + '-' + $programStageDataElement.dataElement.id + '-' + $optionCombo.id + '-val' )
- <select name="entryselect" data="{compulsory: $programStageDataElement.compulsory, deName:'$programStageDataElement.dataElement.name', deType:'$programStageDataElement.dataElement.getDetailedNumberType()' }" #if($programStageInstance.completed) disabled="disabled" #end id="$id" onchange="saveVal( $programStageDataElement.dataElement.id, $optionCombo.id )" tabindex="$tabIndex">
+ <select name="entryselect" options='$programStageDataElement.dataElement.optionSet.options' data="{compulsory: $programStageDataElement.compulsory, deName:'$programStageDataElement.dataElement.name', deType:'$programStageDataElement.dataElement.getDetailedNumberType()' }" #if($programStageInstance.completed) disabled="disabled" #end id="$id" onchange="saveVal( $programStageDataElement.dataElement.id, $optionCombo.id )" tabindex="$tabIndex">
<option value="">[$i18n.getString( "select_value" )]</option>
#foreach( $option in $programStageDataElement.dataElement.optionSet.options )
<option value="$option" #if( $patientDataValue.value == $option ) selected="selected" #end>$encoder.htmlEncode( $option )</option>
=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js 2012-02-06 02:56:02 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js 2012-02-08 14:07:28 +0000
@@ -144,12 +144,14 @@
{
var programStageId = byId('programStageId').value;
var fieldId = programStageId + '-' + dataElementId + '-' + optionComboId + '-val';
+
+ var field = byId( fieldId );
+ var fieldValue = jQuery.trim( field.value );
+
var data = jQuery( "#" + fieldId ).metadata({
type:'attr',
name:'data'
});
- var field = byId( fieldId );
- //var fieldValue = ( field.name = 'entryselect' ) ?
var dataElementName = data.deName;
var type = data.deType;
@@ -157,11 +159,11 @@
field.style.backgroundColor = '#ffffcc';
- if( field.value != '' )
+ if( fieldValue != '' )
{
if ( type == 'int' || type == 'number' || type == 'positiveNumber' || type == 'negativeNumber' )
{
- if ( type == 'int' && !isInt( field.value ))
+ if ( type == 'int' && !isInt( fieldValue ))
{
field.style.backgroundColor = '#ffcc00';
@@ -171,7 +173,7 @@
return;
}
- else if ( type == 'number' && !isRealNumber( field.value ) )
+ else if ( type == 'number' && !isRealNumber( fieldValue ) )
{
field.style.backgroundColor = '#ffcc00';
window.alert( i18n_value_must_number + '\n\n' + dataElementName );
@@ -179,7 +181,7 @@
return;
}
- else if ( type == 'positiveNumber' && !isPositiveInt( field.value ) )
+ else if ( type == 'positiveNumber' && !isPositiveInt( fieldValue ) )
{
field.style.backgroundColor = '#ffcc00';
window.alert( i18n_value_must_positive_integer + '\n\n' + dataElementName );
@@ -187,7 +189,7 @@
return;
}
- else if ( type == 'negativeNumber' && !isNegativeInt( field.value ) )
+ else if ( type == 'negativeNumber' && !isNegativeInt( fieldValue ) )
{
field.style.backgroundColor = '#ffcc00';
window.alert( i18n_value_must_negative_integer + '\n\n' + dataElementName );
@@ -199,7 +201,7 @@
}
- var valueSaver = new ValueSaver( dataElementId, optionComboId, field.value, providedByAnotherFacility, type, '#ccffcc' );
+ var valueSaver = new ValueSaver( dataElementId, optionComboId, fieldValue, providedByAnotherFacility, type, '#ccffcc' );
valueSaver.save();
}
@@ -208,7 +210,6 @@
var programStageId = byId('programStageId').value;
var fieldId = programStageId + '-' + dataElementId + '-val';
var field = jQuery( "#" + fieldId );
- var fieldValue = field.val();
var data = field.metadata({
type:'attr',
name:'data'
@@ -216,7 +217,7 @@
var providedByAnotherFacility = document.getElementById( programStageId + '_' + dataElementId + '_facility' ).checked;
- var dateSaver = new DateSaver( dataElementId, fieldValue, providedByAnotherFacility, '#ccffcc' );
+ var dateSaver = new DateSaver( dataElementId, field.val(), providedByAnotherFacility, '#ccffcc' );
dateSaver.save();
}
@@ -817,4 +818,63 @@
{
loadDataEntry();
});
+}
+
+function autocompletedField( idField )
+{
+ hideById( idField );
+ var select = jQuery( "#" + idField );
+ var input = $("<input onkeypress='return keyPress(event, this);' name='entryfield' class='inputText'>")
+ .insertAfter(select)
+ .autocomplete({
+ source: function(request, response) {
+ var matcher = new RegExp(request.term, "i");
+ response(select.children("option").map(function() {
+ var text = $(this).text();
+ if (this.value && (!request.term || matcher.test(text)))
+ return {
+ id: this.value,
+ label: text,
+ value: text
+ };
+ }));
+ },
+ delay: 0,
+ change: function(event, ui) {
+ if (!ui.item) {
+ // remove invalid value, as it didn't match anything
+ $(this).val("");
+ return false;
+ }
+ select.val(ui.item.id);
+ select.change();
+ },
+ minLength: 0
+ });
+
+ // Set default value of the combobox
+ input.val( $("#" + idField + " option:selected").text());
+ $("<button> </button>")
+ .attr("tabIndex", -1)
+ .attr("title", "Show All Items")
+ .insertAfter(input)
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ }).removeClass("ui-corner-all")
+ .addClass("small-button ui-corner-right ui-button-icon")
+ .click(function() {
+ // close if already visible
+ if (input.autocomplete("widget").is(":visible")) {
+ input.autocomplete("close");
+ return;
+ }
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete("search", "");
+ input.focus();
+ }).change(function(){
+ select.change();
+ });
}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css 2012-02-01 09:10:08 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css 2012-02-08 14:07:28 +0000
@@ -92,4 +92,8 @@
float: right;
width:200px;
text-align: right;
+}
+
+.small-button {
+ font-size: .8em !important;
}
\ No newline at end of file
