Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Repeatable and sortable group with repeatable fields, issue with group shift #1426

Closed
milutinjaric opened this issue Jun 1, 2021 · 5 comments · Fixed by #1431
Closed

Repeatable and sortable group with repeatable fields, issue with group shift #1426

milutinjaric opened this issue Jun 1, 2021 · 5 comments · Fixed by #1431

Comments

@milutinjaric
Copy link

milutinjaric commented Jun 1, 2021 •
edited by jtsternberg
Loading 

add_action( 'cmb2_admin_init', function(){
	
	$cmb = new_cmb2_box([
		'id'            => 'metabox_attachment',
		'title'         => 'TEst',
		'object_types'  => [ 'page' ], // Post type
		'priority'      => 'high',
		'show_names'    => true
	] );

	$group_field_id = $cmb->add_field( array(
		'id'          => 'wiki_test_repeat_group',
		'type'        => 'group',
		'description' => __( 'Generates reusable form entries', 'cmb2' ),
		'repeatable'  => true,
		'options'     => array(
			'group_title'       => __( 'Entry {#}', 'cmb2' ), 
			'add_button'        => __( 'Add Another Entry', 'cmb2' ),
			'remove_button'     => __( 'Remove Entry', 'cmb2' ),
			'sortable'          => true,
		),
	) );

	$cmb->add_group_field( $group_field_id, array(
		'name' => 'Entry Title 2',
		'id'   => 'subtitle',
		'type' => 'text',
		 'repeatable' => true,
		 'sortable' => true
	) );

});

Step 1.
In first group click to repeat field and populate both https://prnt.sc/13o8bn2

Step 2.
Add another group ( Add another Entry )

Step 3.
Click move down on first group.

Result:
Only first field from group 1 is transferred to group 2
@tw2113 tw2113 mentioned this issue Jun 1, 2021
Open
@tw2113
Copy link
Contributor

tw2113 commented Jun 1, 2021

Can confirm odd behavior but do not have an answer for a solution.

@milutinjaric
Copy link
Author

milutinjaric commented Jun 2, 2021 •
edited
Loading

Instead of copying values I've tried swap group boxes approach and so far it works ok.

It requires changed function makeRepeatableSortable from issue #1428

     cmb.shiftRows = function( evt ) {

        evt.preventDefault();
 
         var $this = $( this );
         var moveUp = $this.hasClass( 'move-up' ) ? true : false;
         var $from = $this.parents( '.cmb-repeatable-grouping' );
         var $goto = moveUp ? $from.prevAll( '.cmb-repeatable-grouping:first' ) : $from.nextAll( '.cmb-repeatable-grouping:first' );

         cmb.triggerElement( $this, 'cmb2_shift_rows_enter', $this, $from, $goto );

         if ( ! $goto.length ) {
            return;
        }

        cmb.triggerElement( $this, 'cmb2_shift_rows_start', $this, $from, $goto );

         var fromIterator = $from.attr('data-iterator');
         var gotoIterator = $goto.attr('data-iterator');

         $from.attr( 'data-iterator', gotoIterator ).find( cmb.repeatEls ).each( function () {
            var $this = $( this );
            var name  = $this.attr( 'name' );
            if ( 'undefined' !== typeof name ) {  
                var $newName = name.replace( '[' + fromIterator + ']', '[' + gotoIterator + ']' );
                $this.attr( 'name', $newName );
            }
         });


        $goto.attr( 'data-iterator', fromIterator ).find( cmb.repeatEls ).each( function () {
            var $this = $( this );
            var name  = $this.attr( 'name' );
            if ( 'undefined' !== typeof name ) {  
                var $newName = name.replace( '[' + gotoIterator + ']', '[' + fromIterator + ']' );
                $this.attr( 'name', $newName );
            }
        });


        if( moveUp ){
            $goto.before( $from.clone() );
        }
        else {
            $goto.after( $from.clone() );
        }

        $from.remove();
        cmb.makeRepeatableSortable( moveUp ? $goto.prevAll( '.cmb-repeatable-grouping:first' ) : $goto.nextAll( '.cmb-repeatable-grouping:first' ) )

        // shift done
        cmb.triggerElement( $this, 'cmb2_shift_rows_complete', $this, $from, $goto );

     };

@jtsternberg
Copy link
Member

Your solution is interesting, but it will need to be tested with every field type (which supports being in a repeatable group) to make sure there aren't any regressions. We have to be very careful about backwards compatibility with CMB2, or we could break things for a lot of people.

@milutinjaric
Copy link
Author

I could not agree more, test everything before adding it. Since it works for my application I'm serving modified script via WP hook so I'm good.

jtsternberg added a commit that referenced this issue Jun 3, 2021
@jtsternberg
Update shiftRows functionality to be more simple, and fix issues with…
7468908 
… JS initialization. Fixes #1426
@jtsternberg jtsternberg mentioned this issue Jun 3, 2021
Merged
2 tasks
@meo8
Copy link

meo8 commented Jan 8, 2022

Hi All,

I'm also running into this issue. Any updates?

Thank you!

jtsternberg added a commit that referenced this issue Feb 15, 2022
@jtsternberg
Merge pull request #1431 from CMB2/jt/bug/1426-fix-repeat-sortable-gr…
150c2c9 
…oups

Update shiftRows functionality to be more simple, and fix issues with JS initialization. Fixes #1426
@RubenMartins RubenMartins mentioned this issue Jun 14, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@tw2113 @jtsternberg @milutinjaric @meo8