Edit MedicalCenter

resources/js/vue/views/AddMedicalCenter.vue

@@ -5,7 +5,7 @@
         <v-layout row wrap class="px-5 mb-3">
           <v-flex xs12 md3 xs3>
             <v-text-field
-              v-model="name"
+              v-model="medicalCenter.name"
               label="Name"
               color="black"
               class="pa-2"
@@ -15,8 +15,14 @@
         </v-layout>
         <v-layout row wrap align-center justify-center class="mt-3">
           <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" style="padding:10px 60px">
-            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-            <span class="white--text">Add</span>
+            <template v-if="$route.params.id">
+              <v-icon class="white--text mr-2 caption">fas fa-edit</v-icon>
+              <span class="white--text">Edit</span>
+            </template>
+            <template v-else>
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+              <span class="white--text">Add</span>
+            </template>
           </v-btn>
           <router-link to="/manage-medical-center">
             <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
@@ -35,23 +41,36 @@ import { log } from "util";
 export default {
   data() {
     return {
-      name: "",
+      medicalCenter: {
+        name: ""
+      },
       rules: {
         required: value => !!value || "Required.",
         counter: value => value.length <= 30 || "Max 30 characters"
       }
     };
   },
+  created() {
+    if (this.$route.params.id) {
+      this.load(this.$route.params.id);
+    }
+  },
   methods: {
+    async load(id) {
+      const result = await ApiService.get(`MedicalCenters/${id}/edit`);
+      this.medicalCenter = result.data.MedicalCenter;
+    },
     async AddMedicalCenter() {
-      let url = "MedicalCenters";
-      let data = {
-        name: this.name
-      };
       if (this.$refs.form.validate()) {
-        const result = await ApiService.post(url, data);
-        if(result && result.status == 200) {
-            this.$router.push('/manage-medical-center');
+        if (this.$route.params.id) {
+          let url = `MedicalCenters/${this.$route.params.id}`;
+          var result = await ApiService.put(url, this.medicalCenter);
+        } else {
+          let url = "MedicalCenters";
+          var result = await ApiService.post(url, this.medicalCenter);
+        }
+        if (result && result.status == 200) {
+          this.$router.push("/manage-medical-center");
         }
       }
     }