UPD user list/create func

Author: Blari

src/pages/E-commerce/ProductManagement/ProductManagement.vue

@@ -38,7 +38,7 @@
                       v-on="on"
                     >Create Product</v-btn>
                   </template>
-                  <v-card class="edit-dialog" >
+                  <v-card class="edit-dialog">
                     <v-card-title>
                       <span class="headline">{{ formTitle }}</span>
                     </v-card-title>
@@ -112,16 +112,14 @@
         color="success"
         right
         top
-        style="top: 50px"
-    >
+        style="top: 50px">
       {{ text }}
       <template v-slot:action="{ attrs }">
         <v-btn
           dark
           text
           v-bind="attrs"
-          @click="snackbar = false"
-        >
+          @click="snackbar = false">
           Close
         </v-btn>
       </template>
@@ -196,8 +194,10 @@
           val || this.close()
         },
       productMessage() {
-        this.notification = this.productMessage;
-        this.addSuccessNotification()
+        if (this.productMessage !== '') {
+          this.notification = this.productMessage
+          this.addSuccessNotification()
+        }
       }
     },
     created () {

src/pages/User/Add/Add.vue

@@ -283,11 +283,10 @@
                           </v-btn>
                           <v-spacer></v-spacer>
                           <v-btn
+                            :loading="isReceiving"
                             class="button-shadow"
                             color="primary"
-                            @click="createUser()"
-
-                          >
+                            @click="createUser()">
                             Finish
                           </v-btn>
                         </div>
@@ -307,7 +306,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import {mapActions, mapState} from "vuex";
 import router from '@/Routes';
 
 export default {
@@ -332,12 +331,17 @@ export default {
 
   methods: {
     ...mapActions('usersList', [
-      "createUserRequest"
+      'createUserRequest',
+      'getUsersRequest'
     ]),
     createUser() {
       this.createUserRequest(this.user)
+      this.getUsersRequest()
       router.push('/user/list')
     }
+  },
+  computed: {
+    ...mapState('usersList', ['isReceiving'])
   }
 }
 </script>

src/pages/User/List/List.scss

@@ -25,4 +25,9 @@
       background-color: transparent;
     }
   }
+  .disabledUser {
+    .v-label {
+      top: 0;
+    }
+  }
 }

src/pages/User/List/List.vue

@@ -41,7 +41,7 @@
         <v-card class="ma-1">
           <v-card-text>
             <v-data-table
-              :loading="isReceiving || isDeleting || isUpdating"
+              :loading="isReceiving || isDeleting"
               loading-text="Loading... Please wait"
               class="users-table"
               show-select
@@ -65,18 +65,25 @@
                             <v-text-field outlined v-model="editedItem.email" label="Email"></v-text-field>
                           </v-col>
                           <v-col cols="12" sm="4">
-                            <v-select outlined :items="role" v-model="editedItem.role" label="Role"></v-select>
+                            <v-select hide-details outlined :items="role" v-model="editedItem.role" :value="editedItem.role" label="Role"></v-select>
                           </v-col>
                           <v-col cols="12" sm="6" md="4">
-                            <v-text-field outlined v-model="editedItem.company" value="Flatlogic" label="Company"></v-text-field>
+                            <v-text-field hide-details outlined value="Flatlogic" label="Company"></v-text-field>
                           </v-col>
                           <v-col cols="12" sm="6" md="4">
-                            <v-select outlined :items="images" v-model="editedItem.img" label="Image">
+                            <v-select hide-details outlined :items="images" v-model="editedItem.img" label="Image">
                               <template v-slot:item="{ item }">
                                 <v-img :src="item" width="50" style="margin: 2px"></v-img>
                               </template>
                             </v-select>
                           </v-col>
+                          <v-col cols="12" class="d-flex align-center">
+                            <v-switch
+                              class="disabledUser"
+                              v-model="editedItem.disabled"
+                              :label="`${editedItem.firstName}: ${editedItem.disabled ? 'Inactive' : 'Active'}`"
+                            ></v-switch>
+                          </v-col>
                         </v-row>
                       </v-container>
                     </v-card-text>
@@ -103,14 +110,17 @@
               <template v-slot:item.lastName="{ item }">
                 <a class="primaryConst--text">{{ item.lastName }}</a>
               </template>
+              <template v-slot:item.role="{ item }">
+                {{ item.role }}
+              </template>
               <template v-slot:item.company>
                 Flatlogic
               </template>
               <template v-slot:item.disabled="{ item }">
                 <v-chip
-                    :color="item.status !== 'false' ? 'primaryConst white--text' : 'secondaryConst white--text'"
-                    small>
-                  {{ item.disabled === 'false' ? 'Inactive' : 'Active' }}
+                  :color="!item.disabled ? 'primaryConst white--text' : 'secondaryConst white--text'"
+                  small>
+                  {{ item.disabled ? 'Inactive' : 'Active' }}
                 </v-chip>
               </template>
               <template v-slot:item.createdAt="{ item }">
@@ -177,13 +187,14 @@ export default {
         { text: 'Actions', value: 'actions', sortable: false },
       ],
       selected: [],
-      role: ['Admin', 'User'],
+      switch1: true,
+      role: ['admin', 'user'],
       editedIndex: -1,
       editedItem: {
         firstName: '',
         image: '',
         role: '',
-        company: 'Flatlogic',
+        company: '',
         email: '',
         disabled: '',
         create: '',
@@ -192,7 +203,7 @@ export default {
         firstName: '',
         image: '',
         role: '',
-        company: 'Flatlogic',
+        company: '',
         email: '',
         disabled: '',
         create: '',
@@ -226,7 +237,6 @@ export default {
       this.addSuccessNotification()
     }
   },
-
   created () {
     this.getUsersRequest()
     this.addSuccessNotification()

src/store/usersList.js

@@ -95,6 +95,11 @@ export default {
       axios.put(`/users/${id}`, {id, data: payload}).then(res => {
         dispatch("updateUser", res.data);
       });
+
+      dispatch("receivingUsers");
+      axios.get('/users').then(res => {
+        dispatch("receiveUsers", res.data.rows);
+      })
     },
     createUserRequest({dispatch}, payload) {
       // We check if app runs with backend mode
@@ -103,6 +108,11 @@ export default {
       axios.post('/users', {data: payload}).then(res => {
         dispatch("receiveUser", res.data);
       })
+
+      dispatch("receivingUsers");
+      axios.get('/users').then(res => {
+        dispatch("receiveUsers", res.data.rows);
+      })
     },
     deleteUserRequest({dispatch}, payload) {
       dispatch("deletingUser", payload);