Initial formatting and styling of portfolio managers table. Deleted unused css

atst/routes/portfolios/admin.py

@@ -17,63 +17,51 @@ from atst.utils.flash import formatted_flash as flash
 from atst.domain.exceptions import UnauthorizedError
 
 
-def permission_str(member, edit_perm_set, view_perm_set):
+def filter_perm_sets_data(member):
-    if member.has_permission_set(edit_perm_set):
+    perm_sets_data = {
-        return edit_perm_set
+        "perms_portfolio_mgmt": bool(
-    else:
+            member.has_permission_set(PermissionSets.EDIT_PORTFOLIO_ADMIN)
-        return view_perm_set
-
-
-def serialize_member_form_data(member):
-    return {
-        "member_name": member.full_name,
-        "member_id": member.id,
-        "perms_app_mgmt": permission_str(
-            member,
-            PermissionSets.EDIT_PORTFOLIO_APPLICATION_MANAGEMENT,
-            PermissionSets.VIEW_PORTFOLIO_APPLICATION_MANAGEMENT,
         ),
-        "perms_funding": permission_str(
+        "perms_app_mgmt": bool(
-            member,
+            member.has_permission_set(
-            PermissionSets.EDIT_PORTFOLIO_FUNDING,
+                PermissionSets.EDIT_PORTFOLIO_APPLICATION_MANAGEMENT
-            PermissionSets.VIEW_PORTFOLIO_FUNDING,
+            )
         ),
-        "perms_reporting": permission_str(
+        "perms_funding": bool(
-            member,
+            member.has_permission_set(PermissionSets.EDIT_PORTFOLIO_FUNDING)
-            PermissionSets.EDIT_PORTFOLIO_REPORTS,
-            PermissionSets.VIEW_PORTFOLIO_REPORTS,
         ),
-        "perms_portfolio_mgmt": permission_str(
+        "perms_reporting": bool(
-            member,
+            member.has_permission_set(PermissionSets.EDIT_PORTFOLIO_REPORTS)
-            PermissionSets.EDIT_PORTFOLIO_ADMIN,
-            PermissionSets.VIEW_PORTFOLIO_ADMIN,
         ),
     }
 
+    return perm_sets_data
 
-def get_members_data(portfolio):
+
-    members = sorted(
+def filter_members_data(members_list):
-        [serialize_member_form_data(member) for member in portfolio.members],
+    members_data = []
-        key=lambda member: member["member_name"],
+    for member in members_list:
-    )
+        members_data.append(
-    for member in members:
+            {
-        if member["member_id"] == portfolio.owner_role.id:
+                "role_id": member.id,
-            ppoc = member
+                "user_name": member.user_name,
-            members.remove(member)
+                "permission_sets": filter_perm_sets_data(member),
-    members.insert(0, ppoc)
+                # add in stuff here for forms
-    return members
+            }
+        )
+
+    return sorted(members_data, key=lambda member: member["user_name"])
 
 
 def render_admin_page(portfolio, form=None):
     pagination_opts = Paginator.get_pagination_opts(http_request)
     audit_events = AuditLog.get_portfolio_events(portfolio, pagination_opts)
-    members_data = get_members_data(portfolio)
     portfolio_form = PortfolioForm(obj=portfolio)
-    member_perms_form = member_forms.MembersPermissionsForm(
+    ppoc = filter_members_data([portfolio.owner_role])[0]
-        data={"members_permissions": members_data}
+    member_list = portfolio.members
-    )
+    member_list.remove(portfolio.owner_role)
-
     assign_ppoc_form = member_forms.AssignPPOCForm()
+
     for pf_role in portfolio.roles:
         if pf_role.user != portfolio.owner and pf_role.is_active:
             assign_ppoc_form.role_id.choices += [(pf_role.id, pf_role.full_name)]
@@ -87,13 +75,13 @@ def render_admin_page(portfolio, form=None):
         "portfolios/admin.html",
         form=form,
         portfolio_form=portfolio_form,
-        member_perms_form=member_perms_form,
+        ppoc=ppoc,
+        members=filter_members_data(member_list),
         member_form=member_forms.NewForm(),
         assign_ppoc_form=assign_ppoc_form,
         portfolio=portfolio,
         audit_events=audit_events,
         user=g.current_user,
-        ppoc_id=members_data[0].get("member_id"),
         current_member_id=current_member_id,
         applications_count=len(portfolio.applications),
     )

styles/components/_portfolio_layout.scss

@@ -5,13 +5,6 @@
   }
 
   margin-left: 2 * $gap;
-
-  .line {
-    box-sizing: border-box;
-    height: 2px;
-    width: 100%;
-    border: 1px solid $color-gray-lightest;
-  }
 }
 
 .portfolio-header {
@@ -40,36 +33,6 @@
     }
   }
 
-  &__budget {
-    font-size: $small-font-size;
-    align-items: center;
-
-    .icon-tooltip {
-      margin-left: -$gap / 2;
-    }
-
-    button {
-      margin: 0;
-      padding: 0;
-    }
-
-    &--dollars {
-      font-size: $h2-font-size;
-      font-weight: bold;
-    }
-
-    &--amount {
-      white-space: nowrap;
-    }
-
-    &--cents {
-      font-size: 2rem;
-      margin-top: 0.75rem;
-      margin-left: -0.7rem;
-      font-weight: bold;
-    }
-  }
-
   .links {
     justify-content: center;
     font-size: $small-font-size;
@@ -109,22 +72,6 @@
       }
     }
   }
