← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 8547: Small change person dashboard ui.

 

------------------------------------------------------------
revno: 8547
committer: Tran Chau <tran.hispvietnam@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2012-10-17 10:44:58 +0700
message:
  Small change person dashboard ui.
modified:
  dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm
  dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/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-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties	2012-10-15 09:52:34 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties	2012-10-17 03:44:58 +0000
@@ -462,3 +462,5 @@
 guardian=Guardian/caretaker
 of = of
 failed_to_get_events = Failed to get events. Please generate resource tables before.
+view_completed = View completed
+view_active = View active
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js	2012-10-11 09:03:33 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js	2012-10-17 03:44:58 +0000
@@ -1590,6 +1590,12 @@
 	jQuery('#dashboardHistoryDiv').toggle();
 }
 
+function viewPersonProgram ( displayedDiv, hidedDiv )
+{
+	showById(displayedDiv);
+	hideById(hidedDiv);
+}
+
 // --------------------------------------------------------------------
 // Comment && Message
 // --------------------------------------------------------------------

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm	2012-10-16 14:37:40 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientDashboard.vm	2012-10-17 03:44:58 +0000
@@ -4,211 +4,209 @@
  &raquo; <a href="javascript:dashboardHistoryToggle();" >$i18n.getString( 'history' )</a>
 </h3>
 
-<table class='mainPageTable'>
-	<tr>
-		<td width='33%'>
-			<div class="link-area">
-				<table width='100%'>
-					<tr><th>$i18n.getString("demographics")
-						&#8226; <a href="javascript:showUpdatePatientForm( '$patient.id', true );"><span class='bold'>$i18n.getString("edit_profile")</span></a>
-						#if( $auth.hasAccess( "dhis-web-caseentry", "getPatientLocation" ) )
-						&#8226; <a href="javascript:getPatientLocation( '$patient.id', true );"><span class='bold'>$i18n.getString("change_location")</span></a>
-						#end
-					</th></tr>
-				</table>
-				<div class="contentProviderTable">
-					<table width='100%'>
-						<tr>
-							<td>$i18n.getString("full_name")</td>
-							<td>$!patient.getFullName()</td>
-						</tr>
-						<tr>
-							<td>$i18n.getString("location")</td>
-							<td>$!patient.organisationUnit.name</td>
-						</tr>
-						<tr>
-							<td>$i18n.getString("gender")</td>
-							<td>$i18n.getString($!patient.gender)</td>
-						</tr>
-						<tr>
-							<td>$i18n.getString("date_of_birth")</td>
-							<td>$format.formatDate( $!patient.birthDate) $!patient.getAge()</td>
-						</tr>
-						<tr>
-							<td>$i18n.getString("phone_number")</td>
-							<td>
-								#if($!patient.phoneNumber && $!patient.phoneNumber!='')
-									$!patient.phoneNumber
-								#else
-									[$i18n.getString('none')]
-								#end
-							</td>
-						</tr>
-						<tr>
-							<td>$i18n.getString("health_worker")</td>
-							<td>
-								#if($!patient.healthWorker )
-									$!patient.healthWorker.name
-								#else
-									[$i18n.getString('none')]
-								#end
-							</td>
-						</tr>
-						#foreach( $identifier in $identifiers )
-						<tr>
-							#if($!identifier.identifierType)
-								<td>$identifier.identifierType.name</td>
+<div class='dashboard-area'>
+
+	<div class="link-area">
+		<p class='header'>
+			$i18n.getString("demographics")
+			&#8226; <a href="javascript:showUpdatePatientForm( '$patient.id', true );">$i18n.getString("edit_profile")</a>
+			#if( $auth.hasAccess( "dhis-web-caseentry", "getPatientLocation" ) )
+				&#8226; <a href="javascript:getPatientLocation( '$patient.id', true );">$i18n.getString("change_location")</a>
+			#end
+		</p>
+		<div class="contentProviderTable">
+			<table>
+				<tr>
+					<td>$i18n.getString("full_name")</td>
+					<td>$!patient.getFullName()</td>
+				</tr>
+				<tr>
+					<td>$i18n.getString("location")</td>
+					<td>$!patient.organisationUnit.name</td>
+				</tr>
+				<tr>
+					<td>$i18n.getString("gender")</td>
+					<td>$i18n.getString($!patient.gender)</td>
+				</tr>
+				<tr>
+					<td>$i18n.getString("date_of_birth")</td>
+					<td>$format.formatDate( $!patient.birthDate) $!patient.getAge()</td>
+				</tr>
+				<tr>
+					<td>$i18n.getString("phone_number")</td>
+					<td>
+						#if($!patient.phoneNumber && $!patient.phoneNumber!='')
+							$!patient.phoneNumber
+						#else
+							[$i18n.getString('none')]
+						#end
+					</td>
+				</tr>
+				<tr>
+					<td>$i18n.getString("health_worker")</td>
+					<td>
+						#if($!patient.healthWorker )
+							$!patient.healthWorker.name
+						#else
+							[$i18n.getString('none')]
+						#end
+					</td>
+				</tr>
+				#foreach( $identifier in $identifiers )
+				<tr>
+					#if($!identifier.identifierType)
+						<td>$identifier.identifierType.name</td>
+					#else
+						<td>$i18n.getString("system_identifier")</td>
+					#end
+					<td>$identifier.identifier</td>
+				</tr>
+				#end
+				#foreach( $attributeValue in $attributeValues )
+				<tr>
+					<td>$attributeValue.patientAttribute.name</td>
+					<td>
+						#if($attributeValue.patientAttribute.valueType=='YES/NO')
+							#if($attributeValue.value=='true')
+								$i18n.getString("yes")
 							#else
