|
625 | 625 | initialize: function(data){
|
626 | 626 | BasePage.prototype.initialize.apply(this, arguments);
|
627 | 627 |
|
628 |
| - _.bindAll(this, 'addAction', 'addCondition'); |
| 628 | + _.bindAll(this, 'addAction', 'addCondition', 'submitForm'); |
629 | 629 |
|
630 | 630 | this.actions_by_id = {};
|
631 | 631 | this.conditions_by_id = {};
|
|
636 | 636 | this.condition_sel = this.el.find('select[name="condition"]');
|
637 | 637 | this.condition_table = this.el.find('table.condition-list');
|
638 | 638 | this.condition_table_body = this.condition_table.find('tbody');
|
| 639 | + this.form = this.el.find('form'); |
639 | 640 |
|
640 | 641 | this.action_sel.empty();
|
641 | 642 | this.action_sel.append($('<option></option>'));
|
642 | 643 | $.each(data.actions, _.bind(function(_, action) {
|
643 | 644 | var opt = $('<option></option>');
|
644 | 645 | opt.attr({
|
645 |
| - value: action.id, |
| 646 | + value: action.id |
646 | 647 | });
|
647 | 648 | opt.text(action.label);
|
648 | 649 | opt.appendTo(this.action_sel);
|
|
655 | 656 | $.each(data.conditions, _.bind(function(_, condition) {
|
656 | 657 | var opt = $('<option></option>');
|
657 | 658 | opt.attr({
|
658 |
| - value: condition.id, |
| 659 | + value: condition.id |
659 | 660 | });
|
660 | 661 | opt.text(condition.label);
|
661 | 662 | opt.appendTo(this.condition_sel);
|
|
665 | 666 |
|
666 | 667 | this.action_sel.change(this.addAction);
|
667 | 668 | this.condition_sel.change(this.addCondition);
|
| 669 | + |
| 670 | + this.form.submit(this.submitForm); |
668 | 671 | },
|
669 | 672 |
|
670 | 673 | addCondition: function() {
|
671 |
| - var condition = this.conditions_by_id[this.condition_sel.val()]; |
| 674 | + var node = this.conditions_by_id[this.condition_sel.val()]; |
672 | 675 | var row = $('<tr></tr>');
|
673 | 676 | var remove_btn = $('<button class="btn btn-small">Remove</button>');
|
| 677 | + var num = this.condition_table_body.find('tr').length; |
| 678 | + var html = $('<div>' + node.html + '</div>'); |
| 679 | + var id_field = $('<input type="hidden" name="id[' + num + ']" value="' + node.id + '">'); |
674 | 680 |
|
675 |
| - row.append($('<td>' + condition.html + '</td>')); |
| 681 | + // we need to update the id of all form elements |
| 682 | + html.find('input, select, textarea').each(function(_, el){ |
| 683 | + var $el = $(el); |
| 684 | + $el.attr('name', $el.attr('name') + '[' + num + ']'); |
| 685 | + }); |
| 686 | + row.append($('<td></td>').append(html).append(id_field)); |
676 | 687 | row.append($('<td></td>').append(remove_btn));
|
677 | 688 | row.appendTo(this.condition_table_body);
|
678 | 689 |
|
|
689 | 700 | var action = this.actions_by_id[this.action_sel.val()];
|
690 | 701 | var row = $('<tr></tr>');
|
691 | 702 | var remove_btn = $('<button class="btn btn-small">Remove</button>');
|
| 703 | + var num = this.action_table_body.find('tr').length; |
| 704 | + var html = $('<div>' + action.html + '</div>'); |
| 705 | + var id_field = $('<input type="hidden" name="id[' + num + ']" value="' + action.id + '">'); |
692 | 706 |
|
693 |
| - row.append($('<td>' + action.html + '</td>')); |
| 707 | + // we need to update the id of all form elements |
| 708 | + html.find('input, select, textarea').each(function(_, el){ |
| 709 | + var $el = $(el); |
| 710 | + $el.attr('name', $el.attr('name') + '[' + num + ']'); |
| 711 | + }); |
| 712 | + row.append($('<td></td>').append(html).append(id_field)); |
694 | 713 | row.append($('<td></td>').append(remove_btn));
|
695 | 714 | row.appendTo(this.action_table_body);
|
696 | 715 |
|
|
701 | 720 |
|
702 | 721 | this.action_sel.data("select2").clear();
|
703 | 722 | this.action_table.show();
|
| 723 | + }, |
| 724 | + |
| 725 | + submitForm: function(e) { |
| 726 | + e.preventDefault(); |
| 727 | + |
| 728 | + var form_data = { |
| 729 | + actions: [], |
| 730 | + conditions: [], |
| 731 | + label: this.form.find('input[name=label]').val() |
| 732 | + }; |
| 733 | + |
| 734 | + // grab each table row in actions/conditions and create |
| 735 | + // a suitable form element out of it |
| 736 | + this.action_table_body.find('tr').each(function(_, el){ |
| 737 | + form_data.actions.push({ |
| 738 | + id: $(el).data('action-id'), |
| 739 | + data: $('input, textarea, select', el).serializeArray() || {} |
| 740 | + }); |
| 741 | + }); |
| 742 | + |
| 743 | + this.condition_table_body.find('tr').each(function(_, el){ |
| 744 | + form_data.conditions.push({ |
| 745 | + id: $(el).data('condition-id'), |
| 746 | + data: $('input, textarea, select', el).serializeArray() || {} |
| 747 | + }); |
| 748 | + }); |
| 749 | + |
| 750 | + |
| 751 | + console.log(JSON.stringify(form_data)); |
704 | 752 | }
|
705 | 753 |
|
706 | 754 | });
|
|
0 commit comments