NIHVIVO-797 Javascript support for edit mode in roles forms

productMods/edit/forms/addAuthorsToInformationResource.jsp

@@ -284,6 +284,7 @@ SPARQL queries for existing values. --%>
 
 <jsp:include page="${preForm}" />
 
+<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE ON THIS PAGE WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
 <h2>${title}</h2>
 
 <h3>Manage Authors</h3>
@@ -380,6 +381,7 @@ SPARQL queries for existing values. --%>
     <v:input type="submit" value="Add Author" id="showAddFormButton" cancel="true" cancelLabel="Return to Publication" cancelUrl="/individual" />
 </div> 
 
+<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
 <form id="addAuthorForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
 
     <h3>Add an Author</h3>

productMods/edit/forms/addGrantRoleToPerson.jsp

@@ -256,6 +256,7 @@ PREFIX core: <${vivoCore}>
 
 <h2>${formHeading}</h2>
 
+<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
 <form id="addGrantRoleToPerson" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
         
     <p><v:input type="text" id="label" name="grantLabel" label="Grant Name ${requiredHint}" cssClass="acSelector" size="50" /></p>

productMods/edit/forms/addPublicationToPerson.jsp

@@ -206,6 +206,7 @@ SPARQL queries for existing values. --%>
 
 <h2>Create a new publication entry for <%= subjectName %></h2>
 
+<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
 <form id="addPublicationForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
 
     <p class="inline"><v:input type="select" label="Publication Type ${requiredHint}" name="pubType" id="typeSelector" /></p>

productMods/edit/forms/addRoleToPersonTwoStage.jsp

@@ -303,17 +303,30 @@
 <c:set var="requiredHint" value="<span class='requiredHint'> *</span>" />
 <c:set var="yearMonthHint" value="<span class='hint'>(YYYY-MM)</span>" />
 
+<c:choose>
+    <c:when test="<%= request.getAttribute("objectUri")!=null %>">
+        <c:set var="titleText" value="Edit" />
+        <c:set var="buttonText" value="Edit" />
+        <c:set var="editMode" value="edit" />
+    </c:when>
+    <c:otherwise>
+        <c:set var="titleText" value="Create a new" />
+        <c:set var="buttonText" value="Create" />
+        <c:set var="editMode" value="add" />
+    </c:otherwise>
+</c:choose>
 <jsp:include page="${preForm}" />
 
-<h2>Create a new ${roleActivityTypeLabel} entry for <%= subjectName %></h2>
+<h2>${titleText}&nbsp;${roleActivityTypeLabel} entry for <%= subjectName %></h2>
 
+<%-- DO NOT CHANGE IDS, CLASSES, OR HTML STRUCTURE IN THIS FORM WITHOUT UNDERSTANDING THE IMPACT ON THE JAVASCRIPT! --%>
 <form id="addPublicationForm" action="<c:url value="/edit/processRdfForm2.jsp"/>" >
 
     <p class="inline"><v:input type="select" label="${roleActivityTitleCase} Type ${requiredHint}" name="roleActivityType" id="typeSelector" /></p>
     
     <div class="fullViewOnly">
         
-	    <p><v:input type="text" id="activityLabel" name="activityLabel" label="Title" cssClass="acSelector" size="50" /></p>
+	    <p><v:input type="text" id="label" name="activityLabel" label="Title" cssClass="acSelector" size="50" /></p>
 
 	    <div class="acSelection">
 	        <%-- RY maybe make this a label and input field. See what looks best. --%>
@@ -321,7 +334,7 @@
 	        <input type="hidden" id="roleActivityURI" name="roleActivity" class="acReceiver" value="" /> <!-- Field value populated by JavaScript -->
 	    </div>
 
-        <p><v:input type="text" id="roleLabel" name="roleLabel" label="Role in X ${requiredHint}" size="50" /></p>
+        <p><v:input type="text" id="newIndividualLabel" name="roleLabel" label="Role Name ${requiredHint}" size="50" /></p>
         
         <h4>Dates of Participation</h4>	   
         <v:input type="text" label="Start Year ${requiredHint} ${yearHint}" id="startYear" size="7"/>   
