Made text modal generic and reusable.

Focus on keyword when modal opens.
bloomberg · Aug 12, 2024 · 673556c · 673556c
1 parent c9d4cd8
commit 673556c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/static/js/tasks_browse.js b/static/js/tasks_browse.js
@@ -1,5 +1,6 @@
 ;(function(){
 var dateModalInfo = '';
+var textModalFieldName = '';
 
 function dirtyView(showHint = true) {
     if (filter_data.changed === false) {
@@ -108,16 +109,33 @@ $(document).ready(function() {
         refresh();
     });
 
-    $('#assignUserModal').on('show.bs.modal', function(event) {
-        const match = /assign_user=([^&#=]*)/.exec(window.location.search);
-        match.length && $('#assign_user').val(match[1]);
+    $('#textModal').on('show.bs.modal', function(event) {
+        const button = $(event.relatedTarget);
+
+        // Get the target field name for the url parameter value for this modal.
+        textModalFieldName = button.data('info');
+
+        // Check if a value should be loaded into the modal from the url parameter.
+        const match = new RegExp(`${textModalFieldName}=([^&#=]*)`).exec(window.location.search);
+        match && $('#text-value').val(match[1]);
+    });
+
+    $('#textModal').on('shown.bs.modal', function () {
+        $('#text-value').focus();
+    })
+
+    $('#text-value').keypress(function(event) {
+        // Enter key pressed.
+        if (event.which === 13) {
+            $('#saveTextModal').click();
+        }
     });
 
-    $('#saveAssignUserModal').click(function() {
-        var modal = $('#assignUserModal');
+    $('#saveTextModal').click(function() {
+        var modal = $('#textModal');
 
-        var keyword = modal.find('.modal-body #assign_user').val();
-        filter_data['assign_user'] = keyword;
+        var fieldValue = modal.find('.modal-body #text-value').val();
+        filter_data[textModalFieldName] = fieldValue;
 
         modal.modal('hide');
         refresh();

diff --git a/templates/projects/tasks_browse.webpack.ejs b/templates/projects/tasks_browse.webpack.ejs
@@ -289,7 +289,7 @@
                 {% endif %}
                 {% if 'assigned_users' in filter_data.display_columns %}
                 <th>
-                   <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#assignUserModal" data-info="assign_user">Filter</button>
+                   <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#textModal" data-info="assign_user">Filter</button>
                 </th>
                 {% endif %}
                 {% if 'in_progress' in filter_data.display_columns %}
@@ -563,24 +563,24 @@
   </div>
 </div>
 
-<!-- Assign User Modal -->
-<div class="modal fade" id="assignUserModal" tabindex="-1" role="dialog" aria-labelledby="assignUserModalLabel">
+<!-- Text Modal -->
+<div class="modal fade" id="textModal" tabindex="-1" role="dialog" aria-labelledby="textModalLabel">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="assignUserModalLabel">Edit Filter</h4>
+        <h4 class="modal-title" id="textModalLabel">Edit Filter</h4>
       </div>
       <div class="modal-body">
         <div class="form-group">
             <div class="input-group">
                 <div class="input-group-addon" style="width: 70px;">Keyword:</div>
-                <input class="form-control input-sm" type="text" id="assign_user" style="width: 180px;" placeholder="keyword"/>
+                <input class="form-control input-sm" type="text" id="text-value" style="width: 180px;" placeholder="keyword" />
             </div>
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" id='saveAssignUserModal'>Search</button>
+        <button type="button" class="btn btn-primary" id='saveTextModal'>Search</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
     </div>