ENH: FormHandler cell click links to URL. Fixes #20. @tejesh.papineni

c2f0f7e3 · S Anand · 6cce4997 · c2f0f7e3 · c2f0f7e3 · c2f0f7e3
Commit c2f0f7e3 authored Mar 21, 2018 by S Anand
--- a/README.md
+++ b/README.md
@@ -251,9 +251,9 @@ The full list of options is below. Simple options can be specified as `data-` at
 - `src`: [FormHandler][formhandler] URL endpoint
 - `columns`: comma-separated column names to display, or a list of objects with these keys:
    - `name`: column name. `"*"` is a special column placeholder for "all columns"
-    - `title`: display name of the column. Defaults to the same value as `name`
-    - `type`: `text` (default) / `number` / `date`. Determines filters to be used
-    - `format`: string / function that changes the cell contents.
+    - `title`: for header display. Defaults to the same value as `name`
+    - `type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
+    - `format`: string / function that renders the cell contents.
      - functions are applied to the value and the return value is used
      - strings specify a numeral.js format if the value is a number (you must include numeral.js)
      - strings specify a moment.js format if the value is a date (you must include moment.js)
@@ -262,7 +262,13 @@ The full list of options is below. Simple options can be specified as `data-` at
    - `filters`: `true` (default) / `false` / operators dict with:
      - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
        The default list of operators is based on the auto-detected type of the column.
-    - `hideable`: `true` (default) / `false`
+    - `link`: string / function that generates a link for this each cell.
+      - If no `link:` is specified, clicking on the cell filters by that cell.
+      - If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with `row` as data.
+        Example: `"https://example.org/city/<%- city >"`
+      - If `link:` is a function, opens a new window with the URL as `fn(row)`.
+        Example: `function(row) { return 'https://example.org/city/' + row.city }`
+    - `hideable`: `true` (default) / `false`. Hides the column
    - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
 - `table`: Shows the table control. Can be `true` (default) / `false`
 - `count`: Shows the number of rows. Can be `true` (default) / `false`

--- a/src/formhandler.template.html
+++ b/src/formhandler.template.html
@@ -107,7 +107,15 @@ Each template receives these variables:
                          fmt === "string" && colinfo.type === "date" ?
                            moment(val).format(colinfo.format):
                            val %>
-            <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset="><%- disp %></a>
+            <% if ('link' in colinfo) {
+                  var col_link = typeof colinfo.link == 'function' ? colinfo.link(val) : _.template(colinfo.link)(row)
+              %>
+              <a href="<%- col_link %>" target="_blank"><%- disp %></a>
+            <% } else { %>
+              <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
+                <%- disp %>
+              </a>
+            <% } %>
          </td>
        <% }) %>
      </tr>

--- a/test/test-formhandler.html
+++ b/test/test-formhandler.html
 <!DOCTYPE html>
 <html>
+
 <head>
  <title>formhandler tests</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
@@ -8,11 +9,13 @@
    .position-relative {
      position: relative;
    }
+
    .pos-cc {
      position: absolute;
      top: 45%;
      left: 45%;
    }
+
    .d-none {
      display: none !important;
    }
@@ -27,6 +30,7 @@
  <script src="tape.js"></script>

 </head>
+
 <body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
@@ -42,16 +46,15 @@
  <div class="fh8" data-src="formhandler.json"></div>
  <div class="fh9" data-src="formhandler.json"></div>
  <div class="fh10"></div>
-  <div class="fh11"></div>
-  <div class="fh12"></div>
-  <div class="fh13"></div>
+  <div class="fh11" data-src="formhandler.json"></div>
+  <div class="fh12" data-src="formhandler.json"></div>
  <div class="formhandler" data-src="formhandler.json" data-page-size="10"></div>

  <script>
-    tape('$().formhandler() basic example works', function(t) {
+    tape('$().formhandler() basic example works', function (t) {
      $('.formhandler').formhandler({
        pageSize: 20
-      }).on('load', function(e) {
+      }).on('load', function (e) {
        t.equals(e.options.pageSize, 10)
        // TODO: Review: if _limit is given in url, e.args._limit is [10] not 10
        t.equals(e.args._limit, 10)
@@ -60,15 +63,15 @@
        t.end()
      })
    })
-    tape('$().formhandler() renders data from data-src, overriding options.src', function(t) {
+    tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
-        .on('load', function() {
+        .on('load', function () {
          t.equals($('.fh1 tbody tr').length, 50)
          t.end()
        })
    })
-    tape('$().formhandler() uses option.src if no data-src exists', function(t) {
+    tape('$().formhandler() uses option.src if no data-src exists', function (t) {
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
@@ -76,15 +79,15 @@
          t.end()
        })
    })
-    tape('$().formhandler() shows default controls if meta is present', function(t) {
+    tape('$().formhandler() shows default controls if meta is present', function (t) {
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
-          transform: function(obj) {
+          transform: function (obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
-        .on('load', function() {
+        .on('load', function () {
          t.equal($('.fh3 tbody tr').length, 2)
          t.equal($('.fh3 .count').length, 1)
          t.ok($('.fh3 .count').text().match(/2 rows/))
@@ -104,15 +107,15 @@
        })
    })

-    tape('$().formhandler() disables controls via data-attributes', function(t) {
+    tape('$().formhandler() disables controls via data-attributes', function (t) {
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
-          transform: function(obj) {
+          transform: function (obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
-        .on('load', function() {
+        .on('load', function () {
          t.equal($('.fh4 .table').html(), '')
          t.equal($('.fh4 .count').html(), '')
          t.equal($('.fh4 .page').html(), '')
@@ -192,7 +195,7 @@
      $('.fh9')
        .formhandler({
          columns: [
-            { name: 'Continent', format: function(o) {return o.toUpperCase()}}
+            { name: 'Continent', format: function (o) { return o.toUpperCase() } }
          ]
        })
        .on('load', function () {
@@ -208,7 +211,7 @@
          src: 'formhandler-types.json',
          columns: [
            { name: 'Amount', type: 'number', format: '$0,0.00' },
-          { name: 'Date', type: 'date', format: 'DD-MM-YYYY'}
+            { name: 'Date', type: 'date', format: 'DD-MM-YYYY' }
          ]
        })
        .on('load', function () {
@@ -224,33 +227,39 @@
          t.end()
        })
    })
-    // tape('$(fh11).formhandler() must show error message if input data is invalid json', function (t) {
-    //   $('.fh11')
-    //     .formhandler({
-    //       src: 'formhandler-invalid.json'
-    //     })
-    //     .on('load', function () {
-    //       t.equal($('.fh11 p').text().trim(), 'Invalid data or no data found')
-    //       t.end()
-    //     })
-    // })
-    // tape('$().formhandler() must show error message if formhandler url is missing', function (t) {
-    //   $('.fh12')
-    //     .formhandler({
-    //     })
-    //     .on('load', function () {
-    //       t.equal($('.fh11 p').text().trim(), 'Invalid data or no data found')
-    //       t.end()
-    //     })
-    // })
-    // tape('$().formhandler() must show error message if formhandler returns HTTP status 500/403/400', function (t) {
-    //   $('.fh13')
-    //     .formhandler({
-    //     })
-    //     .on('load', function () {
-    //       t.end()
-    //     })
-    // })
+    tape('$().formhandler() link attr will let user goto that link instead of applying filter', function (t) {
+      $('.fh11')
+        .formhandler({
+          columns: [
+            {
+              name: 'Continent',
+              link: 'https://en.wikipedia.org/wiki/<%= Continent.split(" ").join(" ") %>'
+            }
+          ]
+        })
+        .on('load', function () {
+          // no. of columns in meta data must be same as rendered columns
+          t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" "))
+          t.end()
+        })
+    })
+    tape('$().formhandler() link attr will let user goto that link instead of applying filter using function', function (t) {
+      $('.fh12')
+        .formhandler({
+          columns: [
+            {
+              name: 'Continent',
+              link: function (row) { return 'https://en.wikipedia.org/wiki/' + row.split(" ").join(" ") }
+            }
+          ]
+        })
+        .on('load', function () {
+          // no. of columns in meta data must be same as rendered columns
+          t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" "))
+          t.end()
+        })
+    })
  </script>
 </body>
+
 </html>