From 180cedf6dbc20a8e079aa7f663c7b8605a190548 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 23 Aug 2018 15:50:41 -0400 Subject: [PATCH 1/4] Add global mixin for modal This allows the modal to be used anywhere in the component hierarchy, rather than requiring it to be in the top level. --- js/index.js | 26 ++++++-------------------- js/mixins/modal.js | 20 ++++++++++++++++++++ 2 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 js/mixins/modal.js diff --git a/js/index.js b/js/index.js index fa8d072a..359844cc 100644 --- a/js/index.js +++ b/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"); - this.modals[modal] = true; + const modal = modalOpen.getAttribute("data-modal") + this.openModal(modal) } }, delimiters: ['!{', '}'] diff --git a/js/mixins/modal.js b/js/mixins/modal.js new file mode 100644 index 00000000..7da9caaa --- /dev/null +++ b/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, + } + } + } +} From f599abb5dd10bafe712f07e0076ad5159fb7e2ef Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 23 Aug 2018 16:00:48 -0400 Subject: [PATCH 2/4] Specify type of button in modal to prevent unintended submissions --- templates/components/modal.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/components/modal.html b/templates/components/modal.html index b0bafd12..43c1297a 100644 --- a/templates/components/modal.html +++ b/templates/components/modal.html @@ -8,7 +8,7 @@ {{ caller() }} {% if dismissable %} - From b8a983f4dc95d4c8e13879cbfc002f4fe4f92bc7 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 23 Aug 2018 16:33:13 -0400 Subject: [PATCH 3/4] Use form mixin for add field change handler --- js/components/forms/details_of_use.js | 15 ++++----------- js/components/forms/financial.js | 16 +++------------- js/components/forms/poc.js | 16 +++------------- js/mixins/form.js | 14 ++++++++++++++ 4 files changed, 24 insertions(+), 37 deletions(-) create mode 100644 js/mixins/form.js diff --git a/js/components/forms/details_of_use.js b/js/components/forms/details_of_use.js index ff1abccc..0c11d192 100644 --- a/js/components/forms/details_of_use.js +++ b/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 - } - }, + } } } diff --git a/js/components/forms/financial.js b/js/components/forms/financial.js index 2a1fb43b..c4c3b02d 100644 --- a/js/components/forms/financial.js +++ b/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 - } - }, } } diff --git a/js/components/forms/poc.js b/js/components/forms/poc.js index 255c1b04..8b60c0b6 100644 --- a/js/components/forms/poc.js +++ b/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 - } - }, } } diff --git a/js/mixins/form.js b/js/mixins/form.js new file mode 100644 index 00000000..620ccfcd --- /dev/null +++ b/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 + } + }, + } +} From e4649e1b6040e6f3b9d986a1496b4739380dcff5 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 23 Aug 2018 16:50:43 -0400 Subject: [PATCH 4/4] Show confirmation modal when creating project --- js/components/forms/new_project.js | 5 +++++ templates/workspace_project_new.html | 23 +++++++++++++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index ba4e13f5..634c49ff 100644 --- a/js/components/forms/new_project.js +++ b/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, } }, diff --git a/templates/workspace_project_new.html b/templates/workspace_project_new.html index 874f93d3..b32178c7 100644 --- a/templates/workspace_project_new.html +++ b/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" %} +
+ {% call Modal(name=modalName, dismissable=False) %} +

Are you sure you want to create !{ name } project?

+ +

+ When you click "Create Project" the following environments will be created as individual cloud resource groups under !{ name } project: + + !{environment.name} + +

+ +
+ + Cancel +
+ {% endcall %} + {{ form.csrf_token }}
@@ -58,8 +78,7 @@
- - Cancel +
Create Project