@@ -345,7 +358,8 @@ SELECT ?indUri WHERE {<${subjectUri}> <${predicateUri}> ?role . ?role <${vivoCor
 var customFormData  = {
     sparqlForAcFilter: '${sparqlForAcFilter}',
     sparqlQueryUrl: '${sparqlQueryUrl}',
-    acUrl: '${acUrl}'
+    acUrl: '${acUrl}',
+    editMode: '${editMode}' 
 };
 </script>
 <jsp:include page="${postForm}"/>

productMods/edit/forms/js/customFormWithAdvanceTypeSelection.js

@@ -45,6 +45,10 @@ var customForm = {
         // because it may have already been modified for a previous selection.
         this.baseLabelText = this.labelFieldLabel.html();
         
+        // Label field for new individual being created
+//        this.newIndLabelFieldLabel = $('label[for=' + $('#newIndividualLabel').attr('id') + ']');
+//        this.newIndBaseLabelText = this.newIndLabelFieldLabel.html();
+        
         this.or = $('span.or');       
         this.cancel = this.form.find('.cancel');
 
@@ -53,7 +57,11 @@ var customForm = {
     // Set up the form on page load
     initPage: function() {
 
-        if (!this.typeSelector.length) {
+        if (!this.editMode) {
+            this.editMode = "add"; // edit vs add: default to add
+        }
+        
+        if (!this.typeSelector.length || this.editMode == "edit") {
             this.formSteps = 1;
         // there's also going to be a 3-step form - look for this.subTypeSelector
         } else {
@@ -80,7 +88,7 @@ var customForm = {
         // twice to get to full view.
         else if (typeVal.length) {
             this.acType = typeVal;
-            this.setLabelFieldLabel();
+            this.setLabelFieldLabels();
             this.initFormFullView();
         }
         else {
@@ -104,7 +112,7 @@ var customForm = {
         this.or.show();
         this.requiredLegend.show();
         this.button.show();
-        this.button.val('Create ' + this.baseButtonText);
+        this.toggleButtonText("new");
         this.cancel.unbind('click');     
            
         if( this.formSteps > 1 ){
@@ -131,7 +139,7 @@ var customForm = {
             customForm.acType = typeVal;
             
             if (typeVal.length) {    
-                customForm.setLabelFieldLabel();            
+                customForm.setLabelFieldLabels();         
                 customForm.initFormFullView();            
             } else {
                 // If no selection, go back to type view. This prevents problems like trying to run autocomplete
@@ -262,7 +270,7 @@ var customForm = {
         this.acSelectionInfo.html(ui.item.label);
         this.verifyMatch.attr('href', this.verifyMatchBaseHref + uri);
         
-        this.button.val('Add ' + this.baseButtonText);               
+        this.toggleButtonText('existing');            
 
         this.cancel.unbind('click');
         this.cancel.click(function() {
@@ -283,7 +291,7 @@ var customForm = {
         this.acReceiver.val('');
         this.acSelectionInfo.html('');
         this.verifyMatch.attr('href', this.verifyMatchBaseHref);
-        this.button.val('Create ' + this.baseButtonText)
+        this.toggleButtonText('new');
         
         if (this.formSteps > 1) {
             this.acSelection.find('label').html('Selected ');
@@ -295,8 +303,31 @@ var customForm = {
         return this.typeSelector.find(':selected').html();
     },
     
-    setLabelFieldLabel: function() {
+    setLabelFieldLabels: function() {
+//        var newLabelTextForNewInd;
+        
         this.labelFieldLabel.html(this.getSelectedTypeName() + ' ' + this.baseLabelText);
+        
+//        if (this.newIndLabelFieldLabel.length) {
+//            newLabelTextForNewInd = this.newIndBaseLabelText.replace('X', this.getSelectedTypeName);
+//            this.newIndLabelFieldLabel.html(newLabelTextForNewInd);
+//        }      
+          
+    },
+    
+    toggleButtonText: function(newOrExisting) {
+        if (this.editMode == "edit") {
+            this.button.val("Edit " + this.baseButtonText);
+        }
+        // RY Make this better for roles and grants forms later. The verbs
+        // don't quite work. It should be "Create X and <role>" vs.
+        // "Create <role>" or "Add <role>"
+        else if (newOrExisting == "new") {
+            this.button.val("Create " + this.baseButtonText);                
+        }
+        else {
+            this.button.val("Add " + this.baseButtonText);
+        } 
     }
     
 };