Skip to content

Commit

Permalink
refactor: enrollment request form changes (#36)
Browse files Browse the repository at this point in the history 
* refactor: improved form style and action selector process

* feat: added tooltip to enrollment input fields

* refactor: default log box position under form box

* feat: course_id field is always prefixed

* style: fixed order request id button height

* docs: update the tool-tip texts to be more descriptive

* fix: added phpcs report to gitignore

* fix: enrollment no pre to course enrollment allowed

* fix: end line in css file

---------

Co-authored-by: Maria Fernanda Magallanes Zubillaga <[email protected]>
  • Loading branch information
@julianramirez2 @MaferMazu
julianramirez2 and MaferMazu authored Sep 1, 2023
1 parent 5db6036 commit 66e2643
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 62 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
### Composer ###
composer.phar
/vendor/
phpcs-report.xml

### Sphinx ###
build
Expand Down
5 changes: 3 additions & 2 deletions admin/class-openedx-woocommerce-plugin-admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,8 +278,8 @@ public function add_admin_order_item_values( $_product, $item, $item_id = null )
$order_url = esc_url( admin_url( 'post.php?post=' . intval( $input_value ) . '&action=edit' ) );

$html_output = '<td>';
$html_output .= '<input type="text" name="order_id_input' . esc_attr( $item_id ) . '" value="' . esc_attr( $input_value ) . '" pattern="\d*" />';
$html_output .= '<a href="' . $order_url . '" class="button" style="margin-left: 5px; ' . ( $input_value ? '' : 'pointer-events: none; opacity: 0.6;' ) . '">View Request</a>';
$html_output .= '<input style="height:30px;" type="text" name="order_id_input' . esc_attr( $item_id ) . '" value="' . esc_attr( $input_value ) . '" pattern="\d*" />';
$html_output .= '<a href="' . $order_url . '" class="button" style="margin-left: 5px; vertical-align: bottom;' . ( $input_value ? '' : 'pointer-events: none; opacity: 0.6;' ) . '">View Request</a>';
$html_output .= '</td>';

echo wp_kses(
Expand All @@ -295,6 +295,7 @@ public function add_admin_order_item_values( $_product, $item, $item_id = null )
'name' => array(),
'value' => array(),
'pattern' => array(),
'style' => array(),
),
'td' => array(),
)
Expand Down
71 changes: 64 additions & 7 deletions admin/css/openedx-woocommerce-plugin-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@
* included in this file.
*/

#namediv{
padding: 50px 20px 50px 20px;
}

.logs_box {
max-width: 100%;
max-height: 477px;
Expand Down Expand Up @@ -56,7 +52,68 @@
margin-left: 10px;
}

input[type="text"],
input[type="password"] {
width: 30%;
#namediv input[type="text"],
#namediv input[type="password"],
#namediv input[type="email"] {
width: 300px;
}

#namediv select {
width: 300px;
}

#namediv input[type="checkbox"] {
width: 16px;
height: 16px;
}

.gray_zone {
background: #f8f8f8;
}

.form-table td {
padding: 20px 20px 20px 20px;
}

.first{
width: 10%;
}

.first_zone{
border-top: 1px solid rgb(197, 197, 197);
}

.sync_button{
float: right;
}

.tooltip-icon {
font-size: 10px;
color: white;
position: relative;
top: 50%;
right: 0;
transform: translateY(-50%);
cursor: pointer;
background-color: #a5a5a5;
border-radius: 50%;
padding: 1px 6px 1px 6px;
}

.tooltip-text {
display: none;
font-size: 10px;
padding: 2px 8px 3px 8px;
background-color: #a5a5a5;
color: white;
font-size: bold;
border-radius: 5px;
}

.tooltip-icon:hover + .tooltip-text {
display: unset;
}

