Finish Manage Medical Center

resources/js/vue/components/modal/user/Role.vue

@@ -1,32 +1,25 @@
 <template>
   <v-form>
     <v-container grid-list-xs fluid>
-      <material-card class=""
-        color="black"
-        title="Role"
-      >
+      <material-card class color="black" title="Role">
         <v-layout row align-center justify-center wrap class="px-5 mb-3">
           <v-flex xs12 md3 sm3>
-            <v-select
-              :items="items"
-              v-model="roles"
-              label="Roles"
-              color="black"
-            ></v-select>
+            <v-select :items="items" v-model="data.roles" label="Roles" color="black"></v-select>
           </v-flex>
         </v-layout>
         <v-layout row wrap>
           <v-layout align-center justify-center wrap class="px-5 mt-2">
-            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" 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>
-            <router-link to="/dashboard">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-                <span class="black--text">Close</span>
-              </v-btn>
-            </router-link>
+            <v-btn
+              @click="closeModal"
+              class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"
+            >
+              <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+              <span class="black--text">Close</span>
+            </v-btn>
           </v-layout>
         </v-layout>
       </material-card>
@@ -34,17 +27,28 @@
   </v-form>
 </template>
 <script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
 export default {
-  name: "",
   data: () => ({
-    items : [
-      'SuperAdmin',
-      'Admin',
-      'SuperVisior',
-      'User'
-    ]
-  })
-}
-</script>
-<style lang="scss" scoped>
-</style>
+    items: ["Admin", "SuperVisior", "User"],
+    data: { roles: "" }
+  }),
+  methods: {
+    ...mapMutations("modal", ["closeModal", "setResultModal"]),
+    async changeRole() {
+      const result = await ApiService.post(
+        `Users/ChangeRole/${this.getModalProperties.user.id}`,
+        this.data
+      );
+      if (result && result.status == 200) {
+        this.setResultModal(result.data);
+        this.closeModal();
+      }
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalProperties"])
+  }
+};
+</script>