-								<td>$i18n.getString("system_identifier")</td>
-							#end
-							<td>$identifier.identifier</td>
-						</tr>
-						#end
-						#foreach( $attributeValue in $attributeValues )
-						<tr>
-							<td>$attributeValue.patientAttribute.name</td>
-							<td>
-								#if($attributeValue.patientAttribute.valueType=='YES/NO')
-									#if($attributeValue.value=='true')
-										$i18n.getString("yes")
-									#else
-										$i18n.getString("no")
-									#end
-								#elseif($attributeValue.patientAttribute.valueType=='DATE')
-									$format.formatDate( $attributeValue.value )
-								#else
-									$attributeValue.value
-								#end	
-							</td>
-						</tr>
-						#end
-					</table>
-				</div>
-			</div>
-		</td>
-		<td width='33%'>
-			<div class="link-area" style='height:120px;'>
-				<table width='100%'>
-					<tr><th>$i18n.getString("active_programs")
-						&#8226; <a href='javascript:showProgramEnrollmentForm( "$patient.id" )'><span class='bold'>$i18n.getString("enroll")</span></a>
-					</th></tr>
-				</table>
-				<div class="contentProviderTable" style='height:76px;'>
-					<table width='100%' id='activeTB' name='activeTB'>
-						#foreach( $programInstance in $activeProgramInstances )
-							#set($programStageInstanceId = '')
-							#if($programInstance.program.type==2)
-								#foreach( $programStageInstance in $programInstance.programStageInstances)
-									#set($programStageInstanceId = $programStageInstance.id)
-								#end
-							#end
-							
-							#set($flag = 'false')
-							#foreach( $programStageInstance in $programInstance.programStageInstances )
-								#set( $status = $programStageInstance.getEventStatus() )
-								#if( $status!=1 && $status!=5 && $flag=='false')
-									<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
-										programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
-										onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' >
-										<td id='td_$programInstance.id'>
-											<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
-										</td>
-									</tr>
-									#if($programInstance.program.type==1)
-									<tr>
-										<td id='tr2_$programInstance.id' onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' style='cursor:pointer;'>
-											<a>>> $programStageInstance.programStage.name ($format.formatDate($programStageInstance.dueDate))</a>
-										</td>
-									</tr>
-									#end
-								#set($flag = 'true')
-								#end
-							#end
-							#if($flag=='false')
+								$i18n.getString("no")
+							#end
+						#elseif($attributeValue.patientAttribute.valueType=='DATE')
+							$format.formatDate( $attributeValue.value )
+						#else
+							$attributeValue.value
+						#end	
+					</td>
+				</tr>
+				#end
+			</table>
+		</div>
+	</div>
+
+	<div class="link-area" id="activeDiv" name="activeDiv">
+		<p class='header'>
+			$i18n.getString("active_programs")
+			&#8226; <a href='javascript:viewPersonProgram( "completedDiv","activeDiv" )'>$i18n.getString("completed_programs")</a>
+			&#8226; <a href='javascript:showProgramEnrollmentForm( "$patient.id" )'>$i18n.getString("enroll")</a>
+		</p>
+		<div class="contentProviderTable">
+			<table width="100%" id='activeTB' name='activeTB'>
+				#foreach( $programInstance in $activeProgramInstances )
+					#set($programStageInstanceId = '')
+					#if($programInstance.program.type==2)
+						#foreach( $programStageInstance in $programInstance.programStageInstances)
+							#set($programStageInstanceId = $programStageInstance.id)
+						#end
+					#end
+					
+					#set($flag = 'false')
+					#foreach( $programStageInstance in $programInstance.programStageInstances )
+						#set( $status = $programStageInstance.getEventStatus() )
+						#if( $status!=1 && $status!=5 && $flag=='false')
 							<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
 								programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
