...
| Code Block | ||
|---|---|---|
| ||
<%
def id = config.id ?: ui.randomId("patientIdentifiers")
%>
<script>
function refreshPatientIdentifierTable(divId, patientId) {
jq('#' + divId + '_table > tbody').empty();
jq.getJSON('${ ui.actionLink("getActiveIdentifiers", [returnFormat: "json"]) }', { patientId: patientId },
function(data) {
publish(divId + "_table.show-data", data);
});
}
function refreshPatientIdentifiers${ id }(message, data) {
if (data)
publish("${ id }_table.show-data", data.activeIdentifiers);
else
refreshPatientIdentifierTable('${ id }', ${ patient.patientId });
}
subscribe('${ id }.refresh', refreshPatientIdentifiers${ id });
subscribe('patient/${ patient.patientId }.changed', refreshPatientIdentifiers${ id });
subscribe('patient/${ patient.patientId }/identifiers.changed', refreshPatientIdentifiers${ id });
subscribe('${ id }_table.delete-button-clicked', function(message, data) {
if (prettyConfirm('${ ui.message("general.confirm") }')) {
jq.post('${ ui.actionLink("deleteIdentifier") }', { returnFormat: 'json', patientIdentifierId: data },
function(data) {
location.reload(true);
})
.error(function() {
flashError("Programmer error: delete identifier failed");
})
}
});
</script>
<div id="${ id }">
${ ui.includeFragment("widgets/table", [
id: id + "_table",
columns: [
[ property: "identifierType", heading: ui.message("PatientIdentifier.identifierType") ],
[ property: "identifier", userEntered: true, heading: ui.message("PatientIdentifier.identifier") ],
[ property: "location", heading: ui.message("PatientIdentifier.location") ],
[ actions: [
[ action: "event",
icon: "delete24.png",
tooltip: ui.message("PatientIdentifier.delete"),
event: id + ".delete-button-clicked",
eventPrefix: id, property: "patientIdentifierId" ]
] ]
],
rows: patient.activeIdentifiers,
ifNoRowsMessage: ui.message("general.none")
]) }
${ ui.includeFragment("widgets/popupForm",
[
id: id + "_add",
buttonLabel: ui.message("general.add"),
popupTitle: ui.message("PatientIdentifier.add"),
fragment: "patientIdentifiers",
action: "addIdentifier",
submitLabel: ui.message("general.save"),
cancelLabel: ui.message("general.cancel"),
fields: [
[ hiddenInputName: "patientId", value: patient.patientId ],
[ label: ui.message("PatientIdentifier.identifierType"), formFieldName: "identifierType", class: org.openmrs.PatientIdentifierType ],
[ label: ui.message("PatientIdentifier.identifier"), formFieldName: "identifier", class: java.lang.String ],
[ label: ui.message("PatientIdentifier.location"), formFieldName: "location", class: org.openmrs.Location ]
]
]) }
</div>
|
...
The newly-added last column of the table is a list of actions (containing just one action). Visually, we define an icon (TODO document this) and a tooltip. Logically, we define an event to post , an eventPrefix (used so that this fragment can be included (including the id of this fragment, so that it is safe to include on a page multiple times), and a property, whose value for the clicked row will be published as additional data in the message.
In the newly-added event subscription, we listen for (FRAGMENT-ID)_table.delete-button-clicked, namely the eventPrefix (dot) the eventevent we defined in the action. The callback function we register with the subscription counts on being passed the patientIdentifierId (i.e. the "property" on the action) as extra data. We ask the user to confirm their action using the openmrsConfirm function. (Currently this just calls the standard Javascript confirm function, but by using our own OpenMRS method, we'll be able to make the look and feel prettier in the future, by changing code in just one place.) Assuming the users confirms the deletion, we do a standard jQuery post to our new deleteIdentifier action, passing the relevant id as data, and reloading the page on success. (This is a placeholder-we'll ajaxify shortly.) Finally, we define a function to be called on error. It is good practice to handle errors from every ajax call you make-displaying anything at all (even something not particularly meaningful to the end user) is better than a silent error.
(If you were paying very close attention you'll have noticed that we passed "id" as the eventPrefix in the fragment configuration, but the message prefix we actually subscribe to is the id of the table fragment we include, and not the id of our own fragment. TODO describe why this happens.)If you reload your page, you'll now be able to add and remove identifiers.
...
| Code Block | ||
|---|---|---|
| ||
<%
def id = config.id ?: ui.randomId("patientIdentifiers")
%>
<script>
function refreshPatientIdentifierTable(divId, patientId) {
jq('#' + divId + '_table > tbody').empty();
jq.getJSON('${ ui.actionLink("getActiveIdentifiers", [returnFormat: "json"]) }', { patientId: patientId },
function(data) {
publish(divId + "_table.show-data", data);
});
}
function refreshPatientIdentifiers${ id }(message, data) {
if (data)
publish("${ id }_table.show-data", data.activeIdentifiers);
else
refreshPatientIdentifierTable('${ id }', ${ patient.patientId });
}
subscribe('${ id }.refresh', refreshPatientIdentifiers${ id });
subscribe('patient/${ patient.patientId }.changed', refreshPatientIdentifiers${ id });
subscribe('patient/${ patient.patientId }/identifiers.changed', refreshPatientIdentifiers${ id });
subscribe('${ id }_table.delete-button-clicked', function(message, data) {
if (openmrsConfirm('${ ui.message("general.confirm") }')) {
jq.post('${ ui.actionLink("deleteIdentifier") }', { returnFormat: 'json', patientIdentifierId: data },
function(data) {
flashSuccess('${ ui.escapeJs(ui.message("PatientIdentifier.deleted")) }');
publish('patient/${ patient.patientId }/identifiers.changed', data);
}, 'json')
.error(function() {
flashError("Programmer error: delete identifier failed");
})
}
});
</script>
<div id="${ id }">
${ ui.includeFragment("widgets/table", [
id: id + "_table",
columns: [
[ property: "identifierType", heading: ui.message("PatientIdentifier.identifierType") ],
[ property: "identifier", userEntered: true, heading: ui.message("PatientIdentifier.identifier") ],
[ property: "location", heading: ui.message("PatientIdentifier.location") ],
[ actions: [
[ action: "event",
icon: "delete24.png",
tooltip: ui.message("PatientIdentifier.delete"),
event: id + ".delete-button-clicked",
eventPrefix: id,
property: "patientIdentifierId" ]
] ]
],
rows: patient.activeIdentifiers,
ifNoRowsMessage: ui.message("general.none")
]) }
${ ui.includeFragment("widgets/popupForm", [
id: id + "_add",
buttonLabel: ui.message("general.add"),
popupTitle: ui.message("PatientIdentifier.add"),
fragment: "patientIdentifiers",
action: "addIdentifier",
submitLabel: ui.message("general.save"),
cancelLabel: ui.message("general.cancel"),
fields: [
[ hiddenInputName: "patientId", value: patient.patientId ],
[ label: ui.message("PatientIdentifier.identifierType"), formFieldName: "identifierType", class: org.openmrs.PatientIdentifierType ],
[ label: ui.message("PatientIdentifier.identifier"), formFieldName: "identifier", class: java.lang.String ],
[ label: ui.message("PatientIdentifier.location"), formFieldName: "location", class: org.openmrs.Location ]
],
successEvent: "patient/" + patient.patientId + "/identifiers.changed"
]) }
</div>
|
...
| Code Block |
|---|
subscribe('${ id }_table.delete-button-clicked', function(message, data) {
if (openmrsConfirm('${ ui.message("general.confirm") }')) {
jq.post('${ ui.actionLink("deleteIdentifier") }', { returnFormat: 'json', patientIdentifierId: data },
function(data) {
flashSuccess('${ ui.escapeJs(ui.message("PatientIdentifier.deleted")) }');
publish('patient/${ patient.patientId }/identifiers.changed', data);
}, 'json')
.error(function(xhr) {
fragmentActionError(xhr, "Programmer error: delete identifier failed");
})
}
});
|