Merge pull request #206 from dod-ccpo/multiple-environments

Allow a user to add multiple environments when creating a project

templates/workspace_project_new.html

@@ -1,6 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/tooltip.html" import Tooltip %}
+{% from "components/alert.html" import Alert %}
 
 {% extends "base_workspace.html" %}
 
@@ -24,6 +25,10 @@
       </div>
     </div>
 
+    {% if form.environment_names.errors %}
+      {{ Alert("Missing Environments", message="Provide at least one environment name.", level="error") }}
+    {% endif %}
+
       <div class="block-list project-list-item">
         <header class="block-list__header">
           <h2 class="block-list__title">Project Environments</h2>
@@ -34,10 +39,15 @@
         </header>
 
         <ul>
-          <li v-for="(_, i) in environments" class="block-list__item">
-              {{ TextInput(form.environment_name) }}
-              <span class="icon-link icon-link--danger icon-link--vertical" v-on:click="removeEnvironment(i)">{{ Icon('x') }} Remove</span>
-
+          <li v-for="(environment, i) in environments" class="block-list__item project-edit__env-list-item">
+            <div class="usa-input">
+              <label :for="'environment_names-' + i">Environment Name</label>
+              <input type="text" :name="'environment_names-' + i" :id="'environment_names-' + i" v-model="environment.name">
+            </div>
+            <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='project-edit__env-list-item__remover'>
+              {{ Icon('trash') }}
+              <span>Remove</span>
+            </button>
           </li>
         </ul>