litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-1024 Implement educational training custom form as a single-step form. Merged two css files.

Browse source
This commit is contained in:
rjy7 2010-09-02 19:54:05 +00:00
parent 4cd669ab0a
commit 4587642a81
7 changed files with 84 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

1
productMods/edit/forms/addGrantRoleToPerson.jsp
View file

@ -269,7 +269,6 @@ PREFIX core: <${vivoCore}>
List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(), List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(),
Css.CUSTOM_FORM.path(), Css.CUSTOM_FORM.path(),
"/edit/forms/css/autocomplete.css",
"/edit/forms/css/customFormWithAutocomplete.css" "/edit/forms/css/customFormWithAutocomplete.css"
)); ));
request.setAttribute("customCss", customCss); request.setAttribute("customCss", customCss);

5
productMods/edit/forms/addRoleToPersonTwoStage.jsp
View file

@ -355,7 +355,6 @@ public static Log log = LogFactory.getLog("edu.cornell.mannlib.vitro.webapp.jsp.
List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(), List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(),
Css.CUSTOM_FORM.path(), Css.CUSTOM_FORM.path(),
"/edit/forms/css/autocomplete.css",
"/edit/forms/css/customFormWithAutocomplete.css" "/edit/forms/css/customFormWithAutocomplete.css"
)); ));
request.setAttribute("customCss", customCss); request.setAttribute("customCss", customCss);
@ -388,6 +387,7 @@ public static Log log = LogFactory.getLog("edu.cornell.mannlib.vitro.webapp.jsp.
<h2>${titleVerb}&nbsp;${roleActivityTypeLabel} entry for <%= subjectName %></h2> <h2>${titleVerb}&nbsp;${roleActivityTypeLabel} entry for <%= subjectName %></h2>
<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%> <%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
<form id="addRoleForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" > <form id="addRoleForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
<p class="inline"><v:input type="select" label="${roleActivityTitleCase} Type ${requiredHint}" name="roleActivityType" disabled="${disabledVal}" id="typeSelector" /></p> <p class="inline"><v:input type="select" label="${roleActivityTitleCase} Type ${requiredHint}" name="roleActivityType" disabled="${disabledVal}" id="typeSelector" /></p>
@ -435,7 +435,8 @@ public static Log log = LogFactory.getLog("edu.cornell.mannlib.vitro.webapp.jsp.
var customFormData = { var customFormData = {
acUrl: '${acUrl}', acUrl: '${acUrl}',
editMode: '${editMode}', editMode: '${editMode}',
submitButtonTextType: 'compound' submitButtonTextType: 'compound',
defaultTypeName: 'activity' // used in repair mode, to generate button text and org name field label
}; };
</script> </script>
<% } %> <% } %>

21
productMods/edit/forms/css/autocomplete.css
View file

@ -1,21 +0,0 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
.acSelection {
display: none;
}
.acSelectionInfo {
background-color: #d9d9d9;
padding: .5em 1em;
}
/* jQuery UI autocomplete */
ul.ui-autocomplete {
font-size: .95em;
}
li.ui-menu-item a.ui-corner-all {
text-align: left;
padding-left: .25em;
}

30
productMods/edit/forms/css/customFormWithAutocomplete.css
View file

@ -1,5 +1,26 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */ /* $This file is distributed under the terms of the license in /doc/license.txt$ */
.acSelection {
display: none;
margin-top: 2em;
}
.acSelectionInfo {
background-color: #d9d9d9;
padding: .5em 1em;
}
/* jQuery UI autocomplete */
ul.ui-autocomplete {
font-size: .95em;
}
li.ui-menu-item a.ui-corner-all {
text-align: left;
padding-left: .25em;
}
/* Although Javascript hides these on page load, hide here as well to avoid the flash on page load. /* Although Javascript hides these on page load, hide here as well to avoid the flash on page load.
This needs to be removed to support a non-JS version of the form. */ This needs to be removed to support a non-JS version of the form. */
.fullViewOnly, .fullViewOnly,
@ -16,11 +37,12 @@
margin-right: 1em; margin-right: 1em;
} }
.acSelection {
margin-top: 2em;
}
.verifyMatch { .verifyMatch {
margin-left: .5em; margin-left: .5em;
} }
#content form h4 {
margin-top: 1em;
margin-bottom: .75em;
}

42
productMods/edit/forms/js/customFormWithAutocomplete.js
View file

