From ee83012b3162bfe8f03c38eed8feed075f09e9e4 Mon Sep 17 00:00:00 2001
From: Jatinder Singh <jatinder.singh@viithiisys.com>
Date: Mon, 15 Oct 2018 17:52:25 +0530
Subject: [PATCH] changes

---
 src/pages/Dashboard.vue | 123 ++++++++++++++++++++++++++++--------------------
 1 file changed, 71 insertions(+), 52 deletions(-)

diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 35dbed8..d983cce 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,16 +1,17 @@
 <template>
 <v-tabs
-  slider-color="black"
+ grow
+ slider-color="black"
 >
- <v-spacer></v-spacer>
-  <v-tab ripple>
+
+  <v-tab ripple @click="activeTab('existing')" v-bind:class="{ active: isActive }" id="tab">
     Existing user
   </v-tab>
-  <v-spacer></v-spacer>
-  <v-tab ripple>
+  
+  <v-tab ripple @click="activeTab('new')" v-bind:class="{ active: newActive }" id="tab1">
     Add New Users
   </v-tab>
-  <v-spacer></v-spacer>
+
   <v-tab-item>
      <v-dialog v-model="dialog" max-width="500px">
      <v-toolbar color="white">
@@ -237,13 +238,18 @@ export default {
     dialog1: false,
     dialog2: false,
     valid: true,
+    isActive: true,
+    newActive: false,
     rules: {
       required: value => !!value || 'This field is Required.',
-      min: v => (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/).test(v) && v.length > 0 || 'Please enter a date in the format dd/mm/yyyy'
+      min: v =>
+        (/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(
+          v
+        ) &&
+          v.length > 0) ||
+        'Please enter a date in the format dd/mm/yyyy'
     },
-    nameRules: [
-      v => !!v || 'Name is required',
-    ],
+    nameRules: [v => !!v || 'Name is required'],
     email: '',
     emailRules: [
       v => !!v || 'E-mail is required',
@@ -258,7 +264,7 @@ export default {
       },
       { text: 'Name', value: 'Name', sortable: false },
       { text: 'Email', value: 'Email', sortable: false },
-      { text: '', value: '', sortable: false },
+      { text: '', value: '', sortable: false }
     ],
     desserts: [
       {
@@ -281,13 +287,13 @@ export default {
       No: '',
       Name: '',
       LName: '',
-      Email: '',
+      Email: ''
     },
     defaultItem: {
       No: '',
       Name: '',
       LName: '',
-      Email: '',
+      Email: ''
     }
   }),
   methods: {
@@ -312,6 +318,19 @@ export default {
       confirm('Are you sure you want to delete this item?') &&
         this.desserts.splice(index, 1);
     },
+    activeTab (type) {
+      switch (type) {
+        case 'existing':
+          this.newActive = false;
+          this.isActive = true;
+          break;
+
+        default:
+          this.newActive = true;
+          this.isActive = false;
+          break;
+      }
+    },
 
     close () {
       this.dialog = false;
@@ -333,8 +352,7 @@ export default {
           Name: this.Name,
           LName: this.LName,
           Email: this.Email,
-          DOB: this.DOB,
-
+          DOB: this.DOB
         });
       }
     },
@@ -344,10 +362,9 @@ export default {
     download () {
       this.editedIndex = this.desserts.indexOf();
     },
-    // clear () {
-    //   this.$refs.form.reset();
-    // },
- 
+    clear () {
+      this.$refs.form.reset();
+    },
 
     save () {
       if (this.editedIndex > -1) {
@@ -359,63 +376,65 @@ export default {
     }
   }
 };
-
 </script>
 <style scoped>
-.v-card__actions .v-btn{
+.v-card__actions .v-btn {
   margin: 0 15px;
   min-width: 120px;
 }
 
-h4{
-    background-repeat: no-repeat;
-    padding: 8px;
-    margin: auto;
-    font-size: 25px;
+h4 {
+  background-repeat: no-repeat;
+  padding: 8px;
+  margin: auto;
+  font-size: 25px;
 }
-#name{
-position: absolute;
-left: 100px;
-top: 17px
+#name {
+  position: absolute;
+  left: 100px;
+  top: 17px;
 }
-#icon{
+#icon {
   position: absolute;
   right: 8px;
   top: 8px;
 }
-#m{
+#m {
   position: relative;
   left: 135px;
   top: -11px;
 }
-#G{
- position: absolute;
- top: 38px;
+#G {
+  position: absolute;
+  top: 38px;
 }
-#bt{
+#bt {
   position: relative;
-   top: -20px;
-   left:115px;
+  top: -20px;
+  left: 115px;
 }
-#e{
- position: relative;
- right: -110px;
+#e {
+  position: relative;
+  right: -110px;
   height: 17px;
   cursor: pointer;
 }
-#d{
- position: relative;
- right: -150px;
- height: 17px;
- cursor: pointer;
+#d {
+  position: relative;
+  right: -150px;
+  height: 17px;
+  cursor: pointer;
 }
 #td {
-    border: 1px solid #dddddd;
-    text-align: left;
-    padding: 8px;
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
 }
-#dialog{
-  height:550px;
-  
+#dialog {
+  height: 550px;
+}
+.active {
+  background-color: black;
+  color: white !important;
 }
 </style>
\ No newline at end of file
-- 
2.0.0