From bba5c1531d9da14eb02a325b40b3b04881973009 Mon Sep 17 00:00:00 2001 From: Montana Date: Thu, 4 Apr 2019 16:48:52 -0400 Subject: [PATCH 01/15] Split app settings into two panels --- .../edit_application_form.html | 0 .../fragments/applications/environments.html | 19 ++++++++++ templates/portfolios/applications/edit.html | 37 +++++++------------ templates/portfolios/applications/new.html | 2 +- 4 files changed, 33 insertions(+), 25 deletions(-) rename templates/fragments/{ => applications}/edit_application_form.html (100%) create mode 100644 templates/fragments/applications/environments.html diff --git a/templates/fragments/edit_application_form.html b/templates/fragments/applications/edit_application_form.html similarity index 100% rename from templates/fragments/edit_application_form.html rename to templates/fragments/applications/edit_application_form.html diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html new file mode 100644 index 00000000..7d7c01e0 --- /dev/null +++ b/templates/fragments/applications/environments.html @@ -0,0 +1,19 @@ +
+
+

{{ 'portfolios.applications.environments_heading' | translate }}

+

+ {{ 'portfolios.applications.environments_description' | translate }} +

+
+ + +
diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index c648f2f7..a3a1a511 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -12,33 +12,22 @@
- {% include "fragments/edit_application_form.html" %} - -
-
-

{{ 'portfolios.applications.environments_heading' | translate }}

-

- {{ 'portfolios.applications.environments_description' | translate }} -

-
- -
    - {% for environment in application.environments %} -
  • -
    - - -
    -
    • - {% endfor %} -
