structure user and izitoast and add medicalcenter

resources/js/vue/views/AddMedicalCenter.vue

@@ -1,33 +1,20 @@
 <template>
-  <v-form v-model="model">
+  <v-form ref="form">
     <v-container grid-list-xs>
-      <material-card class=""
-        color="black"
-        title="Add Medical Center"
-        text=""
-      >
+      <material-card class color="black" title="Add Medical Center" text>
         <v-layout row wrap class="px-5 mb-3">
           <v-flex xs12 md3 xs3>
             <v-text-field
-              name="Name"
+              v-model="name"
               label="Name"
               color="black"
               class="pa-2"
-              id="id1"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 md3 xs3>
-            <v-text-field
-              name="Operator"
-              label="Operator"
-              color="black"
-              class="pa-2"
-              id="id2"
+              :rules="[rules.required, rules.counter]"
             ></v-text-field>
           </v-flex>
         </v-layout>
         <v-layout row wrap align-center justify-center class="mt-3">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+          <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>
           </v-btn>
@@ -43,12 +30,33 @@
   </v-form>
 </template>
 <script>
+import { ApiService } from "@/services";
+import { log } from "util";
 export default {
-  name: "",
-  data: () => ({
-
-  })
-}
+  data() {
+    return {
+      name: "",
+      rules: {
+        required: value => !!value || "Required.",
+        counter: value => value.length <= 30 || "Max 30 characters"
+      }
+    };
+  },
+  methods: {
+    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');
+        }
+      }
+    }
+  }
+};
 </script>
 <style lang="scss" scoped>
 </style>