.setting_input {
width: 400px;
}
99 changes: 59 additions & 40 deletions admin/views/class-openedx-woocommerce-plugin-enrollment-info-form.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,26 +94,32 @@ public function render_enrollment_info_form( $post ) {

?>
<div id="namediv" class="postbox">
<h2 class="">Open edX enrollment request</h2>

<fieldset>
<h2 class="">Open edX enrollment request</h2>
<input type="hidden" name="new_enrollment" value="<?php echo wp_kses( $new_enrollment, array( 'true', 'false' ) ); ?>">
<table class="form-table">
<tbody>
<tr>
<td class="first"><label for="openedx_enrollment_course_id">Course ID</label></td>
<td>
<input type="text" id="openedx_enrollment_course_id" name="enrollment_course_id" value="<?php echo esc_attr( $course_id ); ?>">
<input type="text" id="openedx_enrollment_course_id" name="enrollment_course_id" value="<?php echo esc_attr( $course_id ); ?>" oninput="updateCourseId(this)" onfocus="saveOriginalValue(this)" onblur="restoreOriginalValue(this)">
<span class="tooltip-icon">?</span>
<span class="tooltip-text"><?php esc_html_e( 'The id of the course to be used for the enroll, e.g. course-v1:edX+DemoX+Demo_Course.', 'wp-edunext-marketing-site' ); ?></span>
</td>
</tr>
<tr>
<td class="first"><label>User Email</label></td>
<td>
<div style="width: 49%; display: inline-table;">
<input type="email" id="openedx_enrollment_email" name="enrollment_email" value="<?php echo esc_attr( $email ); ?>">
<div style="width: 20%; display: inline-table;">
<input type="email" id="openedx_enrollment_email" name="enrollment_email" value="<?php echo esc_attr( $email ); ?>">
</div>
<span class="tooltip-icon">?</span>
<span class="tooltip-text"><?php esc_html_e( 'The email of the user to be used for the enroll.', 'wp-edunext-marketing-site' ); ?></span>
<button name="enrollment_sync" class="button save_order button-secondary sync_button"><span><?php esc_html_e( 'Read from OpenedX', 'wp-edunext-marketing-site' ); ?></span></button>
</td>
</tr>
<tr>
<tr class="gray_zone first_zone">
<td class="first"><label for="openedx_enrollment_mode">Course Mode</label></td>
<td>
<select id="openedx_enrollment_mode" name="enrollment_mode">
Expand All @@ -123,9 +129,12 @@ public function render_enrollment_info_form( $post ) {
</option>
<?php endforeach; ?>
</select>
<span class="tooltip-icon">?</span>
<span class="tooltip-text"><?php esc_html_e( 'The mode of your enrollment request. Make sure to set a mode that your course has.', 'wp-edunext-marketing-site' ); ?></span>
</td>
</tr>
<tr>

<tr class="gray_zone">
<td class="first">
<label for="openedx_enrollment_is_active">Request Type</label>
</td>
Expand Down Expand Up @@ -155,64 +164,75 @@ public function render_enrollment_info_form( $post ) {
?>
</option>
</select>

<span class="tooltip-icon">?</span>
<span class="tooltip-text"><?php esc_html_e( 'The type of your request. If you select Enroll, you will create an enrollment, and if you select Un-enroll, you will set a soft unenrollment (enrollment with status inactive).', 'wp-edunext-marketing-site' ); ?></span>
</td>
</tr>
<tr>
<tr class="gray_zone">
<td class="first"><label for="openedx_enrollment_order_id">WC Order ID</label></td>
<td>
<div style="width: 30%; display: inline-table;">
<div style="width: 27%; display: inline-table;">
<input type="text" id="openedx_enrollment_order_id" name="enrollment_order_id" value="<?php echo esc_attr( $order_id ); ?>" pattern="\d*" />
</div>
<div style="width: 30%; display: inline-table;">
<div style="width: 8%; display: inline-table;">
<?php
if ( isset( $order_url ) ) {
echo '<a href="' . esc_url( $order_url ) . '" class="button view_order_button" style="' . ( empty( $order_id ) ? 'pointer-events: none; opacity: 0.6;' : '' ) . '">View Order</a>';
}
?>
</div>
<span class="tooltip-icon">?</span>
<span class="tooltip-text"><?php esc_html_e( 'The id of the order associated with this request.', 'wp-edunext-marketing-site' ); ?></span>
</td>
</tr>

<tr>
<td class="first"><label>Choose an Action</label></td>
<tr class="gray_zone">
<td class="checkbox-td">
<input class="action-checkbox" type="checkbox" id="force" name="enrollment_force" value="opcion1">
<label for="force"><?php esc_html_e( 'Use force', 'wp-edunext-marketing-site' ); ?></label>
</td>
<td>
<select name="enrollment_action" id="actions-select">
<option value="default" disabled selected hidden>
Select an option
</option>
<option value="save_no_process">
<?php esc_html_e( 'Save without processing', 'wp-edunext-marketing-site' ); ?>
</option>
<option value="enrollment_sync">
<?php esc_html_e( 'Synchronize (pull information)', 'wp-edunext-marketing-site' ); ?>
</option>
<option value="enrollment_process">
<?php esc_html_e( 'Process request', 'wp-edunext-marketing-site' ); ?>
</option>
<option value="enrollment_no_pre">
<?php esc_html_e( 'Process no pre-enrollment', 'wp-edunext-marketing-site' ); ?>
</option>
<option value="enrollment_force">
<?php esc_html_e( 'Process --force', 'wp-edunext-marketing-site' ); ?>
</option>
<option value="enrollment_no_pre_force">
<?php esc_html_e( 'Process no pre-enrollment --force', 'wp-edunext-marketing-site' ); ?>
</option>
</select>
<input class="action-checkbox" type="checkbox" id="no_pre" name="enrollment_allowed" value="opcion1">
<label for="no_pre"><?php esc_html_e( "Create course enrollment allowed if the user doesn't exist", 'wp-edunext-marketing-site' ); ?></label>
</td>
</tr>

<tr>
<td class="first"><label>Create/Update Enrollment</label></td>
<tr class="gray_zone">
<td class="first">
<button name="enrollment_process" class="button save_order button-primary"><span><?php esc_html_e( 'Save and update OpenedX', 'wp-edunext-marketing-site' ); ?></span></button>
</td>
<td>
<button class="button save_order button-primary"><span><?php esc_html_e( 'Apply action', 'wp-edunext-marketing-site' ); ?></span></button>
<button name="save_no_process" class="button save_order button-secondary"><span><?php esc_html_e( 'Save in WordPress', 'wp-edunext-marketing-site' ); ?></span></button>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>

<script>
var originalValue = "";

function saveOriginalValue(input) {
originalValue = input.value;
}

function restoreOriginalValue(input) {
if (input.value !== originalValue && !input.value.startsWith("course-v1:")) {
input.value = originalValue;
}
}

function updateCourseId(input) {
var prefix = "course-v1:";
var currentValue = input.value;

if (currentValue !== "" && !currentValue.startsWith(prefix)) {
input.value = prefix;
}
}
</script>

<?php
}

Expand Down Expand Up @@ -255,7 +275,6 @@ public function render_logs_box( $post ) {
*/
public function replace_admin_meta_boxes() {
remove_meta_box( 'submitdiv', $this->post_type, 'side' );

add_meta_box( 'openedx_enrollment_request_actions', 'Enrollment Operation Logs', array( $this, 'render_logs_box' ), $this->post_type, 'side', 'high' );
add_meta_box( 'openedx_enrollment_request_actions', 'Enrollment Operation Logs', array( $this, 'render_logs_box' ), $this->post_type, 'normal', 'high' );
}
}
10 changes: 5 additions & 5 deletions admin/views/class-openedx-woocommerce-plugin-settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ public function openedx_domain_callback() {
$value = get_option( 'openedx-domain' );
?>

<input type="text" name="openedx-domain" id="openedx-domain"
<input class="setting_input" type="text" name="openedx-domain" id="openedx-domain"
value="<?php echo esc_attr( $value ); ?>" required />

<p class='description'>Your Open edX platform's web address.</p>
Expand All @@ -242,7 +242,7 @@ public function openedx_client_id_callback() {
$value = get_option( 'openedx-client-id' );
?>

<input type="text" name="openedx-client-id" id="openedx-client-id"
<input class="setting_input" type="text" name="openedx-client-id" id="openedx-client-id"
value="<?php echo esc_attr( $value ); ?>" required />

<p class="description">Identifier for OAuth application in your Open edX
Expand All @@ -263,7 +263,7 @@ public function openedx_client_secret_callback() {
$value = get_option( 'openedx-client-secret' );
?>

<input type="text" name="openedx-client-secret" id="openedx-client-secret"
<input class="setting_input" type="text" name="openedx-client-secret" id="openedx-client-secret"
value="<?php echo esc_attr( $value ); ?>" required />

<p class="description">
Expand Down Expand Up @@ -296,9 +296,9 @@ public function openedx_jwt_token_callback() {

<div class="openedx-jwt-token-wrapper">

<input class="openedx-jwt-token-input" type="text" name="openedx-jwt-token" id="openedx-jwt-token"
<input class="setting_input" class="openedx-jwt-token-input" type="text" name="openedx-jwt-token" id="openedx-jwt-token"
value="<?php echo esc_attr( $value ); ?>" hidden/>
<input class="openedx-jwt-token-input" type="text" value="<?php echo esc_attr( $masked_value ); ?>" readonly/>
<input class="setting_input" class="openedx-jwt-token-input" type="text" value="<?php echo esc_attr( $masked_value ); ?>" readonly/>

<form method="post">
<button class="button" type="submit" name="generate_new_token" id="generate-jwt-token">Generate JWT Token</button>
Expand Down
8 changes: 4 additions & 4 deletions includes/model/class-openedx-woocommerce-plugin-api-calls.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ public function enrollment_send_request( $enrollment_data, $enrollment_action )

return $this->enrollment_request_api_call( $method, $body, $access_token );

} elseif ( 'enrollment_no_pre' === $enrollment_action ) {
} elseif ( 'enrollment_allowed' === $enrollment_action ) {
// This space is for the no pre-enrollment call.
return array( 'error', 'This feature is not implemented yet.' );
} elseif ( 'enrollment_force' === $enrollment_action ) {
Expand All @@ -187,7 +187,7 @@ public function enrollment_send_request( $enrollment_data, $enrollment_action )

return $this->enrollment_request_api_call( $method, $body, $access_token );

} elseif ( 'enrollment_no_pre_force' === $enrollment_action ) {
} elseif ( 'enrollment_allowed_force' === $enrollment_action ) {
// This space is for the no pre-enrollment call.
return array( 'error', 'This feature is not implemented yet.' );
}
Expand All @@ -213,7 +213,7 @@ public function enrollment_send_request( $enrollment_data, $enrollment_action )

return $this->enrollment_request_api_call( $method, $body, $access_token );

} elseif ( 'enrollment_no_pre' === $enrollment_action ) {
} elseif ( 'enrollment_allowed' === $enrollment_action ) {
// This space is for the no pre-enrollment call.
return array( 'error', 'This feature is not implemented yet.' );
} elseif ( 'enrollment_force' === $enrollment_action ) {
Expand All @@ -237,7 +237,7 @@ public function enrollment_send_request( $enrollment_data, $enrollment_action )

return $this->enrollment_request_api_call( $method, $body, $access_token );

} elseif ( 'enrollment_no_pre_force' === $enrollment_action ) {
} elseif ( 'enrollment_allowed_force' === $enrollment_action ) {
// This space is for the no pre-enrollment call.
return array( 'error', 'This feature is not implemented yet.' );
}
Expand Down
23 changes: 19 additions & 4 deletions includes/model/class-openedx-woocommerce-plugin-enrollment.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,10 +244,25 @@ public function save_action( $post_id, $post ) {
$enrollment_arr['enrollment_order_id'] = sanitize_text_field( wp_unslash( '' ) );
}

if ( isset( $_POST['enrollment_action'] ) ) {
$enrollment_action = sanitize_text_field( wp_unslash( $_POST['enrollment_action'] ) );
} else {
$enrollment_action = sanitize_text_field( wp_unslash( '' ) );
if ( isset( $_POST['enrollment_process'] ) ) {

if ( isset( $_POST['enrollment_force'] ) && isset( $_POST['enrollment_allowed'] ) ) {
$enrollment_action = 'enrollment_allowed_force';
} elseif ( isset( $_POST['enrollment_force'] ) ) {
$enrollment_action = 'enrollment_force';
} elseif ( isset( $_POST['enrollment_allowed'] ) ) {
$enrollment_action = 'enrollment_allowed';
} else {
$enrollment_action = 'enrollment_process';
}
}

if ( isset( $_POST['save_no_process'] ) ) {
$enrollment_action = 'save_no_process';
}

if ( isset( $_POST['enrollment_sync'] ) ) {
$enrollment_action = 'enrollment_sync';
}

$this->save_enrollment( $post, $enrollment_arr, $enrollment_action );
Expand Down

0 comments on commit 66e2643

Please sign in to comment.