Add role type to "dates of participation" heading in roles form. Streamline javascript.

This commit is contained in:
rjy7 2010-07-16 14:44:35 +00:00
parent 74812fb0b2
commit d58b1abdc8
4 changed files with 75 additions and 49 deletions

View file

@ -256,6 +256,7 @@ PREFIX core: <${vivoCore}>
<c:when test="<%= request.getAttribute("objectUri")!=null %>"> <c:when test="<%= request.getAttribute("objectUri")!=null %>">
<c:set var="formHeading" value="Edit ${formHeading}" /> <c:set var="formHeading" value="Edit ${formHeading}" />
<c:set var="editMode" value="edit" /> <c:set var="editMode" value="edit" />
<c:set var="submitButtonLabel" value="Edit ${submitButtonLabel}" />
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<c:set var="formHeading" value="Create a new ${formHeading}" /> <c:set var="formHeading" value="Create a new ${formHeading}" />
@ -302,7 +303,7 @@ var customFormData = {
acUrl: '${acUrl}', acUrl: '${acUrl}',
acType: '${vivoCore}Grant', acType: '${vivoCore}Grant',
editMode: '${editMode}', editMode: '${editMode}',
submitButtonType: 'compound', submitButtonTextType: 'compound',
typeName: 'Grant' typeName: 'Grant'
}; };
</script> </script>

View file

@ -240,7 +240,7 @@ var customFormData = {
sparqlForAcFilter: '${sparqlForAcFilter}', sparqlForAcFilter: '${sparqlForAcFilter}',
sparqlQueryUrl: '${sparqlQueryUrl}', sparqlQueryUrl: '${sparqlQueryUrl}',
acUrl: '${acUrl}', acUrl: '${acUrl}',
submitButtonType: 'simple' submitButtonTextType: 'simple'
}; };
</script> </script>
<jsp:include page="${postForm}"/> <jsp:include page="${postForm}"/>

View file

@ -310,10 +310,12 @@
<c:when test="<%= request.getAttribute("objectUri")!=null %>"> <c:when test="<%= request.getAttribute("objectUri")!=null %>">
<c:set var="titleText" value="Edit" /> <c:set var="titleText" value="Edit" />
<c:set var="editMode" value="edit" /> <c:set var="editMode" value="edit" />
<c:set var="submitButtonText" value="Edit ${roleActivityTitleCase}" />
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<c:set var="titleText" value="Create a new" /> <c:set var="titleText" value="Create a new" />
<c:set var="editMode" value="add" /> <c:set var="editMode" value="add" />
<c:set var="submitButtonText" value="${roleActivityTitleCase}" />
</c:otherwise> </c:otherwise>
</c:choose> </c:choose>
@ -338,12 +340,12 @@
<p><v:input type="text" id="newIndLabel" name="roleLabel" label="Role in ### ${requiredHint}" size="50" /></p> <p><v:input type="text" id="newIndLabel" name="roleLabel" label="Role in ### ${requiredHint}" size="50" /></p>
<h4>Dates of Participation</h4> <h4 id="dateHeader">Dates of Participation in </h4>
<v:input type="text" label="Start Year ${requiredHint} ${yearHint}" id="startYear" size="7"/> <v:input type="text" label="Start Year ${requiredHint} ${yearHint}" id="startYear" size="7"/>
<v:input type="text" label="End Year ${yearHint}" id="endYear" size="7"/> <v:input type="text" label="End Year ${yearHint}" id="endYear" size="7"/>
</div> </div>
<p class="submit"><v:input type="submit" id="submit" value="${roleActivityTitleCase}" cancel="true" /></p> <p class="submit"><v:input type="submit" id="submit" value="${submitButtonText}" cancel="true" /></p>
<p id="requiredLegend" class="requiredHint">* required fields</p> <p id="requiredLegend" class="requiredHint">* required fields</p>
</form> </form>
@ -361,7 +363,7 @@ var customFormData = {
sparqlQueryUrl: '${sparqlQueryUrl}', sparqlQueryUrl: '${sparqlQueryUrl}',
acUrl: '${acUrl}', acUrl: '${acUrl}',
editMode: '${editMode}', editMode: '${editMode}',
submitButtonType: 'compound' submitButtonTextType: 'compound'
}; };
</script> </script>
<jsp:include page="${postForm}"/> <jsp:include page="${postForm}"/>

