Fix and generalize styling for member form macro

Only display permissions with 'Edit' value
Delete unused files and rename MemberForm macro file

styles/atat.scss

@@ -38,6 +38,7 @@
 @import "components/dod_login_notice.scss";
 @import "components/sticky_cta.scss";
 @import "components/error_page.scss";
+@import "components/member_form.scss";
 
 @import "sections/login";
 @import "sections/home";

styles/components/_member_form.scss

@@ -0,0 +1,55 @@
+.member-form {
+  text-align: left;
+  min-width: 75rem;
+
+  input[type="checkbox"] + label::before {
+    margin-left: 0;
+  }
+
+  .input__inline-fields {
+    text-align: left;
+
+    .usa-input__choices label {
+      font-weight: $font-bold;
+    }
+  }
+
+  .input__inline-fields {
+    padding: $gap * 2;
+    border: 1px solid $color-gray-lighter;
+
+    &.checked {
+      border: 1px solid $color-blue;
+    }
+
+    label {
+      font-weight: $font-bold;
+    }
+
+    p.usa-input__help {
+      margin-bottom: 0;
+      padding-left: 3rem;
+    }
+  }
+
+  .user-info {
+    .usa-input {
+      width: 45rem;
+
+      input,
+      label,
+      .usa-input__message {
+        max-width: unset;
+      }
+
+      label .icon-validation {
+        left: unset;
+        right: -$gap * 4;
+      }
+
+      &--validation--phoneExt {
+        width: 18rem;
+      }
+    }
+  }
+}

styles/sections/_application_edit.scss

@@ -23,66 +23,6 @@
   }
 }
 
