Merge pull request #2304 from cisagov/meoward/2228-assign-to-me

Ticket #2228: Assign investigator to self

src/registrar/assets/js/get-gov-admin.js

@@ -137,6 +137,47 @@ function openInNewTab(el, removeAttribute = false){
     prepareDjangoAdmin();
 })();
 
+
+/** An IIFE for the "Assign to me" button under the investigator field in DomainRequests.
+** This field uses the "select2" selector, rather than the default. 
+** To perform data operations on this - we need to use jQuery rather than vanilla js. 
+*/
+(function (){
+    let selector = django.jQuery("#id_investigator")
+    let assignSelfButton = document.querySelector("#investigator__assign_self");
+    if (!selector || !assignSelfButton) {
+        return;
+    }
+
+    let currentUserId = assignSelfButton.getAttribute("data-user-id");
+    let currentUserName = assignSelfButton.getAttribute("data-user-name");
+    if (!currentUserId || !currentUserName){
+        console.error("Could not assign current user: no values found.")
+        return;
+    }
+
+    // Hook a click listener to the "Assign to me" button.
+    // Logic borrowed from here: https://select2.org/programmatic-control/add-select-clear-items#create-if-not-exists
+    assignSelfButton.addEventListener("click", function() {
+        if (selector.find(`option[value='${currentUserId}']`).length) {
+            // Select the value that is associated with the current user.
+            selector.val(currentUserId).trigger("change");
+        } else { 
+            // Create a DOM Option that matches the desired user. Then append it and select it.
+            let userOption = new Option(currentUserName, currentUserId, true, true);
+            selector.append(userOption).trigger("change");
+        }
+    });
+
+    // Listen to any change events, and hide the parent container if investigator has a value.
+    selector.on('change', function() {
+        // The parent container has display type flex.
+        assignSelfButton.parentElement.style.display = this.value === currentUserId ? "none" : "flex";
+    });
+    
+    
+
+})();
 /** An IIFE for pages in DjangoAdmin that use a clipboard button
 */
 (function (){

src/registrar/assets/sass/_theme/_admin.scss

@@ -782,3 +782,7 @@ div.dja__model-description{
         padding: 6px 8px 10px 8px;
     }
 }
+
+.usa-button--dja-link-color {
+    color: var(--link-fg);
+}

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -174,5 +174,19 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                 {% endif %}
             </span>
         </div>
+    {% elif field.field.name == "investigator" and not field.is_readonly %}
+        <div class="flex-container">
+            <label aria-label="Assign yourself as the investigator"></label>
+            <button id="investigator__assign_self" 
+            data-user-name="{{ request.user }}" 
+            data-user-id="{{ request.user.id }}" 
+            type="button" 
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-top-2 margin-bottom-1 margin-left-1">
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+                    <use xlink:href="/public/img/sprite.svg#group_add"></use>
+                </svg>
+                <span>Assign to me</span>
+            </button>
+        </div>
     {% endif %}
 {% endblock after_help_text %}