Allow user to create new fields for environment names

Currently only one of them is being created.

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):

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)
+      }
+    }
+  }
+}

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) {

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 %}