From 5955eb1e59b3eb1985193037f52922804f2ab3ba Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Tue, 4 May 2021 15:02:09 +0200
Subject: [PATCH] lesson 181: extended route guards unsaved data

---
 .../src/components/users/UsersList.vue        | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/2021-03-27_routing-01-starting-setup/src/components/users/UsersList.vue b/2021-03-27_routing-01-starting-setup/src/components/users/UsersList.vue
index dce60f1..dfb19ff 100644
--- a/2021-03-27_routing-01-starting-setup/src/components/users/UsersList.vue
+++ b/2021-03-27_routing-01-starting-setup/src/components/users/UsersList.vue
@@ -1,5 +1,6 @@
 <template>
   <button @click="confirmInput">Confirm</button>
+  <button @click="saveChanges">Save Changes</button>
   <ul>
     <user-item
       v-for="user in users"
@@ -18,10 +19,27 @@ export default {
     UserItem
   },
   inject: ['users'],
+  data() {
+    return {
+      changesSaved: false
+    };
+  },
   methods: {
     confirmInput() {
-      console.log('fo');
       this.$router.push('/teams');
+    },
+    saveChanges() {
+      this.changesSaved = true;
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    if (this.changesSaved) {
+      next();
+    } else {
+      const userWantsToLeave = confirm(
+        'Changes might be lost, do you want to continue?'
+      );
+      next(userWantsToLeave);
     }
   }
 };