From 020e1b9cb0438b56865ce076d4c32a132c6a13b9 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Tue, 21 Aug 2018 15:12:58 -0400
Subject: [PATCH] Allow user to create new fields for environment names

Currently only one of them is being created.
---
 atst/forms/new_project.py            |  2 +-
 js/components/forms/new_project.js   | 46 ++++++++++++++++++++++++++++
 js/index.js                          |  2 ++
 templates/workspace_project_new.html |  9 ++++--
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 js/components/forms/new_project.js

diff --git a/atst/forms/new_project.py b/atst/forms/new_project.py
index 1552a1ab..033312c5 100644
--- a/atst/forms/new_project.py
+++ b/atst/forms/new_project.py
@@ -1,5 +1,5 @@
 from flask_wtf import Form
-from wtforms.fields import StringField, TextAreaField
+from wtforms.fields import StringField, TextAreaField, FieldList
 
 
 class NewProjectForm(Form):
diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js
new file mode 100644
index 00000000..cbea6161
--- /dev/null
+++ b/js/components/forms/new_project.js
@@ -0,0 +1,46 @@
+import textinput from '../text_input'
+
+export default {
+  name: 'new-project',
+
+  components: {
+    textinput
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    const {
+      name,
+      description,
+      environments = ['']
+    } = this.initialData
+
+    return {
+      name,
+      description,
+      environments,
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('onEnvironmentAdded', this.addEnvironment)
+  },
+
+  methods: {
+    addEnvironment: function (event) {
+      this.environments.push('')
+    },
+
+    removeEnvironment: function (index) {
+      if (this.environments.length > 1) {
+        this.environments.splice(index, 1)
+      }
+    }
+  }
+}
diff --git a/js/index.js b/js/index.js
index 4ecd6aa7..3881a313 100644
--- a/js/index.js
+++ b/js/index.js
@@ -8,6 +8,7 @@ import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
 import poc from './components/forms/poc'
 import financial from './components/forms/financial'
+import NewProject from './components/forms/new_project'
 
 Vue.use(VTooltip)
 
@@ -21,6 +22,7 @@ const app = new Vue({
     DetailsOfUse,
     poc,
     financial,
+    NewProject
   },
   methods: {
     closeModal: function(name) {
diff --git a/templates/workspace_project_new.html b/templates/workspace_project_new.html
index 5fdfe042..c01c8d4e 100644
--- a/templates/workspace_project_new.html
+++ b/templates/workspace_project_new.html
@@ -4,6 +4,7 @@
 {% extends "base_workspace.html" %}
 
 {% block workspace_content %}
+<new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
   <form method="POST" action="{{ url_for('workspaces.update_project', workspace_id=workspace.id) }}" >
     {{ form.csrf_token }}
     <div class="panel">
@@ -24,19 +25,21 @@
         </header>
 
         <ul>
-          <li class="block-list__item">
+          <li v-for="(_, i) in environments" class="block-list__item">
             <span class="project-list-item__environment">
               {{ TextInput(form.environment_name) }}
+              <span v-on:click="removeEnvironment(i)">{{ Icon('x') }}</span>
             </span>
           </li>
         </ul>
       </div>
+      <a v-on:click="addEnvironment">Add another environment</a>
     </div>
 
     <div class="action-group">
       <input type="submit" value="Create Project" class="action-group__action usa-button usa-button-big">
-      <!-- <a href="/styleguide" class="action-group__action">Cancel</a> -->
+      <a href="{{ url_for('workspaces.workspace_projects', workspace_id=workspace.id) }}" class="action-group__action">Cancel</a>
     </div>
   </form>
-
+</new-project>
 {% endblock %}