Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
G
g1
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
76
Issues
76
List
Boards
Labels
Service Desk
Milestones
Merge Requests
4
Merge Requests
4
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
cto
g1
Commits
7c744647
Commit
7c744647
authored
Jan 25, 2019
by
S Anand
1
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
BUG: FormHandler add shows dropdowns. Fixes
#131
@tejesh.p
parent
551f224a
Pipeline
#74349
passed with stage
in 2 minutes and 17 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
256 additions
and
51 deletions
+256
-51
src/formhandler.js
src/formhandler.js
+3
-2
src/formhandler.template.html
src/formhandler.template.html
+51
-49
test/test-formhandler-editable.html
test/test-formhandler-editable.html
+183
-0
test/test-formhandler-unit.html
test/test-formhandler-unit.html
+19
-0
No files found.
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 %>&_offset="
>
<
%=
disp
%
>
</a>
</td>
<td>
<a
class=
"urlfilter"
href=
"?<%- colinfo.name %>=<%- val %>&_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
)
...
...
S Anand
@s.anand
mentioned in merge request
!46 (closed)
·
Jan 25, 2019
mentioned in merge request
!46 (closed)
mentioned in merge request !46
Toggle commit list
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment