Portfolio: Custom SelectAjax for users - refs BT#18201

main/inc/ajax/course.ajax.php

@@ -303,6 +303,9 @@ switch ($action) {
                 $json['items'][] = [
                     'id' => $user['user_id'],
                     'text' => "{$user['username']} ($userCompleteName)",
+                    'avatarUrl' => UserManager::getUserPicture($user['id']),
+                    'username' => $user['username'],
+                    'completeName' => $userCompleteName,
                 ];
             }
 

main/inc/lib/PortfolioController.php

@@ -1534,8 +1534,6 @@ class PortfolioController
             }
 
             $frmStudent = new FormValidator('frm_student_list', 'get');
-            $slctStudentOptions = [];
-            $slctStudentOptions[$this->owner->getId()] = $this->owner->getCompleteName();
 
             $urlParams = http_build_query(
                 [
@@ -1545,15 +1543,27 @@ class PortfolioController
                 ]
             );
 
-            $frmStudent->addSelectAjax(
-                'user',
-                get_lang('SelectLearnerPortfolio'),
-                $slctStudentOptions,
-                [
-                    'url' => api_get_path(WEB_AJAX_PATH)."course.ajax.php?$urlParams",
-                    'placeholder' => get_lang('SearchStudent'),
-                ]
-            );
+            $frmStudent
+                ->addSelectAjax(
+                    'user',
+                    get_lang('SelectLearnerPortfolio'),
+                    [],
+                    [
+                        'url' => api_get_path(WEB_AJAX_PATH)."course.ajax.php?$urlParams",
+                        'placeholder' => get_lang('SearchStudent'),
+                        'formatResult' => SelectAjax::templateResultForUsersInCourse(),
+                        'formatSelection' => SelectAjax::templateSelectionForUsersInCourse(),
+                    ]
+                )
+                ->addOption(
+                    $this->owner->getCompleteName(),
+                    $this->owner->getId(),
+                    [
+                        'data-avatarurl' => UserManager::getUserPicture($this->owner->getId()),
+                        'data-username' => $this->owner->getUsername(),
+                    ]
+                )
+            ;
             $frmStudent->setDefaults(['user' => $this->owner->getId()]);
             $frmStudent->addHidden('action', 'details');
             $frmStudent->addHidden('cidReq', $this->course->getCode());
@@ -2536,9 +2546,7 @@ class PortfolioController
     }
 
     /**
-     * @throws \Exception
-     *
-     * @return \FormValidator
+     * @throws Exception
      */
     private function createFormStudentFilter(bool $listByUser = false): FormValidator
     {
@@ -2550,11 +2558,6 @@ class PortfolioController
             [],
             FormValidator::LAYOUT_BOX
         );
-        $slctStudentOptions = [];
-
-        if ($listByUser) {
-            $slctStudentOptions[$this->owner->getId()] = $this->owner->getCompleteName();
-        }
 
         $urlParams = http_build_query(
             [
@@ -2564,17 +2567,29 @@ class PortfolioController
             ]
         );
 
-        $frmStudentList->addSelectAjax(
+        /** @var SelectAjax $slctUser */
+        $slctUser = $frmStudentList->addSelectAjax(
             'user',
             get_lang('SelectLearnerPortfolio'),
-            $slctStudentOptions,
+            [],
             [
                 'url' => api_get_path(WEB_AJAX_PATH)."course.ajax.php?$urlParams",
                 'placeholder' => get_lang('SearchStudent'),
+                'formatResult' => SelectAjax::templateResultForUsersInCourse(),
+                'formatSelection' => SelectAjax::templateSelectionForUsersInCourse(),
             ]
         );
 
         if ($listByUser) {
+            $slctUser->addOption(
+                $this->owner->getCompleteName(),
+                $this->owner->getId(),
+                [
+                    'data-avatarurl' => UserManager::getUserPicture($this->owner->getId()),
+                    'data-username' => $this->owner->getUsername(),
+                ]
+            );
+
             $link = Display::url(
                 get_lang('BackToMainPortfolio'),
                 $this->baseUrl

main/inc/lib/formvalidator/Element/SelectAjax.php

@@ -149,4 +149,60 @@ JS;
 
         return $this->_prepareValue($value, $assoc);
     }
+
+    public static function templateResultForUsersInCourse(): string
+    {
+        return "function (state) {
+                if (state.loading) {
+                    return state.text;
+                }
+
+                var \$container = \$(
+                    '<div class=\"select2-result-user clearfix\">' +
+                        '<div class=\"select2-result-user__avatar pull-left\">' +
+                            '<img>' +
+                        '</div>' +
+                        '<div class=\"select2-result-user__info pull-left\">' +
+                            '<div class=\"select2-result-user__name\"></div>' +
+                            '<div class=\"select2-result-user__username small\"></div>' +
+                        '</div>' +
+                    '</div>'
+                );
+
+                \$container.find('.select2-result-user__avatar img')
+                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
+                    .css({ 'width': '40px', 'height': '40px' });
+                \$container.find('.select2-result-user__info').css({ 'paddingLeft': '6px' });
+                \$container.find('.select2-result-user__name').text(state.completeName);
+                \$container.find('.select2-result-user__username').text(state.username);
+
+                return \$container;
+            }";
+    }
+
+    public static function templateSelectionForUsersInCourse(): string
+    {
+        return "function (state) {
+                if (!state.id) {
+                    return state.text;
+                }
+    
+                if (!state.avatarUrl) {
+                    var avatarUrl = $(state.element).data('avatarurl');
+                    var username = $(state.element).data('username');
+                    
+                    state.avatarUrl = avatarUrl;
+                    state.username = username;
+                    state.completeName = state.text;
+                }
+    
+                var \$container = \$('<span><img> ' + state.completeName + '</span>');
+    
+                \$container.find('img')
+                    .prop({ 'src': state.avatarUrl, 'alt': state.username })
+                    .css({ 'width': '20px', 'height': '20px' });
+    
+                return \$container;
+            }";
+    }
 }