Rework editTimetrackAccount to be async and uses axios

frontend/src/views/EditTimeTrackAccount.vue

@@ -1,35 +1,34 @@
 <template>
-  <v-container id="editAccountListen">
-    <v-card align-center>
-      <div class="text-center ma-3">
-        <p class="text-center  logowhite--text" style="font-size:30pt">Account to edit:</p>
-        <p class="text-center  logowhite--text" style="font-size:30pt">{{name}}</p>
-      </div>
+  <v-container @keyup.prevent.enter="editAccount">
+    <v-card align-center v-if="isInactive || errorMessage">
+      <p class="text-center logowhite--text">{{errorMessage}}</p>
     </v-card>
-
-    <v-card align-center>
-      <p class="text-center logowhite--text" style="font-size:30pt">Details</p>
+    <v-card align-center v-else>
+      <p class="text-center logowhite--text">Edit details for {{accountData.name}}</p>
 
       <v-form>
         <v-text-field
+          :disabled="isInactive"
           label="name"
-          v-model="newname"
+          v-model="accountData.name"
           name="name"
           prepend-icon="mdi-account-tie"
           type="text"
           color="primary"
         />
         <v-text-field
+          :disabled="isInactive"
           label="revenue"
-          v-model="newrevenue"
+          v-model="accountData.revenue"
           name="revenue"
           prepend-icon="mdi-currency-usd"
           type="text"
           color="primary"
         />
         <v-text-field
+          :disabled="isInactive"
           label="description"
-          v-model="newdescription"
+          v-model="accountData.description"
           name="description"
           prepend-icon="mdi-information-variant"
           type="text"
@@ -44,86 +43,48 @@
   </v-container>
 </template>
 <script>
+  import axios from "axios"
 
   export default {
     name: "EditTimeTrackAccount",
-    data: () => ({
-      name: "",
-      revenue: "",
-      description: "",
-      newname: "",
-      newrevenue: "",
-      newdescription: "",
-    }),
-
+    data() {
+      return {
+        isInactive: true,
+        accountData: {name: "", revenue: "", description: ""},
+        errorMessage: "Fetching Data..."
+      }
+    },
     methods: {
-      editAccount() {
-        var link = sessionStorage.getItem("timeTrackAccountEditSelfLink");
-
-        if (this.newname != this.name || this.newrevenue != this.revenue || this.newdescription != this.description) {
-          var xhttp = new XMLHttpRequest();
-          var suc;
-          xhttp.onreadystatechange = function () {
-            if ((this.status == 200) & (this.readyState == 4)) {
-              suc = true;
-            }
-          };
-          xhttp.open("PATCH", link, false);
-          xhttp.setRequestHeader("Content-Type", "application/json");
-
-          xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-          xhttp.send(
-            "{" +
-            '"name": "' +
-            this.newname +
-            '", "revenue": "' +
-            this.newrevenue +
-            '", "description": "' +
-            this.newdescription +
-            '"}'
-          );
-          if (suc == true) {
-            this.$router.push("/timetrackaccounts");
+      async editAccount() {
+        let link = sessionStorage.getItem("timeTrackAccountEditSelfLink")
+        if (Object.values(this.accountData).some(val => val)) {
+          try {
+            await axios.patch(link, this.accountData)
+            await this.$router.push("/timetrackaccounts")
+          } catch (err) {
+            console.log("Error while updating: " + err)
+            this.errorMessage = "Error while updating!"
           }
         }
-      },
+      }
     },
-    created() {
-      var accountxhttp = new XMLHttpRequest();
-      var account;
-
-      accountxhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-          account = JSON.parse(accountxhttp.responseText);
-        }
-      };
-      accountxhttp.open(
-        "GET",
-        sessionStorage.getItem("timeTrackAccountEditSelfLink"),
-        false
-      );
-
-      accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
-      accountxhttp.send(null);
-      this.name = account.name;
-      this.revenue = account.revenue;
-      this.description = account.description;
-
-      this.newname = account.name;
-      this.newrevenue = account.revenue;
-      this.newdescription = account.description;
-
-    },
-    mounted() {
-      var listen = document.getElementById('editAccountListen');
-      listen.addEventListener("keyup", e => {
-        if (e.keyCode === 13) {
-          e.preventDefault();
-
-          this.editAccount();
-        }
-      });
+    async created() {
+      let link = sessionStorage.getItem("timeTrackAccountEditSelfLink")
+      try {
+        let response = await axios.get(link)
+        this.accountData = response.data
+        this.isInactive = false
+        this.errorMessage = ""
+      } catch (err) {
+        console.log("An error occurred while fetching the data: " + err)
+        this.errorMessage = "An error occurred while fetching the data!"
+      }
     }
-  };
+  }
 </script>
+
+<style scoped>
+  p {
+    font-size: 30pt;
+  }
+</style>