From 1b9ffe498c4737f5c059f510eb270dc342d17ecb Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Tue, 14 Jan 2025 15:03:21 -0600 Subject: [PATCH] Add separate AJAX function for editing the dates of a single instance Fixes #631 --- src/css/mc-styles.css | 35 +++++++++--------------- src/includes/kses.php | 3 ++ src/js/ajax.js | 47 +++++++++++++++++++++++++++----- src/my-calendar-ajax.php | 41 ++++++++++++++++++++-------- src/my-calendar-event-editor.php | 1 + src/my-calendar-events.php | 17 ++++++++---- 6 files changed, 98 insertions(+), 46 deletions(-) diff --git a/src/css/mc-styles.css b/src/css/mc-styles.css index 112b0081..cc93b09e 100644 --- a/src/css/mc-styles.css +++ b/src/css/mc-styles.css @@ -271,32 +271,20 @@ li.datetime-template:nth-of-type(even) { .recurrences .columns.instance-list, #e_schedule .columns.instance-list { - grid-template-columns: repeat( 3, 1fr ) -} - -@media (min-width: 1200px) { - .recurrences .columns.instance-list { - grid-template-columns: repeat( 4, 1fr ) - } -} - -@media (min-width: 1400px) { - .recurrences .columns.instance-list { - grid-template-columns: repeat( 5, 1fr ) - } -} - -@media (min-width: 1600px) { - .recurrences .columns.instance-list { - grid-template-columns: repeat( 6, 1fr ) - } + display: flex; + flex-wrap: wrap; } .recurrences .columns.instance-list li, #e_schedule .columns.instance-list li { - min-height: 80px; background: rgba( 0,0,0,.05 ); - padding: 0 10px; + padding: 0 8px; + flex-grow: 1; +} + +.instance-list button[aria-pressed="true"] { + outline: 2px solid; + outline-offset: 2px; } .recurrences input[type=time], @@ -1894,7 +1882,10 @@ tr.problem .error { } .recurrences .columns p.instance-buttons { - display: block; + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: center; } input#mc_event_endtime:invalid+span, diff --git a/src/includes/kses.php b/src/includes/kses.php index d0435ce8..a11d8049 100644 --- a/src/includes/kses.php +++ b/src/includes/kses.php @@ -296,6 +296,9 @@ function mc_kses_elements() { 'data-modal-prefix-class' => array(), 'data-modal-close-text' => array(), 'data-modal-title' => array(), + 'data-begin' => array(), + 'data-end' => array(), + 'data-value' => array(), ), 'ul' => array( 'class' => array(), diff --git a/src/js/ajax.js b/src/js/ajax.js index d1365c87..791a1fe1 100644 --- a/src/js/ajax.js +++ b/src/js/ajax.js @@ -25,11 +25,38 @@ $( '.mc_add_new' ).hide(); + $( 'button.edit_occurrence').on( 'click', function() { + let expanded = $( this ).attr( 'aria-pressed' ); + let visible = $( 'button.save-occurrence' ).is( ':visible' ); + if ( expanded == 'true' ) { + $( this ).removeAttr( 'aria-pressed' ); + } else { + $( this ).attr( 'aria-pressed', 'true' ); + $( 'button.edit_occurrence' ).not( this ).removeAttr( 'aria-pressed' ); + $( '#r_time' ).trigger( 'focus' ); + $( '.save-occurrence' ).text( 'Edit Date' ); + let instance_id = $( this ).data( 'value' ); + let begin = $( this ).data( 'begin' ).split(' '); + let end = $( this ).data( 'end' ).split(' '); + $( 'input[name="r_instance"]' ).val( instance_id ); + $( '#r_time' ).val( begin[1] ); + $( '#r_begin' ).val( begin[0] ); + $( '#r_endtime' ).val( end[1] ); + $( '#r_end' ).val( end[0] ); + } + if ( ! visible ) { + $( '.mc_add_new' ).toggle(); + } + + }); + $( 'button.add-occurrence').on( 'click', function() { let expanded = $( this ).attr( 'aria-expanded' ); + $( 'input[name="r_instance"]' ).val( '' ); if ( expanded == 'true' ) { $( this ).attr( 'aria-expanded', 'false' ).find( '.dashicons' ).addClass( 'dashicons-plus' ).removeClass( 'dashicons-minus' ); $( this ).attr( 'data-action', 'shiftback' ); + $( '.save-occurrence' ).text( 'Add Date' ); } else { $( this ).attr( 'aria-expanded', 'true' ).find( '.dashicons' ).addClass( 'dashicons-minus' ).removeClass( 'dashicons-plus' ); $( this ).attr( 'data-action', '' ); @@ -41,12 +68,13 @@ * Save additional date. */ $( 'button.save-occurrence').on( 'click', function() { - let date = $( '#r_begin' ).val(); - let begin = $( '#r_time' ).val(); - let end = $( '#r_endtime' ).val(); - let enddate = $( '#r_enddate' ).val(); - let event_id = $( 'input[name="event_id"]' ).val(); - let group_id = $( 'input[name="event_group_id"]' ).val(); + let date = $( '#r_begin' ).val(); + let begin = $( '#r_time' ).val(); + let end = $( '#r_endtime' ).val(); + let enddate = $( '#r_enddate' ).val(); + let event_id = $( 'input[name="event_id"]' ).val(); + let group_id = $( 'input[name="event_group_id"]' ).val(); + let instance_id = $( 'input[name="r_instance"]' ).val(); const data = { 'action': mc_data.recur, @@ -56,6 +84,7 @@ 'event_time' : begin, 'event_endtime' : end, 'event_enddate' : enddate, + 'event_instance' : instance_id, 'security': mc_data.security }; $.post( ajaxurl, data, function (response) { @@ -64,7 +93,11 @@ let display = time[0] + ':' + time[1]; let edit_url = mc_data.url + response.id; let dateEnd = ( typeof( enddate ) === 'undefined' ) ? date : enddate; - $( '.instance-list' ).append( '

  • Added: ' + date + ' @ ' + display + '

    Edit

    • ' ); + if ( instance_id ) { + $( '.instance-list' ).append( '

  • Edited: ' + date + ' @ ' + display + '

    • ' ); + } else { + $( '.instance-list' ).append( '

  • Added: ' + date + ' @ ' + display + '

    Edit

    • ' ); + } } $('.mc_response').text( response.response ).show( 300 ); }, "json" ); diff --git a/src/my-calendar-ajax.php b/src/my-calendar-ajax.php index 86b94b5a..cf2b82db 100644 --- a/src/my-calendar-ajax.php +++ b/src/my-calendar-ajax.php @@ -304,30 +304,49 @@ function mc_ajax_add_date() { $event_time = sanitize_text_field( $_REQUEST['event_time'] ); $event_endtime = isset( $_REQUEST['event_endtime'] ) ? sanitize_text_field( $_REQUEST['event_endtime'] ) : ''; $group_id = (int) $_REQUEST['group_id']; + $update = false; - $args = array( - 'id' => $event_id, - 'event_date' => $event_date, - 'event_end' => $event_end, - 'event_time' => $event_time, - 'event_endtime' => $event_endtime, - 'group' => $group_id, - ); - $id = mc_insert_instance( $args ); + if ( isset( $_REQUEST['event_instance'] ) && ! empty( $_REQUEST['event_instance'] ) ) { + $instance = absint( $_REQUEST['event_instance'] ); + $args = array( + 'event_begin' => $event_date, + 'event_time' => $event_time, + 'event_end' => $event_end, + 'event_endtime' => $event_endtime, + 'event_group_id' => $group_id, + ); + $id = mc_update_instance( $instance, $event_id, $args ); + $update = true; + } else { + $args = array( + 'id' => $event_id, + 'event_date' => $event_date, + 'event_end' => $event_end, + 'event_time' => $event_time, + 'event_endtime' => $event_endtime, + 'group' => $group_id, + ); + $id = mc_insert_instance( $args ); + } if ( $id ) { + if ( $update ) { + $message = esc_html__( 'The date of your occurrence has been changed.', 'my-calendar' ); + } else { + $message = esc_html__( 'A new date has been added to this event.', 'my-calendar' ); + } wp_send_json( array( 'success' => 1, 'id' => (int) $id, - 'response' => esc_html__( 'A new date has been added to this event.', 'my-calendar' ), + 'response' => $message, ) ); } else { wp_send_json( array( 'success' => 0, - 'response' => esc_html__( 'Sorry! I failed to add that date to your event.', 'my-calendar' ), + 'response' => esc_html__( "Sorry! I wasn't able to update your event.", 'my-calendar' ), ) ); } diff --git a/src/my-calendar-event-editor.php b/src/my-calendar-event-editor.php index 6c68a243..426fe2a5 100644 --- a/src/my-calendar-event-editor.php +++ b/src/my-calendar-event-editor.php @@ -2981,6 +2981,7 @@ function mc_recur_datetime_input( $data ) { $form = '
    +

    diff --git a/src/my-calendar-events.php b/src/my-calendar-events.php index d2a32370..fef51160 100644 --- a/src/my-calendar-events.php +++ b/src/my-calendar-events.php @@ -1075,14 +1075,19 @@ function mc_admin_instances( $id, $occur = 0 ) { $date = "" . $date . '
    ' . $time . '    '; $class = ( my_calendar_date_xcomp( mc_date( 'Y-m-d H:i:00', $start ), mc_date( 'Y-m-d H:i:00', time() ) ) ) ? 'past-event' : 'future-event'; if ( (int) $result->occur_id === (int) $occur || 1 === $count ) { - $control = ''; - $edit = "

    $date

    " . __( 'Editing Now', 'my-calendar' ) . '

    '; - $class = 'current-event'; + $control = ''; + $control .= "

    $date

    " . __( 'Editing Now', 'my-calendar' ) . '

    '; + $class = 'current-event'; } else { - $control = "

    $date

    '; - $edit = "occur_id' class='button' aria-describedby='occur_date_$result->occur_id'>" . __( 'Edit', 'my-calendar' ) . '

    '; + $control = "

    $date

    "; + $control .= "

    "; + $control .= " '; + $control .= "'; + $control .= '

    '; + $control .= "occur_id' aria-describedby='occur_date_$result->occur_id'>" . __( 'Edit Details', 'my-calendar' ) . ''; + $control .= '

    '; } - $output .= "
  • $control$edit
    • "; + $output .= "
  • $control
    • "; } }