Commit d4d0511a authored by Piotr Borek's avatar Piotr Borek
Browse files

initial frontend finished

parent b45580af
Pipeline #253639006 failed with stages
in 5 minutes and 48 seconds
......@@ -22,7 +22,8 @@ define(
return BaseForm.extend({
events: {
"click .add-row": "addRow",
"click .remove-row": "removeRow"
"click .remove-row": "removeRow",
"change input": "updateModelAfterChange",
},
template: _.template(template),
rowTemplate: _.template(rowTemplate),
......@@ -45,49 +46,63 @@ define(
destinationValue: 'dvalue' + index,
});
}
this.updateModel(mapping);
this.updateMappingValues(mapping);
},
addRow: function(ev) {
let mapping = this.getModelValue();
let mapping = this.getMappingValues();
let index = this.getMaxIndex() + 1;
mapping.push({
index: index,
sourceValue: '',
destinationValue: '',
});
this.updateModel(mapping);
this.updateMappingValues(mapping);
this.render();
},
removeRow: function(ev) {
var chosenIndex = $(ev.currentTarget).data('index');
let value = this.getModelValue();
let values = this.getMappingValues();
value = _.filter(value, function(element) {
values = _.filter(values, function(element) {
return element.index !== chosenIndex;
});
this.updateModel(value);
this.updateMappingValues(values);
this.render();
},
render: function () {
this.$el.html(this.template({
rowCount : this.rowCount,
rowTemplate: this.rowTemplate,
data: this.getModelValue()
data: this.getMappingValues(),
}));
this.delegateEvents();
return this;
},
updateModel: function (value) {
updateModelAfterChange: function (event) {
this.updateModelValue(parseInt(event.target.dataset.index), event.target.name, event.target.value);
},
updateModelValue: function (index, type, value) {
let mappingValues = this.getMappingValues();
let mappingValue = _.find(mappingValues, function(element) {
return element.index === index;
});
if (!mappingValue) {
return;
}
mappingValue[type] = value;
this.updateMappingValues(mappingValues);
},
updateMappingValues: function (value) {
let data = this.getFormData();
data[this.fieldName] = value;
this.setData(data);
},
getModelValue: function () {
getMappingValues: function () {
let data = this.getFormData();
return data[this.fieldName];
},
getMaxIndex: function() {
let mapping = this.getModelValue();
let mapping = this.getMappingValues();
let maxElement = _.max(mapping, function (element) {
return element.index;
});
......
......@@ -4,18 +4,28 @@
~ SPDX-License-Identifier: NPOSL-3.0
-->
<div class="AknFieldContainer-inputContainer field-input">
<input class="AknTextField" title="Source attribute" value="<%- element.sourceValue %>"
type="text" name="source<%- element.index %>">
<tr class="AknGrid-bodyRow">
=>
<td class="AknGrid-bodyCell">
<input class="AknTextField" title="Source attribute" value="<%- element.sourceValue %>"
type="text" name="sourceValue" data-index="<%- element.index %>">
</td>
<input class="AknTextField" title="Destination attribute" value="<%- element.destinationValue %>"
type="text" name="destination<%- element.index %>">
<td class="AknGrid-bodyCell">
=>
</td>
<a href="javascript:void(0);" data-index="<%- element.index %>" class="remove-row AknIconButton AknIconButton--small AknIconButton--trash AknButtonList-item" title="Remove row">
Remove row
</a>
<td class="AknGrid-bodyCell">
<input class="AknTextField" title="Destination attribute" value="<%- element.destinationValue %>"
type="text" name="destinationValue" data-index="<%- element.index %>">
</div>
</td>
<td class="AknGrid-bodyCell AknGrid-bodyCell--actions">
<a href="javascript:void(0);" data-index="<%- element.index %>" class="remove-row AknIconButton AknIconButton--small AknIconButton--trash AknButtonList-item" title="Remove row">
Remove row
</a>
</td>
</tr>
......@@ -4,15 +4,16 @@
~ SPDX-License-Identifier: NPOSL-3.0
-->
<table class="AknGrid">
<tbody class="AknGrid-body">
<% _.each(data, function(element) { %>
<div class="AknFieldContainer">
<% _.each(data, function(element) { %>
<%= rowTemplate({element: element}) %>
<% }); %>
<%= rowTemplate({element: element}) %>
</tbody>
</table>
</div>
<% }); %>
<button class="add-row AknButton AknButton--apply">Add row</button>
......
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