Skip to content

GitLab

Commit 7c744647 authored by S Anand's avatar S Anand
1 Browse files
Options

BUG: FormHandler add shows dropdowns. Fixes #131 @tejesh.p

parent 551f224a
Pipeline #74349 passed with stage
    in 2 minutes and 17 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 256 additions and 51 deletions
    src/formhandler.js
    View file @ 7c744647
    ......@@ -121,7 +121,8 @@ export function formhandler(js_options) {
    parse: parse,
    col_defaults: col_defaults,
    isEdit: false,
    isAdd: false
    isAdd: false,
    templates: default_templates
    }
    // Store template_data in $this
    $this.data('formhandler', template_data)
    ......@@ -259,7 +260,7 @@ function addHandler($this, template_data, options, template) {
    if (add_btn.html().toLowerCase() == 'save') {
    add_btn.html('Add')
    edit_btn.prop('disabled', false)
    var columns_data = $('.new-row input[data-key]')
    var columns_data = $('.new-row td[data-key]')
    $('.loader', $this).removeClass('d-none')
    var data = {}
    ......
    src/formhandler.template.html
    View file @ 7c744647
    ......@@ -109,8 +109,9 @@ Each template receives these variables:
    <tr class="new-row">
    <% _.each(cols, function(colinfo) {
    if (!colinfo.template) { %>
    <td>
    <input class="form-control form-control-sm" data-key="<%- colinfo.name %>" value="" />
    <td data-key="<%- colinfo.name %>">
    <% var isEditable = colinfo.editable === undefined ? true : colinfo.editable %>
    <%= _.template(templates['template_editable'])({isEditable: isEditable, val: undefined}) %>
    </td>
    <% } else { %>
    <td></td>
    ......@@ -150,54 +151,15 @@ Each template receives these variables:
    </td>
    <% } else if (isEdit && isEditable) { %>
    <td data-key="<%- colinfo.name %>">
    <% if (isEditable.input == 'select') { %>
    <select
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    >
    <% _.each(isEditable.options, function(item) { %>
    <option <%- val === item ? 'selected': null %> value="<%- item %>">
    <%- item %>
    </option>
    <% }) %>
    </select>
    <% } else if (isEditable.input == 'radio') { %>
    <% _.each(isEditable.options, function(item) { %>
    <input type="radio" <%- val === item ? 'checked': null %> value="<%- item %>"
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    />
    <%- item %> <br>
    <% }) %>
    <% } else { %>
    <input type="<%- isEditable.input || 'text' %>" value="<%- val %>"
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    />
    <% } %>
    </td>
    <td data-key="<%- colinfo.name %>">
    <%= _.template(templates['template_editable'])({isEditable: isEditable, val: val}) %>
    </td>
    <% } else { %>
    <td>
    <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
    <%= disp %>
    </a>
    </td>
    <td>
    <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
    <%= disp %>
    </a>
    </td>
    <% } %>
    <% }) %>
    </tr>
    ......@@ -207,6 +169,46 @@ Each template receives these variables:
    </table>
    <!-- end -->
    <!-- var template_editable -->
    <% if (isEditable.input == 'select') { %>
    <select
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    >
    <% _.each(isEditable.options, function(item) { %>
    <option <%- val && val === item ? 'selected': null %> value="<%- item %>">
    <%- item %>
    </option>
    <% }) %>
    </select>
    <% } else if (isEditable.input == 'radio') { %>
    <% _.each(isEditable.options, function(item) { %>
    <input type="radio" <%- val && val === item ? 'checked': null %> value="<%- item %>"
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    />
    <%- item %> <br>
    <% }) %>
    <% } else { %>
    <input type="<%- isEditable.input || 'text' %>" value="<%- val %>"
    <% for (key in isEditable.attrs) { %>
    <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
    />
    <% } %>
    <!-- end -->
    <!-- var template_page -->
    <% var page = 1 + Math.floor(meta.offset / meta.limit),
    last_page = 'count' in meta ? Math.floor((meta.count + meta.limit - 1) / meta.limit) : meta.rows < meta.limit ? page : null,
    ......
    test/test-formhandler-editable.html 0 → 100644
    View file @ 7c744647
    <!DOCTYPE html>
    <html>
    <head>
    <title>Editable formhandler tests</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
    <style>
    .position-relative {
    position: relative;
    }
    .pos-cc {
    position: absolute;
    top: 45%;
    left: 45%;
    }
    .d-none {
    display: none !important;
    }
    </style>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../node_modules/lodash/lodash.min.js"></script>
    <script src="../node_modules/moment/min/moment.min.js"></script>
    <script src="../node_modules/numeral/min/numeral.min.js"></script>
    <script src="../dist/formhandler.min.js"></script>
    <script src="../dist/scale.min.js"></script>
    <script src="../node_modules/d3/build/d3.js"></script>
    <script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
    <script src="tape.js"></script>
    </head>
    <body>
    <script>
    tape.onFinish(function () { window.renderComplete = true })
    </script>
    <div class="edit-fh"></div>
    <script>
    tape('$().formhandler() test edit to save rows triggered on "input" event rather "click: event', function (test) {
    $('.edit-fh').formhandler({
    src: '/formhandler-data',
    columns: [
    {
    name: 'ID',
    editable: false
    },
    {
    name: 'Continent',
    editable: {
    input: 'text',
    attrs: {
    minlength: 2,
    class: 'bg-warning'
    }
    }
    },
    {
    name: 'c1',
    editable: {
    input: 'number',
    attrs: {
    min: 10,
    max: 100,
    placeholder: '0 - 100'
    }
    }
    },
    {
    name: 'Stripes',
    editable: {
    input: 'select',
    options: [
    'Vertical',
    'Horizontal',
    'Diagonal'
    ]
    }
    },
    {
    name: 'Shapes',
    editable: {
    input: 'select',
    options: [
    'Circle',
    'Crescent',
    'Triangle',
    'Stars'
    ],
    attrs: {
    class: 'select-example-basic',
    name: 'shapes'
    }
    }
    },
    {
    name: 'date_col',
    editable: {
    input: 'text',
    attrs: {
    class: 'datepicker-example form-control form-control-sm'
    }
    }
    },
    {
    name: 'delete',
    template: function(row) {
    return "<td><button data-action='delete'><i class='fa fa-trash'></i></button></td>"
    },
    }
    ],
    edit: {
    done: function() {
    // test.ok(true, 'must call twice')
    }
    },
    add: true
    })
    .on('editmode', function () {
    test.equals($('.select-example-basic').length, 100)
    test.equals($('.datepicker-example').length, 100)
    $('.select-example-basic').select2()
    $('.datepicker-example').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true,
    autoclose: true
    })
    })
    .on('load', function () {
    // editing rows with no click must also update values
    var init_cell_value = $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim()
    var stripe_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim()
    var c1_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim()
    $('.edit button').click()
    // make sure the initial value is Europe
    test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), init_cell_value)
    // modify cell value inside <input>
    $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val('Edited')
    $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
    test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), 'Edited')
    // save row
    $('.edit button').click()
    $('.add button').click()
    test.equals($('div.edit-fh tr.new-row td:nth-child(4) select').length, 1)
    // all other columns must be input textbox and editable, overriding isEditable: false option also
    test.equals($('div.edit-fh tr.new-row td:nth-child(1) input').length, 1)
    test.end()
    /*
    test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), 'Edited')
    // reset values
    $('.edit button').click()
    $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val(init_cell_value)
    $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
    $('.edit button').click()
    test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), init_cell_value)
    // make sure all other field values are restored
    test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim(), stripe_cell_value)
    test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim(), c1_cell_value)
    */
    })
    })
    </script>
    </body>
    </html>
    test/test-formhandler-unit.html
    View file @ 7c744647
    ......@@ -53,6 +53,21 @@
    {
    name: '*'
    },
    {
    name: 'ID',
    editable: false
    },
    {
    name: 'Stripes',
    editable: {
    input: 'select', // renders a default select dropdown as <select class="form-control form-control-sm">...</select>
    options: [ // `options` is mandatory because `input` is "select"
    'Vertical',
    'Horizontal',
    'Diagonal'
    ]
    }
    },
    {
    name: 'DELETE Action',
    template: function() {
    ......@@ -70,6 +85,10 @@
    $('.edit-btn').click()
    $('.add-btn').click()
    t.ok($('.edit-btn').prop('disabled'))
    // stripes column is dropdown select HTML element and not input textbox
    t.equals($('div.formhandler tr.new-row td:nth-child(6) select').length, 1)
    // all other columns must be input textbox and editable, overriding isEditable: false option also
    t.equals($('div.formhandler tr.new-row td:nth-child(1) input').length, 1)
    $('.add-btn').click()
    // on empty row click, .new-row element does not exist
    t.equals($('.new-row', $('.delete_btn')).length, 0)
    ......
    Markdown is supported
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment