NIHVIVO-193 Added Javascript functionality to custom form for person has position

productMods/edit/forms/css/customForm.css

@@ -23,7 +23,6 @@
 #content form #existing {
     float: left;
     clear: none;
-/*  width: 300px;*/
     display: inline-block;
 }
 
@@ -32,13 +31,24 @@
     border: 1px solid #9c9c9c;
 }
 
+/* #content form p.inline span,*/
 #content form p.inline input {
-    margin-right: 50em;
-    margin-top: -1.75em;
     float: right;
     clear: right;
 }
 
+#content form p.inline.year input {
+    margin-right: 46em;
+    margin-top: -1.75em;
+}
+
+/*
+#content form p.inline.year span.hint {
+    margin-right: 38.5em;
+    margin-top: -2.4em;
+}
+*/
+
 input,
 select, 
 #content form p {
@@ -46,10 +56,24 @@ select,
 }
 
 /* This div starts off hidden in case Javascript is disabled. Javascript will show it. */
-.addNewLink {
+#addNewLink {
     display: none;
 }
 
 option {
     padding: 0 2px;
 }
+
+#content form .hint {
+    color: #9c9c9c;
+    font-weight: normal;
+}
+
+#content form .requiredHint {
+    color: #ff7700;
+    font-weight: normal;
+}
+
+#content form #requiredLegend {
+    font-style: italic;
+}

productMods/edit/forms/js/customForm.js

