don't mix avatar URL with label text, fixes #3585

Closes #3585

Merge request studip/studip!2491

app/views/multipersonsearch/js_form.php

@@ -17,18 +17,18 @@
             <a href="#" class="quickfilter" data-quickfilter="<?= md5($title); ?>"><?= htmlReady($title); ?> (<?= count($users); ?>)</a>
             <select multiple="multiple" id="<?= $name . '_quickfilter_' . md5($title); ?>" style="display: none;">
             <? foreach($users as $user) : ?>
-                <option value="<?= $user->id ?>"><?= Avatar::getAvatar($user->id)->getURL(Avatar::MEDIUM); ?> -- <?= htmlReady($user->getFullName('full_rev')) ?> -- <?= htmlReady($user->perms) ?> (<?= htmlReady($user->username)?>)</option>
+                <option value="<?= $user->id ?>" data-avatar="<?= htmlReady(Avatar::getAvatar($user->id)->getURL(Avatar::MEDIUM)) ?>"><?= htmlReady($user->getFullName('full_rev')) ?> -- <?= htmlReady($user->perms) ?> (<?= htmlReady($user->username)?>)</option>
             <? endforeach; ?>
              </select>
         <? endforeach; ?></p>
         <select multiple="multiple" id="<?= $name . '_selectbox'; ?>" name="<?= $name . '_selectbox'; ?>[]" data-init-js="true">
             <? foreach ($defaultSelectableUsers as $person): ?>
-                <option value="<?= $person->id ?>"><?= Avatar::getAvatar($person->id)->getURL(Avatar::MEDIUM); ?> -- <?= htmlReady($person->getFullName('full_rev')) ?> -- <?= htmlReady($person->perms) ?> (<?= htmlReady($person->username)?>)</option>
+                <option value="<?= $person->id ?>" data-avatar="<?= htmlReady(Avatar::getAvatar($person->id)->getURL(Avatar::MEDIUM)) ?>"><?= htmlReady($person->getFullName('full_rev')) ?> -- <?= htmlReady($person->perms) ?> (<?= htmlReady($person->username)?>)</option>
             <? endforeach; ?>
         </select>
         <select multiple="multiple" id="<?= $name . '_selectbox_default'; ?>" style="display: none;">
             <? foreach ($defaultSelectedUsers as $person): ?>
-                <option value="<?= $person->id ?>"><?= Avatar::getAvatar($person->id)->getURL(Avatar::MEDIUM); ?> -- <?= htmlReady($person->getFullName('full_rev')) ?> -- <?= htmlReady($person->perms) ?> (<?= htmlReady($person->username)?>)</option>
+                <option value="<?= $person->id ?>" data-avatar="<?= htmlReady(Avatar::getAvatar($person->id)->getURL(Avatar::MEDIUM)) ?>"><?= htmlReady($person->getFullName('full_rev')) ?> -- <?= htmlReady($person->perms) ?> (<?= htmlReady($person->username)?>)</option>
             <? endforeach; ?>
         </select>
 

resources/assets/javascripts/lib/multi_person_search.js

@@ -62,12 +62,13 @@ const MultiPersonSearch = {
             count += MultiPersonSearch.append(
                 $(this).val(),
                 $(this).text(),
+                $(this).data('avatar'),
                 MultiPersonSearch.isAlreadyMember($(this).val())
             );
         });
 
         if (count == 0) {
-            MultiPersonSearch.append('--', $gettext(' Dieser Filter enthält keine (neuen) Personen.'), true);
+            MultiPersonSearch.append('--', $gettext(' Dieser Filter enthält keine (neuen) Personen.'), null, true);
         }
 
         MultiPersonSearch.refresh();
@@ -95,14 +96,15 @@ const MultiPersonSearch = {
                 $.each(data, function(i, item) {
                     searchcount += MultiPersonSearch.append(
                         item.user_id,
-                        item.avatar + ' -- ' + item.text,
+                        item.text,
+                        item.avatar,
                         item.member
                     );
                 });
                 MultiPersonSearch.refresh();
 
                 if (searchcount == 0) {
-                    MultiPersonSearch.append('--', not_found_template({ needle: searchterm }), true);
+                    MultiPersonSearch.append('--', not_found_template({ needle: searchterm }), null, true);
                     MultiPersonSearch.refresh();
                 }
             }
@@ -135,13 +137,16 @@ const MultiPersonSearch = {
         MultiPersonSearch.removeAllNotSelected();
     },
 
-    append: function(value, text, selected) {
+    append: function(value, text, avatar, disabled) {
         if ($('#' + this.name + '_selectbox option[value=' + value + ']').length == 0) {
             $('#' + this.name + '_selectbox').multiSelect('addOption', {
                 value: value,
                 text: text,
-                disabled: selected
+                disabled: disabled
             });
+            if (avatar) {
+                $('#' + this.name + '_selectbox option[value=' + value + ']').attr('style', 'background-image: url(' + avatar + ')');
+            }
             return 1;
         }
         return 0;

resources/assets/javascripts/studip-jquery.multi-select.tweaks.js

@@ -38,15 +38,13 @@ import { $gettext } from './lib/gettext.js';
 
     MultiSelect.prototype.generateLisFromOption = function (option, index, $container) {
         let $option = $(option),
-            chunks = $option.html().split(/\s--\s/);
+            chunks = $option.text().split(/\s--\s/);
         if (index === -1) {
             $option.prop('disabled', true);
             index = undefined;
         }
 
         if (chunks.length > 1) {
-            $option.attr('style', 'background-image: url(' + encodeURI(chunks.shift().trim())  + ')');
-
             $option.text(chunks.join("\n"));
 
             if ($option.is(':disabled')) {