-								onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", false)' >
+								onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' >
 								<td id='td_$programInstance.id'>
 									<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
 								</td>
 							</tr>
+							#if($programInstance.program.type==1)
+							<tr>
+								<td id='tr2_$programInstance.id' onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", "$programStageInstance.id")' style='cursor:pointer;'>
+									<a>>> $programStageInstance.programStage.name ($format.formatDate($programStageInstance.dueDate))</a>
+								</td>
+							</tr>
 							#end
-						#end
-						#foreach($program in $singlePrograms)
-							<tr id='tr_$program.id' name='tr_$program.id' style='cursor:pointer;'
-								onclick='javascript:saveSingleEnrollment("$patient.id","$program.id")' >
-								<td>
-									<a><span id='infor_$program.id'></span></a>
-									<script>
-										var infor = "$program.name" + " (" + getCurrentDate() + ")";
-										setInnerHTML("infor_$program.id", infor);
-									</script>
-								</td>
-							</tr>
-							<tr style='cursor:pointer;'>
-								<td id='tr2_$programInstance.id'></td>
-							</tr>
-						#end
-					</table>
-				</div>
-			</div>
+						#set($flag = 'true')
+						#end
+					#end
+					#if($flag=='false')
+					<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
+						programStageInstanceId='$programStageInstanceId' style='cursor:pointer;'
+						onclick='javascript:loadActiveProgramStageRecords("$programInstance.id", false)' >
+						<td id='td_$programInstance.id'>
+							<a><span id='infor_$programInstance.id'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</span></a>
+						</td>
+					</tr>
+					#end
+				#end
+				#foreach($program in $singlePrograms)
+					<tr id='tr_$program.id' name='tr_$program.id' style='cursor:pointer;'
+						onclick='javascript:saveSingleEnrollment("$patient.id","$program.id")' >
+						<td>
+							<a><span id='infor_$program.id'></span></a>
+							<script>
+								var infor = "$program.name" + " (" + getCurrentDate() + ")";
+								setInnerHTML("infor_$program.id", infor);
+							</script>
+						</td>
+					</tr>
+					<tr style='cursor:pointer;'>
+						<td id='tr2_$programInstance.id'></td>
+					</tr>
+				#end
+			</table>
+		</div>
+	</div>
 			
-			<div class="link-area" style='height:50px;'>
-				<table width='100%'>
-					<tr><th>$i18n.getString("completed_programs")</th></tr>
-					<tr>
+	<div class="link-area" id="completedDiv" name="completedDiv" style="display:none;">
+		<p class="header">
+			<a href='javascript:viewPersonProgram( "activeDiv","completedDiv" )'>$i18n.getString("active_programs")</a>
+			&#8226; $i18n.getString("completed_programs")
+			&#8226; <a href='javascript:showProgramEnrollmentForm( "$patient.id" )'>$i18n.getString("enroll")</a>
+		</p>
+		<div class="contentProviderTable">
+			<table width="100%" id='completedTB' name='completedTB'>
+				#foreach($programInstance in $completedProgramInstances)
+					#set($programStageInstanceId = '')
+					#if($programInstance.program.type==2)
+						#foreach( $programStageInstance in $programInstance.programStageInstances)
+							#set($programStageInstanceId = $programStageInstance.id)
+						#end
+					#end
+					<tr id='tr1_$programInstance.id' type='$programInstance.program.type'
+						onclick='javascript:loadActiveProgramStageRecords($programInstance.id);' >
 						<td>
-							<select id="completedList" name="completedList" onchange="javascript:loadActiveProgramStageRecords(this.value);" style="width:100%">
-								<option value="">[$i18n.getString("please_select")]</option>
-								#foreach($programInstance in $completedProgramInstances)
-									#set($programStageInstanceId = '')
-									#if($programInstance.program.type==2)
-										#foreach( $programStageInstance in $programInstance.programStageInstances)
-											#set($programStageInstanceId = $programStageInstance.id)
-										#end
-									#end
-									<option value="$programInstance.id" type='$programInstance.program.type'>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</option>
-								#end
-							</select>
+							<a>$programInstance.program.name ($format.formatDate($programInstance.enrollmentDate))</a>
 						</td>
 					</tr>