@@ -2,39 +2,129 @@
 
 var customForm = {
 
+    requiredHintText: ' <span class="requiredHint"> *</span>',  
+
     onLoad: function() {
 
-        var button = $('#submit');
+        // Create references to form elements.
-        var addNewLink = $('#addNewLink');
+        // NB must be done after document has loaded, else the elements aren't present 
-        var existing = $('#existing');
+        // in the DOM yet.
-        var addNew = $('#new');
+        this.form = $('#content form'),
-        var entry = $('#entry');
+        this.button = $('#submit'),
-        var editType = $("input[name='editType']").val();
+        this.addNewLink = $('#addNewLink'),
-        var entryType = $("input[name='entryType']").val();
+        this.existing = $('#existing'),
+        this.addNew = $('#new'),
+        this.entry = $('#entry'),
+        this.cancel = this.form.children('.cancel'),
+        this.requiredLegend = $('#requiredLegend'), 
+        this.requiredHints = $('.requiredHint'),
         
-        if (editType == 'add') {
+        // Read values used to control display
-            // Set up form for step 1
+        this.editType = $("input[name='editType']").val(),
-            addNewLink.show();
+        this.entryType = $("input[name='entryType']").val().capitalize(),
-            addNew.hide();
+        this.newType = $("input[name='newType']").val().capitalize();
-            entry.hide();             
-            button.val('Continue');
         
-            // Add event listeners
+        if (this.editType == 'add') { //adding a new entry
-            button.bind('click', function() {
+            this.initAddForm();
-                entry.show();
-                addNewLink.hide();
-                $(this).val('Create ' + entryType);
-                $(this).unbind('click');
-                return false;   
        
-            });
         } else { // editing existing entry
-            
+            this.initEditForm();
         }                      
+    },
     
+    // Restore the form to its initial state when returning to step 1
+    resetAddForm: function() {
 
+        // Clear all form data and error messages
+        $('input:text').val('');
+        $('.error').text('');
+        // Remove previously bound event handlers
+        //this.cancel.unbind('click');
+        this.button.unbind('click');    
+        
+        initAddForm();
+    },
+
+    // Set up add form on page load, or when returning to initial state
+    // (The latter is not yet implemented, but we are preparing for it. Note
+    // that initializations to occur ONLY on page load are done in the onLoad() method.)    
+    // RY *** SOME of this will be shared with the edit form - figure out which
+    initAddForm: function() {
+
+        // Step 1 of the form
+        this.addNewLink.show();
+        this.existing.show();
+        this.addNew.hide();
+        this.entry.hide();          
+        this.requiredLegend.hide();
+        this.button.val('Continue');  
+        
+        // Assign event listeners           
+        // add new link => step 2b
+        this.addNewLink.bind('click', function() {
+            $(this).hide();
+            customForm.existing.hide();
+            customForm.showFields(customForm.addNew);
+            customForm.entry.show();
+            customForm.requiredLegend.show();
+            customForm.button.val('Create ' + customForm.entryType + ' & ' + customForm.newType);
+            customForm.button.unbind('click');
+            
+            // RY This would return us to step 1, but it's not working
+            //customForm.cancel.unbind('click');
+            //customForm.cancel.bind('click', customForm.resetAddForm);
+        });
+            
+        // button => step 2a
+        this.button.bind('click', function() {
+            customForm.entry.show();  
+            customForm.showFields(customForm.existing);          
+            customForm.addNewLink.hide();
+            customForm.requiredLegend.show();
+            $(this).val('Create ' + customForm.entryType);
+            $(this).unbind('click');
+            
+            // RY This would return us to step 1, but it's not working
+            //customForm.cancel.bind('click', customForm.resetAddForm);  
+            
+            return false;              
+        });
+    },
+    
+    initEditForm: function() {
+    
+    },
+     
+    // Add required hints to required fields.
+    // Use when the non-Javascript version should not show the required hint,
+    // because the field is not required in that version.
+    addRequiredHints: function(el) {
+
+        var labelText;
+
+        el.children('label.required').each(function() {
+            labelText = $(this).html();
+            $(this).html(labelText + customForm.requiredHintText);
+        });
+
+    },
+    
+    // We will need to remove some of the required hints when we return to step 1.
+    // Not used for now.
+    removeRequiredHints: function(el) {
+        var labelText;
+
+        el.children('label.required').each(function() {
+            labelText = $(this).html();
+            $(this).html(labelText.replace(customForm.requiredHintText, ''));
+        });    
+    },
+    
+    showFields: function(el) {
+        el.show();
+        this.addRequiredHints(el);
+    },    
 
-    }
 };
 
 $(document).ready(function(){   

productMods/edit/forms/personHasPositionHistory.jsp

@@ -125,9 +125,6 @@
 </v:jsonset>
 
 <v:jsonset var="n3ForNewOrg">
-    @prefix rdf: <${rdf}> .
-    @prefix rdfs: <${rdfs}> .
-    
     ?newOrg <${label}> ?newOrgName .
     ?newOrg <${type}> ?newOrgType .
     ?positionUri <${positionInOrgPred}> ?newOrg .
@@ -150,7 +147,7 @@
     "n3required"    : [ "${n3ForStmtToPerson}", "${titleAssertion}", "${startYearAssertion}" ],
     
     "n3optional"    : [ "${organizationUriAssertion}",                         
-                        "${n3ForNewOrg}", "${newOrgNameAsertion}", "${newOrgTypeAssertion}",                       
+                        "${n3ForNewOrg}", "${newOrgNameAssertion}", "${newOrgTypeAssertion}",                       
                         "${endYearAssertion}"],
                         
     "newResources"  : { "positionUri" : "${defaultNamespace}",
@@ -221,10 +218,10 @@
      "newOrgType" : {
          "newResource"      : "false",
          "validators"       : [  ],
-         "optionsType"      : "INDIVIDUALS_VIA_VCLASS",
+         "optionsType"      : "CHILD_VCLASSES",
          "literalOptions"   : [ "Select one" ],
          "predicateUri"     : "",
-         "objectClassUri"   : "${organizationClass}",
+         "objectClassUri"   : "${orgClassUriJson}",
          "rangeDatatypeUri" : "",
          "rangeLang"        : "",
          "assertions"       : [ "${newOrgTypeAssertion}" ]
@@ -280,13 +277,15 @@
 %>
         <c:set var="editType" value="edit" />
         <c:set var="title" value="Edit position entry for ${subjectName}" />
+        <%-- NB This will be the button text when Javascript is disabled. --%>
         <c:set var="submitLabel" value="Save changes" />
 <% 
     } else { // adding new entry
 %>
         <c:set var="editType" value="add" />
         <c:set var="title" value="Create a new position entry for ${subjectName}" />
-        <c:set var="submitLabel" value="position" />
+        <%-- NB This will be the button text when Javascript is disabled. --%>
+        <c:set var="submitLabel" value="Create position" />
 <%  } 
     
     List<String> customJs = new ArrayList<String>(Arrays.asList("forms/js/customForm.js"
@@ -294,12 +293,15 @@
                                                                 ));
     request.setAttribute("customJs", customJs);
     
-    List<String> customCss = new ArrayList<String>(Arrays.asList("forms/css/customForm.css" 
+    List<String> customCss = new ArrayList<String>(Arrays.asList("forms/css/customForm.css", 
-                                                                 //, "forms/css/personHasPositionHistory.css"
+                                                                 "forms/css/personHasPositionHistory.css"
                                                                  ));
     request.setAttribute("customCss", customCss);   
 %>
 
+<c:set var="yearHint" value="<span class='hint'>&nbsp;(YYYY)</span>" />
+<c:set var="requiredHint" value="<span class='requiredHint'> *</span>" />
+
 <jsp:include page="${preForm}" />
 
 <h2>${title}</h2>
@@ -314,28 +316,31 @@
     </c:if>
     
     <div id="existing">
-        <v:input type="select" label="Organization" id="organizationUri"  />  
+        <v:input type="select" label="Organization" labelClass="required" id="organizationUri"  />  
     </div>
     
     <div id="new">
-        <h6>Add a New Organization</h6>
+        <h5>Add a New Organization</h5>
-        <v:input type="text" label="Organization Name" id="newOrgName" />
+        <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" />
-        <v:input type="select" label="Select Organization Type" id="newOrgType" />
+        <v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
     </div>
     
     <div id="entry"> 
-        <v:input type="text" label="Position Title" id="title" size="30" />
+        <v:input type="text" label="Position Title ${requiredHint}" id="title" size="30" />
-        <v:input type="select" label="Position Type" id="positionType" />
+        <v:input type="select" label="Position Type ${requiredHint}" id="positionType" />
 
-        <p class="inline"><v:input type="text" label="Start Year" id="startYear" size="4" /></p>    
+        <p class="inline year"><v:input type="text" label="Start Year ${requiredHint} ${yearHint}" id="startYear" size="4" /></p>    
-        <p class="inline"><v:input type="text" label="End Year" id="endYear" size="4" /></p>
+        <p class="inline year"><v:input type="text" label="End Year ${yearHint}" id="endYear" size="4" /></p>
     </div>
     
     <!-- For Javascript -->
     <input type="hidden" name="editType" value="add" />
     <input type="hidden" name="entryType" value="position" /> 
+    <input type="hidden" name="newType" value="organization" />
     
     <p class="submit"><v:input type="submit" id="submit" value="${submitLabel}" cancel="${param.subjectUri}"/></p>
+    
+    <p id="requiredLegend" class="requiredHint">* required fields</p>
 </form>
 
 <jsp:include page="${postForm}"/>