From 6de48837faf02f70ba5b8d1a0b2268e80caea2d6 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 15 Oct 2018 16:42:53 -0400
Subject: [PATCH] Refactor New Project Form to remove conditional logic and
 include fields relevant to new project

---
 templates/workspaces/projects/new.html | 75 ++++++++++++++++++++++----
 1 file changed, 65 insertions(+), 10 deletions(-)

diff --git a/templates/workspaces/projects/new.html b/templates/workspaces/projects/new.html
index c140023b..8f71d9ad 100644
--- a/templates/workspaces/projects/new.html
+++ b/templates/workspaces/projects/new.html
@@ -1,19 +1,74 @@
 {% extends "workspaces/base.html" %}
 
 {% from "components/alert.html" import Alert %}
+{% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
+{% from "components/text_input.html" import TextInput %}
 
 {% block workspace_content %}
 
-{% set modalName = "newProjectConfirmation" %}
-{% if request.args.get("newWorkspace") %}
-  {{ Alert('Workspace created!',
-    message="\
-      <p>You are now ready to create projects and environments within the JEDI Cloud.</p>
-    ",
-    level='success'
-  ) }}
-{% endif %}
+  {% set modalName = "newProjectConfirmation" %}
+  {% if request.args.get("newWorkspace") %}
+    {{ Alert('Workspace created!',
+      message="\
+        <p>You are now ready to create projects and environments within the JEDI Cloud.</p>
+      ",
+      level='success'
+    ) }}
+  {% endif %}
 
-{% include "fragments/edit_project_form.html" %}
+  <new-project inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
+    <form method="POST" action="{{ url_for('workspaces.create_project', workspace_id=workspace.id) }}" v-on:submit="handleSubmit">
+
+      {% call Modal(name=modalName, dismissable=False) %}
+        <h1>Create project !{ name }</h1>
+
+        <p>
+        When you click <em>Create Project</em>, the environments
+        <span v-for="(environment, index) in environments">
+          <strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
+        </span>
+        will be created as individual cloud resource groups under <strong>!{ name }</strong> project.
+        </p>
+
+        <div class='action-group'>
+          <button type='submit' class='action-group__action usa-button' tabindex='0'>Create Project</button>
+          <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
+        </div>
+      {% endcall %}
+
+      {% include "fragments/edit_project_form.html" %}
+
+      <div class="block-list project-list-item">
+        <header class="block-list__header block-list__header--grow">
+          <h2 class="block-list__title">Project Environments</h2>
+          <p>
+            Each environment created within a project is an enclave of cloud resources that is logically separated from each other for increased security.
+          </p>
+        </header>
+
+        <ul>
+          <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" placeholder="e.g. Development, Staging, Production">
+            </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>
+
+        <div class="block-list__footer">
+          <button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
+        </div>
+      </div>
+
+      <div class="action-group">
+        <button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Project</button>
+      </div>
+    </form>
+  </new-project>
 
 {% endblock %}