new C'hnages

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

@@ -0,0 +1,56 @@
+<template>
+  <v-form>
+    <v-container grid-list-xs fluid>
+      <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="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 @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>
+            <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>
+    </v-container>
+  </v-form>
+</template>
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { roles } from "@/config/utils";
+import { urls } from "@/config/urls";
+export default {
+  data: () => ({
+    items: roles,
+    data: { roles: "" }
+  }),
+  methods: {
+    ...mapMutations("modal", ["closeModal", "setResultModal"]),
+    async changeRole() {
+      const result = await ApiService.post(
+        urls.changeRoleUser(this.getModalProperties.user.id),
+        this.data
+      );
+      if (result && result.status == 200) {
+        this.setResultModal(result.data.data);
+        this.closeModal();
+      }
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalProperties"])
+  }
+};
+</script>