Constants
4 days ago
Accordion.php
4 days ago
Alert.php
4 days ago
AttachmentCard.php
4 days ago
Avatar.php
4 days ago
Badge.php
4 days ago
BaseComponent.php
4 days ago
Button.php
4 days ago
ConfirmationModal.php
4 days ago
CourseFilter.php
4 days ago
DateFilter.php
4 days ago
DropdownFilter.php
4 days ago
EmptyState.php
4 days ago
FileUploader.php
4 days ago
InputField.php
4 days ago
Modal.php
4 days ago
Nav.php
4 days ago
Pagination.php
4 days ago
Popover.php
4 days ago
PreviewTrigger.php
4 days ago
Progress.php
4 days ago
SearchFilter.php
4 days ago
Sorting.php
4 days ago
StarRating.php
4 days ago
StarRatingInput.php
4 days ago
StatusSelect.php
4 days ago
SvgIcon.php
4 days ago
Table.php
4 days ago
Tabs.php
4 days ago
Tooltip.php
4 days ago
WPEditor.php
4 days ago
StatusSelect.php
174 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Tutor Component: StatusSelect |
| 4 | * |
| 5 | * Provides a fluent builder for rendering status selection dropdowns. |
| 6 | * Direct replacement for the legacy select-with-icon. |
| 7 | * |
| 8 | * @package Tutor\Components |
| 9 | * @author Themeum |
| 10 | * @link https://themeum.com |
| 11 | * @since 4.0.0 |
| 12 | */ |
| 13 | |
| 14 | namespace Tutor\Components; |
| 15 | |
| 16 | defined( 'ABSPATH' ) || exit; |
| 17 | |
| 18 | use TUTOR\Icon; |
| 19 | |
| 20 | /** |
| 21 | * StatusSelect Component Class. |
| 22 | * |
| 23 | * Example usage: |
| 24 | * ``` |
| 25 | * StatusSelect::make() |
| 26 | * ->options([ |
| 27 | * 'publish' => ['label' => 'Published', 'variant' => 'success', 'icon' => Icon::CHECK_MARK], |
| 28 | * 'pending' => ['label' => 'Pending', 'variant' => 'warning', 'icon' => Icon::CLOCK], |
| 29 | * ]) |
| 30 | * ->selected('publish') |
| 31 | * ->action('tutor_change_course_status') |
| 32 | * ->data(['id' => 123]) |
| 33 | * ->render(); |
| 34 | * ``` |
| 35 | */ |
| 36 | class StatusSelect extends BaseComponent { |
| 37 | |
| 38 | /** |
| 39 | * List of options. |
| 40 | * |
| 41 | * [ 'value' => [ 'label' => 'Text', 'variant' => 'success', 'icon' => 'slug' ] ] |
| 42 | * |
| 43 | * @var array |
| 44 | */ |
| 45 | protected $options = array(); |
| 46 | |
| 47 | /** |
| 48 | * Selected value. |
| 49 | * |
| 50 | * @var string |
| 51 | */ |
| 52 | protected $selected = ''; |
| 53 | |
| 54 | /** |
| 55 | * AJAX action. |
| 56 | * |
| 57 | * @var string |
| 58 | */ |
| 59 | protected $action = ''; |
| 60 | |
| 61 | /** |
| 62 | * Additional data attributes. |
| 63 | * |
| 64 | * @var array |
| 65 | */ |
| 66 | protected $data = array(); |
| 67 | |
| 68 | /** |
| 69 | * Set options. |
| 70 | * |
| 71 | * @param array $options List of options. |
| 72 | * @return self |
| 73 | */ |
| 74 | public function options( array $options ): self { |
| 75 | $this->options = $options; |
| 76 | return $this; |
| 77 | } |
| 78 | |
| 79 | /** |
| 80 | * Set selected value. |
| 81 | * |
| 82 | * @param string $selected Selected value. |
| 83 | * @return self |
| 84 | */ |
| 85 | public function selected( string $selected ): self { |
| 86 | $this->selected = $selected; |
| 87 | return $this; |
| 88 | } |
| 89 | |
| 90 | /** |
| 91 | * Set AJAX action. |
| 92 | * |
| 93 | * @param string $action AJAX action name. |
| 94 | * @return self |
| 95 | */ |
| 96 | public function action( string $action ): self { |
| 97 | $this->action = $action; |
| 98 | return $this; |
| 99 | } |
| 100 | |
| 101 | /** |
| 102 | * Set additional data attributes. |
| 103 | * |
| 104 | * @param array $data Key-value pairs for data attributes. |
| 105 | * @return self |
| 106 | */ |
| 107 | public function data( array $data ): self { |
| 108 | $this->data = array_merge( $this->data, $data ); |
| 109 | return $this; |
| 110 | } |
| 111 | |
| 112 | /** |
| 113 | * Get the component HTML. |
| 114 | * |
| 115 | * @return string |
| 116 | */ |
| 117 | public function get(): string { |
| 118 | $selected_option = $this->options[ $this->selected ] ?? null; |
| 119 | $current_variant = $selected_option['variant'] ?? 'default'; |
| 120 | |
| 121 | // Prepare Alpine.js props. |
| 122 | $alpine_props = wp_json_encode( |
| 123 | array( |
| 124 | 'selected' => $this->selected, |
| 125 | 'action' => $this->action, |
| 126 | 'data' => $this->data, |
| 127 | 'variants' => array_map( fn( $opt ) => $opt['variant'] ?? 'default', $this->options ), |
| 128 | ) |
| 129 | ); |
| 130 | |
| 131 | ob_start(); |
| 132 | ?> |
| 133 | <div |
| 134 | class="tutor-status-select tutor-status-select-<?php echo esc_attr( $current_variant ); ?>" |
| 135 | x-data="tutorStatusSelect(<?php echo esc_attr( $alpine_props ); ?>)" |
| 136 | :class="variantClasses" |
| 137 | <?php $this->render_attributes(); ?> |
| 138 | > |
| 139 | <div class="tutor-status-select-icon"> |
| 140 | <div class="tutor-status-select-icon-wrapper" x-show="!isLoading"> |
| 141 | <?php foreach ( $this->options as $value => $option ) : ?> |
| 142 | <?php if ( ! empty( $option['icon'] ) ) : ?> |
| 143 | <span x-show="selectedValue === '<?php echo esc_attr( $value ); ?>'" <?php echo $this->selected !== $value ? 'style="display: none;"' : ''; ?>> |
| 144 | <?php SvgIcon::make()->name( $option['icon'] )->render(); ?> |
| 145 | </span> |
| 146 | <?php endif; ?> |
| 147 | <?php endforeach; ?> |
| 148 | </div> |
| 149 | <span x-show="isLoading" style="display: none;"> |
| 150 | <?php SvgIcon::make()->name( Icon::SPINNER )->size( 14 )->attr( 'class', 'tutor-animate-spin' )->render(); ?> |
| 151 | </span> |
| 152 | </div> |
| 153 | |
| 154 | <select |
| 155 | x-model="selectedValue" |
| 156 | @change="updateStatus" |
| 157 | :disabled="isLoading" |
| 158 | > |
| 159 | <?php foreach ( $this->options as $value => $option ) : ?> |
| 160 | <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $this->selected, $value ); ?>> |
| 161 | <?php echo esc_html( $option['label'] ?? '' ); ?> |
| 162 | </option> |
| 163 | <?php endforeach; ?> |
| 164 | </select> |
| 165 | |
| 166 | <div class="tutor-status-select-arrow"> |
| 167 | <?php SvgIcon::make()->name( Icon::CHEVRON_DOWN_2 )->render(); ?> |
| 168 | </div> |
| 169 | </div> |
| 170 | <?php |
| 171 | return ob_get_clean(); |
| 172 | } |
| 173 | } |
| 174 |