appy.gen: bugfixes in the List field.

gen/ui/appy.css

@@ -12,18 +12,18 @@ acronym {cursor: help;}
 input[type=image] { border: 0; background: none; }
 input[type=checkbox] { border: 0; background: none; cursor: pointer;}
 input[type=radio] { border: 0; background: none; cursor: pointer;}
-input[type=file] { border: 0px solid #cccccc;
+input[type=file] { border: 0px solid #D7DEE4;
                    background-color: #f8f8f8; cursor: pointer;}
-input[type=button] { border: 1px solid #cccccc;
+input[type=button] { border: 1px solid #D7DEE4;
                      background-color: #f8f8f8; cursor: pointer;}
-input[type=submit] { border: 1px solid #cccccc; background-color: #f8f8f8;
+input[type=submit] { border: 1px solid #D7DEE4; background-color: #f8f8f8;
                      cursor: pointer; }
-input[type=password] { border: 1px solid #cccccc; background-color: #f8f8f8;
+input[type=password] { border: 1px solid #D7DEE4; background-color: #f8f8f8;
                        font-family: Helvetica,Arial,sans-serif;}
-input[type=text] { border: 1px solid #cccccc; background-color: #f8f8f8;
+input[type=text] { border: 1px solid #D7DEE4; background-color: #f8f8f8;
                    font-family: Helvetica,Arial,sans-serif;
                    margin-bottom: 1px}
-select { border: 1px solid #cccccc; background-color: #f8f8f8;}
+select { border: 1px solid #D7DEE4; background-color: #f8f8f8;}
 
 textarea { width: 99%; font: 100% Helvetica,Arial,sans-serif;
            border: 1px solid #a79e9e; background-color: #f8f8f8;}
@@ -82,7 +82,7 @@ img {border: 0}
 .section2 { font-size: 110%; font-style: italic; margin: 0.45em 0em 0.2em 0;
             border-bottom: 2px solid grey; }
 .section3 { font-size: 100%; font-style: italic; margin: 0.45em 0em 0.1em 0;
-            background-color: #efeae8; text-align: center; color: grey; }
+            background-color: #F4F5F6; text-align: center; color: grey; }
 .odd { background-color: white; }
 .even { background-color: #F4F5F6; }
 .summary {margin-bottom: 5px;}

gen/ui/appy.js

@@ -502,26 +502,58 @@ function updateRowNumber(row, rowIndex, action) {
      with new p_rowIndex. If p_action is 'set', p_rowIndex becomes the new
      index. If p_action is 'add', new index becomes:
      existing index + p_rowIndex. */
-  tagTypes = ['input', 'select'];
-  currentIndex = -1;
+  var tagTypes = ['input', 'select', 'img'];
+  var currentIndex = -1;
   for (var i=0; i < tagTypes.length; i++) {
-    widgets = row.getElementsByTagName(tagTypes[i]);
+    var widgets = row.getElementsByTagName(tagTypes[i]);
     for (var j=0; j < widgets.length; j++) {
-      id = widgets[j].id;
-      name = widgets[j].name;
+      var id = widgets[j].id;
+      if (!id) continue;
+      var name = widgets[j].name;
+      // Extract the suffix if there is one (ie, if the field is a Date part:
+      // _img, _day,...).
+      var iSuffix = id.lastIndexOf('_');
+      var idSuffix = '';
+      if (iSuffix != -1) {
+        idSuffix = id.substring(iSuffix);
+        id = id.substring(0, iSuffix);
+      }
+      var nSuffix = name.lastIndexOf('_');
+      var nameSuffix = '';
+      if (nSuffix != -1) {
+        nameSuffix = id.substring(nSuffix);
+        name = name.substring(0, nSuffix);
+      }
+      // Compute the current row index if not already done.
       idNbIndex = id.lastIndexOf('*') + 1;
       nameNbIndex = name.lastIndexOf('*') + 1;
-      // Compute the current row index if not already done.
       if (currentIndex == -1) {
         currentIndex = parseInt(id.substring(idNbIndex));
       }
       // Compute the new values for attributes "id" and "name".
       newId = id.substring(0, idNbIndex);
-      newName = id.substring(0, nameNbIndex);
+      newName = name.substring(0, nameNbIndex);
       newIndex = rowIndex;
       if (action == 'add') newIndex = newIndex + currentIndex;
-      widgets[j].id = newId + String(newIndex);
-      widgets[j].name = newName + String(newIndex);
+      var oldId = widgets[j].id;
+      widgets[j].id = newId + String(newIndex) + idSuffix;
+      if (name) widgets[j].name = newName + String(newIndex) + nameSuffix;
+      /* In the case of an img that must show a calendar, update the script that
+         is triggered when clicking on it. */
+      if ((tagTypes[i] == 'img') && (idSuffix == '_img')) {
+        var scripts = row.getElementsByTagName('script');
+        for (var k=0; k < scripts.length; k++) {
+          var text = scripts[k].text;
+          if (text.indexOf(oldId) != -1) {
+            var oldIdField = oldId.substring(0, oldId.length-4);
+            var newIdField = widgets[j].id.substring(0, widgets[j].id.length-4);
+            text = text.replace(oldIdField, newIdField);
+            scripts[k].text = text.replace(oldId, widgets[j].id);
+            eval(scripts[k].text);
+            break;
+          }
+        }
+      }
     }
   }
 }
@@ -530,9 +562,9 @@ function insertRow(tableId) {
   table = document.getElementById(tableId);
   newRow = table.rows[1].cloneNode(true);
   newRow.style.display = 'table-row';
-  // Within newRow, I must include in field names and ids the row number
-  updateRowNumber(newRow, table.rows.length-3, 'set');
+  // Within newRow, incorporate the row number within field names and ids.
   table.tBodies[0].appendChild(newRow);
+  updateRowNumber(newRow, table.rows.length-4, 'set');
 }
 
 function deleteRow(tableId, deleteImg) {

gen/ui/edit.pt

@@ -9,7 +9,7 @@
                 phaseInfo   python: contextObj.getAppyPhases(currentOnly=True, layoutType=layoutType);
                 phase       phaseInfo/name;
                 page        request/page|python:'main';
-                cssJs       python: contextObj.getCssAndJs(contextObj.getAppyTypes(layoutType, page), layoutType);
+                cssJs       python: contextObj.getCssJs(contextObj.getAppyTypes(layoutType, page), layoutType);
                 confirmMsg  request/confirmMsg | nothing;"
     tal:on-error="structure python: tool.manageError(error)">
 

gen/ui/search.pt

@@ -4,7 +4,7 @@
    tal:define="className request/className;
                refInfo request/ref|nothing;
                searchInfo python: tool.getSearchInfo(className, refInfo);
-               cssJs python: tool.getCssAndJs(searchInfo['fields'], 'edit')">
+               cssJs python: tool.getCssJs(searchInfo['fields'], 'edit')">
 
   <tal:comment replace="nothing">Include type-specific CSS and JS.</tal:comment>
   <link tal:repeat="cssFile cssJs/css" rel="stylesheet" type="text/css"

gen/ui/template.pt

@@ -14,7 +14,7 @@
 
 <head>
   <title tal:content="tool/getAppName"></title>
-  <tal:link repeat="name tool/getCssJs">
+  <tal:link repeat="name tool/getGlobalCssJs">
     <link tal:condition="python: name.endswith('.css')"
           rel="stylesheet" type="text/css" tal:attributes="href string:$appUrl/ui/$name"/>
     <script tal:condition="python: name.endswith('.js')"