@ -86,11 +86,14 @@ var customForm = {
this.editMode = 'add'; // edit vs add: default to add this.editMode = 'add'; // edit vs add: default to add
} }
if (!this.typeSelector.length || this.editMode == 'edit' || this.editMode == 'repair') { if (!this.formSteps) { // Don't override formSteps specified in form data
this.formSteps = 1; if (!this.typeSelector.length || !this.fullViewOnly.length || this.editMode === 'edit' || this.editMode === 'repair') {
// there may also be a 3-step form - look for this.subTypeSelector this.formSteps = 1;
} else { // there may also be a 3-step form - look for this.subTypeSelector
this.formSteps = 2; }
else {
this.formSteps = 2;
}
} }
this.bindEventListeners(); this.bindEventListeners();
@ -145,13 +148,19 @@ var customForm = {
this.setButtonText('new'); this.setButtonText('new');
this.setLabels(); this.setLabels();
if( this.formSteps > 1 ){ // NB includes this.editMode == 1 if (this.formSteps > 1) { // includes this.editMode == 1
this.cancel.unbind('click'); this.cancel.unbind('click');
this.cancel.click(function() { this.cancel.click(function() {
customForm.clearFormData(); // clear any input and validation errors customForm.clearFormData(); // clear any input and validation errors
customForm.initFormTypeView(); customForm.initFormTypeView();
return false; return false;
}); });
// In one-step forms, if there is a type selection field, but no value is selected,
// hide the acSelector field. The type selection must be made first so that the
// autocomplete type can be determined. If a type selection has been made,
// unhide the acSelector field.
} else if (this.typeSelector.length) {
this.typeSelector.val() ? this.acSelectorWrapper.show() : this.acSelectorWrapper.hide();
} }
}, },
@ -189,9 +198,9 @@ var customForm = {
customForm.undoAutocompleteSelection(); customForm.undoAutocompleteSelection();
// 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. Exception: in repair editMode, stay in full view, // or submitting form without a type selection. Exception: if formSteps == 1 (e.g., a one-step form,
// else we lose the role information. // or a two-step form in repair editMode) stay in full view, else we lose the role information.
(typeVal.length || customForm.editMode == 'repair') ? customForm.initFormFullView() : customForm.initFormTypeView(); (typeVal.length || customForm.formSteps === 1) ? customForm.initFormFullView() : customForm.initFormTypeView();
}); });
@ -383,9 +392,7 @@ var customForm = {
// mode, it's easier to specify the text here than in the jsp. // mode, it's easier to specify the text here than in the jsp.
setLabels: function() { setLabels: function() {
var newLabelTextForNewInd, var newLabelTextForNewInd,
// if this.acType is empty, we are in repair mode with no activity type selected. typeText = this.getTypeNameForLabels();
// Prevent the labels from showing 'Select one' by using the generic term 'Activity'
typeText = this.acType ? this.typeName : 'Activity';
this.labelFieldLabel.html(typeText + ' ' + this.baseLabelText); this.labelFieldLabel.html(typeText + ' ' + this.baseLabelText);
@ -412,9 +419,7 @@ var customForm = {
return; return;
} }
// if this.acType is empty, we are in repair mode with no activity type selected. typeText = this.getTypeNameForLabels();
// Prevent the labels from showing 'Select one' by using the generic term 'Activity'
typeText = this.acType ? this.typeName : 'Activity';
// Creating new related individual // Creating new related individual
if (newOrExisting === 'new') { if (newOrExisting === 'new') {
@ -433,6 +438,13 @@ var customForm = {
} }
this.button.val(buttonText); this.button.val(buttonText);
},
getTypeNameForLabels: function() {
// If this.acType is empty, we are either in a one-step form with no type yet selected,
// or in repair mode in a two-step form with no type selected. Use the default type
// name specified in the form data (this.typeName is 'Select one').
return this.acType ? this.typeName : this.capitalize(this.defaultTypeName);
} }
}; };

51
productMods/edit/forms/personHasEducationalTraining.jsp
View file

