add update user

pages/home/index.vue

@@ -17,7 +17,7 @@ import axios from "axios";
 import VueAxios from "vue-axios";
 
 import Nav from "@/components/Nav";
-import Footer from "@/components/footer";
+import Footer from "@/components/Footer";
 
 export default {
   components: { Nav },

pages/home/user.vue

@@ -167,7 +167,7 @@
 import Nav from "@/components/Nav";
 import Navigation from "@/components/Navigation";
 import axios from "axios";
-import notification from "@/components/notification";
+import notification from "@/components/Notification";
 import Toasted from 'vue-toasted';
 import { ModalPlugin } from 'bootstrap-vue';
 

pages/home/users.vue

@@ -12,7 +12,7 @@
   </b-breadcrumb>
   <div style="float: right">
   <b-button v-b-modal.modal-login >New User</b-button>
-    
+  <!-- modal create user -->
   <b-modal id="modal-login" title="Create User" class="modal fade" >
     <Notification :message="error" v-if="error" />
     <p class="my-4">
@@ -44,11 +44,7 @@
             v-model="password"
             required
           />
-          <!-- <div class="button">
-            <button class="w-30 btn btn-sm btn-primary" type="submit">
-              Create
-            </button>
-            </div> -->
+
         </form>
     </p>
     <template #modal-footer>
@@ -56,6 +52,44 @@
         <button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
     </template>
   </b-modal>
+  <!-- modal edit user -->
+  <b-modal id="modal-edit" title="Edit User" class="modal fade" >
+    <p class="my-4">
+      <form @submit.prevent="" >
+          <label>Name :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            v-model="eName"
+            max="255"
+            min="1"
+            required
+          />
+          <label>Email :</label>
+          <input
+            type="email"
+            class="form-control mb-2"
+            placeholder="Email"
+            v-model="eEmail"
+            required
+          />
+
+          <label>Password :</label>
+          <input
+            type="password"
+            class="form-control mb-2"
+            placeholder="password"
+            v-model="ePassword"
+            required
+          />
+        </form>
+    </p>
+    <template #modal-footer>
+        <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-edit')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="updateUser(this?.eID)" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
+  </b-modal>
 </div>
     <v-data-table
       :headers="headers"
@@ -153,7 +187,7 @@
         </v-toolbar>
       </template>
       <template v-slot:item.actions="{ item }">
-        <v-icon small class="mr-2" @click="editItem(id)" :id ="item.id"> mdi-pencil </v-icon>
+        <v-icon small class="mr-2" @click=" editUser(item.id);" :id ="item.id"> mdi-pencil </v-icon>
         <v-icon small @click="deleteUser(item.id)" :id ="item.id"> mdi-delete </v-icon>
       </template>
       <template v-slot:no-data>
@@ -167,7 +201,7 @@
 import Nav from "@/components/Nav";
 import Navigation from "@/components/Navigation";
 import axios from "axios";
-import notification from "@/components/notification";
+import notification from "@/components/Notification";
 import Toasted from 'vue-toasted';
 import { ModalPlugin } from 'bootstrap-vue';
 
@@ -200,6 +234,10 @@ export default {
       { text: 'Actions', value: 'actions', sortable: false },
     ],
     users: [],
+    eID: '',
+    eEmail:'',
+    eName:'',
+    ePassword:'', 
     message: [],
     editedIndex: -1,
     editedItem: {
@@ -298,7 +336,9 @@ export default {
       })
       .then(response => {
         // $bvModal.hide('modal-login');
-        self.$toast.success('User created successfully!');
+        self.$toast.success('User created successfully!',{
+        duration: 3000
+      });
         console.log(response);
       })
       .catch(errors => {
@@ -312,18 +352,45 @@ export default {
         
     },
     deleteUser(userID) {
-
+      if(confirm("Do you really want to delete?")){
       try{
       axios
         .delete(`http://127.0.0.1:8000/api/users/${userID}`)
       } catch(error){
         console.log(error)
       }
+    }
 
     },
+    
     editUser(userID) {
+      this.$bvModal.show('modal-edit');
+      this.eID = userID;
+      console.log(this?.eID);
+    },
+    updateUser(userID) {
+      const self = this
+      console.log(this.eName);
+      console.log(this.eEmail);
+      console.log(this?.eID);
+      try{
+      axios
+        .put(`http://127.0.0.1:8000/api/users/${this?.eID}`,{
 
+        email: this.eEmail,
+        password: this.ePassword,
+        name:this.eName,} )
+        .then(response => {
+        self.$toast.success('User updated successfully!',{
+        duration: 3000
+      });
+        console.log(response);
+      })
+      } catch(error){
+        console.log(error)
+      }
     }
+
   },
   created() {
     this.getUsers();