Add username completion to tracker access page

todosrht/blueprints/tracker.py

@@ -5,10 +5,11 @@ from todosrht.access import get_tracker
 from todosrht.search import apply_search
 from todosrht.tickets import get_last_seen_times, get_comment_counts
 from todosrht.tickets import submit_ticket
-from todosrht.types import TicketSubscription, User
+from todosrht.trackers import get_recent_users
 from todosrht.types import Event, UserAccess
-from todosrht.types import Tracker, Ticket, TicketAccess
 from todosrht.types import Label, TicketLabel
+from todosrht.types import TicketSubscription, User
+from todosrht.types import Tracker, Ticket, TicketAccess
 from todosrht.urls import tracker_url, ticket_url
 from todosrht.webhooks import TrackerWebhook, UserWebhook
 from srht.config import cfg
@@ -209,9 +210,10 @@ def settings_details_POST(owner, name):
 
 
 def render_tracker_access(tracker, **kwargs):
+    recent_users = get_recent_users(tracker)
     return render_template("tracker-access.html",
         view="access", tracker=tracker, access_type_list=TicketAccess,
-        access_help_map=access_help_map, **kwargs)
+        access_help_map=access_help_map, recent_users=recent_users, **kwargs)
 
 
 @tracker.route("/<owner>/<name>/settings/access")

todosrht/templates/tracker-access.html

@@ -109,8 +109,15 @@
           id="username"
           name="username"
           placeholder="~{{ current_user.username }}"
+          autocomplete="off"
+          list="user-list"
           value="{{username or ""}}"
         />
+        <datalist id="user-list">
+          {% for u in recent_users %}
+            <option value="~{{ u }}" />
+          {% endfor %}
+        </datalist>
         {{ valid.summary("username") }}
       </div>
 
@@ -182,3 +189,18 @@
   </div>
 </div>
 {% endblock %}
+
+{% block scripts %}
+<script type="text/javascript">
+  {% include "autocomplete.js" %}
+
+  (function() {
+    const input = document.getElementById("username");
+    const list = document.getElementById("user-list");
+    if (input && list) {
+      autocomplete = new UserAutoComplete(input, list);
+      autocomplete.register();
+    }
+  })();
+</script>
+{% endblock %}