wip

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

@@ -146,7 +146,7 @@ function handlePortfolioSelection() {
         suborganizationDropdown.empty();
 
         // update portfolio senior official
-        // need to add url and name
+        updatePortfolioSeniorOfficial(portfolioSeniorOfficialField, portfolio.senior_official);
 
         // update portfolio organization type
         portfolioOrgType.innerText = portfolio.organization_type;
@@ -171,38 +171,47 @@ function handlePortfolioSelection() {
 
     }
 
-    function updatePortfolioSeniorOfficial(portfoliorSeniorOfficialField, senior_official) {
-        let seniorOfficialAddUrl = "/admin/registrar/seniorofficial/add/";
+    function updatePortfolioSeniorOfficial(seniorOfficialField, senior_official) {
 
-        let readonlySeniorOfficial = portfolioSeniorOfficialField.querySelector(".readonly");
+        let seniorOfficial = seniorOfficialField.querySelector(".readonly");
+        let seniorOfficialAddress = seniorOfficialField.querySelector(".dja-address-contact-list");
+        
          
-            if (senior_official) {
+        if (senior_official) {
+            let seniorOfficialName = [senior_official.first_name, senior_official.last_name].join(' ');
+            let seniorOfficialLink = `<a href=/admin/registrar/seniorofficial/${senior_official.id}/change/ class='test'>${seniorOfficialName}</a>`
+            seniorOfficial.innerHTML = seniorOfficialName ? seniorOfficialLink : "-";
+            updateSeniorOfficialContactInfo(seniorOfficialAddress, senior_official);
+            showElement(portfolioSeniorOfficialAddress);
+        } else {
+            portfolioSeniorOfficial.innerText = "No senior official found.";
+            hideElement(portfolioSeniorOfficialAddress);
+        }
+    }
 
-            } else {
-                
+    function updateSeniorOfficialContactInfo(addressField, senior_official) {
+    
+        const titleSpan = addressField.querySelector(".contact_info_title");
+        const emailSpan = addressField.querySelector(".contact_info_email");
+        const phoneSpan = addressField.querySelector(".contact_info_phone");
+        const hiddenInput = addressField.querySelector("input");
+        const copyButton = addressField.querySelector(".admin-icon-group");
+
+        if (titleSpan) { 
+            titleSpan.textContent = senior_official.title || "None";
+        };
+        if (emailSpan) {
+            emailSpan.textContent = senior_official.email || "None";
+            if (senior_official.email) {
+                hiddenInput.value = data.email;
+                showElement(copyButton);
+            }else {
+                hideElement(copyButton);
             }
-           
-                    if (statusCode === 404) {
-                        readonlySeniorOfficial.innerHTML = `<a href="${seniorOfficialAddUrl}">No senior official found. Create one now.</a>`;
-                        console.warn("Record not found: " + data.error);
-                    }else {
-                        console.error("Error in AJAX call: " + data.error);
-                    }
-                    return;
-                }
-
-                // Update the "contact details" blurb beneath senior official
-                updateContactInfo(data);
-                showElement(contactList.parentElement);
-                
-                // Get the associated senior official with this federal agency
-                let seniorOfficialId = data.id;
-                let seniorOfficialName = [data.first_name, data.last_name].join(" ");
-      
-                if (readonlySeniorOfficial) {
-                    let seniorOfficialLink = `<a href=/admin/registrar/seniorofficial/${seniorOfficialId}/change/ class='test'>${seniorOfficialName}</a>`
-                    readonlySeniorOfficial.innerHTML = seniorOfficialName ? seniorOfficialLink : "-";
-                }
+        }
+        if (phoneSpan) {
+            phoneSpan.textContent = senior_official.phone || "None";
+        };
     }
 
     function updatePortfolioFieldsDataDynamicDisplay() {
@@ -217,9 +226,9 @@ function handlePortfolioSelection() {
             let federalAgencyValue = portfolioFederalAgency.innerText;
             let portfolioOrgTypeValue = portfolioOrgType.innerText;
 
-            if (federalAgencyValue && portfolioOrgTypeValue) {
-                handleFederalAgencyChange(federalAgencyValue, portfolioOrgTypeValue, portfolioOrgNameField, portfolioFederalTypeField);
-            }
+            // if (federalAgencyValue && portfolioOrgTypeValue) {
+            //     handleFederalAgencyChange(federalAgencyValue, portfolioOrgTypeValue, portfolioOrgNameField, portfolioFederalTypeField);
+            // }
             // Handle dynamically hiding the urbanization field
             let portfolioStateTerritoryValue = portfolioStateTerritory.innerText;
             if (portfolioUrbanizationField && portfolioStateTerritoryValue) {

src/registrar/templates/admin/input_with_clipboard.html

@@ -4,7 +4,25 @@
 Template for an input field with a clipboard
 {% endcomment %}
 
-{% if not invisible_input_field %}
+{% if empty_field %}
+<div class="admin-icon-group">
+    <input aria-hidden="true" class="display-none" value="">
+    <button 
+    class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-left-1 usa-button--icon copy-to-clipboard" 
+    type="button"
+    >
+        <div class="no-outline-on-click">
+            <svg 
+            class="usa-icon"
+            >
+                <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
+            </svg>
+            <!-- the span is targeted in JS, do not remove -->
+            <span>Copy</span>
+        </div>
+    </button>
+</div>
+{% elif not invisible_input_field %}
 <div class="admin-icon-group">
     {{ field }}
     <button 

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

@@ -38,7 +38,14 @@
         {% else %}
             None<br>
         {% endif %}
-
+    {% elif fields_always_present %}
+        <span class="contact_info_title"></span>
+        </br>
+        <span class="contact_info_email"></span>
+        {% include "admin/input_with_clipboard.html" with field=user empty_field=True %}
+        <br>
+        <span class="contact_info_phone"></span>
+        <br>
     {% elif not hide_no_contact_info_message %}
         No additional contact information found.<br>
     {% endif %}

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

@@ -339,7 +339,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
     {% elif field.field.name == "portfolio_senior_official" %}
         <div class="flex-container">
         <label aria-label="Senior official contact details"></label>
-        {% include "django/admin/includes/contact_detail_list.html" with user=original_object.portfolio.senior_official no_title_top_padding=field.is_readonly %}
+        {% include "django/admin/includes/contact_detail_list.html" with user=original_object.portfolio.senior_official no_title_top_padding=field.is_readonly fields_always_present=True %}
         </div>
     {% elif field.field.name == "other_contacts" and original_object.other_contacts.all %}
         {% with all_contacts=original_object.other_contacts.all %}