Skip to content

Commit 5dbd218

Browse files
Akayeshmanthassmusoke
Akayeshmantha
authored and
ssmusoke
committed
RA-1592 : Boostrap as a foundation for Reference Application UI (#226)
1 parent 5c028e5 commit 5dbd218

File tree

18 files changed

+227
-140
lines changed

18 files changed

+227
-140
lines changed

‎omod/src/main/compass/sass/patientdashboard/patientDashboard.scss

+46-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ div {
4343
}
4444
}
4545

46-
.collapse {
46+
.encounterview {
4747
border: none;
4848
position: relative;
4949
height: 0;
@@ -165,4 +165,49 @@ div {
165165

166166
.report-value {
167167
color: lighten($highlight, 15%);
168+
}
169+
170+
#visits-list {
171+
border-left: 1px solid #cccccc !important;
172+
173+
&.viewVisitDetails{
174+
width: unset !important;
175+
}
176+
}
177+
178+
@media only screen and (min-width : 992px) {
179+
.button.activelist{
180+
min-width: 218px !important;
181+
}
182+
}
183+
184+
@media only screen and (max-width : 576px) and (min-width : 411px) {
185+
.button.activelist{
186+
min-width: 139px !important;
187+
height: 45px;
188+
}
189+
}
190+
191+
@media only screen and (max-width : 410px) and (min-width : 375px) {
192+
.button.activelist{
193+
min-width: 117px !important;
194+
height: 45px;
195+
}
196+
}
197+
198+
@media only screen and (max-width : 374px) {
199+
.button.activelist{
200+
min-width: 97px !important;
201+
height: 44px;
202+
}
203+
204+
.actioncog {
205+
margin-right: -13px;
206+
width: 39px;
207+
height: 41px;
208+
}
209+
}
210+
211+
.icon-calendar{
212+
position: inherit !important;
168213
}

‎omod/src/main/compass/sass/systemadministration/systemadministration.scss

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@media only screen and (min-width : 320px) and (max-width : 365px) {
2+
.homeList a {
3+
width: 117px !important;
4+
}
5+
}
6+
7+
@media only screen and (max-width : 410px) and (min-width : 375px) {
8+
.homeList a {
9+
width: 140px !important;
10+
}
11+
}
12+
13+
@media only screen and (max-width : 414px) and (min-width : 411px) {
14+
.homeList a {
15+
width: 158px !important;
16+
}
17+
}
18+
19+
@media only screen and (min-width : 768px) and (max-width : 991px) {
20+
.homeList a {
21+
width: 156px !important;
22+
}
23+
}
24+
25+
@media only screen and (max-width : 992px) {
26+
.schedulingList {
27+
margin-left: unset !important;
28+
}
29+
}

‎omod/src/main/compass/sass/visit/visits.scss

+1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@ p.filters {
2323
.add-on{
2424
left: 137px !important;
2525
top: -25px;
26+
position: inherit;
2627
}

‎omod/src/main/webapp/fragments/findPatientById.gsp

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ jq(function() {
3333
<label>${config.label}</label>
3434
<input type="hidden" id="${config.hiddenFieldName}" name="${config.hiddenFieldName}" />
3535
<div class="scan-input">
36-
<input type="text" id="${config.textFieldName}" AUTOCOMPLETE="OFF" size="40" placeholder=""/>
36+
<input class="form-control input-sm input-lg" type="text" id="${config.textFieldName}" AUTOCOMPLETE="OFF" size="40" placeholder=""/>
3737
</div>
3838
<br/>
3939
<span id="${config.fullNameField}"></span>

‎omod/src/main/webapp/fragments/patientdashboard/encountertemplate/defaultEncounterTemplate.gsp

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</li>
3333
<li>
3434
<div class="details-action">
35-
<a class="view-details collapsed" href='javascript:void(0);' data-encounter-id="{{- encounter.encounterId }}" data-encounter-form="{{- encounter.form != null}}" data-display-with-html-form="{{- config.displayWithHtmlForm }}" data-target="#encounter-summary{{- encounter.encounterId }}" data-toggle="collapse" data-target="#encounter-summary{{- encounter.encounterId }}">
35+
<a class="view-details collapsed" href='javascript:void(0);' data-encounter-id="{{- encounter.encounterId }}" data-encounter-form="{{- encounter.form != null}}" data-display-with-html-form="{{- config.displayWithHtmlForm }}" data-target="#encounter-summary{{- encounter.encounterId }}" data-toggle="collapse encounterview" data-target="#encounter-summary{{- encounter.encounterId }}">
3636
<span class="show-details">${ ui.message("coreapps.patientDashBoard.showDetails")}</span>
3737
<span class="hide-details">${ ui.message("coreapps.patientDashBoard.hideDetails")}</span>
3838
<i class="icon-caret-right"></i>
@@ -51,7 +51,7 @@
5151
{{ } }}
5252
</span>
5353

54-
<div id="encounter-summary{{- encounter.encounterId }}" class="collapse">
54+
<div id="encounter-summary{{- encounter.encounterId }}" class="collapse encounterview">
5555
<div class="encounter-summary-container"></div>
5656
</div>
5757
</li>

‎omod/src/main/webapp/fragments/patientdashboard/encountertemplate/noDetailsEncounterTemplate.gsp

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
{{ } }}
4040
</span>
4141

42-
<div id="encounter-summary{{- encounter.encounterId }}" class="collapse">
42+
<div id="encounter-summary{{- encounter.encounterId }}" class="collapse encounterview">
4343
<div class="encounter-summary-container"></div>
4444
</div>
4545
</li>

‎omod/src/main/webapp/fragments/patientdashboard/visitDetailsTemplate.gsp

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@
2727
def url = task.url(contextPath, appContextModel.with("visit", [id: "{{visit.id}}", uuid: "{{visit.uuid}}", active: "{{visit.active}}"]), returnUrl); // strip out any hard-coded id, uuid, or active with the appropriate template so that it can be dynamically populated based on current selected visit
2828
if (task.type != "script") {
2929
%>
30-
<a href="[[= emr.applyContextModel('${ ui.escapeJs(url) }', { 'visit.id': id, 'visit.uuid': uuid, 'visit.active': stopDatetime == null }) ]]" id="${task.id}" class="button task">
30+
<a href="[[= emr.applyContextModel('${ ui.escapeJs(url) }', { 'visit.id': id, 'visit.uuid': uuid, 'visit.active': stopDatetime == null }) ]]" id="${task.id}" class="button task activelist">
3131
<% } else { // script
3232
%>
33-
<a href="[[= emr.applyContextModel('${ url }', {'visit.id': id, 'visit.uuid': uuid, 'visit.active': stopDatetime == null })]]" class="button task">
33+
<a href="[[= emr.applyContextModel('${ url }', {'visit.id': id, 'visit.uuid': uuid, 'visit.active': stopDatetime == null })]]" class="button task activelist">
3434
<% } %>
3535
<i class="${task.icon}"></i> ${ ui.message(task.label) }</a>
3636

‎omod/src/main/webapp/fragments/patientdashboard/visits.gsp

+82-79
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,19 @@
1313
%>
1414

1515
<script type="text/javascript">
16-
breadcrumbs.push({ label: "${ui.message("coreapps.patientDashBoard.visits")}" , link:'${ui.pageLink("coreapps", "patientdashboard/patientDashboard", [patientId: patient.id])}'});
1716
18-
jq(".collapse").collapse();
17+
1918
</script>
2019

2120
<!-- Encounter templates -->
2221
<%
2322
ui.includeJavascript("coreapps", "fragments/encounterTemplates.js")
2423
%>
24+
2525
<script type="text/javascript">
26+
27+
breadcrumbs.push({ label: "${ui.message("coreapps.patientDashBoard.visits")}" , link:'${ui.pageLink("coreapps", "patientdashboard/patientDashboard", [patientId: patient.id])}'});
28+
2629
jq(function() {
2730
<% encounterTemplateExtensions.each { extension ->
2831
extension.extensionParams.supportedEncounterTypes?.each { encounterType -> %>
@@ -74,92 +77,92 @@
7477
%>
7578
});
7679
</script>
80+
<div class="col-6 col-sm-6 col-md-3 col-lg-3">
81+
<ul id="visits-list" class="left-menu">
7782
78-
<ul id="visits-list" class="left-menu">
79-
80-
<%
81-
def visits = patient.allVisitsUsingWrappers;
82-
visits.eachWithIndex { wrapper, idx ->
83-
def primaryDiagnoses = wrapper.getUniqueDiagnoses(true, false)
84-
%>
85-
<li class="menu-item viewVisitDetails" data-visit-id="${wrapper.visit.visitId}">
86-
<span class="menu-date">
87-
<i class="icon-time"></i>
88-
${ui.format(wrapper.startDate)}
89-
<% if(wrapper.stopDate != null) { %>
90-
- ${ui.format(wrapper.stopDate)}
91-
<% } else { %>
92-
(${ ui.message("coreapps.patientDashBoard.activeSince")} ${timeFormat.format(wrapper.visit.startDatetime)})
93-
<% } %>
94-
</span>
95-
96-
<% if (primaryDiagnoses != null) { %> <!-- if primary diagnosis is null, don't display box at all, if empty, display "no diagnosis" message -->
97-
<span class="menu-title">
98-
<i class="icon-stethoscope"></i>
99-
<% if (!primaryDiagnoses.empty) { %>
100-
${ formatDiagnoses(primaryDiagnoses) }
101-
<% } else { %>
102-
${ ui.message("coreapps.patientDashBoard.noDiagnosis")}
83+
<%
84+
def visits = patient.allVisitsUsingWrappers;
85+
visits.eachWithIndex { wrapper, idx ->
86+
def primaryDiagnoses = wrapper.getUniqueDiagnoses(true, false)
87+
%>
88+
<li class="menu-item viewVisitDetails" data-visit-id="${wrapper.visit.visitId}">
89+
<span class="menu-date">
90+
<i class="icon-time"></i>
91+
${ui.format(wrapper.startDate)}
92+
<% if(wrapper.stopDate != null) { %>
93+
- ${ui.format(wrapper.stopDate)}
94+
<% } else { %>
95+
(${ ui.message("coreapps.patientDashBoard.activeSince")} ${timeFormat.format(wrapper.visit.startDatetime)})
10396
<% } %>
10497
</span>
105-
<% } %>
106-
<span class="arrow-border"></span>
107-
<span class="arrow"></span>
108-
</li>
109-
110-
111-
${ ui.includeFragment("coreapps", "patientdashboard/editVisitDatesDialog", [
112-
visitId: wrapper.visit.visitId,
113-
endDateUpperLimit: idx == 0 ? editDateFormat.format(new Date()) : editDateFormat.format(org.apache.commons.lang.time.DateUtils.addDays(visits[idx - 1].startDatetime, -1)),
114-
endDateLowerLimit: editDateFormat.format(wrapper.mostRecentEncounter == null ? wrapper.startDatetime : wrapper.mostRecentEncounter.encounterDatetime),
115-
startDateLowerLimit: (idx + 1 == visits.size || visits[idx + 1].stopDatetime == null) ? null : editDateFormat.format(org.apache.commons.lang.time.DateUtils.addDays(visits[idx + 1].stopDatetime, 1)),
116-
startDateUpperLimit: wrapper.oldestEncounter == null && wrapper.stopDatetime == null ? editDateFormat.format(new Date()) : editDateFormat.format(wrapper.oldestEncounter == null ? wrapper.stopDatetime : wrapper.oldestEncounter.encounterDatetime),
117-
defaultStartDate: wrapper.startDatetime,
118-
defaultEndDate: wrapper.stopDatetime
119-
]) }
120-
121-
${ ui.includeFragment("coreapps", "patientdashboard/editVisit", [
122-
visit: wrapper.visit,
123-
patient: patient
124-
]) }
125-
126-
<% } %>
127-
128-
<% if(patient.allVisitsUsingWrappers.size == 0) { %>
129-
<div class="no-results">
130-
${ ui.message("coreapps.patientDashBoard.noVisits")}
131-
</div>
132-
<% } %>
133-
</ul>
134-
135-
<div class="main-content">
136-
<div id="visit-details">
137-
<% if (patient.patient.dead) { %>
138-
<h4>${ ui.message('coreapps.noActiveVisit') }</h4>
139-
<p class="spaced">${ ui.message('coreapps.deadPatient.description') }</p>
140-
<% } else if (!activeVisit) { %>
141-
<h4>${ ui.message('coreapps.noActiveVisit') }</h4>
142-
<p class="spaced">${ ui.message('coreapps.noActiveVisit.description') }</p>
143-
<% if (sessionContext.userContext.hasPrivilege("Task: coreapps.createVisit")) { %>
144-
<p class="spaced">
145-
<a id="noVisitShowVisitCreationDialog" href="javascript:visit.showQuickVisitCreationDialog(${patient.id})" class="button task">
146-
<i class="icon-check-in small"></i>${ ui.message("coreapps.task.startVisit.label") }
147-
</a>
148-
</p>
98+
99+
<% if (primaryDiagnoses != null) { %> <!-- if primary diagnosis is null, don't display box at all, if empty, display "no diagnosis" message -->
100+
<span class="menu-title">
101+
<i class="icon-stethoscope"></i>
102+
<% if (!primaryDiagnoses.empty) { %>
103+
${ formatDiagnoses(primaryDiagnoses) }
104+
<% } else { %>
105+
${ ui.message("coreapps.patientDashBoard.noDiagnosis")}
106+
<% } %>
107+
</span>
149108
<% } %>
109+
<span class="arrow-border"></span>
110+
<span class="arrow"></span>
111+
</li>
112+
113+
114+
${ ui.includeFragment("coreapps", "patientdashboard/editVisitDatesDialog", [
115+
visitId: wrapper.visit.visitId,
116+
endDateUpperLimit: idx == 0 ? editDateFormat.format(new Date()) : editDateFormat.format(org.apache.commons.lang.time.DateUtils.addDays(visits[idx - 1].startDatetime, -1)),
117+
endDateLowerLimit: editDateFormat.format(wrapper.mostRecentEncounter == null ? wrapper.startDatetime : wrapper.mostRecentEncounter.encounterDatetime),
118+
startDateLowerLimit: (idx + 1 == visits.size || visits[idx + 1].stopDatetime == null) ? null : editDateFormat.format(org.apache.commons.lang.time.DateUtils.addDays(visits[idx + 1].stopDatetime, 1)),
119+
startDateUpperLimit: wrapper.oldestEncounter == null && wrapper.stopDatetime == null ? editDateFormat.format(new Date()) : editDateFormat.format(wrapper.oldestEncounter == null ? wrapper.stopDatetime : wrapper.oldestEncounter.encounterDatetime),
120+
defaultStartDate: wrapper.startDatetime,
121+
defaultEndDate: wrapper.stopDatetime
122+
]) }
123+
124+
${ ui.includeFragment("coreapps", "patientdashboard/editVisit", [
125+
visit: wrapper.visit,
126+
patient: patient
127+
]) }
128+
150129
<% } %>
130+
131+
<% if(patient.allVisitsUsingWrappers.size == 0) { %>
132+
<div class="no-results">
133+
${ ui.message("coreapps.patientDashBoard.noVisits")}
134+
</div>
135+
<% } %>
136+
</ul>
151137
</div>
138+
<div class="main-content col-6 col-sm-6 col-md-9 col-lg-9">
139+
<div id="visit-details">
140+
<% if (patient.patient.dead) { %>
141+
<h4>${ ui.message('coreapps.noActiveVisit') }</h4>
142+
<p class="spaced">${ ui.message('coreapps.deadPatient.description') }</p>
143+
<% } else if (!activeVisit) { %>
144+
<h4>${ ui.message('coreapps.noActiveVisit') }</h4>
145+
<p class="spaced">${ ui.message('coreapps.noActiveVisit.description') }</p>
146+
<% if (sessionContext.userContext.hasPrivilege("Task: coreapps.createVisit")) { %>
147+
<p class="spaced">
148+
<a id="noVisitShowVisitCreationDialog" href="javascript:visit.showQuickVisitCreationDialog(${patient.id})" class="button task">
149+
<i class="icon-check-in small"></i>${ ui.message("coreapps.task.startVisit.label") }
150+
</a>
151+
</p>
152+
<% } %>
153+
<% } %>
154+
</div>
152155
153-
<div id="visit-paging-buttons" style="width: 75%; visibility: hidden;">
154-
<button id="visit-paging-button-prev" class="left" style="visibility: hidden">
155-
<i class=" icon-arrow-left icon-1x"></i>${ ui.message("coreapps.search.previous") }
156-
</button>
157-
<button id="visit-paging-button-next" class="right" style="visibility: hidden">
158-
${ ui.message("coreapps.search.next") }<i class=" icon-arrow-right icon-1x"></i>
159-
</button>
156+
<div id="visit-paging-buttons" style="width: 75%; visibility: hidden;">
157+
<button id="visit-paging-button-prev" class="left" style="visibility: hidden">
158+
<i class=" icon-arrow-left icon-1x"></i>${ ui.message("coreapps.search.previous") }
159+
</button>
160+
<button id="visit-paging-button-next" class="right" style="visibility: hidden">
161+
${ ui.message("coreapps.search.next") }<i class=" icon-arrow-right icon-1x"></i>
162+
</button>
163+
</div>
160164
</div>
161165
</div>
162-
163166
<div id="delete-encounter-dialog" class="dialog" style="display: none">
164167
<div class="dialog-header">
165168
<h3>${ ui.message("coreapps.patientDashBoard.deleteEncounter.title") }</h3>

‎omod/src/main/webapp/fragments/patientsearch/patientSearchWidget.gsp

+31-21
Original file line numberDiff line numberDiff line change
@@ -90,26 +90,36 @@
9090
patientSearchWidget = new PatientSearchWidget(widgetConfig);
9191
});
9292
</script>
93+
<div class="row">
94+
<div class="col-md-12 col-sm-12 col-xs-12">
95+
<form method="get" id="patient-search-form" onsubmit="return false">
96+
<input class="form-control input-sm input-lg" type="text" id="patient-search" placeholder="${ ui.message("coreapps.findPatient.search.placeholder") }" autocomplete="off" <% if (doInitialSearch) { %>value="${doInitialSearch}"<% } %>/><i id="patient-search-clear-button" class="small icon-remove-sign"></i>
97+
<% if(patientSearchExtensions){
9398
94-
<form method="get" id="patient-search-form" onsubmit="return false">
95-
<input type="text" id="patient-search" placeholder="${ ui.message("coreapps.findPatient.search.placeholder") }" autocomplete="off" <% if (doInitialSearch) { %>value="${doInitialSearch}"<% } %>/><i id="patient-search-clear-button" class="small icon-remove-sign"></i>
96-
<% if(patientSearchExtensions){
97-
98-
patientSearchExtensions.each {
99-
// create a base map from the fragmentConfig if it exists, otherwise just create an empty map
100-
def configs = [:];
101-
if(it.extensionParams.fragmentConfig != null){
102-
configs = it.extensionParams.fragmentConfig;
103-
}
104-
%>
105-
${ ui.includeFragment(it.extensionParams.provider, it.extensionParams.fragment, configs) }
106-
<%}
107-
} %>
108-
</form>
109-
110-
<div id="patient-search-results"></div>
111-
<% if (registrationAppLink ?: false) { %>
112-
<div id="register-patient-link">
113-
<label>${ ui.message("coreapps.findPatient.registerPatient.label") }&nbsp;&nbsp;</label><a id="patient-search-register-patient" class="button" href="/${contextPath}/${registrationAppLink}">${ui.message("registrationapp.registration.label")}</a>
99+
patientSearchExtensions.each {
100+
// create a base map from the fragmentConfig if it exists, otherwise just create an empty map
101+
def configs = [:];
102+
if(it.extensionParams.fragmentConfig != null){
103+
configs = it.extensionParams.fragmentConfig;
104+
}
105+
%>
106+
${ ui.includeFragment(it.extensionParams.provider, it.extensionParams.fragment, configs) }
107+
<%}
108+
} %>
109+
</form>
110+
</div>
111+
</div>
112+
<div class="row">
113+
<div class="col-md-12 col-sm-12 col-xs-12">
114+
<div id="patient-search-results"></div>
115+
</div>
114116
</div>
115-
<% } %>
117+
<div class="row">
118+
<div class="col-md-12 col-sm-12 col-xs-12">
119+
<% if (registrationAppLink ?: false) { %>
120+
<div id="register-patient-link">
121+
<label>${ ui.message("coreapps.findPatient.registerPatient.label") }&nbsp;&nbsp;</label><a id="patient-search-register-patient" class="button" href="/${contextPath}/${registrationAppLink}">${ui.message("registrationapp.registration.label")}</a>
122+
</div>
123+
<% } %>
124+
</div>
125+
</div>

0 commit comments

Comments
 (0)