Changeset 770 for branches/features/taskProcedureRework/grails-app/views/taskProcedureDetailed/_maintenanceActions.gsp

Timestamp:

Feb 2, 2011, 8:38:20 PM (14 years ago)

Author:

gav

Message:

Domain change, improved draft of creating taskProcedure dynamic form.

File:

• branches/features/taskProcedureRework/grails-app/views/taskProcedureDetailed/_maintenanceActions.gsp (modified) (1 diff)

branches/features/taskProcedureRework/grails-app/views/taskProcedureDetailed/_maintenanceActions.gsp

@@ -1 +1 @@
 <script type="text/javascript">
     var childCount = ${taskProcedureInstance?.maintenanceActions.size()} + 0;
+    var ma_wrapperId = "ma_wrapper";
+    var ma_cloneId = "maintenanceActionLazyList_clone";
+    var ma_lazyList = "maintenanceActionLazyList";
+    var ma_fields = ["toBeDeleted", "isNew", "description", "reasoning", "assetSubItem.id", "procedureStepNumber"];
+    var ma_focusField = "procedureStepNumber";
 
-    function addChild() {
-        var htmlId = "maintenanceAction" + childCount;
-        var deleteIcon = "${resource(dir:'images/skin', file:'database_delete.png')}";
-        var templateHtml = "<div id='" + htmlId + "' name='" + htmlId + "'>\n";
-        templateHtml += "<input type='text' id='maintenanceActionLazyList[" + childCount + "].description' name='maintenanceActionLazyList[" + childCount + "].description' />\n";
-        templateHtml += "<span onClick='jQuery(\"#" + htmlId + "\").remove();'><img src='" + deleteIcon + "' /></span>\n";
-        templateHtml += "</div>\n";
-        jQuery("#childList").append(templateHtml);
+
+    function addChild(wrapperId, cloneId, lazyList, fields, focusField){
+
+        var clone = jQuery("#"+cloneId).clone();
+        clone.attr('id', lazyList+childCount);
+        var htmlId = lazyList+'['+childCount+'].';
+
+        var fieldsMap = {};
+        jQuery.each(fields, function(index, field) {
+            fieldsMap[field] = clone.find('[id$="'+field+'"]');
+            fieldsMap[field].attr('id',htmlId + field)
+                                        .attr('name',htmlId + field);
+            if(field == 'isNew') {
+                fieldsMap[field].attr('value', 'true');
+            }
+        });
+
+        jQuery("#"+wrapperId).append(clone);
+        clone.show();
+        fieldsMap[focusField].focus();
         childCount++;
     }
+
+    // Click event on add button.
+    jQuery('.add-ma').live('click', function() {
+            addChild(ma_wrapperId, ma_cloneId, ma_lazyList, ma_fields, ma_focusField);
+    });
+
+    // Click event on delete buttons.
+    jQuery('.del-ma').live('click', function() {
+        //find the parent div
+        var prnt = jQuery(this).parents(".ma-div");
+        //find the deleted hidden input
+        var delInput = prnt.find("input[id$=toBeDeleted]");
+        //check if this is still not persisted
+        var newValue = prnt.find("input[id$=isNew]").attr('value');
+        //if it is new then i can safely remove from dom
+        if(newValue == 'true'){
+            prnt.remove();
+        }else{
+            //set the deletedFlag to true
+            delInput.attr('value','true');
+            //hide the div
+            prnt.hide();
+        }
+    });
+
+    jQuery(window).load(function() {
+        if(childCount == 0) {
+            addChild(ma_wrapperId, ma_cloneId, ma_lazyList, ma_fields, ma_focusField);
+        }
+    });
+
 </script>
 
-<div id="childList">
-    <g:each var="ma" in="${taskProcedureInstance.maintenanceActions}" status="i">
-        <div id="maintenanceAction${i}">
-            <g:hiddenField name='maintenanceActionLazyList[${i}].id' value='${ma.id}'/>
-            <g:textField name='maintenanceActionLazyList[${i}].description' value='${ma.description}'/>
-            <input type="hidden" name='maintenanceActionLazyList[${i}].deleted' id='maintenanceActionLazyList[${i}].deleted' value='false'/>
-            <span onClick="jQuery('#maintenanceActionLazyList\\[${i}\\]\\.deleted').val('true'); jQuery('#maintenanceAction${i}').hide()">
-                <img src="${resource(dir:'images/skin', file:'database_delete.png')}" />
-            </span>
-        </div>
-    </g:each>
-</div>
-<input type="button" value="Add MaintenanceAction" onclick="addChild();" />
+
+
+    <div>
+        <table>
+            <thead>
+                <tr>
+
+                    <th>Step</th>
+                    <th>Sub Item</th>
+                    <th>Description</th>
+                    <th>Reasoning</th>
+                    <th></th>
+
+                </tr>
+            </thead>
+            <tbody id="ma_wrapper">
+                    <g:each var="ma" in="${taskProcedureInstance.maintenanceActions}" status="i">
+                            <g:render template="maintenanceAction" model="['tp':taskProcedureInstance, 'ma': ma, 'i':i]" />
+                    </g:each>
+                    </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <br />
+
+    <div style="text-align:right;">
+        <span class="buttons add-ma">
+            <input type="button" class="add" value="Add MaintenanceAction" />
+        </span>
+    </div>