wip: save code

src/formhandler.js

@@ -309,6 +309,8 @@ function editHandler($this, template_data, options, template) {
   // TST: Ensure spec remains same
   // Listen for fh-row-selector events and Do what is being done now
   // Listen for 
+  var row_cache = {}
+
   $('body')
     .on('change', 'input.fh-row-selector', function(e) {
       // toggle editable state
@@ -316,31 +318,17 @@ function editHandler($this, template_data, options, template) {
       var td_cells = row.children()
 
       if ($(e.target).prop('checked')) {
-        // get closest tr from target, convert from second td - 
-        // all td's with Input HTML elements as given in spec
-        // above is done with iteration
+        if ($(e.target).val() in row_cache) row_cache[$(e.target).val()] = row
         $.each(td_cells, function (index, td_cell) {
           if (index === 0) return
-          var isEditable = _.includes(options.columns, function(o) {return o.colinfo == td_cell.col_name}).isEditable
-          var val = td_cell.val()
-          // isEditable = colinfo.editable === undefined ? true : colinfo.editable,
-          // <% } else if (isEdit && isEditable) { %>
-          //   <td data-key="<%- colinfo.name %>">
-          //     <%= _.template(templates['template_editable'])({isEditable: isEditable, val: val}) %>
-          //   </td>
-          $(td_cell).html(_.template(default_templates['template_editable'])({isEditable: isEditable, val: val}))
+          var col_options = _.find(options.columns, function(o) {return o.name == $(td_cell).data('key')})
+          var isEditable = col_options ? col_options.editable: false
+          $(td_cell).html(_.template(default_templates['template_editable'])({isEditable: isEditable, val: $(td_cell).data('value')}))
         })
-
       } else {
         // take dictionary from tr element, 
         // data-attribute and rebuild td with divs containing the value from dictionary
-        td_cells
-        // inject below html
-        var temp = `<td>
-                <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
-                  <%= disp %>
-                </a>
-              </td>`
+        
       }
     })
     .on('click', 'button.edit-btn', function () {

src/formhandler.template.html

@@ -96,7 +96,7 @@ Each template receives these variables:
               <div class="dropdown-divider"></div>
             <% menu_item = false } %>
             <% _.each(colinfo.filters, function(title, op) { menu_item = true %>
-              <a class="dropdown-item <%= colinfo.name + op in args ? 'active' : '' %>" href="#" data-op="<%- op %>" data-toggle="modal" data-target="#fh-modal-<%- form_id %>">
+              <a class="dropdown-item <%- colinfo.name + op in args ? 'active' : '' %>" href="#" data-op="<%- op %>" data-toggle="modal" data-target="#fh-modal-<%- form_id %>">
                 <%- title %>
               </a>
             <% }) %>
@@ -138,7 +138,7 @@ Each template receives these variables:
         <% if (isEdit) { %>
           <td>
             <%= _.template(templates['template_checkbox'])({
-              label: '', value: '', name: '', labelClass: 'm-0',
+              label: '', value: rowIndex, name: '', labelClass: 'm-0',
               id: '', checked: false, inputClass: 'fh-row-selector d-none'
             }) %>
           </td>
@@ -160,17 +160,15 @@ Each template receives these variables:
           <% if (colinfo.template) { %>
             <%= typeof colinfo.template == 'function' ? colinfo.template({name: colinfo.name, value: val, format: disp, link: col_link, index: rowIndex, row: row, data: data}) : _.template(colinfo.template)(({name: colinfo.name, value: val, format: disp, link: col_link, index: rowIndex, row: row, data: data})) %>
           <% } else if (col_link) { %>
-
-              <td>
+            <td data-key="<%- colinfo.name %>" data-value="<%- val %>">
               <a href="<%- col_link %>" target="_blank">
-                  <%= disp %>
+                <%- disp %>
               </a>
             </td>
-
           <% } else { %>
-              <td>
-                <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
-                  <%= disp %>
+            <td data-key="<%- colinfo.name %>" data-value="<%- val %>">
+              <a class="urlfilter" data-val="<%-  %>" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
+                <%- disp %>
               </a>
             </td>
           <% } %>
@@ -183,9 +181,9 @@ Each template receives these variables:
 <!-- end -->
 
 <!-- var template_checkbox -->
-<label for="<%- id %>" data-label="<%= label %>" class="<%- labelClass %>">
+<label for="<%- id %>" data-label="<%- label %>" class="<%- labelClass %>">
   <input type="checkbox" name="<%- name %>" id="<%- id %>" class="<%- inputClass %>" value="<%- value %>" <%- checked ? "checked": "" %>>
-  <%= label %>
+  <%- label %>
 </label>
 <!-- end -->
 
@@ -194,7 +192,7 @@ Each template receives these variables:
 
   <select
       <% for (key in isEditable.attrs) { %>
-        <%= key + '="' + isEditable.attrs[key] + '"' %>
+        <%- key + '="' + isEditable.attrs[key] + '"' %>
       <% } %>
       class="form-control form-control-sm"
     >
@@ -212,7 +210,7 @@ Each template receives these variables:
   <% _.each(isEditable.options, function(item) { %>
     <input type="radio" <%- val && val === item ? 'checked': null %> value="<%- item %>"
       <% for (key in isEditable.attrs) { %>
-        <%= key + '="' + isEditable.attrs[key] + '"' %>
+        <%- key + '="' + isEditable.attrs[key] + '"' %>
       <% } %>
       class="form-control form-control-sm"
     />
@@ -222,7 +220,7 @@ Each template receives these variables:
 <% } else { %>
   <input type="<%- isEditable.input || 'text' %>" value="<%- val %>"
     <% for (key in isEditable.attrs) { %>
-      <%= key + '="' + isEditable.attrs[key] + '"' %>
+      <%- key + '="' + isEditable.attrs[key] + '"' %>
     <% } %>
     class="form-control form-control-sm"
   />
@@ -387,13 +385,13 @@ Each template receives these variables:
 } else { %>
   <div class="formhandler-grid row">
     <% _.each(data, function(row, rowIndex) { %>
-      <div class="col-sm-3 <%= options.classes || 'formhandler-grid-cell d-inline-block p-3 box-shadow' %>">
+      <div class="col-sm-3 <%- options.classes || 'formhandler-grid-cell d-inline-block p-3 box-shadow' %>">
         <div class="thumbnail">
           <% img = options.icon ? ((typeof(options.icon) == 'function' ? options.icon({row: row, data: data, index: rowIndex}) : options.icon)) : 'fa fa-home' %>
           <% if (img.indexOf('fa ') >= 0) { %>
-            <i class="<%= img %>"></i>
+            <i class="<%- img %>"></i>
           <% } else { %>
-            <img class="img img-responsive" src="<%= img %>"/>
+            <img class="img img-responsive" src="<%- img %>"/>
           <% } %>
           <div class="caption">
             <% _.each(cols, function(colinfo) {
@@ -404,13 +402,13 @@ Each template receives these variables:
                           fmt === "string" && colinfo.type === "date" ? moment(val).format(colinfo.format) :
                           val) %>
               <div>
-                <strong><%= colinfo.name %></strong>:
+                <strong><%- colinfo.name %></strong>:
                 <% if ('link' in colinfo) {
                     var col_link = typeof colinfo.link == 'function' ? colinfo.link({row: row, value: val, index: rowIndex, name: colinfo.name, data: data, format: disp}) : _.template(colinfo.link)({row: row, value: val, index: rowIndex, name: colinfo.name, data: data, format: disp}) %>
-                    <a href="<%- col_link %>" target="_blank"><%= disp %></a>
+                    <a href="<%- col_link %>" target="_blank"><%- disp %></a>
                 <% } else { %>
                   <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
-                    <%= disp %>
+                    <%- disp %>
                   </a>
                 <% } %>
               </div>