Appointments Display Control
Purpose
This custom display control can be used to show the list of future and past appointments of a patient on the patient dashboard
Screenshot

Configuration
Consider the following example to add Appointments as a new directive to the customControl.js:
'use strict';
angular.module('bahmni.common.displaycontrol.custom')
.directive('patientAppointmentsDashboard', ['$http', '$q', '$window','appService', function ($http, $q, $window, appService) {
var link = function ($scope) {
$scope.contentUrl = appService.configBaseUrl() + "/customDisplayControl/views/patientAppointmentsDashboard.html";
var getUpcomingAppointments = function () {
var params = {
q: "bahmni.sqlGet.upComingAppointments",
v: "full",
patientUuid: $scope.patient.uuid
};
return $http.get('/openmrs/ws/rest/v1/bahmnicore/sql', {
method: "GET",
params: params,
withCredentials: true
});
};
var getPastAppointments = function () {
var params = {
q: "bahmni.sqlGet.pastAppointments",
v: "full",
patientUuid: $scope.patient.uuid
};
return $http.get('/openmrs/ws/rest/v1/bahmnicore/sql', {
method: "GET",
params: params,
withCredentials: true
});
};
$q.all([getUpcomingAppointments(), getPastAppointments()]).then(function (response) {
$scope.upcomingAppointments = response[0].data;
$scope.upcomingAppointmentsHeadings = _.keys($scope.upcomingAppointments[0]);
$scope.pastAppointments = response[1].data;
$scope.pastAppointmentsHeadings = _.keys($scope.pastAppointments[0]);
});
$scope.goToListView = function () {
$window.open('/bahmni/appointments/#/home/manage/appointments/list');
};
};
return {
restrict: 'E',
link: link,
scope: {
patient: "=",
section: "="
},
template: '<ng-include src="contentUrl"/>'
};
}]);To Create Appointments Display page
Consider the following example to create a patientAppointmentsDashboard.html :
jspatientAppointmentsDashboard.htmltrue
{{ section.title | titleTranslate}}
{{::"DASHBOARD_UPCOMING_APPOINTMENTS_KEY" | translate}}
{{::"DASHBOARD_NO_UPCOMING_APPOINTMENTS_KEY" | translate}}
{{heading | translate}}
{{detail}}
{{::"DASHBOARD_PAST_APPOINTMENTS_KEY" | translate}}
{{::"DASHBOARD_NO_PAST_APPOINTMENTS_KEY" | translate}}
{{heading | translate}}
{{detail}}
]]>
patientAppointmentsDashboard.html
<section class="app-dashboard-integration">
<h2 class="section-title" ng-click="goToListView()"><span style="border-bottom: 1px solid white;">{{ section.title | titleTranslate}}</span></h2>
<ul style="font-size: 14px;color: #000000">
<li style="background-color:#ddd;padding-top:3px;padding-bottom:3px">
<span style="padding-left: 10px"> {{::"DASHBOARD_UPCOMING_APPOINTMENTS_KEY" | translate}} </span>
</li>
<ul ng-if="upcomingAppointments.length === 0" class="form-field">
<li>{{::"DASHBOARD_NO_UPCOMING_APPOINTMENTS_KEY" | translate}}</li>
</ul>
<ul ng-if="upcomingAppointments.length !== 0">
<table class="table-header">
<thead>
<tr>
<th ng-repeat="heading in upcomingAppointmentsHeadings">
{{heading | translate}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appointment in upcomingAppointments">
<td ng-repeat="detail in appointment">
{{detail}}
</td>
</tr>
</tbody>
</table>
</ul>
</ul>
<ul style="font-size: 14px;color: #000000">
<li style="background-color:#ddd;padding-top:3px;padding-bottom:3px">
<span style="padding-left: 10px"> {{::"DASHBOARD_PAST_APPOINTMENTS_KEY" | translate}} </span>
</li>
<ul ng-if="pastAppointments.length === 0" class="form-field">
<li>{{::"DASHBOARD_NO_PAST_APPOINTMENTS_KEY" | translate}}</li>
</ul>
<ul ng-if="pastAppointments.length !== 0">
<table class="table-header">
<thead>
<tr>
<th ng-repeat="heading in pastAppointmentsHeadings">
{{heading | translate}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appointment in pastAppointments">
<td ng-repeat="detail in appointment">
{{detail}}
</td>
</tr>
</tbody>
</table>
</ul>
</ul>
</section>원문 정보
원문 보기 ↗Bahmni Wiki · CC BY-SA 4.0