Merged contributor work

packages/editor-ui/src/views/NodeView.vue

@@ -128,9 +128,7 @@ import RunData from '@/components/RunData.vue';
 
 import mixins from 'vue-typed-mixins';
 
-import { v4 as uuidv4 } from 'uuid';
-
-import { debounce } from 'lodash';
+import { debounce, isEqual } from 'lodash';
 import axios from 'axios';
 import {
 	IConnection,
@@ -191,6 +189,36 @@ export default mixins(
 				// When a node gets set as active deactivate the create-menu
 				this.createNodeActive = false;
 			},
+			nodes: {
+				async handler (val, oldVal) {
+					// Load a workflow
+					let workflowId = null as string | null;
+					if (this.$route && this.$route.params.name) {
+						workflowId = this.$route.params.name;
+					}
+					if(workflowId !== null) {
+						this.isDirty = await this.dataHasChanged(workflowId);
+					} else {
+						this.isDirty = true;
+					}
+				},
+				deep: true
+			},
+			connections: {
+				async handler (val, oldVal) {
+					// Load a workflow
+					let workflowId = null as string | null;
+					if (this.$route && this.$route.params.name) {
+						workflowId = this.$route.params.name;
+					}
+					if(workflowId !== null) {
+						this.isDirty = await this.dataHasChanged(workflowId);
+					} else {
+						this.isDirty = true;
+					}
+				},
+				deep: true
+			},
 		},
 		computed: {
 			activeNode (): INodeUi | null {
@@ -264,6 +292,7 @@ export default mixins(
 				ctrlKeyPressed: false,
 				debouncedFunctions: [] as any[], // tslint:disable-line:no-any
 				stopExecutionInProgress: false,
+				isDirty: false,
 			};
 		},
 		beforeDestroy () {
@@ -335,6 +364,8 @@ export default mixins(
 				this.$store.commit('setWorkflowSettings', data.settings || {});
 
 				await this.addNodes(data.nodes, data.connections);
+
+				return data;
 			},
 			mouseDown (e: MouseEvent) {
 				// Save the location of the mouse click
@@ -436,6 +467,8 @@ export default mixins(
 					e.stopPropagation();
 					e.preventDefault();
 
+					this.isDirty = false;
+
 					this.callDebounced('saveCurrentWorkflow', 1000);
 				} else if (e.key === 'Enter') {
 					// Activate the last selected node
@@ -1312,12 +1345,14 @@ export default mixins(
 				if (this.$route.params.action === 'workflowSave') {
 					// In case the workflow got saved we do not have to run init
 					// as only the route changed but all the needed data is already loaded
+					this.isDirty = false;
 					return Promise.resolve();
 				}
 
 				if (this.$route.name === 'ExecutionById') {
 					// Load an execution
 					const executionId = this.$route.params.id;
+
 					await this.openExecution(executionId);
 				} else {
 					// Load a workflow
@@ -1325,7 +1360,6 @@ export default mixins(
 					if (this.$route.params.name) {
 						workflowId = this.$route.params.name;
 					}
-
 					if (workflowId !== null) {
 						const workflow = await this.restApi().getWorkflow(workflowId);
 						this.$titleSet(workflow.name, 'IDLE');
@@ -1339,6 +1373,17 @@ export default mixins(
 
 				document.addEventListener('keydown', this.keyDown);
 				document.addEventListener('keyup', this.keyUp);
+
+				window.addEventListener("beforeunload",  (e) => {
+					if(this.isDirty === true) {
+						const confirmationMessage = 'It looks like you have been editing something. '
+								+ 'If you leave before saving, your changes will be lost.';
+						(e || window.event).returnValue = confirmationMessage; //Gecko + IE
+						return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+					} else {
+						return;
+					}
+				});
 			},
 			__addConnection (connection: [IConnection, IConnection], addVisualConnection = false) {
 				if (addVisualConnection === true) {
@@ -1890,13 +1935,13 @@ export default mixins(
 
 		async mounted () {
 			this.$root.$on('importWorkflowData', async (data: IDataObject) => {
-				await this.importWorkflowData(data.data as IWorkflowDataUpdate);
+				const resData = await this.importWorkflowData(data.data as IWorkflowDataUpdate);
 			});
 
 			this.$root.$on('importWorkflowUrl', async (data: IDataObject) => {
 				const workflowData = await this.getWorkflowDataFromUrl(data.url as string);
 				if (workflowData !== undefined) {
-					await this.importWorkflowData(workflowData);
+					const resData = await this.importWorkflowData(workflowData);
 				}
 			});