Finish My info

resources/js/vue/views/MyInfo.vue

@@ -1,15 +1,15 @@
 <template>
-  <v-form>
+  <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 sm4 md4>
             <v-text-field
-              name="username"
-              label="User Name"
+              name="name"
+              label="Name"
               color="black"
-              v-model="user.username"
-              id="id1"
+              v-model="user.name"
+              :rules="[rules.required, rules.counter]"
               class="pa-2"
             ></v-text-field>
           </v-flex>
@@ -20,7 +20,7 @@
               name="gender"
               v-model="user.gender"
               single-line
-              id="id3"
+              :rules="[rules.required]"
               class="pa-2"
               color="black"
             ></v-select>
@@ -30,9 +30,10 @@
               name="cellnumber"
               label="Cell Number"
               v-model="user.cell_number"
+              mask="0### ### ####"
               color="black"
               class="pa-2"
-              id="id2"
+              disabled
             ></v-text-field>
           </v-flex>
         </v-layout>
@@ -42,14 +43,20 @@
               name="emailaddress"
               label="Email Address"
               v-model="user.email"
-              id="id4"
+              :rules="[rules.email]"
               class="px-2"
               color="black"
               style="padding-top:75px"
             ></v-text-field>
           </v-flex>
           <v-flex xs12 sm8 md8>
-            <v-textarea color="black" v-model="user.address" class="pa-2" name="address">
+            <v-textarea
+              color="black"
+              :rules="[rules.counter]"
+              v-model="user.address"
+              class="pa-2"
+              name="address"
+            >
               <template v-slot:label>
                 <div>Address</div>
               </template>
@@ -58,7 +65,7 @@
         </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">
+            <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>
@@ -78,21 +85,43 @@
 </template>
 
 <script>
+import { ApiService } from "@/services";
 export default {
   data() {
     return {
       user: {
-        username: "",
-        gender: "",
         cell_number: "",
+        gender: "",
+        name: "",
         email: "",
-        address: "",
+        address: ""
       },
       items: ["Male", "FeMale"],
+      rules: {
+        required: value => !!value || "Required.",
+        counter: value =>
+          value.length == 0 || value.length >= 5 || "Min 5 characters",
+        email: value => {
+          if (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.";
+          }
+        }
+      }
     };
+  },
+  created() {
+    this.user = this.$store.state.user;
+  },
+  methods: {
+    async saveInfo() {
+      if (this.$refs.form.validate()) {
+        const result = await ApiService.post("updateInfo", this.user);
+        if (result && result.status == 200) {
+          this.$store.dispatch("info", {}, { root: true });
+        }
+      }
+    }
   }
 };
-</script>
-
-<style lang="css" scoped>
-</style>
+</script>