Merge pull request #210 from dod-ccpo/confirm-modal

Confirm project creation

js/components/forms/details_of_use.js

@@ -1,12 +1,15 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import { conformToMask } from 'vue-text-mask'
 
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 
 export default {
   name: 'details-of-use',
 
+  mixins: [FormMixin],
+
   components: {
     textinput,
     optionsinput,
@@ -33,10 +36,6 @@ export default {
     }
   },
 
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
   computed: {
     annualSpend: function () {
       const monthlySpend = this.estimated_monthly_spend || 0
@@ -60,12 +59,6 @@ export default {
     formatDollars: function (intValue) {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
-    },
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
     }
-    },
   }
 }

js/components/forms/financial.js

@@ -1,9 +1,12 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 
 export default {
   name: 'financial',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -24,18 +27,5 @@ export default {
     return {
       funding_type
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }

js/components/forms/new_project.js

@@ -1,3 +1,4 @@
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 
 const createEnvironment = (name) => ({ name })
@@ -5,6 +6,8 @@ const createEnvironment = (name) => ({ name })
 export default {
   name: 'new-project',
 
+  mixins: [FormMixin],
+
   components: {
     textinput
   },
@@ -19,6 +22,7 @@ export default {
   data: function () {
     const {
       environment_names,
+      name,
     } = this.initialData
 
     const environments = (
@@ -29,6 +33,7 @@ export default {
 
     return {
       environments,
+      name,
     }
   },
 

js/components/forms/poc.js

@@ -1,3 +1,4 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 import checkboxinput from '../checkbox_input'
@@ -5,6 +6,8 @@ import checkboxinput from '../checkbox_input'
 export default {
   name: 'poc',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -26,18 +29,5 @@ export default {
     return {
         am_poc
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }

js/index.js

@@ -10,9 +10,12 @@ import poc from './components/forms/poc'
 import financial from './components/forms/financial'
 import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
+import Modal from './mixins/modal'
 
 Vue.use(VTooltip)
 
+Vue.mixin(Modal)
+
 const app = new Vue({
   el: '#app-root',
   components: {
@@ -25,28 +28,11 @@ const app = new Vue({
     financial,
     NewProject
   },
-  methods: {
-    closeModal: function(name) {
-      this.modals[name] = false
-    },
-    openModal: function (name) {
-      this.modals[name] = true
-    }
-  },
-  data: function() {
-    return {
-      modals: {
-        styleguideModal: false,
-        pendingFinancialVerification: false,
-        pendingCCPOApproval: false,
-      }
-    }
-  },
   mounted: function() {
-    const modalOpen = document.querySelector("#modalOpen");
+    const modalOpen = document.querySelector("#modalOpen")
     if (modalOpen) {
-      const modal = modalOpen.getAttribute("data-modal");
+      const modal = modalOpen.getAttribute("data-modal")
-      this.modals[modal] = true;
+      this.openModal(modal)
     }
   },
   delimiters: ['!{', '}']

js/mixins/form.js

@@ -0,0 +1,14 @@
+export default {
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}

js/mixins/modal.js

@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    closeModal: function(name) {
+      this.modals[name] = false
+    },
+    openModal: function (name) {
+      this.modals[name] = true
+    }
+  },
+  data: function() {
+    return {
+      modals: {
+        styleguideModal: false,
+        newProjectConfirmation: false,
+        pendingFinancialVerification: false,
+        pendingCCPOApproval: false,
+      }
+    }
+  }
+}

templates/components/modal.html

@@ -8,7 +8,7 @@
             {{ caller() }}
 
             {% if dismissable %}
-              <button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+              <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
                 {{ Icon('x') }}
                 <span>Close</span>
               </button>

templates/workspace_project_new.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/tooltip.html" import Tooltip %}
 {% from "components/alert.html" import Alert %}
@@ -6,8 +7,27 @@
 {% extends "base_workspace.html" %}
 
 {% block workspace_content %}
+
+{% set modalName = "newProjectConfirmation" %}
+
 <new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
   <form method="POST" action="{{ url_for('workspaces.update_project', workspace_id=workspace.id) }}" >
+    {% call Modal(name=modalName, dismissable=False) %}
+      <h1>Are you sure you want to create <strong>!{ name }</strong> project?</h1>
+
+      <p>
+      When you click "Create Project" the following environments will be created as individual cloud resource groups under <strong>!{ name }</strong> project:
+      <span v-for="(environment, index) in environments">
+        <strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
+      </span>
+      </p>
+
+      <div class='action-group'>
+        <button type='submit' class='action-group__action usa-button'>Create Project</button>
+        <a v-on:click="closeModal('{{ modalName }}')" class='action-group__action'>Cancel</a>
+      </div>
+    {% endcall %}
+
     {{ form.csrf_token }}
     <div class="panel">
       <div class="panel__heading panel__heading--grow">
@@ -58,8 +78,7 @@
 
 
       <div class="action-group">
-        <input type="submit" value="Create Project" class="usa-button usa-button-primary">
+        <div v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary">Create Project</div>
-        <a href="{{ url_for('workspaces.workspace_projects', workspace_id=workspace.id) }}" class="action-group__action">Cancel</a>
       </div>
 
     </div>