cssd-front/src/components/modal/user/Role.vue

<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>