cssd-back/resources/js/vue/views/User/MyInfo.vue

<template>
  <v-form ref="form">
    <v-container grid-list-xs fluid>
      <material-card color="black" title="My Info">
        <v-layout align-center justify-center wrap class="px-5 my-3">
          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field
              name="name"
              label="Name"
              color="black"
              v-model="user.name"
              :rules="[rules.required, rules.counter]"
              class="py-3 pr-3"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
            <v-icon class="fa fa-male mr-2 WM-Margin-B-8"></v-icon>
            <v-select
              :items="items"
              label="Gender"
              name="gender"
              v-model="user.gender"
              single-line
              :rules="[rules.required]"
              class="py-3 pr-3"
              color="black"
            ></v-select>
          </v-flex>
          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
            <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
            <v-text-field
              name="cellnumber"
              label="Cell Number"
              v-model="user.cell_number"
              color="black"
              class="py-3 pr-3"
              disabled
            ></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout align-center justify-center wrap class="px-5 mb-3">
          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
            <v-icon class="fa fa-envelope mr-2 WM-Margin-B-8" style="margin-top:70px"></v-icon>
            <v-text-field
              name="emailaddress"
              label="Email Address"
              v-model="user.email"
              :rules="[rules.email]"
              class="px-2"
              color="black"
              style="margin-top:72px"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm8 md8>
            <v-textarea
              prepend-icon="fa fa-sort-amount-desc"
              color="black"
              :rules="[rules.counter]"
              v-model="user.address"
              class="pa-2"
              name="address"
            >
              <template v-slot:label>
                <div>Address</div>
              </template>
            </v-textarea>
          </v-flex>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="saveInfo()">
              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
              <span class="white--text">SAVE</span>
            </v-btn>
          </v-flex>
          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword">
                <v-icon class="black--text mr-1">fas fa-refresh</v-icon>
                <span class="black--text"> Change Password </span>
              </v-btn>
          </v-flex>
          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
            <router-link :to="{name: 'Dashboard'}">
              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                <v-icon class="black--text">keyboard_arrow_left</v-icon>
                <span class="black--text">Back</span>
              </v-btn>
            </router-link>
          </v-flex>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>

<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      user: {
        cell_number: "",
        gender: "",
        name: "",
        email: "",
        address: ""
      },
      items: ["Male", "FeMale"],
      rules: {
        required: value => !!value || "Required.",
        counter: value =>
          !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
        email: value => {
          if (value && value.length > 0) {
            const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return pattern.test(value) || "Invalid e-mail.";
          } else{
            return true;
          }
        }
      }
    };
  },
  created() {
    this.user = this.$store.state.user;
  },
  methods: {
    async saveInfo() {
      if (this.$refs.form.validate()) {
        const result = await ApiService.post(urls.updateInfo, this.user);
        if (result && result.status == 200) {
          this.$store.dispatch("info", {}, { root: true });
          this.$router.push({ name: `Dashboard` });
        }
      }
    },
    ...mapMutations('modal',['changeCurrentModal']),
    changePassword() {
      this.changeCurrentModal({ modal: "modal-auth-change-password" });
    }
  }
};
</script>