test-formhandler-editable.html 7.74 KB
Newer Older
1 2 3 4 5 6 7 8
<!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" />
9 10
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
  <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: [
54
          {
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
            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,
75
                required: '',
76
                placeholder: '0 - 100'
77 78
              },
              validationMessage: 'Number must be between 0-100 and is mandatory'
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
            }
          },
          {
            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'
              }
            }
          },
117 118 119 120 121 122 123 124 125 126
          {
            name: 'Bool Col',
            editable: {
              input: 'select',
              options: [
                true,
                false
              ]
            }
          },
127
          {
128
            name: 'Actions',
129
            template: function (row) {
130
              return "<td><button data-action='edit'><i class='fa fa-trash'></i></button></td>"
131 132 133 134
            },
          }
        ],
        edit: {
135
          done: function () {
136 137 138 139 140
            // test.ok(true, 'must call twice')
          }
        },
        add: true
      })
141 142 143 144 145 146 147 148 149
        .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
          })
150
        })
151
        .on('load', function () {
152

153 154 155 156 157 158 159
          // 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)
160

161
          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('300000').trigger('change')
162

163 164 165 166 167
          $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('-90').trigger('change')
          // save row
          $('.edit button').click()
          test.equals($('div.formhandler tbody > tr:nth-child(2) > td:nth-child(7) > select').val(), "false")
          test.equals($('div.formhandler tbody > tr:nth-child(7) > td:nth-child(7) > select').val(), "true")
168

169 170
          test.equals($('.is-invalid').val(), '300000')
          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('35').trigger('change')
171

172 173 174
          // modify cell value inside <input>
          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val('Edited').trigger('change')
          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), 'Edited')
175

176 177
          // // save row
          $('.edit button').click()
178 179


180 181
          test.equals($('.is-invalid').val(), '-90')
          $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('28').trigger('change')
182

183
          $('.edit button').click()
184

185 186 187 188
          setTimeout(function () {
            // COMMENTING NEXT TEST CASE: Gramex required
            // test.notOk($('.add button').prop('disabled'))
            // test.equals($('.edit-btn').text(), 'Edit')
189 190


191 192
            $('.add button').click()
            test.ok($('.edit button').prop('disabled'))
193

194 195 196
            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)
197

198
            test.ok($('.edit button').prop('disabled'))
199

200
            test.end()
201

202
          }, 500)
203

204
          /*
205

206
          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), 'Edited')
207

208 209 210 211 212 213 214 215 216 217 218 219
          // 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)
          */
        })
220 221 222 223 224 225
    })

  </script>
</body>

</html>