Show warning if realtime data has changed since the form has opened
This commit is contained in:
parent
f5675666a1
commit
6a14a51525
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue