diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-18 18:51:51 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-18 18:51:51 +0300 |
commit | 6a14a51525beddcdaac99f5350964df80ae868a6 (patch) | |
tree | 4b34bd4df1e6628a92998c1300bb7ec9913bc299 | |
parent | f5675666a11ff296e27b6dbdf0f789242fcd1b7f (diff) |
Show warning if realtime data has changed since the form has opened
4 files changed, 50 insertions, 3 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue index 47d9a27e99e..3d5b0cb18f8 100644 --- a/app/assets/javascripts/issue_show/components/app.vue +++ b/app/assets/javascripts/issue_show/components/app.vue @@ -81,11 +81,11 @@ export default { openForm() { if (!this.showForm) { this.showForm = true; - this.store.formState = { + this.store.formState = Object.assign(this.store.formState, { title: this.state.titleText, confidential: this.isConfidential, description: this.state.descriptionText, - }; + }); } }, closeForm() { @@ -128,7 +128,14 @@ export default { resource: this.service, method: 'getData', successCallback: (res) => { - this.store.updateState(res.json()); + const data = res.json(); + const shouldUpdate = this.store.stateShouldUpdate(data); + + this.store.updateState(data); + + if (this.showForm && (shouldUpdate.title || shouldUpdate.description)) { + this.store.formState.lockedWarningVisible = true; + } }, errorCallback(err) { throw new Error(err); diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index 4288c5f8d90..e53860a77af 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -1,4 +1,6 @@ <script> + import eventHub from '../event_hub'; + import lockedWarning from './locked_warning.vue'; import titleField from './fields/title.vue'; import descriptionField from './fields/description.vue'; import editActions from './edit_actions.vue'; @@ -24,16 +26,26 @@ }, }, components: { + lockedWarning, titleField, descriptionField, editActions, confidentialCheckbox, }, + methods: { + closeForm() { + eventHub.$emit('close.form'); + this.formState.lockedWarningVisible = false; + }, + }, }; </script> <template> <form> + <locked-warning + v-if="formState.lockedWarningVisible" + @closeForm="closeForm" /> <title-field :form-state="formState" /> <confidential-checkbox diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue new file mode 100644 index 00000000000..b9960b4e5f2 --- /dev/null +++ b/app/assets/javascripts/issue_show/components/locked_warning.vue @@ -0,0 +1,20 @@ +<script> + export default { + methods: { + closeForm() { + this.$emit('closeForm'); + }, + }, + }; +</script> + +<template> + <div class="alert alert-danger"> + Someone edited the issue the same time you did. Please check out + <a + href="#" + role="button" + @click.prevent="closeForm">the issue</a> + and make sure your changes will not unintentionally remove theirs. + </div> +</template> diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js index d90716bef80..2afa5b18726 100644 --- a/app/assets/javascripts/issue_show/stores/index.js +++ b/app/assets/javascripts/issue_show/stores/index.js @@ -16,6 +16,7 @@ export default class Store { title: '', confidential: false, description: '', + lockedWarningVisible: false, }; } @@ -27,4 +28,11 @@ export default class Store { this.state.taskStatus = data.task_status; this.state.updatedAt = data.updated_at; } + + stateShouldUpdate(data) { + return { + title: this.state.titleText !== data.title_text, + description: this.state.descriptionText !== data.description_text, + }; + } } |