-				</table>
-			</div>
-		</td>
-		<td width='33%'>
-			<div class="link-area">
-				<table width='100%'>
-					<tr><th>$i18n.getString("relationships")
-						&#8226; <a href="javascript:setFieldValue( 'isShowPatientList', 'false' ); showRelationshipList( '$patient.id' );"><span class='bold'>$i18n.getString("management")</span></a>
-						&#8226; <a href="javascript:showAddRelationshipPatient( '$patient.id', false );"><span class='bold'>$i18n.getString("add_new_patient")</span></a>
-					</th></tr>
-				</table>
-				<div class="contentProviderTable">
-					<table width='100%'>
-						#foreach( $rel in $relationship )
-							#if($rel.patientA.id==$patient.id)
-								<tr onclick="showPatientDashboardForm($rel.patientB.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
-									<td><a href='#'>$rel.relationshipType.bIsToA</a></td>
-									<td><a href='#'>$rel.patientB.getFullName()</a></td>
-								</tr>
-							#else
-								<tr onclick="showPatientDashboardForm($rel.patientA.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
-									<td><a href='#'>$rel.relationshipType.aIsToB</a></td>
-									<td><a href='#'>$rel.patientA.getFullName()</a></td>
-								</tr>
-							#end
-						#end
-					</table>
-				</div>
-			</div>
-		</td>
-	</tr>
-</table>
+				#end
+			</table>
+		</div>
+	</div>
+	
+	<div class="link-area">
+		<p class='header'>
+			$i18n.getString("relationships")
+			&#8226; <a href="javascript:setFieldValue( 'isShowPatientList', 'false' ); showRelationshipList( '$patient.id' );">$i18n.getString("management")</a>
+			&#8226; <a href="javascript:showAddRelationshipPatient( '$patient.id', false );">$i18n.getString("add_new_patient")</a>
+		</p>
+		<div class="contentProviderTable">
+			<table width="100%">
+				#foreach( $rel in $relationship )
+					#if($rel.patientA.id==$patient.id)
+						<tr onclick="showPatientDashboardForm($rel.patientB.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
+							<td><a href='#'>$rel.relationshipType.bIsToA</a></td>
+							<td><a href='#'>$rel.patientB.getFullName()</a></td>
+						</tr>
+					#else
+						<tr onclick="showPatientDashboardForm($rel.patientA.id)" title='$i18n.getString( "move_to_dashboard_of" ) $rel.patientB.getFullName()'>
+							<td><a href='#'>$rel.relationshipType.aIsToB</a></td>
+							<td><a href='#'>$rel.patientA.getFullName()</a></td>
+						</tr>
+					#end
+				#end
+			</table>
+		</div>
+	</div>
+
+</div>
 
 <div id='programEnrollmentDiv' class='hidden'></div>
 <div id='dataEntryFormDiv'></div>
 <div id='dashboardHistoryDiv' class="dashboard-history" style="display:none;">
-	<table class='mainPageTable'>
+	<table width="100%">
 		<thead>
 		<tr>
 			<th>$i18n.getString("visitor")</th>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-10-12 02:38:26 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-10-17 03:44:58 +0000
@@ -198,6 +198,23 @@
 // Dashboard
 // -------------------------------------------------------------- */
 
+div.dashboard-area {
+  list-style: none inside;
+  margin: 50px 50px;
+  margin: 0;
+  padding: 0;
+}
+
+p.header{
+  background-color:#CBDDEB;
+  background-repeat:repeat-x;
+  border:1px solid #C8DBEA;
+  color:#39547D;
+  padding:6px;
+  margin:0px;
+  font-family: LiberationSansBold,arial;
+}
+
 td.link-area
 {
   border:1px solid #d0d0d0;
@@ -206,22 +223,21 @@
   padding-left:1px;
   padding-bottom:0px;
   height:120px;
-  width:100%;
+  width:33%;
   overflow:hidden;
-  position:relative;
 }
 
 div.link-area
 {
+  display:inline-block;
   border:1px solid #d0d0d0;
   padding-top:1px;
   padding-right:1px;
   padding-left:1px;
   padding-bottom:0px;
   height:172px;
-  width:100%;
+  width:32%;
   overflow:hidden;
-  position:relative;
 }
 
 .contentProviderTable