Add role type to "dates of participation" heading in roles form. Streamline javascript.
This commit is contained in:
parent
74812fb0b2
commit
d58b1abdc8
4 changed files with 75 additions and 49 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}"/>
|
|
@ -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}"/>
|
|
@ -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() {
|
||||||
|
|
Loading…
Add table
Reference in a new issue