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:set var="formHeading" value="Edit ${formHeading}" />
<c:set var="editMode" value="edit" />
<c:set var="submitButtonLabel" value="Edit ${submitButtonLabel}" />
</c:when>
<c:otherwise>
<c:set var="formHeading" value="Create a new ${formHeading}" />
@ -302,7 +303,7 @@ var customFormData = {
acUrl: '${acUrl}',
acType: '${vivoCore}Grant',
editMode: '${editMode}',
submitButtonType: 'compound',
submitButtonTextType: 'compound',
typeName: 'Grant'
};
</script>

View file

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

View file

@ -310,10 +310,12 @@
<c:when test="<%= request.getAttribute("objectUri")!=null %>">
<c:set var="titleText" value="Edit" />
<c:set var="editMode" value="edit" />
<c:set var="submitButtonText" value="Edit ${roleActivityTitleCase}" />
</c:when>
<c:otherwise>
<c:set var="titleText" value="Create a new" />
<c:set var="editMode" value="add" />
<c:set var="submitButtonText" value="${roleActivityTitleCase}" />
</c:otherwise>
</c:choose>
@ -338,12 +340,12 @@
<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="End Year ${yearHint}" id="endYear" size="7"/>
</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>
</form>
@ -361,7 +363,7 @@ var customFormData = {
sparqlQueryUrl: '${sparqlQueryUrl}',
acUrl: '${acUrl}',
editMode: '${editMode}',
submitButtonType: 'compound'
submitButtonTextType: 'compound'
};
</script>
<jsp:include page="${postForm}"/>

View file

@ -50,6 +50,9 @@ var customForm = {
this.newIndLabelFieldLabel = $('label[for=' + this.newIndLabel.attr('id') + ']');
this.newIndBaseLabelText = this.newIndLabelFieldLabel.html();
this.dateHeader = $('#dateHeader');
this.baseDateHeaderText = this.dateHeader.html();
this.or = $('span.or');
this.cancel = this.form.find('.cancel');
@ -66,7 +69,7 @@ var customForm = {
if (!this.typeSelector.length || this.editMode == 'edit') {
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 {
this.formSteps = 2;
}
@ -90,8 +93,7 @@ var customForm = {
// on a refresh), go directly to full view. Otherwise user has to reselect
// twice to get to full view.
else if (typeVal.length) {
this.acType = typeVal;
this.setLabelFieldLabels();
this.setType();
this.initFormFullView();
}
else {
@ -119,7 +121,8 @@ var customForm = {
this.or.show();
this.requiredLegend.show();
this.button.show();
this.toggleButtonText('new');
this.setButtonText('new');
this.setLabels();
this.cancel.unbind('click');
if( this.formSteps > 1 ){
@ -136,7 +139,8 @@ var customForm = {
this.typeSelector.attr('disabled', 'disabled');
this.relatedIndLabel.attr('disabled', 'disabled');
this.setLabelFieldLabels();
this.setType();
this.setLabels();
this.form.submit(function() {
// 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
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.
customForm.acType = typeVal;
customForm.setType();
// If no selection, go back to type view. This prevents problems like trying to run autocomplete
// or submitting form without a type selection.
typeVal.length ? customForm.initFormFullView() : customForm.initFormTypeView();
if (typeVal.length) {
customForm.setLabelFieldLabels();
customForm.initFormFullView();
} else {
// If no selection, go back to type view. This prevents problems like trying to run autocomplete
// or submitting form without a type selection.
customForm.initFormTypeView();
}
});
this.verifyMatch.click(function() {
@ -293,9 +294,9 @@ var customForm = {
this.acSelectorWrapper.hide();
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) {
this.acSelection.find('label').html('Selected ' + this.getSelectedTypeName() + ':');
this.acSelection.find('label').html('Selected ' + this.typeName + ':');
}
this.acSelection.show();
@ -304,7 +305,7 @@ var customForm = {
this.acSelectionInfo.html(ui.item.label);
this.verifyMatch.attr('href', this.verifyMatchBaseHref + uri);
this.toggleButtonText('existing');
this.setButtonText('existing');
this.cancel.unbind('click');
this.cancel.click(function() {
@ -325,7 +326,6 @@ var customForm = {
this.acReceiver.val('');
this.acSelectionInfo.html('');
this.verifyMatch.attr('href', this.verifyMatchBaseHref);
this.toggleButtonText('new');
if (this.formSteps > 1) {
this.acSelection.find('label').html('Selected ');
@ -333,33 +333,62 @@ var customForm = {
},
getSelectedTypeName: function() {
return this.typeSelector.find(':selected').html();
// Set type uri for autocomplete, and type name for labels and button text.
// 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() {
var newLabelTextForNewInd,
selectedTypeName = this.getTypeName();
// Set field labels based on type selection. Although these won't change in edit
// mode, it's easier to specify the text here than in the jsp.
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) {
newLabelTextForNewInd = this.newIndBaseLabelText.replace(this.placeHolderText, selectedTypeName);
newLabelTextForNewInd = this.newIndBaseLabelText.replace(this.placeHolderText, this.typeName);
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') {
this.button.val('Edit ' + this.baseButtonText);
return;
}
// creating new related individual
else if (newOrExisting === 'new') {
if (this.submitButtonType == 'compound') { // use == to tolerate nulls
if (newOrExisting === 'new') {
if (this.submitButtonTextType == 'compound') { // use == to tolerate nulls
// e.g., 'Create Grant & Principal Investigator'
this.button.val('Create ' + this.getTypeName() + ' & ' + this.baseButtonText);
this.button.val('Create ' + this.typeName + ' & ' + this.baseButtonText);
} else {
// e.g., 'Create Publication'
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() {