Disable form fields for PPoC

styles/components/_portfolio_layout.scss

@@ -295,6 +295,37 @@
       background: $color-red;
     }
 
+    select {
+      padding-left: 1.2rem
+    }
+
+    .members-table-ppoc {
+      select::-ms-expand {
+        display: none;
+      }
+
+      select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        display: block;
+        width: 100%;
+        float: right;
+        margin: 5px 0px;
+        padding: 0px 24px;
+        background-image: none;
+        -ms-word-break: normal;
+        word-break: normal;
+        padding-right: 3rem;
+        padding-left: 1.2rem;
+      }
+
+      select:hover {
+        box-shadow: none;
+        color: $color-base;
+      }
+    }
+
     .members-table-footer {
       float: right;
       padding: 3 * $gap 0;

templates/components/options_input.html

@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True) -%}
+{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -29,7 +29,7 @@
           </legend>
         {% endif %}
 
-        {{ field() }}
+        {{ field(disabled=disabled) }}
 
         <template v-if='showError'>
           <span class='usa-input__message' v-html='validationError'></span>

templates/fragments/admin/members_edit.html

@@ -2,10 +2,11 @@
 
 {% for subform in member_perms_form.members_permissions %}
   {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.user_id.data) %}
+  {% set ppoc = subform.user_id.data == portfolio.owner.id %}
 
-  <tr>
+  <tr {% if ppoc %}class="members-table-ppoc"{% endif %}>
     <td class='name'>{{ subform.member.data }}
-      {% if subform.member.data == user.full_name %}
+      {% if subform.user_id.data == user.id %}
         <span class='you'>(<span class='green'>you</span>)</span>
         {% set archive_button_class = 'usa-button-disabled' %}
       {% else %}
@@ -13,16 +14,18 @@
       {% endif %}
     </td>
 
-    <td>{{ OptionsInput(subform.perms_app_mgmt, label=False) }}</td>
-    <td>{{ OptionsInput(subform.perms_funding, label=False) }}</td>
-    <td>{{ OptionsInput(subform.perms_reporting, label=False) }}</td>
-    <td>{{ OptionsInput(subform.perms_portfolio_mgmt, label=False) }}</td>
+    <td>{{ OptionsInput(subform.perms_app_mgmt, label=False, disabled=ppoc) }}</td>
+    <td>{{ OptionsInput(subform.perms_funding, label=False, disabled=ppoc) }}</td>
+    <td>{{ OptionsInput(subform.perms_reporting, label=False, disabled=ppoc) }}</td>
+    <td>{{ OptionsInput(subform.perms_portfolio_mgmt, label=False, disabled=ppoc) }}</td>
 
     <td>
       <a v-on:click="openModal('{{ modal_id }}')" class='usa-button {{ archive_button_class }}'>
         {{ "portfolios.members.archive_button" | translate }}
       </a>
     </td>
-    {{ subform.user_id() }}
+    {% if not ppoc %}
+      {{ subform.user_id() }}
+    {% endif %}
   </tr>
 {% endfor %}