Update Point of Contact

templates/components/multi_step_modal_form.html

@@ -25,13 +25,16 @@
   </div>
 {% endmacro %}
 
-{% macro MultiStepModalForm(name, form, form_action, steps, button_text="", dismissable=False) -%}
+{% macro MultiStepModalForm(name, form, form_action, steps, button_icon="", button_text="", link_classes="icon-link modal-link", dismissable=False) -%}
   {% set step_count = steps|length %}
   <multi-step-modal-form inline-template :steps={{ step_count }}>
     <div>
-      <a class='icon-link modal-link' v-on:click="openModal('{{ name }}')">
+      <a class='{{ link_classes }}' v-on:click="openModal('{{ name }}')">
         {{ button_text }}
-        {{ Icon('plus-circle-solid') }}
+
+        {% if button_icon != "" %}
+          {{ Icon(button_icon) }}
+        {% endif %}
       </a>
         {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
           <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">

templates/fragments/admin/add_new_portfolio_member.html

@@ -80,5 +80,6 @@
     member_form,
     url_for("portfolios.create_member", portfolio_id=portfolio.id),
     [step_one, step_two],
-    button_text="portfolios.admin.add_new_member" | translate)
-  }}
+    button_text=("portfolios.admin.add_new_member" | translate),
+    button_icon="plus-circle-solid",
+  ) }}

templates/fragments/admin/change_ppoc.html

@@ -0,0 +1,82 @@
+{% from "components/icon.html" import Icon %}
+{% from "components/selector.html" import Selector %}
+{% from "components/text_input.html" import TextInput %}
+{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
+{% from "components/alert.html" import Alert %}
+{% from "components/options_input.html" import OptionsInput %}
+
+{% set step_one %}
+  <div class="modal__form--header">
+    <h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
+  </div>
+
+  {{
+    Alert(
+      level="warning",
+      title=("fragments.ppoc.alert.title" | translate),
+      message=("fragments.ppoc.alert.message" | translate),
+    )
+  }}
+
+  <div class='form-row'>
+    <div class='form-col form-col--half'>
+      {{
+        OptionsInput(
+          assign_ppoc_form.user_id
+        )
+      }}
+    </div>
+    <div class='form-col form-col--half'>
+    </div>
+  </div>
+  <div class='action-group'>
+    <input
+        type='button'
+        v-on:click="next()"
+        v-bind:disabled="invalid"
+        class='action-group__action usa-button'
+        value='{{ "fragments.ppoc.assign_user_button_text" | translate }}'>
+    <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
+      {{ "common.cancel" | translate }}
+    </a>
+  </div>
+{% endset %}
+
+{% set step_two %}
+  <div class="modal__form--padded">
+    <div class="modal__form--header">
+      <h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
+    </div>
+
+    {{
+      Alert(
+        level="info",
+        title=("fragments.ppoc.confirm_alert.title" | translate),
+      )
+    }}
+
+    <div class='action-group'>
+      <input
+        type="submit"
+        class='action-group__action usa-button'
+        form="change-ppoc-form"
+        value='{{ "common.confirm" | translate }}'>
+      <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
+        {{ "common.cancel" | translate }}
+      </a>
+    </div>
+  </div>
+{% endset %}
+
+<div class="flex-reverse-row">
+  {{
+    MultiStepModalForm(
+      'change-ppoc-form',
+      assign_ppoc_form,
+      form_action=url_for("portfolios.update_ppoc", portfolio_id=portfolio.id),
+      steps=[step_one, step_two],
+      button_text=("fragments.ppoc.update_btn" | translate),
+      link_classes="usa-button-primary"
+    )
+  }}
+</div>

templates/fragments/primary_point_of_contact.html

@@ -1,5 +1,9 @@
-<div class="panel">
+<section id="primary-point-of-contact" class="panel">
   <div class="panel__content">
+    {% if g.matchesPath("primary-point-of-contact") %}
+      {% include "fragments/flash.html" %}
+    {% endif %}
+
     <h2>{{ "fragments.ppoc.title" | translate }}</h2>
     <p>{{ "fragments.ppoc.subtitle" | translate }}</p>
 
@@ -15,11 +19,7 @@
     </p>
 
     {% if user_can(permissions.EDIT_PORTFOLIO_POC) %}
-      <div class="flex-reverse-row">
-        <a class="usa-button-primary">
-          {{ "fragments.ppoc.update_btn" | translate }}
-        </a>
-      </div>
+      {% include "fragments/admin/change_ppoc.html" %}
     {% endif %}
   </div>
-</div>
+</section>