From 73889e574a4325772a37b468c2e48f3fa163edf0 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:21:42 -0400
Subject: [PATCH 01/12] popup selector html

---
 templates/components/selector.html | 63 ++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 templates/components/selector.html

diff --git a/templates/components/selector.html b/templates/components/selector.html
new file mode 100644
index 00000000..c64bf9a0
--- /dev/null
+++ b/templates/components/selector.html
@@ -0,0 +1,63 @@
+{% from "components/icon.html" import Icon %}
+
+{# expects a wtforms SelectField instance #}
+{% macro Selector(field, default_label='Select an option') -%}
+
+<selector
+  v-bind:choices='{{ field.choices | toJson }}'
+  default-label='{{ default_label }}'
+  {% if field.data %}initial-choice='{{ field.data }}'{% endif %}
+  {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
+  inline-template>
+
+  <fieldset v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
+    <v-popover v-bind:container='false' ref='popover'>
+      <legend>
+        {{ field.label | striptags }}
+
+        {% if field.description %}
+          <span class='usa-input__help'>{{ field.description | safe }}</span>
+        {% endif %}
+
+        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+      </legend>
+
+      <button class='selector__button' type='button' v-html='label'></button>
+
+      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+
+      <template v-if='showError'>
+        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+      </template>
+
+      <template slot='popover'>
+        <div class='block-list'>
+          <ul>
+            <li v-for='choice in choices' class='block-list__item block-list__item--selectable'>
+              <template v-if='choice[0] !== ""'>
+                <input
+                  type='radio'
+                  name='{{ field.name }}'
+                  v-bind:id="'{{ field.name }}_' + choice[0]"
+                  v-bind:value='choice[0]'
+                  v-bind:checked='value === choice[0]'
+                  v-on:change='change'/>
+                <label v-bind:for="'{{ field.name }}_' + choice[0]">
+                  <template v-if='choices[2]'>
+                    <dl>
+                      <dt v-html='choice[1]'></dt>
+                      <dd v-html='choice[2]'></dd>
+                    </dl>
+                  </template>
+                  <span v-else v-html='choice[1]'>
+                </label>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </v-popover>
+  </fieldset>
+</selector>
+
+{%- endmacro %}

From 5acaf2c7c2a9006b0cc52cf8b84d06b105a2003c Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:55:32 -0400
Subject: [PATCH 02/12] use selector macro on new member screen

---
 templates/member_new.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/member_new.html b/templates/member_new.html
index ad3723bf..a1819bed 100644
--- a/templates/member_new.html
+++ b/templates/member_new.html
@@ -3,6 +3,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/options_input.html" import OptionsInput %}
+{% from "components/selector.html" import Selector %}
 
 {% block content %}
 
@@ -20,7 +21,7 @@
       {{ TextInput(form.last_name) }}
       {{ TextInput(form.email,placeholder='jane@mail.mil', validation='email') }}
       {{ TextInput(form.dod_id,placeholder='10-digit number on the back of the CAC', validation='dodId') }}
-      {{ OptionsInput(form.workspace_role) }}
+      {{ Selector(form.workspace_role) }}
     </div>
   </div>
 

From 116ed3c3f630a85fb6a92b21b786db8ee9de1f8b Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:55:51 -0400
Subject: [PATCH 03/12] workspace role data

---
 atst/forms/data.py       |  8 ++++++++
 atst/forms/new_member.py | 13 ++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/atst/forms/data.py b/atst/forms/data.py
index fba93d84..d1b1a976 100644
--- a/atst/forms/data.py
+++ b/atst/forms/data.py
@@ -102,3 +102,11 @@ COMPLETION_DATE_RANGES = [
     ("3-6 months", "3-6 months"),
     ("Above 12 months", "Above 12 months"),
 ]
+
+WORKSPACE_ROLES = [
+    ("admin", "Admin", "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
+    ("billing_auditor", "Billing Auditor", "Nullam sit amet sem volutpat, congue est nec, euismod leo."),
+    ("developer", "Developer", "Aenean suscipit facilisis eros, vitae malesuada dui egestas in."),
+    ("owner", "Owner", "Nullam luctus a arcu non placerat."),
+    ("security_auditor", "Security Auditor", "In ut leo vitae libero convallis finibus nec ac massa. Aliquam bibendum nulla at eros dapibus tristique."),
+]
diff --git a/atst/forms/new_member.py b/atst/forms/new_member.py
index 90bd1b1c..dc016d25 100644
--- a/atst/forms/new_member.py
+++ b/atst/forms/new_member.py
@@ -6,6 +6,8 @@ from wtforms.validators import Required, Email, Length
 from atst.forms.validators import IsNumber
 from atst.forms.fields import SelectField
 
+from .data import (WORKSPACE_ROLES)
+
 
 class NewMemberForm(Form):
 
@@ -15,14 +17,7 @@ class NewMemberForm(Form):
     dod_id = StringField("DOD ID", validators=[Required(), Length(min=10), IsNumber()])
     workspace_role = SelectField(
         "Workspace Role",
-        choices=[
-            ("", "Select a Role"),
-            ("admin", "Admin"),
-            ("billing_auditor", "Billing Auditor"),
-            ("ccpo", "CCPO"),
-            ("developer", "Developer"),
-            ("owner", "Owner"),
-            ("security_auditor", "Security Auditor"),
-        ],
+        choices=WORKSPACE_ROLES,
         validators=[Required()],
+        default=''
     )

From 323890b9e3b7443516d743e7c174b59167779e63 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:56:05 -0400
Subject: [PATCH 04/12] to json filter

---
 atst/filters.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/atst/filters.py b/atst/filters.py
index 6ecd6d1f..78357a72 100644
--- a/atst/filters.py
+++ b/atst/filters.py
@@ -1,4 +1,5 @@
 import re
+import json
 from flask import current_app as app
 from werkzeug.datastructures import FileStorage
 
@@ -49,6 +50,8 @@ def mixedContentToJson(value):
         value["task_order"] = value["task_order"].filename
     return app.jinja_env.filters["tojson"](value)
 
+def toJson(data):
+    return json.dumps(data)
 
 def register_filters(app):
     app.jinja_env.filters["iconSvg"] = iconSvg
@@ -57,3 +60,4 @@ def register_filters(app):
     app.jinja_env.filters["readableInteger"] = readableInteger
     app.jinja_env.filters["getOptionLabel"] = getOptionLabel
     app.jinja_env.filters["mixedContentToJson"] = mixedContentToJson
+    app.jinja_env.filters["toJson"] = toJson

From 44dfbbf9d052193df9581f89f82ad2f06fed97c1 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:56:19 -0400
Subject: [PATCH 05/12] selector styles

---
 styles/atat.scss                  |  2 ++
 styles/components/_selector.scss  | 54 +++++++++++++++++++++++++++++++
 styles/elements/_block_lists.scss |  2 ++
 styles/elements/_inputs.scss      | 10 ++++--
 styles/elements/_tooltip.scss     |  2 +-
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 styles/components/_selector.scss

diff --git a/styles/atat.scss b/styles/atat.scss
index 1b7b65fd..3d70a544 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -33,6 +33,8 @@
 @import 'components/progress_menu.scss';
 @import 'components/search_bar';
 @import 'components/forms';
+@import 'components/selector';
+
 
 @import 'sections/login';
 @import 'sections/request_approval';
diff --git a/styles/components/_selector.scss b/styles/components/_selector.scss
new file mode 100644
index 00000000..7b95b325
--- /dev/null
+++ b/styles/components/_selector.scss
@@ -0,0 +1,54 @@
+.selector {
+  max-width: 30em;
+
+  .trigger {
+    display: block !important;
+  }
+
+  legend {
+    @include h4;
+    padding-bottom: $gap / 2;
+  }
+
+  .selector__button {
+    width: 100%;
+    height: $input-height;
+    margin: 0;
+    padding: $input-padding-vertical 0.7em;
+    line-height: $input-line-height;
+    color: $color-base;
+    font-size: $base-font-size;
+    font-weight: $font-normal;
+    text-align: left;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $color-gray;
+    border-radius: 0;
+    box-sizing: border-box;
+    background-color: $color-white;
+    background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
+    background-position: right 1.3rem center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+  }
+
+  .tooltip {
+    &.popover {
+      .popover-inner {
+        padding: 0;
+
+        .block-list {
+          margin: 0;
+
+          label {
+            padding: 0;
+          }
+        }
+      }
+
+      .popover-arrow {
+        background-color: $color-white;
+      }
+    }
+  }
+}
diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss
index 1da1c14d..a0f3071a 100644
--- a/styles/elements/_block_lists.scss
+++ b/styles/elements/_block_lists.scss
@@ -106,6 +106,8 @@
       justify-content: space-between;
       &::before {
         flex-shrink: 0;
+        margin-right: 0;
+        margin-left: $gap * 2;
       }
 
       &:hover {
diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index 53fb9d9f..e3f49aac 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -37,7 +37,8 @@
 
   input,
   textarea,
-  select {
+  select,
+  .selector__button {
     border-color: $state-color;
     border-width: $border-width;
   }
@@ -72,6 +73,10 @@
     position: relative;
     clear: both;
 
+    dd {
+      font-weight: normal;
+    }
+
     .icon-validation {
       position: absolute;
       top: 100%;
@@ -105,7 +110,8 @@
 
   input,
   textarea,
-  select {
+  select,
+  .selector__button {
     @include line-max;
     margin: 0;
     box-sizing: border-box;
diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
index 44876171..0c81d50a 100644
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@@ -68,7 +68,7 @@
       background: $color;
       color: black;
       padding: 24px;
-      border-radius: 5px;
+      //border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }
 

From 9d98b98b4ecbc163e9af427b67167d56ccd80173 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:56:37 -0400
Subject: [PATCH 06/12] Use hidden input to hold value

---
 templates/components/selector.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/components/selector.html b/templates/components/selector.html
index c64bf9a0..d5a8f832 100644
--- a/templates/components/selector.html
+++ b/templates/components/selector.html
@@ -26,6 +26,8 @@
 
       <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
 
+      <input type='hidden' name='{{ field.name }}' v-bind:value='value'/>
+
       <template v-if='showError'>
         <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
       </template>
@@ -37,7 +39,6 @@
               <template v-if='choice[0] !== ""'>
                 <input
                   type='radio'
-                  name='{{ field.name }}'
                   v-bind:id="'{{ field.name }}_' + choice[0]"
                   v-bind:value='choice[0]'
                   v-bind:checked='value === choice[0]'

From ab77935cdcb7a832aea0a60ca6eea4052e0578d9 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 14:56:56 -0400
Subject: [PATCH 07/12] selector vue component

---
 js/components/selector.js | 44 +++++++++++++++++++++++++++++++++++++++
 js/index.js               |  4 +++-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 js/components/selector.js

diff --git a/js/components/selector.js b/js/components/selector.js
new file mode 100644
index 00000000..b6c23023
--- /dev/null
+++ b/js/components/selector.js
@@ -0,0 +1,44 @@
+import { VPopover } from 'v-tooltip'
+
+export default {
+  name: 'selector',
+
+  components: {
+    VPopover
+  },
+
+  props: {
+    choices: Array,
+    defaultLabel: String,
+    initialErrors: Array,
+    initialChoice: {
+      type: String,
+      default: null
+    }
+  },
+
+  data: function () {
+    return {
+      value: this.initialChoice || null,
+      showError: (this.initialErrors && this.initialErrors.length) || false
+    }
+  },
+
+  computed: {
+    label: function () {
+      return this.value
+        ? this.choices.find((choice) => {
+          return this.value === choice[0]
+        })[1]
+        : this.defaultLabel
+    }
+  },
+
+  methods: {
+    change: function (e) {
+      this.value = e.target.value
+      this.showError = false
+      setTimeout(() => this.$refs.popover.hide(), 300)
+    }
+  },
+}
diff --git a/js/index.js b/js/index.js
index b89505d2..2ce01476 100644
--- a/js/index.js
+++ b/js/index.js
@@ -13,6 +13,7 @@ import financial from './components/forms/financial'
 import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
 import Modal from './mixins/modal'
+import selector from './components/selector'
 
 Vue.use(VTooltip)
 
@@ -28,7 +29,8 @@ const app = new Vue({
     DetailsOfUse,
     poc,
     financial,
-    NewProject
+    NewProject,
+    selector
   },
   mounted: function() {
     const modalOpen = document.querySelector("#modalOpen")

From c45e643522ae7ae161be57dc0080171234dd684d Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 30 Aug 2018 16:21:41 -0400
Subject: [PATCH 08/12] Add real roles and descriptions

---
 atst/forms/data.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/atst/forms/data.py b/atst/forms/data.py
index d1b1a976..88758792 100644
--- a/atst/forms/data.py
+++ b/atst/forms/data.py
@@ -104,9 +104,9 @@ COMPLETION_DATE_RANGES = [
 ]
 
 WORKSPACE_ROLES = [
-    ("admin", "Admin", "Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
-    ("billing_auditor", "Billing Auditor", "Nullam sit amet sem volutpat, congue est nec, euismod leo."),
-    ("developer", "Developer", "Aenean suscipit facilisis eros, vitae malesuada dui egestas in."),
-    ("owner", "Owner", "Nullam luctus a arcu non placerat."),
-    ("security_auditor", "Security Auditor", "In ut leo vitae libero convallis finibus nec ac massa. Aliquam bibendum nulla at eros dapibus tristique."),
+    ("owner", "Workspace Owner", "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests."),
+    ("admin", "Administrator", "Can add and edit projects, environments, members, but cannot deactivate. Cannot view budget reports or JEDI Cloud requests."),
+    ("developer", "Developer", "Can view only the projects and environments they are granted access to. Can also view members associated with each environment."),
+    ("billing_auditor", "Billing Auditor", "Can view only the projects and environments they are granted access to. Can also view budgets and reports associated with the workspace."),
+    ("security_auditor", "Security Auditor", "Can view only the projects and environments they are granted access to. Can also view activity logs."),
 ]

From 0df7c0f56a6a4d4e68b32a4742b2ccbda6eeffd9 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Fri, 31 Aug 2018 09:08:35 -0400
Subject: [PATCH 09/12] use jinja's built in `tojson` filter

---
 atst/filters.py                    | 3 ---
 templates/components/selector.html | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/atst/filters.py b/atst/filters.py
index 78357a72..dc61ddae 100644
--- a/atst/filters.py
+++ b/atst/filters.py
@@ -50,8 +50,6 @@ def mixedContentToJson(value):
         value["task_order"] = value["task_order"].filename
     return app.jinja_env.filters["tojson"](value)
 
-def toJson(data):
-    return json.dumps(data)
 
 def register_filters(app):
     app.jinja_env.filters["iconSvg"] = iconSvg
@@ -60,4 +58,3 @@ def register_filters(app):
     app.jinja_env.filters["readableInteger"] = readableInteger
     app.jinja_env.filters["getOptionLabel"] = getOptionLabel
     app.jinja_env.filters["mixedContentToJson"] = mixedContentToJson
-    app.jinja_env.filters["toJson"] = toJson
diff --git a/templates/components/selector.html b/templates/components/selector.html
index d5a8f832..cfa44d0a 100644
--- a/templates/components/selector.html
+++ b/templates/components/selector.html
@@ -4,7 +4,7 @@
 {% macro Selector(field, default_label='Select an option') -%}
 
 <selector
-  v-bind:choices='{{ field.choices | toJson }}'
+  v-bind:choices='{{ field.choices | tojson }}'
   default-label='{{ default_label }}'
   {% if field.data %}initial-choice='{{ field.data }}'{% endif %}
   {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}

From f0de0eddb45bc796009ff8e41a4858e388f01240 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Fri, 31 Aug 2018 09:09:48 -0400
Subject: [PATCH 10/12] run formatter

---
 atst/forms/data.py       | 30 +++++++++++++++++++++++++-----
 atst/forms/new_member.py |  7 ++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/atst/forms/data.py b/atst/forms/data.py
index 88758792..6a41c647 100644
--- a/atst/forms/data.py
+++ b/atst/forms/data.py
@@ -104,9 +104,29 @@ COMPLETION_DATE_RANGES = [
 ]
 
 WORKSPACE_ROLES = [
-    ("owner", "Workspace Owner", "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests."),
-    ("admin", "Administrator", "Can add and edit projects, environments, members, but cannot deactivate. Cannot view budget reports or JEDI Cloud requests."),
-    ("developer", "Developer", "Can view only the projects and environments they are granted access to. Can also view members associated with each environment."),
-    ("billing_auditor", "Billing Auditor", "Can view only the projects and environments they are granted access to. Can also view budgets and reports associated with the workspace."),
-    ("security_auditor", "Security Auditor", "Can view only the projects and environments they are granted access to. Can also view activity logs."),
+    (
+        "owner",
+        "Workspace Owner",
+        "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests.",
+    ),
+    (
+        "admin",
+        "Administrator",
+        "Can add and edit projects, environments, members, but cannot deactivate. Cannot view budget reports or JEDI Cloud requests.",
+    ),
+    (
+        "developer",
+        "Developer",
+        "Can view only the projects and environments they are granted access to. Can also view members associated with each environment.",
+    ),
+    (
+        "billing_auditor",
+        "Billing Auditor",
+        "Can view only the projects and environments they are granted access to. Can also view budgets and reports associated with the workspace.",
+    ),
+    (
+        "security_auditor",
+        "Security Auditor",
+        "Can view only the projects and environments they are granted access to. Can also view activity logs.",
+    ),
 ]
diff --git a/atst/forms/new_member.py b/atst/forms/new_member.py
index dc016d25..49834d9f 100644
--- a/atst/forms/new_member.py
+++ b/atst/forms/new_member.py
@@ -6,7 +6,7 @@ from wtforms.validators import Required, Email, Length
 from atst.forms.validators import IsNumber
 from atst.forms.fields import SelectField
 
-from .data import (WORKSPACE_ROLES)
+from .data import WORKSPACE_ROLES
 
 
 class NewMemberForm(Form):
@@ -16,8 +16,5 @@ class NewMemberForm(Form):
     email = EmailField("Email Address", validators=[Required(), Email()])
     dod_id = StringField("DOD ID", validators=[Required(), Length(min=10), IsNumber()])
     workspace_role = SelectField(
-        "Workspace Role",
-        choices=WORKSPACE_ROLES,
-        validators=[Required()],
-        default=''
+        "Workspace Role", choices=WORKSPACE_ROLES, validators=[Required()], default=""
     )

From 5af6eab556c457a6ff186e14e1c0c4ac09f4847b Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Fri, 31 Aug 2018 10:08:31 -0400
Subject: [PATCH 11/12] remove unused import

---
 atst/filters.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/atst/filters.py b/atst/filters.py
index dc61ddae..6ecd6d1f 100644
--- a/atst/filters.py
+++ b/atst/filters.py
@@ -1,5 +1,4 @@
 import re
-import json
 from flask import current_app as app
 from werkzeug.datastructures import FileStorage
 

From 806fb3c0d904edda051bbd16eaa0af36cca35ee5 Mon Sep 17 00:00:00 2001
From: andrewdds <40467269+andrewdds@users.noreply.github.com>
Date: Fri, 31 Aug 2018 11:02:58 -0400
Subject: [PATCH 12/12] Remove commented css line

---
 styles/elements/_tooltip.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
index 0c81d50a..d444826f 100644
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@@ -68,7 +68,6 @@
       background: $color;
       color: black;
       padding: 24px;
-      //border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }