Change role access to use Select2, much was changed; But this still a…

… draft to #253

includes/admin.php

@@ -153,7 +153,7 @@ public static function admin_enqueue_scripts( $hook ) {
 		wp_enqueue_script( 'timeago' );
 		wp_enqueue_script( 'timeago-locale' );
 
-		wp_enqueue_script( 'wp-stream-admin', WP_STREAM_URL . 'ui/admin.js', array( 'jquery', 'select2', 'heartbeat' ) );
+		wp_enqueue_script( 'wp-stream-admin', WP_STREAM_URL . 'ui/admin.js', array( 'jquery', 'select2', 'heartbeat', 'underscore' ) );
 		wp_localize_script(
 			'wp-stream-admin',
 			'wp_stream',

includes/settings.php

@@ -60,6 +60,10 @@ public static function load() {
 		add_action( 'update_option_' . self::KEY, array( __CLASS__, 'updated_option_ttl_remove_records' ), 10, 2 );
 
 		add_filter( 'wp_stream_serialized_labels', array( __CLASS__, 'get_settings_translations' ) );
+
+		// Ajax call to return the array of users for Select2
+		add_action( 'wp_ajax_stream_find_user', array( __CLASS__, 'find_users' ) );
+
 	}
 
 	/**
@@ -84,9 +88,8 @@ public static function get_fields() {
 						array(
 							'name'        => 'role_access',
 							'title'       => __( 'Role Access', 'stream' ),
-							'type'        => 'multi_checkbox',
+							'type'        => 'user_n_role_select',
 							'desc'        => __( 'Users from the selected roles above will have permission to view Stream Records. However, only site Administrators can access Stream Settings.', 'stream' ),
-							'choices'     => self::get_roles(),
 							'default'     => array( 'administrator' ),
 						),
 						array(
@@ -292,6 +295,56 @@ public static function render_field( $field ) {
 					$after_field // xss ok
 				);
 				break;
+
+			case 'user_n_role_select':
+				$output = sprintf(
+					'<div id="%1$s[%2$s_%3$s]">',
+					esc_attr( self::KEY ),
+					esc_attr( $section ),
+					esc_attr( $name )
+				);
+
+				$current_value = (array) $current_value;
+				$data_roles    = self::get_roles_for_select2();
+				$data_selected = array();
+
+				foreach ( $current_value as $k => $value ){
+					if ( ! is_string( $value ) && ! is_numeric( $value ) )
+						continue;
+
+					if ( is_numeric( $value ) ){
+						$user = new WP_User( $value );
+						$data_selected[] = array(
+							'id' => $user->ID,
+							'text' => $user->display_name,
+						);
+					} else {
+						foreach ( $data_roles as $role ){
+							if ($role['id'] != $value)
+								continue;
+
+							$data_selected[] = $role;
+						}
+					}
+				}
+
+				$output .= sprintf(
+					'<input type="hidden" class="user_n_role_select" data-roles=\'%1$s\' data-selected=\'%2$s\' value="%3$s" />',
+					json_encode( $data_roles ),
+					json_encode( $data_selected ),
+					esc_attr( implode( ',', $current_value ) )
+				);
+
+				// Fallback if nothing is selected
+				$output .= sprintf(
+					'<input type="hidden" name="%1$s[%2$s_%3$s][]" class="user_n_role_select_placeholder" value="__placeholder__" />',
+					esc_attr( self::KEY ),
+					esc_attr( $section ),
+					esc_attr( $name )
+				);
+
+				$output .= '</div>';
+				break;
 			case 'multi_checkbox':
 				$output = sprintf(
 					'<div id="%1$s[%2$s_%3$s]"><fieldset>',
@@ -406,6 +459,19 @@ public static function get_default_connectors() {
 		return array_keys( WP_Stream_Connectors::$term_labels['stream_connector'] );
 	}
 
+	public static function get_roles_for_select2( $locked = array( 'administrator' ) ) {
+		$roles = self::get_roles();
+		$data_roles = array();
+		foreach ( $roles as $key => $role ){
+			$data_roles[] = array(
+				'id'     => $key,
+				'text'   => $role,
+				'locked' => ( in_array( $key, $locked ) ? true : false )
+			);
+		}
+		return $data_roles;
+	}
+
 	/**
 	 * Get an array of active Connectors
 	 *
@@ -465,4 +531,52 @@ public static function updated_option_ttl_remove_records( $old_value, $new_value
 			do_action( 'wp_stream_auto_purge' );
 		}
 	}
+
+	public static function find_users(){
+		if ( ! defined( 'DOING_AJAX' ) ) return;
+		$response = (object) array(
+			'status' => false,
+			'message' => __( 'There was an error in the request', 'stream' ),
+		);
+
+		$request = (object) array(
+			'find' => ( isset( $_POST['find'] )? esc_attr( trim( $_POST['find'] ) ) : '' ),
+		);
+
+		add_filter( 'user_search_columns', array( __CLASS__, '_filter_user_search_columns' ), 10, 3 );
+
+		$users = new WP_User_Query(
+			array(
+				'search' => "*{$request->find}*",
+				'search_columns' => array(
+					'user_login',
+					'user_nicename',
+					'user_email',
+					'user_url',
+				),
+			)
+		);
+		if ( $users->get_total() === 0 )
+			exit( json_encode( $response ) );
+
+		$response->status  = true;
+		$response->message = '';
+
+		$response->users = array();
+		foreach ( $users->results as $key => $user ) {
+			$args = array(
+				'id' => $user->ID,
+				'text' => $user->display_name,
+			);
+
+			$response->users[] = $args;
+		}
+
+		exit( json_encode( $response ) );
+	}
+
+	public static function _filter_user_search_columns( $search_columns, $search, $query ){
+		$search_columns[] = 'display_name';
+		return $search_columns;
+	}
 }

ui/admin.css

@@ -165,3 +165,8 @@
 .toplevel_page_wp_stream .new-row.fadeout {
 	background-color: transparent;
 }
+
+
+.wp_stream_screen .user_n_role_select {
+	width:350px;
+}

ui/admin.js

@@ -214,3 +214,94 @@ jQuery(function($){
 	}).trigger( 'updated' );
 
 });
+
+
+(function ( window, $, _ ) {
+	$( document ).on({
+		'ready' : function ( event ) {
+			var $page = $( '.wp_stream_screen' );
+
+
+
+			// Rather use each thingy as one scope, to avoid conflicts...
+			(function( event, $, _, $page ){
+				"use strict"
+				if ( $page.lenght === 0 ){
+					return;
+				}
+
+				var $fields = $page.find( '.user_n_role_select' );
+
+				$fields.each(function( k, el ){
+					var $input = $(el),
+						$placeholder = $input.next( '.user_n_role_select_placeholder' ),
+						roles = $input.data('roles');
+
+					$input.select2({
+						multiple: true,
+						ajax: {
+							type: "POST",
+							url: ajaxurl,
+							dataType: 'json',
+							quietMillis: 500,
+							data: function (term, page) { // page is the one-based page number tracked by Select2
+								return {
+									'find': term, //search term
+									'limit': 10, // page size
+									'pager': page, // page number
+									'action': 'stream_find_user'
+								};
+							},
+							results: function (data, page) {
+								var answer = {
+										results:[
+											{
+												text: "Roles",
+												children: roles
+											},
+											{
+												text: "Users",
+												children: []
+											}
+										]
+									};
+
+								if (data==0 || data=='' || data.status!==true)
+									return answer;
+
+								$.each( data.users, function ( k, user ){
+									if ( _.contains( roles, user.id ) )
+										user.disabled = true;
+								} );
+
+								answer.results[1].children = data.users;
+								// notice we return the value of more so Select2 knows if more results can be loaded
+								return answer;
+							}
+						},
+						initSelection: function (item, callback) {
+							callback( item.data( 'selected' ) );
+						}
+					}).on({
+						'change' : function (e){
+							$input.siblings( '.user_n_role_select_value' ).off().remove();
+
+							if ( typeof e.val === 'undefined' ){
+								e.val = $input.val().split( ',' );
+							}
+
+							_.each( e.val.reverse(), function( value, key, list ){
+								if ( value === '__placeholder__' ){
+									return;
+								}
+								$placeholder.after( $placeholder.clone( true ).attr( 'class', 'user_n_role_select_value' ).val( value ) );
+							});
+						}
+					});
+
+				});
+
+			})( event, $, _, $page )
+		}
+	});
+})( window, jQuery.noConflict(), _.noConflict() );