dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #43583
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 22096: tracker/event-capture: data element/attribute details now use better popover directive
------------------------------------------------------------
revno: 22096
committer: Abyot Asalefew Gizaw <abyot@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2016-03-01 16:11:41 +0100
message:
tracker/event-capture: data element/attribute details now use better popover directive
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/registration/default-registration-form.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js
--
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-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties 2016-02-19 12:07:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/i18n/i18n_app.properties 2016-03-01 15:11:41 +0000
@@ -167,3 +167,4 @@
delete_error_audit=The event could not be deleted because it contains an auditlog.
description=Description
url=URL
+not_available=Not available
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html 2016-02-24 13:51:13 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html 2016-03-01 15:11:41 +0000
@@ -1,3 +1,22 @@
+<script type="text/ng-template" id="dataelement-details.html">
+ <table class="table table-bordered">
+ <tr>
+ <td class="bold">{{'description' | translate}}</td>
+ <td>{{content.description ? content.description : 'not_available' | translate}}</td>
+ </tr>
+ <tr>
+ <td class="bold">{{'url' | translate}}</td>
+ <td>
+ <span ng-if="content.url">
+ <a href="{{content.url}}" target="_blank">{{content.url}}</a>
+ </span>
+ <span ng-if="!content.url">
+ {{'not_available' | translate}}
+ </span>
+ </td>
+ </tr>
+ </table>
+</script>
<div ng-if='!selectedProgramStage.programStageSections.length'>
<div ng-include="'views/event-details.html'"></div>
<table class="dhis2-list-table-striped table-with-fixed-layout">
@@ -16,13 +35,16 @@
<tbody>
<tr ng-repeat="eventGridColumn in eventGridColumns" ng-if="eventGridColumn.id !== 'comment' && eventGridColumn.id !== 'uid' && eventGridColumn.id !== 'eventDate' && !hiddenFields[eventGridColumn.id]">
<td>
- <d2-info display-name="{{eventGridColumn.displayName}}"
- data-content='[{"name":"{{"description" | translate}}", "data":"{{prStDes[eventGridColumn.id].dataElement.description}}"},
- {"name":"{{"url" | translate}}", "data":"{{prStDes[eventGridColumn.id].dataElement.url}}"}]'
- data-title="Details">
- </d2-info>
- <span ng-if="eventGridColumn.compulsory" class="required">*</span>
- </td>
+ <span d2-pop-over
+ details="{{'details'| translate}}"
+ content="prStDes[eventGridColumn.id].dataElement"
+ template="dataelement-details.html"
+ trigger="click"
+ placement="right">
+ <a href >{{eventGridColumn.displayName}}</a>
+ </span>
+ <span ng-if="eventGridColumn.compulsory" class="required">*</span>
+ </td>
<td>
<ng-form name="innerForm">
<div ng-if="prStDes[eventGridColumn.id].dataElement.optionSetValue">
@@ -276,15 +298,16 @@
<tbody>
<tr ng-repeat="de in section.programStageDataElements" ng-if="!hiddenFields[de.dataElement.id]">
<td>
- <d2-info display-name="{{prStDes[de.dataElement.id].dataElement.formName ? prStDes[de.dataElement.id].dataElement.formName :
- prStDes[de.dataElement.id].dataElement.displayName}}"
- data-content='[{"name":"{{"description" | translate}}", "data":"{{prStDes[de.dataElement.id].dataElement.description}}"},
- {"name":"{{"url" | translate}}", "data":"{{prStDes[de.dataElement.id].dataElement.url}}"}]'
- data-title="Details">
- </d2-info>
-
- <span ng-if="prStDes[de.dataElement.id].compulsory" class="required">*</span>
- </td>
+ <span d2-pop-over
+ details="{{'details'| translate}}"
+ content="prStDes[de.dataElement.id].dataElement"
+ template="dataelement-details.html"
+ trigger="click"
+ placement="right">
+ <a href >{{prStDes[de.dataElement.id].dataElement.formName ? prStDes[de.dataElement.id].dataElement.formName : prStDes[de.dataElement.id].dataElement.displayName}}</a>
+ </span>
+ <span ng-if="prStDes[de.dataElement.id].compulsory" class="required">*</span>
+ </td>
<td>
<ng-form name="innerForm">
<div ng-if="prStDes[de.dataElement.id].dataElement.optionSetValue">
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html 2016-03-01 10:27:46 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html 2016-03-01 15:11:41 +0000
@@ -1,3 +1,22 @@
+<script type="text/ng-template" id="dataelement-details.html">
+ <table class="table table-bordered">
+ <tr>
+ <td class="bold">{{'description' | translate}}</td>
+ <td>{{content.description ? content.description : 'not_available' | translate}}</td>
+ </tr>
+ <tr>
+ <td class="bold">{{'url' | translate}}</td>
+ <td>
+ <span ng-if="content.url">
+ <a href="{{content.url}}" target="_blank">{{content.url}}</a>
+ </span>
+ <span ng-if="!content.url">
+ {{'not_available' | translate}}
+ </span>
+ </td>
+ </tr>
+ </table>
+</script>
<form name="outerForm" novalidate>
<table class="dhis2-list-table-striped default-form-table" ng-if='currentEvent && !currentStage.programStageSections.length'>
<thead>
@@ -14,11 +33,14 @@
</thead>
<tr class="col-md-12" ng-repeat="prStDe in currentStage.programStageDataElements" ng-if="!isHidden(prStDe.dataElement.id, currentEvent)">
<td>
- <d2-info display-name="{{prStDe.dataElement.formName ? prStDe.dataElement.formName : prStDe.dataElement.displayName}}"
- data-content='[{"name":"{{"description" | translate}}", "data":"{{prStDe.dataElement.description}}"},
- {"name":"{{"url" | translate}}", "data":"{{prStDe.dataElement.url}}"}]'
- data-title="Details">
- </d2-info>
+ <span d2-pop-over
+ details="{{'details'| translate}}"
+ content="prStDe.dataElement"
+ template="dataelement-details.html"
+ trigger="click"
+ placement="right">
+ <a href >{{prStDe.dataElement.formName ? prStDe.dataElement.formName : prStDe.dataElement.displayName}}</a>
+ </span>
<span ng-if="prStDe.compulsory" class="required">*</span>
<span class="hideInPrint">
<span ng-if="otherValuesLists[prStDe.dataElement.id]" ng-repeat="altValue in otherValuesLists[prStDe.dataElement.id] track by $index">
@@ -73,7 +95,14 @@
<tbody id="list">
<tr ng-repeat="de in section.programStageDataElements" ng-if="!isHidden(de.dataElement.id)">
<td>
- <span ng-bind="prStDes[de.dataElement.id].dataElement.formName ? prStDes[de.dataElement.id].dataElement.formName : prStDes[de.dataElement.id].dataElement.displayName"></span>
+ <span d2-pop-over
+ details="{{'details'| translate}}"
+ content="prStDes[de.dataElement.id].dataElement"
+ template="dataelement-details.html"
+ trigger="click"
+ placement="right">
+ <a href >{{prStDes[de.dataElement.id].dataElement.formName ? prStDes[de.dataElement.id].dataElement.formName : prStDes[de.dataElement.id].dataElement.displayName}}</a>
+ </span>
<span ng-if="prStDes[de.dataElement.id].compulsory" class="required">*</span>
<span class="hideInPrint">
<d2-info ng-if="prStDes[de.dataElement.id].dataElement.description" data-content='[{"name":"{{"description" | translate}}", "data":"{{prStDes[de.dataElement.id].dataElement.description}}"}]'>
@@ -82,22 +111,22 @@
<span class="label label-default">{{altValue | translate}}</span>
</span>
</span>
- </td>
- <td dhis2-compiled-include="components/dataentry/section-inner-form.html">
- </td>
- <td class="hideInPrint audit-icon-column" align="center" ng-if="currentEvent.event">
- <d2-audit dataelement-id="{{de.dataElement.id}}" dataelement-name="{{prStDes[de.dataElement.id].dataElement.displayName}}" current-event="{{currentEvent.event}}"></d2-audit>
- </td>
- <td class="form-narrow-column" ng-if="allowProvidedElsewhereExists[currentStage.id]">
- <div class="align-center" ng-show="prStDes[de.dataElement.id].allowProvidedElsewhere">
- <input type="checkbox"
- class="form-control-checkbox"
- ng-model="currentEvent.providedElsewhere[prStDes[de.dataElement.id].dataElement.id]"
- ng-disabled="selectedEnrollment.status !== 'ACTIVE' || currentEvent.editingNotAllowed"
- ng-change="saveDatavalueLocation(prStDes[de.dataElement.id])"/>
- </div>
- </td>
- </tr>
+ </td>
+ <td dhis2-compiled-include="components/dataentry/section-inner-form.html">
+ </td>
+ <td class="hideInPrint audit-icon-column" align="center" ng-if="currentEvent.event">
+ <d2-audit dataelement-id="{{de.dataElement.id}}" dataelement-name="{{prStDes[de.dataElement.id].dataElement.displayName}}" current-event="{{currentEvent.event}}"></d2-audit>
+ </td>
+ <td class="form-narrow-column" ng-if="allowProvidedElsewhereExists[currentStage.id]">
+ <div class="align-center" ng-show="prStDes[de.dataElement.id].allowProvidedElsewhere">
+ <input type="checkbox"
+ class="form-control-checkbox"
+ ng-model="currentEvent.providedElsewhere[prStDes[de.dataElement.id].dataElement.id]"
+ ng-disabled="selectedEnrollment.status !== 'ACTIVE' || currentEvent.editingNotAllowed"
+ ng-change="saveDatavalueLocation(prStDes[de.dataElement.id])"/>
+ </div>
+ </td>
+ </tr>
</tbody>
</table>
</accordion-group>
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/registration/default-registration-form.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/registration/default-registration-form.html 2016-02-24 13:51:13 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/registration/default-registration-form.html 2016-03-01 15:11:41 +0000
@@ -1,12 +1,34 @@
<h3 ng-if="widget !== 'PROFILE'">{{'profile'| translate}}</h3>
+<script type="text/ng-template" id="attribute-details.html">
+ <table class="table table-bordered">
+ <tr>
+ <td class="bold">{{'description' | translate}}</td>
+ <td>{{content.description ? content.description : 'not_available' | translate}}</td>
+ </tr>
+ <!--<tr>
+ <td class="bold">{{'url' | translate}}</td>
+ <td>
+ <span ng-if="content.url">
+ <a href="{{content.url}}" target="_blank">{{content.url}}</a>
+ </span>
+ <span ng-if="!content.url">
+ {{'not_available' | translate}}
+ </span>
+ </td>
+ </tr>-->
+ </table>
+</script>
<table class="dhis2-list-table-striped dhis2-table-hover">
<tr ng-repeat="attribute in attributes | filter: {attribute: 'true'} " ng-if="!hiddenFields[attribute.id] && ((editingDisabled && attribute.show) || !editingDisabled)">
<td>
- <d2-info display-name="{{attribute.displayName}}"
- data-content='[{"name":"{{"description" | translate}}", "data":"{{attribute.description}}"},
- {"name":"{{"url" | translate}}", "data":"{{attribute.url}}"}]'
- data-title="Details">
- </d2-info>
+ <span d2-pop-over
+ details="{{'details'| translate}}"
+ content="attribute"
+ template="attribute-details.html"
+ trigger="click"
+ placement="right">
+ <a href >{{attribute.displayName}}</a>
+ </span>
<span ng-if="attribute.mandatory || attribute.unique" class="required">*</span>
</td>
<td>
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2016-02-19 16:53:52 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2016-03-01 15:11:41 +0000
@@ -467,4 +467,5 @@
choose_the_dates=Choose the dates
fill_all_category_options=Please fill all category options
description=Description
-url=URL
\ No newline at end of file
+url=URL
+not_available=Not available
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2016-02-25 09:11:19 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2016-03-01 15:11:41 +0000
@@ -1334,7 +1334,11 @@
}
.default-form-table > tbody > tr {
- height: 40px;
+ height: 40px;
+}
+
+.default-form-table > tbody > tr:hover > td, .default-form-table > tbody > tr:hover > th {
+ background-color: #dfe9f4;
}
.row.null-margins {
@@ -1925,26 +1929,4 @@
.row-with-go-button {
margin-top: 46%;
margin-left: 1%;
-}
-
-/*classes for the details tooltip popup for dataelements*/
-
-.popover {
- max-width:400px;
- pointer-events:none;
-}
-
-.tooltip-separator-line {
- height: 0;
- margin-right:0em;
- margin-top: 0em;
- margin-bottom: 0em;
- width:100%;
- text-align: center;
- border: 0;
- border-top: 1px solid #ddd;
-}
-
-.tooltip-font {
- font-size: small;
-}
+}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js 2016-02-29 14:37:31 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js 2016-03-01 15:11:41 +0000
@@ -118,7 +118,8 @@
content: '=',
title: '@details',
template: "@template",
- placement: "@placement"
+ placement: "@placement",
+ trigger: "@trigger"
},
link: function (scope, element, attrs) {
var content = $templateCache.get(scope.template);
@@ -127,11 +128,17 @@
var options = {
content: content,
placement: scope.placement ? scope.placement : 'auto',
- trigger: 'hover',
+ trigger: scope.trigger ? scope.trigger : 'hover',
html: true,
title: scope.title
};
- element.popover(options);
+ element.popover(options);
+
+ $('body').on('click', function (e) {
+ if( !element[0].contains(e.target) ) {
+ element.popover('hide');
+ }
+ });
}
};
})
@@ -627,65 +634,4 @@
link: function (scope, element, attrs) {
}
};
-})
-.directive('d2Info', function ($translate) {
- return {
- restrict: 'EA',
- template: '<a style="cursor: pointer;" type="button" data-container="body" data-toggle="popover"' +
- 'data-placement="right" data-html="true" data-title="{{title}}" data-trigger="click" ' +
- 'data-content="{{formattedContent}}">' +
- '{{displayName}}'+
- '</a>',
- scope: {
- title: '@?',
- content: '@',
- displayName: '@'
- },
- link: function (scope, element) {
- var showIcon = true;
-
- scope.formattedContent = getFormattedContent(scope.content);
-
- $('body').on('click', function (e) {
- $('[data-toggle="popover"]').each(function () {
- if (!$(this).is(e.target)) {
- $(this).popover('hide');
- } else {
- if (showIcon) {
- $(this).popover('show');
- }
- }
- });
- });
-
- element.on('$destroy', function (e) {
- $('[data-toggle="popover"]').each(function () {
- if (!$(this).is(e.target)) {
- $(this).popover('hide');
- scope.clicked = false;
- }
- });
- });
-
- function getFormattedContent(contentArrayString) {
- var contentArray = $.parseJSON(contentArrayString);
- var formattedString = "";
- for (var index = 0; index < contentArray.length; index++) {
- var content = contentArray[index];
- if (!content.data) {
- content.data = "Not available";
- }
- if (index >= 1) {
- formattedString += '<hr class="tooltip-separator-line">';
- }
- if (content.name === $translate.instant('url') && content.data !== "Not available") {
- formattedString += '<div class="tooltip-font"><b>' + content.name + ': </b><a href=' + content.data + ' target=\'_blank\' style=\'cursor:pointer;pointer-events:auto;\'>' + content.data + '</a></div>';
- } else {
- formattedString += '<div class="tooltip-font"><b>' + content.name + ': </b>' + content.data + '</div>';
- }
- }
- return formattedString;
- }
- }
- }
});
\ No newline at end of file
