From c9d0c64c1f44bc0fe389bb57d528578a1c4c7368 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 6 Jan 2020 13:54:12 -0500
Subject: [PATCH] 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                              |  1 +
 styles/components/_member_form.scss           | 55 +++++++++++++++++
 styles/sections/_application_edit.scss        | 60 -------------------
 .../fragments/member_form_fields.html         |  2 +-
 templates/applications/fragments/members.html |  2 +-
 ...er_form_template.html => member_form.html} | 20 ++++---
 .../fragments/add_new_portfolio_member.html   |  4 +-
 .../portfolios/fragments/members_edit.html    | 38 ------------
 .../portfolios/fragments/members_view.html    | 26 --------
 .../fragments/portfolio_members.html          |  6 +-
 10 files changed, 75 insertions(+), 139 deletions(-)
 create mode 100644 styles/components/_member_form.scss
 rename templates/components/{member_form_template.html => member_form.html} (71%)
 delete mode 100644 templates/portfolios/fragments/members_edit.html
 delete mode 100644 templates/portfolios/fragments/members_view.html

diff --git a/styles/atat.scss b/styles/atat.scss
index 4c8aa263..0134dd89 100644
--- a/styles/atat.scss
+++ b/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";
diff --git a/styles/components/_member_form.scss b/styles/components/_member_form.scss
new file mode 100644
index 00000000..c734cfd1
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 8ff79b7b..8282cb64 100644
--- a/styles/sections/_application_edit.scss
+++ b/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);
 
diff --git a/templates/applications/fragments/member_form_fields.html b/templates/applications/fragments/member_form_fields.html
index 3aa97687..707653fa 100644
--- a/templates/applications/fragments/member_form_fields.html
+++ b/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) }}
diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html
index c82daa60..9b1cbf4b 100644
--- a/templates/applications/fragments/members.html
+++ b/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 %}
diff --git a/templates/components/member_form_template.html b/templates/components/member_form.html
similarity index 71%
rename from templates/components/member_form_template.html
rename to templates/components/member_form.html
index f62f90c1..14766b6d 100644
--- a/templates/components/member_form_template.html
+++ b/templates/components/member_form.html
@@ -1,11 +1,11 @@
-{% from "components/icon.html" import Icon %}
-
-{% macro MemberFormTemplate(title=None, next_button=None, previous=True, modal=modal) %}
-  <hr class="full-width">
-  {% if title %} <h1>{{ title }}</h1> {% endif %}
-
-  {{ caller() }}
+<!-- Layout macro -->
+{% macro MemberForm(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 %}
diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html
index ced2ef6c..83863636 100644
--- a/templates/portfolios/fragments/add_new_portfolio_member.html
+++ b/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) }}
diff --git a/templates/portfolios/fragments/members_edit.html b/templates/portfolios/fragments/members_edit.html
deleted file mode 100644
index a297356f..00000000
--- a/templates/portfolios/fragments/members_edit.html
+++ /dev/null
@@ -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 %}
diff --git a/templates/portfolios/fragments/members_view.html b/templates/portfolios/fragments/members_view.html
deleted file mode 100644
index 65fde544..00000000
--- a/templates/portfolios/fragments/members_view.html
+++ /dev/null
@@ -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 %}
diff --git a/templates/portfolios/fragments/portfolio_members.html b/templates/portfolios/fragments/portfolio_members.html
index 5aee8fd7..939bd7ca 100644
--- a/templates/portfolios/fragments/portfolio_members.html
+++ b/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>
-                    {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
+                    {% if value -%}
+                      {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
+                    {%- endif %}
                   </div>
                 {%-endfor %}
               </td>