Merge pull request #326 from dod-ccpo/new-project-validation-#160064518

New project validation #160064518

js/components/forms/new_project.js

@@ -32,6 +32,12 @@ export default {
     ).map(createEnvironment)
 
     return {
+      validations: [
+        {func: this.hasEnvironments, message: "Provide at least one environment name."},
+        {func: this.envNamesAreUnique, message: "Environment names must be unique."},
+        {func: this.environmentsHaveNames, message: "Environment names cannot be empty."},
+      ],
+      errors: [],
       environments,
       name,
     }
@@ -50,6 +56,51 @@ export default {
       if (this.environments.length > 1) {
         this.environments.splice(index, 1)
       }
+    },
+
+    validate: function() {
+      this.errors = this.validations.map((validation) => {
+        if (!validation.func()) {
+          return validation.message
+        }
+      }).filter(Boolean)
+    },
+
+    hasEnvironments: function () {
+      return this.environments.length > 0 && this.environments.some((e) => e.name !== "")
+    },
+
+    environmentsHaveNames: function () {
+      if (this.environments.length > 1) {
+        // only want to display this error if we have multiple envs and one or
+        // more do not have names
+        return this.environments.every((e) => e.name !== "")
+      } else {
+        return true
+      }
+    },
+
+    envNamesAreUnique: function () {
+      const names = this.environments.map((e) => e.name)
+      return names.every((n, index) => names.indexOf(n) === index)
+    },
+
+    validateAndOpenModal: function (modalName) {
+      let isValid = this.$children.reduce((previous, newVal) => {
+        // display textInput error if it is not valid
+        if (!newVal.showValid) {
+          newVal.showError = true
+        }
+
+        return newVal.showValid && previous
+      }, true)
+
+      this.validate()
+      isValid = this.errors.length == 0 && isValid
+
+      if (isValid) {
+        this.openModal(modalName)
+      }
     }
   }
 }

templates/components/alert.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Alert(title, message=None, actions=None, level='info', fragment=None) -%}
+{% macro Alert(title, message=None, actions=None, level='info', fragment=None, vue_template=False) -%}
   {% set role = 'alertdialog' if actions else 'alert' %}
   {% set levels = {
     'warning': {
@@ -25,7 +25,11 @@
     {{ Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') }}
 
     <div class='alert__content'>
-      <h2 class='alert__title'>{{title}}</h2>
+      {% if vue_template %}
+        <h2 class='alert__title' v-html='title'></h2>
+      {% else %}
+        <h2 class='alert__title'>{{title}}</h2>
+      {% endif %}
 
       {% if message %}
         <div class='alert__message'>{{ message | safe }}</div>

templates/fragments/edit_project_form.html

@@ -42,11 +42,11 @@
       </div>
     </div>
 
-    {% if form.environment_names.errors %}
-      {% for error in form.environment_names.errors %}
-        {{ Alert(error, level="error") }}
-      {% endfor %}
-    {% endif %}
+    <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
+      <div v-cloak v-for="title in errors" :key="title">
+        {{ Alert(message=None, level="error", vue_template=True) }}
+      </div>
+    </div>
 
       <div class="block-list project-list-item">
         <header class="block-list__header block-list__header--grow">
@@ -74,9 +74,8 @@
         </div>
       </div>
 
-
       <div class="action-group">
-        <button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
+        <button v-on:click="validateAndOpenModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
       </div>
 
     </div>