-
+ {% include "fragments/applications/edit_application_form.html" %}
-
-
- +
+ +
+
+
+ {% include "fragments/applications/environments.html" %} +
+
+ +
+
+ {% endblock %} diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index bc5b9a7a..283f766c 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -37,7 +37,7 @@ {% endcall %} - {% include "fragments/edit_application_form.html" %} + {% include "fragments/applications/edit_application_form.html" %}
{# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
From 4aec8104175cf60b3c5c19f408823f9eadd53dbc Mon Sep 17 00:00:00 2001 From: Montana Date: Fri, 5 Apr 2019 15:05:03 -0400 Subject: [PATCH 02/15] Render all table elements; unstyled --- .../fragments/admin/portfolio_members.html | 2 +- .../fragments/applications/environments.html | 41 ++++++++++++------- templates/portfolios/applications/edit.html | 5 +++ translations.yaml | 4 ++ 4 files changed, 37 insertions(+), 15 deletions(-) diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html index 75b90078..1876715d 100644 --- a/templates/fragments/admin/portfolio_members.html +++ b/templates/fragments/admin/portfolio_members.html @@ -25,7 +25,7 @@ {{ Icon('info') }} {{ "portfolios.admin.settings_info" | translate }} -
+
{% if not portfolio.members %}

{{ "portfolios.admin.no_members" | translate }}

diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 7d7c01e0..4ff29837 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -1,19 +1,32 @@ +{% from "components/icon.html" import Icon %} +
-

{{ 'portfolios.applications.environments_heading' | translate }}

-

- {{ 'portfolios.applications.environments_description' | translate }} -

+
+
{{ 'portfolios.applications.environments_heading' | translate }}
+
+ + {{ Icon('info') }} + {{ "portfolios.admin.settings_info" | translate }} +
- + + + + + + + + + + {% for environment in application.environments %} + + + + + {% endfor %} + +
{{ "portfolios.applications.environments.name" | translate }}{{ "portfolios.applications.environments.members" | translate }}
{{ environment.name }}Show Members({{ environment.num_users }}){{ Icon('caret_down') }}
+
diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index a3a1a511..8f0157c3 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -1,6 +1,7 @@ {% extends "portfolios/applications/base.html" %} {% from "components/text_input.html" import TextInput %} +{% from "components/icon.html" import Icon %} {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %} @@ -26,6 +27,10 @@ {% include "fragments/applications/environments.html" %}
+ + {{ "portfolios.applications.add_environment" | translate }} + {{ Icon('plus-circle-solid') }} +
diff --git a/translations.yaml b/translations.yaml index c9cfe378..bb319617 100644 --- a/translations.yaml +++ b/translations.yaml @@ -587,6 +587,10 @@ portfolios: team_management: title: '{application_name} Team Management' subheading: Team Management + environments: + name: Name + members: Members + add_environment: Add New Environment admin: portfolio_members_title: Portfolio members portfolio_members_subheading: These members have different levels of access to the portfolio. From 782387b146761a24aec5eb4986d419693e3f4c83 Mon Sep 17 00:00:00 2001 From: Montana Date: Sat, 6 Apr 2019 12:26:19 -0400 Subject: [PATCH 03/15] Toggle for users; unstyled --- .../fragments/applications/environments.html | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 4ff29837..e9be921e 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -11,22 +11,42 @@ - - - - - - - +
+ +
From 110b232fb7e92de6ed1a88849744d92dd407a7e8 Mon Sep 17 00:00:00 2001 From: Montana Date: Sun, 7 Apr 2019 08:25:21 -0400 Subject: [PATCH 04/15] Styling --- styles/sections/_application_list.scss | 44 +++++++++++++++++++ .../fragments/applications/environments.html | 40 +++++++++-------- templates/portfolios/applications/edit.html | 4 +- 3 files changed, 67 insertions(+), 21 deletions(-) diff --git a/styles/sections/_application_list.scss b/styles/sections/_application_list.scss index 101c249e..ba8fca73 100644 --- a/styles/sections/_application_list.scss +++ b/styles/sections/_application_list.scss @@ -24,7 +24,51 @@ } } + .list-header { + margin: 2 * $gap 5 * $gap; + padding: inherit; + overflow: auto; + } + header.accordian__header { padding: 1.6rem; } + + .icon-link { + float: right; + + .icon--info { + bottom: -1px; + left: 4px; + } + } + + .left { + float: left; + } + + table { + + thead { + td { + font-weight: bold; + font-size: 1.4rem; + border-top: 0; + } + } + + tbody { + th { + font-weight: bold; + font-size: 1.6rem; + } + td { + font-size: 1.6rem; + border-bottom: 1px solid $color-gray-lightest; + border-top: 0; + padding: 3 * $gap 2 * $gap; + } + } + + } } diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index e9be921e..8e07f618 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -2,17 +2,18 @@
-
-
{{ 'portfolios.applications.environments_heading' | translate }}
+
+
+
{{ 'portfolios.applications.environments_heading' | translate }}
+
+ + {{ Icon('info') }} + {{ "portfolios.admin.settings_info" | translate }} +
- - {{ Icon('info') }} - {{ "portfolios.admin.settings_info" | translate }} -
-
-
diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 8f0157c3..fac89ea0 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -22,10 +22,8 @@ -
-
+
{% include "fragments/applications/environments.html" %} -
{{ "portfolios.applications.add_environment" | translate }} From 7c484f6a909c5a5a9b8365095802f24fdb167170 Mon Sep 17 00:00:00 2001 From: Montana Date: Tue, 9 Apr 2019 11:17:46 -0400 Subject: [PATCH 05/15] Send template an environments object --- atst/routes/portfolios/applications.py | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/atst/routes/portfolios/applications.py b/atst/routes/portfolios/applications.py index e675d438..b5a20407 100644 --- a/atst/routes/portfolios/applications.py +++ b/atst/routes/portfolios/applications.py @@ -64,11 +64,16 @@ def edit_application(portfolio_id, application_id): application = Applications.get(application_id) form = ApplicationForm(name=application.name, description=application.description) + environments_obj = {} + for env in application.environments: + environments_obj[env.name] = [user.full_name for user in env.users] + return render_template( "portfolios/applications/edit.html", portfolio=portfolio, application=application, form=form, + environments_obj=environments_obj ) From 1d46ecebd18f5ccc8fc072577cf44c3a4c4705bc Mon Sep 17 00:00:00 2001 From: Montana Date: Tue, 9 Apr 2019 11:18:04 -0400 Subject: [PATCH 06/15] Add environments-table component --- atst/routes/portfolios/applications.py | 2 +- .../tables/application_environments.js | 34 +++++++++++ js/index.js | 2 + .../fragments/applications/environments.html | 59 +++++++++---------- 4 files changed, 64 insertions(+), 33 deletions(-) create mode 100644 js/components/tables/application_environments.js diff --git a/atst/routes/portfolios/applications.py b/atst/routes/portfolios/applications.py index b5a20407..20603b3c 100644 --- a/atst/routes/portfolios/applications.py +++ b/atst/routes/portfolios/applications.py @@ -73,7 +73,7 @@ def edit_application(portfolio_id, application_id): portfolio=portfolio, application=application, form=form, - environments_obj=environments_obj + environments_obj=environments_obj, ) diff --git a/js/components/tables/application_environments.js b/js/components/tables/application_environments.js new file mode 100644 index 00000000..c91e63a2 --- /dev/null +++ b/js/components/tables/application_environments.js @@ -0,0 +1,34 @@ +import { set } from 'vue/dist/vue' + +export default { + name: 'environments-table', + + props: { + environments: Object, + }, + + data: function() { + return { + environmentsState: this.environments, + } + }, + + created: function() { + Object.keys(this.environments).forEach(environment => { + set(this.environmentsState[environment], 'isVisible', false) + }) + }, + + methods: { + toggle: function(e, environmentName) { + this.environmentsState = Object.assign(this.environmentsState, { + [environmentName]: Object.assign( + this.environmentsState[environmentName], + { + isVisible: !this.environmentsState[environmentName].isVisible, + } + ), + }) + }, + }, +} diff --git a/js/index.js b/js/index.js index 0a419224..dee29320 100644 --- a/js/index.js +++ b/js/index.js @@ -25,6 +25,7 @@ import Modal from './mixins/modal' import selector from './components/selector' import BudgetChart from './components/charts/budget_chart' import SpendTable from './components/tables/spend_table' +import EnvironmentsTable from './components/tables/application_environments' import TaskOrderList from './components/tables/task_order_list.js' import MembersList from './components/members_list' import LocalDatetime from './components/local_datetime' @@ -56,6 +57,7 @@ const app = new Vue({ selector, BudgetChart, SpendTable, + EnvironmentsTable, TaskOrderList, MembersList, LocalDatetime, diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 8e07f618..3eec6645 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -13,44 +13,39 @@
-
+
{{ "portfolios.applications.environments.name" | translate }}{{ "portfolios.applications.environments.members" | translate }}
- - - - + + - - {% for environment in application.environments %} - - - - - - - - {% endfor %} + + + + + + +
{{ "portfolios.applications.environments.name" | translate }}{{ "portfolios.applications.environments.members" | translate }}
{{ "portfolios.applications.environments.name" | translate }}{{ "portfolios.applications.environments.members" | translate }}
-
- User Name here -
-
+
+ +
+
- + From 891bd5004458a84eabe064abe3d17ecbce35052f Mon Sep 17 00:00:00 2001 From: Montana Date: Tue, 9 Apr 2019 11:49:26 -0400 Subject: [PATCH 07/15] Fix spelling error change accordian to accordion --- styles/atat.scss | 2 +- .../{_accordians.scss => _accordions.scss} | 16 ++++++++-------- styles/sections/_application_list.scss | 2 +- .../fragments/applications/environments.html | 2 +- templates/portfolios/applications/index.html | 12 ++++++------ 5 files changed, 17 insertions(+), 17 deletions(-) rename styles/elements/{_accordians.scss => _accordions.scss} (91%) diff --git a/styles/atat.scss b/styles/atat.scss index fc13952f..3e241da3 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -12,7 +12,7 @@ @import 'elements/buttons'; @import 'elements/panels'; @import 'elements/block_lists'; -@import 'elements/accordians'; +@import 'elements/accordions'; @import 'elements/tables'; @import 'elements/sidenav'; @import 'elements/action_group'; diff --git a/styles/elements/_accordians.scss b/styles/elements/_accordions.scss similarity index 91% rename from styles/elements/_accordians.scss rename to styles/elements/_accordions.scss index 61ef3c68..62a8d66a 100644 --- a/styles/elements/_accordians.scss +++ b/styles/elements/_accordions.scss @@ -1,4 +1,4 @@ -.accordian { +.accordion { @include block-list; box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5); @@ -21,7 +21,7 @@ } } -.accordian__header { +.accordion__header { @include block-list-header; border-top: 3px solid $color-blue; border-bottom: none; @@ -32,7 +32,7 @@ } } -.accordian__title { +.accordion__title { @include block-list__title; color: $color-blue; @include h3; @@ -45,14 +45,14 @@ } } -.accordian__description { +.accordion__description { @include block-list__description; font-style: italic; font-size: $small-font-size; color: $color-gray; } -.accordian__actions { +.accordion__actions { margin-top: $gap; display: flex; flex-direction: row; @@ -76,14 +76,14 @@ } } -.accordian__item { +.accordion__item { @include block-list-item; opacity: 0.75; background-color: $color-blue-light; border-bottom: 1px solid rgba($color-gray-light, 0.5); - &.accordian__item--selectable { + &.accordion__item--selectable { > div { display: flex; flex-direction: row-reverse; @@ -117,7 +117,7 @@ } } -.accordian__footer { +.accordion__footer { @include block-list__footer; border-top: 0; } diff --git a/styles/sections/_application_list.scss b/styles/sections/_application_list.scss index ba8fca73..3b7ad134 100644 --- a/styles/sections/_application_list.scss +++ b/styles/sections/_application_list.scss @@ -30,7 +30,7 @@ overflow: auto; } - header.accordian__header { + header.accordion__header { padding: 1.6rem; } diff --git a/templates/fragments/applications/environments.html b/templates/fragments/applications/environments.html index 3eec6645..35c79483 100644 --- a/templates/fragments/applications/environments.html +++ b/templates/fragments/applications/environments.html @@ -38,7 +38,7 @@ - +
diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 51a3ce56..0ecddde4 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -34,13 +34,13 @@
{% for application in portfolio.applications|sort(attribute='name') %} -
+