52

Author: kossiecoder

db.json

@@ -61,7 +61,7 @@
       "id": 18
     },
     {
-      "subject": "new todo2",
+      "subject": "new todo222",
       "completed": true,
       "id": 21
     }

package-lock.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "vue": "^3.0.0",
     "vue-router": "^4.0.4"
   },

package.json

@@ -35,7 +35,11 @@
       </div>
     </div>
 
-    <button type="submit" class="btn btn-primary">
+    <button 
+      type="submit" 
+      class="btn btn-primary"
+      :disabled="!todoUpdated"
+    >
       Save
     </button>
     <button 
@@ -50,23 +54,33 @@
 <script>
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
-import { ref } from '@vue/reactivity';
+import { ref, computed } from 'vue';
+import _ from 'lodash';
 
 export default {
     setup() {
         const route = useRoute();
         const router = useRouter();
         const todo = ref(null);
+        const originalTodo = ref(null);
         const loading = ref(true);
         const todoId = route.params.id
 
         const getTodo = async () => {
-          const res = await axios.get(`http://localhost:3000/todos/${todoId}`);
+          const res = await axios.get(`
+            http://localhost:3000/todos/${todoId}
+          `);
+
+          todo.value = { ...res.data };
+          originalTodo.value = { ...res.data };
 
-          todo.value = res.data;
           loading.value = false;
         };
 
+        const todoUpdated = computed(() => {
+          return !_.isEqual(todo.value, originalTodo.value)
+        });
+
         const toggleTodoStatus = () => {
           todo.value.completed = !todo.value.completed;
         };
@@ -80,12 +94,14 @@ export default {
         getTodo();
 
         const onSave = async () => {
-          const res = await axios.put(`http://localhost:3000/todos/${todoId}`, {
+          const res = await axios.put(`
+            http://localhost:3000/todos/${todoId}
+          `, {
             subject: todo.value.subject,
             completed: todo.value.completed
           });
 
-          console.log(res);
+          originalTodo.value = {...res.data};
         };
 
         return {
@@ -94,6 +110,7 @@ export default {
           toggleTodoStatus,
           moveToTodoListPage,
           onSave,
+          todoUpdated,
         };
     }
 }