-
-  .column-left {
-    width: 12.5rem;
-    float: left;
-  }
-
-  .column-right {
-    margin-left: -0.4rem;
-  }
-
-  .unfunded {
-    color: $color-red;
-    .icon {
-      @include icon-color($color-red);
-    }
-  }
 }
 
 @mixin subheading {
@@ -138,6 +85,10 @@
 .portfolio-content {
   margin: (4 * $gap) $gap 0 $gap;
 
+  .panel {
+    padding-bottom: 2rem;
+  }
+
   a.add-new-button {
     display: inherit;
     margin-left: auto;
@@ -157,44 +108,6 @@
       }
     }
 
-    input.usa-button.usa-button-primary {
-      width: 9rem;
-      height: 4rem;
-    }
-
-    select {
-      padding-left: 1.2rem;
-    }
-
-    .members-table-ppoc {
-      select::-ms-expand {
-        display: none;
-        color: $color-gray;
-      }
-
-      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;
-        color: $color-gray;
-      }
-
-      select:hover {
-        box-shadow: none;
-        color: $color-gray;
-      }
-    }
-
     a.modal-link.icon-link {
       float: right;
 

templates/portfolios/admin.html

@@ -9,7 +9,7 @@
 
 {{ StickyCTA(text="Settings") }}
 
-  <div v-cloak class="portfolio-admin portfolio-content">
+  <div v-cloak class="portfolio-admin">
 
     <!-- max width of this section is 460px -->
     <section class="form-container__half">

templates/portfolios/fragments/portfolio_members.html

@@ -3,103 +3,47 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}
 
-<section class="member-list" id="portfolio-members">
+<h3>Portfolio Managers</h3>
-  <div class='responsive-table-wrapper panel accordion-table'>
+<div class="panel">
-  {% if g.matchesPath("portfolio-members") %}
+  <section class="member-list">
-    {% include "fragments/flash.html" %}
+    <div class="responsive-table-wrapper">
-  {% endif %}
+      <table class="atat-table">
-    <base-form inline-template>
+        <thead>
-      <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
+          <tr>
-      {{ member_perms_form.csrf_token }}
+            <th>Name</th>
+            <th>Portfolio Permissions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{{ ppoc.user_name }}</td>
+            <td>
+              {% for perm, value in ppoc.permission_sets.items() -%}
+                <div>
+                  {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
+                </div>
+              {%-endfor %}
+            </td>
+          </tr>
+          {% for member in members -%}
+            <tr>
+              <td>{{ member.user_name }}</td>
+              <td>
+                {% for perm, value in member.permission_sets.items() -%}
+                  <div>
+                    {{ ("portfolios.admin.members.{}.{}".format(perm, value)) | translate }}
+                  </div>
+                {%-endfor %}
+              </td>
+            </tr>
+          {%- endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
 
-      <div class='application-list-item'>
-        <header>
-          <div class='responsive-table-wrapper__header'>
-            <div class='responsive-table-wrapper__title'>
-              <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
-              <div class='subheading'>
-                {{ "portfolios.admin.portfolio_members_subheading" | translate }}
-              </div>
-            </div>
-
-            <a class='icon-link'>
-              {{ Icon('info') }}
-              {{ "portfolios.admin.settings_info" | translate }}
-            </a>
-          </div>
-        </header>
-
-        {% if not portfolio.members %}
-          <p>{{ "portfolios.admin.no_members" | translate }}</p>
-        {% else %}
-          <table class="atat-table">
-
-            <thead>
-              <tr>
-                  <td>{{ "portfolios.members.permissions.name" | translate }}</td>
-                  <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
-                  <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
-                  <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
-                  <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
-                  <td></td>
-              </tr>
-            </thead>
-
-            <tbody>
-              {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-                {% include "portfolios/fragments/members_edit.html" %}
-              {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
-                {% include "portfolios/fragments/members_view.html" %}
-              {% endif %}
-            </tbody>
-
-          </table>
-        </div>
-        {% endif %}
-
-        <div class="panel__footer">
-          <div class="action-group save">
-            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-              {{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
-            {% endif %}
-
-            {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
-              <a class="icon-link modal-link" v-on:click="openModal('add-port-mem')">
-                {{ "portfolios.admin.add_new_member" | translate }}
-                {{ Icon("plus") }}
-              </a>
-            {% endif %}
-          </div>
-        </div>
-      </form>
-    </base-form>
-    {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-      {% for subform in member_perms_form.members_permissions %}
-        {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
-        {% call Modal(name=modal_id, dismissable=False) %}
-          <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
-          <hr>
-          {{
-            Alert(
-              title="portfolios.admin.alert_title" | translate,
-              message="portfolios.admin.alert_message" | translate,
-              level="warning"
-            )
-          }}
-          <div class="action-group">
-            <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
-              {{ member_perms_form.csrf_token }}
-              <button class="usa-button usa-button-danger">
-                {{ "portfolios.members.archive_button" | translate }}
-              </button>
-            </form>
-            <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-          </div>
-        {% endcall %}
-      {% endfor %}
-    {% endif %}
-  </div>
   {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
+    <a href="#" class="usa-button usa-button-secondary add-new-button">Add Portfolio Manager</a>
     {% include "portfolios/fragments/add_new_portfolio_member.html" %}
   {% endif %}
-</section>
+</div>

translations.yaml

@@ -317,6 +317,19 @@ portfolios:
     portfolio_members_title: Portfolio members
     settings_info: Learn more about these settings
     portfolio_name: Portfolio name
+    members:
+      perms_portfolio_mgmt:
+        'False': View Portfolio
+        'True': Edit Portfolio
+      perms_app_mgmt:
+        'False': View Applications
+        'True': Edit Applications
+      perms_funding:
+        'False': View Funding
+        'True': Edit Funding
+      perms_reporting:
+        'False': View Reporting
+        'True': Edit Reporting
   applications:
     add_application_text: Add a new application
     add_environment: Create an Environment