@ -373,7 +373,6 @@ core:dateTimePrecision (DateTimeValue : DateTimeValuePrecision)
List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(), List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(),
Css.CUSTOM_FORM.path(), Css.CUSTOM_FORM.path(),
"/edit/forms/css/autocomplete.css",
"/edit/forms/css/customFormWithAutocomplete.css" "/edit/forms/css/customFormWithAutocomplete.css"
)); ));
request.setAttribute("customCss", customCss); request.setAttribute("customCss", customCss);
@ -388,37 +387,34 @@ core:dateTimePrecision (DateTimeValue : DateTimeValuePrecision)
<form action="<c:url value="/edit/processRdfForm2.jsp"/>" > <form action="<c:url value="/edit/processRdfForm2.jsp"/>" >
<v:input type="select" label="Degree" id="degree" />
<v:input type="text" label="Major Field of Degree ${requiredHint}" id="majorField" size="30" />
<v:input type="text" label="Year ${yearHint}" id="year" size="4" />
<p class="inline"><v:input type="select" label="Organization Type ${requiredHint}" name="orgType" disabled="${disabledVal}" id="typeSelector" /></p> <p class="inline"><v:input type="select" label="Organization Type ${requiredHint}" name="orgType" disabled="${disabledVal}" id="typeSelector" /></p>
<div class="fullViewOnly"> <p><v:input type="text" id="relatedIndLabel" name="orgLabel" label="Name ${requiredHint}" cssClass="acSelector" disabled="${disabledVal}" size="50" /></p>
<p><v:input type="text" id="relatedIndLabel" name="orgLabel" label="Name ${requiredHint}" cssClass="acSelector" disabled="${disabledVal}" size="50" /></p> <%-- Store these values in hidden fields, because the displayed fields are disabled and don't submit. This ensures that when
returning from a validation error, we retain the values. --%>
<c:if test="${editMode == 'edit'}">
<v:input type="hidden" id="orgType" />
<v:input type="hidden" id="orgLabel" />
</c:if>
<%-- Store these values in hidden fields, because the displayed fields are disabled and don't submit. This ensures that when <div class="acSelection">
returning from a validation error, we retain the values. --%> <%-- RY maybe make this a label and input field. See what looks best. --%>
<c:if test="${editMode == 'edit'}"> <p class="inline"><label></label><span class="acSelectionInfo"></span> <a href="<c:url value="/individual?uri=" />" class="verifyMatch">(Verify this match)</a></p>
<v:input type="hidden" id="orgType" /> <v:input type="hidden" id="org" cssClass="acUriReceiver" /> <!-- Field value populated by JavaScript -->
<v:input type="hidden" id="orgLabel" />
</c:if>
<div class="acSelection">
<%-- RY maybe make this a label and input field. See what looks best. --%>
<p class="inline"><label></label><span class="acSelectionInfo"></span> <a href="<c:url value="/individual?uri=" />" class="verifyMatch">(Verify this match)</a></p>
<v:input type="hidden" id="org" cssClass="acUriReceiver" /> <!-- Field value populated by JavaScript -->
</div>
<v:input type="select" label="Degree" id="degree" />
<v:input type="text" label="Major Field of Degree ${requiredHint}" id="majorField" size="30" />
<v:input type="text" label="Year ${yearHint}" id="year" size="4" />
<v:input type="text" label="Department or School Name within the Organization" id="dept" size="50" />
<v:input type="text" label="Supplemental Information" id="info" size="50" />
<p>e.g., <em>Postdoctoral training</em> or <em>Transferred</em></p>
</div> </div>
<v:input type="text" label="Department or School Name within the Organization" id="dept" size="50" />
<v:input type="text" label="Supplemental Information" id="info" size="50" />
<p>e.g., <em>Postdoctoral training</em> or <em>Transferred</em></p>
<p class="submit"><v:input type="submit" id="submit" value="${submitButtonText}" 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>
@ -430,7 +426,8 @@ core:dateTimePrecision (DateTimeValue : DateTimeValuePrecision)
var customFormData = { var customFormData = {
acUrl: '${acUrl}', acUrl: '${acUrl}',
editMode: '${editMode}', editMode: '${editMode}',
submitButtonTextType: 'compound' submitButtonTextType: 'compound',
defaultTypeName: 'organization'
}; };
</script> </script>

2
productMods/edit/forms/personHasPositionHistory.jsp
View file

@ -301,7 +301,6 @@
List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(), List<String> customCss = new ArrayList<String>(Arrays.asList(Css.JQUERY_UI.path(),
Css.CUSTOM_FORM.path(), Css.CUSTOM_FORM.path(),
"/edit/forms/css/autocomplete.css",
"/edit/forms/css/customFormWithAutocomplete.css" "/edit/forms/css/customFormWithAutocomplete.css"
)); ));
request.setAttribute("customCss", customCss); request.setAttribute("customCss", customCss);
@ -320,6 +319,7 @@
<div class="fullViewOnly"> <div class="fullViewOnly">
<%-- <p> needed to create wrapper for show/hide --%>
<p><v:input type="text" id="relatedIndLabel" name="orgLabel" label="Name ${requiredHint}" cssClass="acSelector" disabled="${disabledVal}" size="50" /></p> <p><v:input type="text" id="relatedIndLabel" name="orgLabel" label="Name ${requiredHint}" cssClass="acSelector" disabled="${disabledVal}" size="50" /></p>
<%-- Store these values in hidden fields, because the displayed fields are disabled and don't submit. This ensures that when <%-- Store these values in hidden fields, because the displayed fields are disabled and don't submit. This ensures that when