Added autocomplete input field for assigning bulk default user

Closes #2510

Author: pandafy

tcms/static/js/index.js

@@ -88,6 +88,20 @@ $(() => {
         window.markdownEditor = initSimpleMDE(this, uploadField)
     })
 
+    $('.dropdown.dropdown-keep-open').on('hide.bs.dropdown', function (ev) {
+        // Disable automatic closing of dropdown menu.
+        // This is required for using typeahead fields in submenu options.
+        return false
+    })
+
+    $(document).on('click', function (ev) {
+        if (!$(ev.target).parents('.dropdown.dropdown-keep-open').length) {
+            // The target is not inside the dropdown element.
+            // Close open dropdowns
+            $('.dropdown.dropdown-keep-open.open').removeClass('open')
+        }
+    })
+
     // for debugging in browser
     window.jsonRPC = jsonRPC
 })

tcms/testplans/static/testplans/js/get.js

@@ -539,16 +539,52 @@ function toolbarEvents (testPlanId, permissions) {
         return false
     })
 
-    $('#default-tester-button').click(function (ev) {
-        $(this).parents('.dropdown').toggleClass('open')
+    $('input.user-field.typeahead').on('focusin', function () {
+        // Prevents sub-menu options from hidding when
+        // selecting typeahead suggestion.
+        $(this).parents('ul').css('display', 'block')
+    })
+
+    $('input.user-field.typeahead').typeahead({
+        minLength: 3,
+        highlight: true
+    }, {
+        name: 'default-tester-autocomplete',
+        // will display up to X results even if more were returned
+        limit: 100,
+        async: true,
+        display: function (element) {
+            return element.username
+        },
+        source: function (query, processSync, processAsync) {
+            jsonRPC('User.filter', { username__icontains: query }, function (data) {
+                return processAsync(data)
+            })
+        }
+    })
+
+    $('#default-tester-button').click(function () {
+        addDefaultTester()
+    })
+
+    $('#id_tags').keyup(function (event) {
+        if (event.keyCode === 13) {
+            addDefaultTester()
+        };
+    })
+
+    function addDefaultTester () {
+        $('#default-tester-button').parents('.dropdown').removeClass('open')
+        // Closes the sub-menu option that contains input field
+        $('#default-tester-button').parents('ul').css('display', '')
         const selectedCases = getSelectedTestCases()
 
         if (!selectedCases.length) {
             alert($('#test_plan_pk').data('trans-no-testcases-selected'))
             return false
         }
 
-        const emailOrUsername = window.prompt($('#test_plan_pk').data('trans-username-email-prompt'))
+        const emailOrUsername = $('input.typeahead.user-field.tt-input').val()
 
         if (!emailOrUsername) {
             return false
@@ -558,7 +594,7 @@ function toolbarEvents (testPlanId, permissions) {
             testPlanId, permissions)
 
         return false
-    })
+    }
 
     $('#bulk-reviewer-button').click(function (ev) {
         $(this).parents('.dropdown').toggleClass('open')

tcms/testplans/templates/testplans/get.html

@@ -9,6 +9,7 @@
 {% block body_class %}cards-pf{% endblock %}
 
 {% block contents %}
+<span class="permissions"> {{ perms.testcases }} </span>
 <div class="container-cards-pf">
     <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
     <h1 class="col-md-12" style="margin-top: 0">
@@ -106,7 +107,7 @@ <h2 class="card-pf-title">
                             <div class="col-sm-12 toolbar-pf-filter" style="padding-left:0">
                                 <form class="toolbar-pf-actions">
                                     <div class="form-group" style="padding-left:10px; padding-right:0; border:0">
-                                        <div class="dropdown btn-group">
+                                        <div class="dropdown btn-group dropdown-keep-open" data-bs-auto-close="false">
                                             <button class="btn btn-link dropdown-toggle"
                                                     type="button" id="testCaseActions"
                                                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -168,14 +169,20 @@ <h2 class="card-pf-title">
                                                     {% endfor %}
                                                     </ul>
                                                 </li>
-
-                                                <li>
-                                                    <a id="default-tester-button" href="#">
+                                                <li class="dropdown-submenu">
+                                                    <a href="#">
                                                         <span class="fa fa-search"></span>
                                                         {% trans 'Default tester' %}
                                                     </a>
+                                                    <ul class="dropdown-menu dropdown-menu-right js-toolbar-default-tester" style="min-width: 220px;padding: 5px;">
+                                                        <div style="display: inline-block;">
+                                                            <input type="text" class="form-control typeahead user-field">
+                                                        </div>
+                                                        <button class="btn btn-default" title="Apply" style="margin-left: 5px;" id="default-tester-button">
+                                                            <span class="fa fa-check"></span>
+                                                        </button>
+                                                    </ul>
                                                 </li>
-
                                                 <li>
                                                     <a id="bulk-reviewer-button" href="#">
                                                         <span class="fa fa-history"></span>