From b6b03e73bcf6acf0a623ed3d9d098422515daa46 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 3 Oct 2018 09:56:50 -0400 Subject: [PATCH 1/7] handle submission by the form's on-submit --- templates/fragments/edit_project_form.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/fragments/edit_project_form.html b/templates/fragments/edit_project_form.html index e6b4977e..f821d0b2 100644 --- a/templates/fragments/edit_project_form.html +++ b/templates/fragments/edit_project_form.html @@ -9,7 +9,7 @@ {% set action_text = 'Create' if new_project else 'Update' %} {% set title_text = 'Add a new project' if new_project else 'Edit {} project'.format(project.name) %} -
+ {% call Modal(name=modalName, dismissable=False) %}

{{ action_text }} project !{ name }

@@ -75,7 +75,7 @@
- +
From e8dcddfa65173e9c31ff9cb2fe07a13b983cfb4a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 3 Oct 2018 09:58:02 -0400 Subject: [PATCH 2/7] Add submit handler that prevents normal submission if `readyToSubmit` flag is not set --- js/components/forms/new_project.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index aaa555d5..21cdf01a 100644 --- a/js/components/forms/new_project.js +++ b/js/components/forms/new_project.js @@ -85,6 +85,13 @@ export default { return names.every((n, index) => names.indexOf(n) === index) }, + handleSubmit: function (modalName, event) { + if (!this.readyToSubmit) { + event.preventDefault() + this.validateAndOpenModal(modalName) + } + }, + validateAndOpenModal: function (modalName) { let isValid = this.$children.reduce((previous, newVal) => { // display textInput error if it is not valid From e86f93243bc0e51e21e70bf98d735d72e8d76c15 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Wed, 3 Oct 2018 09:58:36 -0400 Subject: [PATCH 3/7] set submit flag when the modal is opened --- js/components/forms/new_project.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index 21cdf01a..a1d86e59 100644 --- a/js/components/forms/new_project.js +++ b/js/components/forms/new_project.js @@ -40,6 +40,7 @@ export default { errors: [], environments, name, + readyToSubmit: false } }, @@ -106,6 +107,7 @@ export default { isValid = this.errors.length == 0 && isValid if (isValid) { + this.readyToSubmit = true this.openModal(modalName) } } From 456c5307c778716717266c4f47368d0f9f244e51 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 4 Oct 2018 09:40:51 -0400 Subject: [PATCH 4/7] button type --- templates/fragments/edit_project_form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/fragments/edit_project_form.html b/templates/fragments/edit_project_form.html index f821d0b2..2deea5ac 100644 --- a/templates/fragments/edit_project_form.html +++ b/templates/fragments/edit_project_form.html @@ -75,7 +75,7 @@
- +
From aba2eb28edc16df7bc127189ce2ad1765b714a11 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 4 Oct 2018 14:10:49 -0400 Subject: [PATCH 5/7] make modalName a component prop, rather than passing it into methods --- js/components/forms/new_project.js | 7 ++++--- templates/fragments/edit_project_form.html | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index a1d86e59..a0831116 100644 --- a/js/components/forms/new_project.js +++ b/js/components/forms/new_project.js @@ -16,7 +16,8 @@ export default { initialData: { type: Object, default: () => ({}) - } + }, + modalName: String }, data: function () { @@ -86,10 +87,10 @@ export default { return names.every((n, index) => names.indexOf(n) === index) }, - handleSubmit: function (modalName, event) { + handleSubmit: function (event) { if (!this.readyToSubmit) { event.preventDefault() - this.validateAndOpenModal(modalName) + this.validateAndOpenModal(this.modalName) } }, diff --git a/templates/fragments/edit_project_form.html b/templates/fragments/edit_project_form.html index 2deea5ac..1a3d96b6 100644 --- a/templates/fragments/edit_project_form.html +++ b/templates/fragments/edit_project_form.html @@ -3,13 +3,13 @@ {% from "components/text_input.html" import TextInput %} {% from "components/alert.html" import Alert %} - + {% set new_project = project is not defined %} {% set form_action = url_for('workspaces.create_project', workspace_id=workspace.id) if new_project else url_for('workspaces.edit_project', workspace_id=workspace.id, project_id=project.id) %} {% set action_text = 'Create' if new_project else 'Update' %} {% set title_text = 'Add a new project' if new_project else 'Edit {} project'.format(project.name) %} - + {% call Modal(name=modalName, dismissable=False) %}

{{ action_text }} project !{ name }

From cb3947962c9b99fc8c7ac89ba8ae788644951a50 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 4 Oct 2018 14:11:22 -0400 Subject: [PATCH 6/7] handleCancelSubmit method, which falsifies readyToSubmit --- js/components/forms/new_project.js | 5 +++++ templates/fragments/edit_project_form.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index a0831116..8d930d1a 100644 --- a/js/components/forms/new_project.js +++ b/js/components/forms/new_project.js @@ -94,6 +94,11 @@ export default { } }, + handleCancelSubmit: function () { + this.readyToSubmit = false + this.closeModal(this.modalName) + }, + validateAndOpenModal: function (modalName) { let isValid = this.$children.reduce((previous, newVal) => { // display textInput error if it is not valid diff --git a/templates/fragments/edit_project_form.html b/templates/fragments/edit_project_form.html index 1a3d96b6..b442d3f8 100644 --- a/templates/fragments/edit_project_form.html +++ b/templates/fragments/edit_project_form.html @@ -23,7 +23,7 @@
- +
{% endcall %} From 6b0c285d1c3237de78aaf11dfcc078a23529efa2 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 4 Oct 2018 14:50:27 -0400 Subject: [PATCH 7/7] no need to pass along modalName --- js/components/forms/new_project.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/forms/new_project.js b/js/components/forms/new_project.js index 8d930d1a..219f7314 100644 --- a/js/components/forms/new_project.js +++ b/js/components/forms/new_project.js @@ -90,7 +90,7 @@ export default { handleSubmit: function (event) { if (!this.readyToSubmit) { event.preventDefault() - this.validateAndOpenModal(this.modalName) + this.validateAndOpenModal() } }, @@ -99,7 +99,7 @@ export default { this.closeModal(this.modalName) }, - validateAndOpenModal: function (modalName) { + validateAndOpenModal: function () { let isValid = this.$children.reduce((previous, newVal) => { // display textInput error if it is not valid if (!newVal.showValid) { @@ -114,7 +114,7 @@ export default { if (isValid) { this.readyToSubmit = true - this.openModal(modalName) + this.openModal(this.modalName) } } }