enhance: repeat field enhancement

admin/form-builder/assets/js/components/field-options/index.js

@@ -33,8 +33,8 @@ Vue.component('field-options', {
                     return self.$store.state.form_fields[i];
                 }
 
-                // check if the editing field belong to column field
-                if (self.$store.state.form_fields[i].template === 'column_field') {
+                // check if the editing field belong to column field or repeat field
+                if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                     var innerColumnFields = self.$store.state.form_fields[i].inner_fields;
 
                     for (const columnFields in innerColumnFields) {

admin/form-builder/assets/js/components/form-column_field/index.js

@@ -162,7 +162,8 @@ Vue.component('form-column_field', {
             return ( field.recaptcha_type && 'invisible_recaptcha' === field.recaptcha_type ) ? true : false;
         },
 
-        isAllowedInClolumnField: function(field_template) {
+
+        isAllowedInColumnField: function(field_template) {
             var restrictedFields = ['column_field', 'custom_hidden_field', 'step_start'];
 
             if ( $.inArray(field_template, restrictedFields) >= 0 ) {
@@ -180,7 +181,7 @@ Vue.component('form-column_field', {
                 toWhichColumn: data.to_column
             };
 
-            if (this.isAllowedInClolumnField(data.field_template)) {
+            if (this.isAllowedInColumnField(data.field_template)) {
                 Swal.fire({
                     title: "Oops...",
                     text: "You cannot add this field as inner column field"

admin/form-builder/assets/js/form-builder.js

@@ -129,15 +129,21 @@
 
                     }
 
-                    // check if the editing field belong to a column field
-                    if (state.form_fields[i].template === 'column_field') {
+                    // check if the editing field belong to a column field or repeat field
+                    if (state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                         var innerColumnFields = state.form_fields[i].inner_fields;
 
                         for (const columnFields in innerColumnFields) {
                             if (innerColumnFields.hasOwnProperty(columnFields)) {
                                 var columnFieldIndex = 0;
 
                                 while (columnFieldIndex < innerColumnFields[columnFields].length) {
+                                    // don't modify existing meta key
+                                    if (payload.field_name === 'name'  && ! innerColumnFields[columnFields][columnFieldIndex].hasOwnProperty('is_new') ) {
+                                        columnFieldIndex++;
+                                        continue;
+                                    }
+
                                     if (innerColumnFields[columnFields][columnFieldIndex].id === parseInt(payload.editing_field_id)) {
                                        innerColumnFields[columnFields][columnFieldIndex][payload.field_name] = payload.value;
                                     }

admin/form-builder/assets/js/mixins/global.js

@@ -58,8 +58,8 @@ Vue.mixin({
                     return true;
                 }
 
-                // check if the single instance field exist in column fields
-                if (self.$store.state.form_fields[i].template === 'column_field') {
+                // check if the single instance field exist in column fields or repeat field
+                if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                     var innerColumnFields = self.$store.state.form_fields[i].inner_fields;
 
                     for (const columnFields in innerColumnFields) {

assets/css/admin.css

@@ -645,7 +645,8 @@ ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .
   margin: 0;
   padding: 15px 0;
 }
-#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons {
+#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons,
+#form-preview-stage .field-items .wpuf-repeat-field + div.control-buttons {
   top: 10px;
   z-index: 10;
   height: auto;

assets/css/frontend-forms.css

@@ -504,24 +504,29 @@ body ul.wpuf-form li .wpuf-fields .wpuf-fields-list.wpuf-list-inline li {
   padding-left: 5px;
   padding-right: 5px;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field {
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field {
   border-collapse: collapse;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field * {
-  box-sizing: border-box;
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field.wpuf-field-columns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field input {
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-column-field-inner-columns {
   width: 100%;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons {
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field * {
+  box-sizing: border-box;
+}
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons {
   width: 75px;
   padding-left: 12px;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons img {
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons img {
   width: 100%;
   height: auto;
 }
-body ul.wpuf-form li .wpuf-fields table.wpuf-repeatable-field .wpuf-repeater-buttons i {
+body ul.wpuf-form li .wpuf-fields .wpuf-repeatable-field .wpuf-repeater-buttons i {
   display: inline-block;
   width: 15px;
   height: 15px;
@@ -1755,7 +1760,6 @@ body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-col
   border: 0;
   float: none;
   width: 100%;
-  overflow: hidden;
 }
 body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields {
   padding: 0 5px 0 0;

assets/js/frontend-form.js

@@ -18,12 +18,15 @@
             //enable multistep
             this.enableMultistep(this);
 
+            var form = $('.wpuf-form');
             // clone and remove repeated field
-            $('.wpuf-form').on('click', 'img.wpuf-clone-field', this.cloneField);
-            $('.wpuf-form').on('click', 'img.wpuf-remove-field', this.removeField);
-            $('.wpuf-form').on('click', 'a.wpuf-delete-avatar', this.deleteAvatar);
-            $('.wpuf-form').on('click', 'a#wpuf-post-draft', this.draftPost);
-            $('.wpuf-form').on('click', 'button#wpuf-account-update-profile', this.account_update_profile);
+            form.on('click', 'img.wpuf-clone-field', this.cloneField);
+            form.on('click', 'img.wpuf-clone-repeat-field', this.cloneRepeatField);
+            form.on('click', 'img.wpuf-remove-field', this.removeField);
+            form.on('click', 'img.wpuf-remove-repeat-field', this.removeRepeatField);
+            form.on('click', 'a.wpuf-delete-avatar', this.deleteAvatar);
+            form.on('click', 'a#wpuf-post-draft', this.draftPost);
+            form.on('click', 'button#wpuf-account-update-profile', this.account_update_profile);
 
             $('.wpuf-form-add').on('submit', this.formSubmit);
             $('form#post').on('submit', this.adminPostSubmit);
@@ -342,6 +345,71 @@
             }
         },
 
+        cloneRepeatField: function( e ) {
+            e.preventDefault();
+
+            var div = $( this ).closest( '.wpuf-column-field-inner-columns.column-repeat' );
+            var clone = div.clone();
+
+            // clear the inputs
+            clone.find( 'input:not(:checkbox):not(:radio)' ).val( '' );
+            clone.find( 'textarea' ).val( '' );
+            clone.find( ':checked' ).prop( 'checked', false );
+            div.after( clone );
+
+            WP_User_Frontend.calculateFieldsName( $( this ).parents( '.wpuf-field-columns' ) );
+            WP_User_Frontend.setRowNumber( $( this ).closest( '.wpuf-field-columns' ) );
+        },
+
+        removeRepeatField: function () {
+            //check if it's the only item
+            var parent = $( this ).closest( '.wpuf-column-field-inner-columns.column-repeat' );
+            var allItems = parent.siblings().addBack();
+            var itemsLength = allItems.length;
+
+            var fieldIndex = $( allItems ).index( $( this ).closest( '.wpuf-column-field-inner-columns.column-repeat' ) );
+
+            if ( itemsLength > 1 ) {
+                WP_User_Frontend.setRowNumber( $( parent ).closest( '.wpuf-field-columns' ), itemsLength - 1 );
+                parent.remove();
+            }
+
+            // calculate only if the removed item is not the last item
+            if ( fieldIndex + 1 !== itemsLength ) {
+                WP_User_Frontend.calculateFieldsName( parent );
+            }
+        },
+
+        setRowNumber: function ( parent, length ) {
+            if ( ! length ) {
+                length = $( parent ).children().length;
+            }
+
+            $( parent ).parent( '.wpuf-fields' ).find( 'input.repeat_row_numbers' ).val( length );
+        },
+
+        calculateFieldsName: function( parentItem ) {
+            var field_rows = parentItem.children();
+            var field_names = [];
+            var field_ids = [];
+            var field_classes = [];
+            var fields_selector = '.wpuf-column input, .wpuf-column textarea, .wpuf-column select, .wpuf-column .wpuf-rich-validation';
+
+            $( field_rows[0] ).find( fields_selector ).each( function ( i, item ) {
+                field_names.push( $( item ).attr( 'name' ).split( '_0_' ) );
+                field_ids.push( $( item ).attr( 'id' ).split( '_0_' ) );
+                field_classes.push( $( item ).attr( 'class' ).split( '_0_' ) );
+            });
+
+            field_rows.each( function( i, row ) {
+                $( row ).find( fields_selector ).each( function( y, field ) {
+                    $( field ).attr( 'name', field_names[y][0] + '_' + i + '_' + field_names[y][1] );
+                    $( field ).attr( 'id', field_ids[y][0] + '_' + i + '_' + field_ids[y][1] );
+                    $( field ).attr( 'class', field_classes[y][0] + '_' + i + '_' + field_classes[y][1] );
+                });
+            });
+        },
+
         adminPostSubmit: function(e) {
             e.preventDefault();
 

assets/js/wpuf-form-builder-components.js

@@ -451,8 +451,8 @@ Vue.component('field-options', {
                     return self.$store.state.form_fields[i];
                 }
 
-                // check if the editing field belong to column field
-                if (self.$store.state.form_fields[i].template === 'column_field') {
+                // check if the editing field belong to column field or repeat field
+                if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                     var innerColumnFields = self.$store.state.form_fields[i].inner_fields;
 
                     for (const columnFields in innerColumnFields) {
@@ -929,7 +929,8 @@ Vue.component('form-column_field', {
             return ( field.recaptcha_type && 'invisible_recaptcha' === field.recaptcha_type ) ? true : false;
         },
 
-        isAllowedInClolumnField: function(field_template) {
+
+        isAllowedInColumnField: function(field_template) {
             var restrictedFields = ['column_field', 'custom_hidden_field', 'step_start'];
 
             if ( $.inArray(field_template, restrictedFields) >= 0 ) {
@@ -947,7 +948,7 @@ Vue.component('form-column_field', {
                 toWhichColumn: data.to_column
             };
 
-            if (this.isAllowedInClolumnField(data.field_template)) {
+            if (this.isAllowedInColumnField(data.field_template)) {
                 Swal.fire({
                     title: "Oops...",
                     text: "You cannot add this field as inner column field"

assets/js/wpuf-form-builder-mixins.js

@@ -165,8 +165,8 @@ Vue.mixin({
                     return true;
                 }
 
-                // check if the single instance field exist in column fields
-                if (self.$store.state.form_fields[i].template === 'column_field') {
+                // check if the single instance field exist in column fields or repeat field
+                if (self.$store.state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                     var innerColumnFields = self.$store.state.form_fields[i].inner_fields;
 
                     for (const columnFields in innerColumnFields) {

assets/js/wpuf-form-builder-wpuf-forms.js

@@ -28,7 +28,7 @@
                     }
 
                     // check in column field
-                    if (form_field.template === 'column_field' ) {
+                    if (form_field.template.match(/^(column|repeat)_field$/)) {
                         var innerColumnFields = form_field.inner_fields;
 
                         for (const columnFields in innerColumnFields) {

assets/js/wpuf-form-builder.js

@@ -129,15 +129,21 @@
 
                     }
 
-                    // check if the editing field belong to a column field
-                    if (state.form_fields[i].template === 'column_field') {
+                    // check if the editing field belong to a column field or repeat field
+                    if (state.form_fields[i].template.match(/^(column|repeat)_field$/)) {
                         var innerColumnFields = state.form_fields[i].inner_fields;
 
                         for (const columnFields in innerColumnFields) {
                             if (innerColumnFields.hasOwnProperty(columnFields)) {
                                 var columnFieldIndex = 0;
 
                                 while (columnFieldIndex < innerColumnFields[columnFields].length) {
+                                    // don't modify existing meta key
+                                    if (payload.field_name === 'name'  && ! innerColumnFields[columnFields][columnFieldIndex].hasOwnProperty('is_new') ) {
+                                        columnFieldIndex++;
+                                        continue;
+                                    }
+
                                     if (innerColumnFields[columnFields][columnFieldIndex].id === parseInt(payload.editing_field_id)) {
                                        innerColumnFields[columnFields][columnFieldIndex][payload.field_name] = payload.value;
                                     }

assets/less/admin.less

@@ -839,7 +839,8 @@ ul.wpuf-form{
     }
 }
 
-#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons{
+#form-preview-stage .field-items .wpuf-field-columns + div.control-buttons,
+#form-preview-stage .field-items .wpuf-repeat-field + div.control-buttons{
     top: 10px;
     z-index: 10;
     height: auto;

assets/less/frontend-forms.less

@@ -562,17 +562,23 @@ ul.wpuf-form {
                 }
             }
 
-            table.wpuf-repeatable-field {
+            .wpuf-repeatable-field {
                 border-collapse: collapse;
 
-                & * {
-                    box-sizing: border-box;
+                &.wpuf-field-columns {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
                 }
 
-                input {
+                .wpuf-column-field-inner-columns {
                     width: 100%;
                 }
 
+                & * {
+                    box-sizing: border-box;
+                }
+
                 .wpuf-repeater-buttons {
                     width: 75px;
                     padding-left: 12px;
@@ -2033,7 +2039,6 @@ ul.wpuf-form{
                 border: 0;
                 float: none;
                 width: 100%;
-                overflow: hidden;
 
                 .wpuf-column-inner-fields{
                     padding: 0 5px 0 0;

includes/Ajax/Admin_Form_Builder_Ajax.php

@@ -16,14 +16,14 @@
      * @return void
      */
     public function save_form() {
         $post_data =  wp_unslash($_POST);
         if ( isset( $post_data['form_data'] ) ) {
             parse_str( $post_data['form_data'],  $form_data );
         } else {
             wp_send_json_error( __( 'form data is missing', 'wp-user-frontend'));
         }
 
         if ( !wp_verify_nonce( $form_data['wpuf_form_builder_nonce'], 'wpuf_form_builder_save_form' ) ) {
             wp_send_json_error( __( 'Unauthorized operation', 'wp-user-frontend' ) );
         }
 
@@ -50,7 +50,6 @@
             $integrations = (array) json_decode( $post_data['integrations'] );
         }
 
-
         $form_fields   = json_decode( $form_fields, true );
         $notifications = json_decode( $notifications, true );
 
@@ -66,11 +65,11 @@
 
         $form_fields = Admin_Form_Builder::save_form( $data );
 
         wp_send_json_success( [ 'form_fields' => $form_fields, 'form_settings' => $settings ] );
     }
 
     public function wpuf_get_post_taxonomies() {
         $post_data =  wp_unslash($_POST);
         $post_type = $post_data['post_type'];
         $nonce     = $post_data['wpuf_form_builder_setting_nonce'];
 
@@ -108,6 +107,6 @@
             }
         }
 
         wp_send_json_success( [ 'success' => 'true' , 'data' => $cat ] );
     }
 }