View file

@ -50,6 +50,9 @@ var customForm = {
this.newIndLabelFieldLabel = $('label[for=' + this.newIndLabel.attr('id') + ']'); this.newIndLabelFieldLabel = $('label[for=' + this.newIndLabel.attr('id') + ']');
this.newIndBaseLabelText = this.newIndLabelFieldLabel.html(); this.newIndBaseLabelText = this.newIndLabelFieldLabel.html();
this.dateHeader = $('#dateHeader');
this.baseDateHeaderText = this.dateHeader.html();
this.or = $('span.or'); this.or = $('span.or');
this.cancel = this.form.find('.cancel'); this.cancel = this.form.find('.cancel');
@ -66,7 +69,7 @@ var customForm = {
if (!this.typeSelector.length || this.editMode == 'edit') { if (!this.typeSelector.length || this.editMode == 'edit') {
this.formSteps = 1; this.formSteps = 1;
// there's also going to be a 3-step form - look for this.subTypeSelector // there may also be a 3-step form - look for this.subTypeSelector
} else { } else {
this.formSteps = 2; this.formSteps = 2;
} }
@ -90,8 +93,7 @@ var customForm = {
// on a refresh), go directly to full view. Otherwise user has to reselect // on a refresh), go directly to full view. Otherwise user has to reselect
// twice to get to full view. // twice to get to full view.
else if (typeVal.length) { else if (typeVal.length) {
this.acType = typeVal; this.setType();
this.setLabelFieldLabels();
this.initFormFullView(); this.initFormFullView();
} }
else { else {
@ -119,7 +121,8 @@ var customForm = {
this.or.show(); this.or.show();
this.requiredLegend.show(); this.requiredLegend.show();
this.button.show(); this.button.show();
this.toggleButtonText('new'); this.setButtonText('new');
this.setLabels();
this.cancel.unbind('click'); this.cancel.unbind('click');
if( this.formSteps > 1 ){ if( this.formSteps > 1 ){
@ -136,7 +139,8 @@ var customForm = {
this.typeSelector.attr('disabled', 'disabled'); this.typeSelector.attr('disabled', 'disabled');
this.relatedIndLabel.attr('disabled', 'disabled'); this.relatedIndLabel.attr('disabled', 'disabled');
this.setLabelFieldLabels(); this.setType();
this.setLabels();
this.form.submit(function() { this.form.submit(function() {
// Re-enable these fields so they get submitted, since they are required // Re-enable these fields so they get submitted, since they are required
@ -155,18 +159,15 @@ var customForm = {
// If an autocomplete selection has been made, undo it // If an autocomplete selection has been made, undo it
customForm.undoAutocompleteSelection(); customForm.undoAutocompleteSelection();
// Set the type of individual that the autocomplete will search for. // Set the type of individual that the autocomplete will search for,
// and the type name for labels and button text.
// We do this even if typeVal is empty, to clear out a previous value. // We do this even if typeVal is empty, to clear out a previous value.
customForm.acType = typeVal; customForm.setType();
if (typeVal.length) {
customForm.setLabelFieldLabels();
customForm.initFormFullView();
} else {
// If no selection, go back to type view. This prevents problems like trying to run autocomplete // If no selection, go back to type view. This prevents problems like trying to run autocomplete
// or submitting form without a type selection. // or submitting form without a type selection.
customForm.initFormTypeView(); typeVal.length ? customForm.initFormFullView() : customForm.initFormTypeView();
}
}); });
this.verifyMatch.click(function() { this.verifyMatch.click(function() {
@ -293,9 +294,9 @@ var customForm = {
this.acSelectorWrapper.hide(); this.acSelectorWrapper.hide();
this.acSelector.attr('disabled', 'disabled'); this.acSelector.attr('disabled', 'disabled');
// If only one form step, type is pre-selected, and this label is coded in the html. // If only one form step, type is pre-selected, and the label is coded in the html.
if (this.formSteps > 1) { if (this.formSteps > 1) {
this.acSelection.find('label').html('Selected ' + this.getSelectedTypeName() + ':'); this.acSelection.find('label').html('Selected ' + this.typeName + ':');
} }
this.acSelection.show(); this.acSelection.show();
@ -304,7 +305,7 @@ var customForm = {
this.acSelectionInfo.html(ui.item.label); this.acSelectionInfo.html(ui.item.label);
this.verifyMatch.attr('href', this.verifyMatchBaseHref + uri); this.verifyMatch.attr('href', this.verifyMatchBaseHref + uri);
this.toggleButtonText('existing'); this.setButtonText('existing');
this.cancel.unbind('click'); this.cancel.unbind('click');
this.cancel.click(function() { this.cancel.click(function() {
@ -325,7 +326,6 @@ var customForm = {
this.acReceiver.val(''); this.acReceiver.val('');
this.acSelectionInfo.html(''); this.acSelectionInfo.html('');
this.verifyMatch.attr('href', this.verifyMatchBaseHref); this.verifyMatch.attr('href', this.verifyMatchBaseHref);
this.toggleButtonText('new');
if (this.formSteps > 1) { if (this.formSteps > 1) {
this.acSelection.find('label').html('Selected '); this.acSelection.find('label').html('Selected ');
@ -333,33 +333,62 @@ var customForm = {
}, },
getSelectedTypeName: function() { // Set type uri for autocomplete, and type name for labels and button text.
return this.typeSelector.find(':selected').html(); // Note: we still need this in edit mode, to set the text values.
setType: function() {
var selectedType;
// If there's no type selector, these values have been specified in customFormData.
if (!this.typeSelector.length) {
return;
}
selectedType = this.typeSelector.find(':selected');
if (selectedType.length) {
this.acType = selectedType.val();
this.typeName = selectedType.html();
}
// reset to empty values; may not need
else {
this.acType = '';
this.typeName = '';
}
}, },
setLabelFieldLabels: function() { // Set field labels based on type selection. Although these won't change in edit
var newLabelTextForNewInd, // mode, it's easier to specify the text here than in the jsp.
selectedTypeName = this.getTypeName(); setLabels: function() {
var newLabelTextForNewInd;
this.labelFieldLabel.html(selectedTypeName + ' ' + this.baseLabelText); this.labelFieldLabel.html(this.typeName + ' ' + this.baseLabelText);
if (this.dateHeader.length) {
this.dateHeader.html(this.baseDateHeaderText + this.typeName);
}
if (this.newIndLabel.length) { if (this.newIndLabel.length) {
newLabelTextForNewInd = this.newIndBaseLabelText.replace(this.placeHolderText, selectedTypeName); newLabelTextForNewInd = this.newIndBaseLabelText.replace(this.placeHolderText, this.typeName);
this.newIndLabelFieldLabel.html(newLabelTextForNewInd); this.newIndLabelFieldLabel.html(newLabelTextForNewInd);
} }
}, },
toggleButtonText: function(newOrExisting) { // Set button text based on both type selection and whether it's an autocomplete selection
// or a new related individual. Called when setting up full view of form, and after
// an autocomplete selection.
setButtonText: function(newOrExisting) {
// Edit mode button doesn't change, so it's specified in the jsp
if (this.editMode === 'edit') { if (this.editMode === 'edit') {
this.button.val('Edit ' + this.baseButtonText); return;
} }
// creating new related individual // creating new related individual
else if (newOrExisting === 'new') { if (newOrExisting === 'new') {
if (this.submitButtonType == 'compound') { // use == to tolerate nulls if (this.submitButtonTextType == 'compound') { // use == to tolerate nulls
// e.g., 'Create Grant & Principal Investigator' // e.g., 'Create Grant & Principal Investigator'
this.button.val('Create ' + this.getTypeName() + ' & ' + this.baseButtonText); this.button.val('Create ' + this.typeName + ' & ' + this.baseButtonText);
} else { } else {
// e.g., 'Create Publication' // e.g., 'Create Publication'
this.button.val('Create ' + this.baseButtonText); this.button.val('Create ' + this.baseButtonText);
@ -371,12 +400,6 @@ var customForm = {
} }
}, },
getTypeName: function() {
// If there's no type field, the type comes hard-coded in the customFormData.
// Otherwise, get the selected type from the type selector field.
return this.typeName ? this.typeName : this.getSelectedTypeName();
}
}; };
$(document).ready(function() { $(document).ready(function() {