-#modal--add-app-mem,
-.form-content--app-mem {
-  text-align: left;
-
-  .modal__body {
-    min-width: 75rem;
-  }
-
-  input[type="checkbox"] + label::before {
-    margin-left: 0;
-  }
-
-  .input__inline-fields {
-    text-align: left;
-
-    .usa-input__choices label {
-      font-weight: $font-bold;
-    }
-  }
-
-  .input__inline-fields {
-    padding: $gap * 2;
-    border: 1px solid $color-gray-lighter;
-
-    &.checked {
-      border: 1px solid $color-blue;
-    }
-
-    label {
-      font-weight: $font-bold;
-    }
-
-    p.usa-input__help {
-      margin-bottom: 0;
-      padding-left: 3rem;
-    }
-  }
-
-  .application-member__user-info {
-    .usa-input {
-      width: 45rem;
-
-      input,
-      label,
-      .usa-input__message {
-        max-width: unset;
-      }
-
-      label .icon-validation {
-        left: unset;
-        right: -$gap * 4;
-      }
-
-      &--validation--phoneExt {
-        width: 18rem;
-      }
-    }
-  }
-}
-
 .environment-roles {
   padding: 0 ($gap * 3) ($gap * 3);
 

templates/applications/fragments/member_form_fields.html

@@ -118,7 +118,7 @@
 {% endmacro %}
 
 {% macro InfoFields(member_form) %}
-  <div class="application-member__user-info">
+  <div class="user-info">
     {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
     {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
     {{ TextInput(member_form.email, validation='email', optional=False) }}

templates/applications/fragments/members.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/label.html" import Label %}
-{% import "components/member_form_template.html" as member_form %}
+{% import "components/member_form.html" as member_form %}
 {% import "applications/fragments/member_form_fields.html" as member_fields %}
 {% from "components/modal.html" import Modal %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}

templates/components/member_form.html

@@ -1,11 +1,11 @@
-{% from "components/icon.html" import Icon %}
+<!-- Layout macro -->
-
+{% macro MemberForm(title=None, next_button=None, previous=True, modal=modal) %}
-{% macro MemberFormTemplate(title=None, next_button=None, previous=True, modal=modal) %}
+  <div class="member-form">
     <hr class="full-width">
     {% if title %} <h1>{{ title }}</h1> {% endif %}
 
     {{ caller() }}
-
+  </div>
   <div class='action-group'>
     {{ next_button }}
     {% if previous %}
@@ -19,6 +19,8 @@
   </div>
 {% endmacro %}
 
+
+<!-- Step macros to use with MultiStepModalForm -->
 {% macro BasicStep(
   title=None,
   form=form,
@@ -35,7 +37,7 @@
         value='{{ next_button_text }}'>
   {% endset %}
 
-  {% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %}
+  {% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %}
     {{ form }}
   {% endcall %}
 {% endmacro %}
@@ -57,7 +59,7 @@
       value='{{ submit_text }}'>
   {% endset %}
 
-  {% call MemberFormTemplate(title=title, next_button=next_button, previous=previous, modal=modal) %}
+  {% call MemberForm(title=title, next_button=next_button, previous=previous, modal=modal) %}
     {{ form }}
   {% endcall %}
 {% endmacro %}

templates/portfolios/fragments/add_new_portfolio_member.html

@@ -9,7 +9,7 @@
     {{ Icon('info') }}
     {{ "portfolios.admin.permissions_info" | translate }}
   </a>
-  <div class="application-perms">
+  <div class="portfolio-perms">
     {% if new %}
       {% set app_mgmt = form.perms_app_mgmt.name %}
       {% set funding = form.perms_funding.name %}
@@ -30,7 +30,7 @@
 {% endmacro %}
 
 {% macro InfoFields(member_form) %}
-  <div class="application-member__user-info">
+  <div class="user-info">
     {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
     {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
     {{ TextInput(member_form.email, validation='email', optional=False) }}

templates/portfolios/fragments/members_edit.html

@@ -1,38 +0,0 @@
-{% from "components/alert.html" import Alert %}
-{% from "components/modal.html" import Modal %}
-{% from "components/options_input.html" import OptionsInput %}
-
-{% for subform in member_perms_form.members_permissions %}
-  {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
-  {% set ppoc = subform.member_id.data == ppoc_id %}
-  {% set archive_button_class = 'button-danger-outline' %}
-
-  <tr {% if ppoc %}class="members-table-ppoc"{% endif %}>
-    <td class='name'>{{ subform.member_name.data }}
-      <div>
-        {% if ppoc %}
-          {% set archive_button_class = 'usa-button-disabled' %}
-          <span class='you'>PPoC</span>
-        {% endif %}
-        {% if subform.member_id.data == current_member_id %}
-          {% set archive_button_class = 'usa-button-disabled' %}
-          <span class='you'>(<span class='green'>you</span>)</span>
-        {% endif %}
-      </div>
-    </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>
-      {% if not ppoc %}
-        {{ subform.member_id() }}
-      {% endif %}
-    </td>
-  </tr>
-{% endfor %}

templates/portfolios/fragments/members_view.html

@@ -1,26 +0,0 @@
-{% for subform in member_perms_form.members_permissions %}
-  {% set ppoc = subform.member_id.data == ppoc_id %}
-  {% set heading_perms = [subform.perms_app_mgmt, subform.perms_funding, subform.perms_reporting, subform.perms_portfolio_mgmt] %}
-
-  <tr>
-    <td class='name'>{{ subform.member_name.data }}
-      <div>
-        {% if ppoc %}
-          <span class='you'>PPoC</span>
-        {% endif %}
-        {% if subform.member_id.data == current_member_id %}
-          <span class='you'>(<span class='green'>you</span>)</span>
-        {% endif %}
-      </div>
-    </td>
-
-    {% for access in heading_perms %}
-      {% if dict(access.choices).get(access.data) == ('portfolios.members.permissions.edit_access' | translate)  %}
-        <td class='green'>{{ 'portfolios.members.permissions.edit_access' | translate }}</td>
-      {% else %}
-        <td>{{ 'common.view' | translate }}</td>
-      {% endif %}
-    {% endfor %}
-
-  </tr>
-{% endfor %}

templates/portfolios/fragments/portfolio_members.html

@@ -1,6 +1,6 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
-{% import "components/member_form_template.html" as member_form %}
+{% import "components/member_form.html" as member_form %}
 {% from "components/modal.html" import Modal %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
 {% from 'components/save_button.html' import SaveButton %}
@@ -34,7 +34,9 @@
               <td>
                 {% for perm, value in member.permission_sets.items() -%}
                   <div>
+                    {% if value -%}
                       {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
+                    {%- endif %}
                   </div>
                 {%-endfor %}
               </td>