add delete user

nuxt.config.js

@@ -44,6 +44,7 @@ export default {
     'bootstrap-vue/nuxt',
     '@nuxtjs/axios',
     '@nuxtjs/auth-next',
+    '@nuxtjs/toast',
   ],
   axios: {
     baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/',
@@ -61,4 +62,16 @@ export default {
   // router: {
   //   middleware: 'web'
   // }
+  toast: {
+    position: 'top-center',
+    register: [ // Register custom toasts
+      {
+        name: 'my-error',
+        message: 'Oops...Something went wrong',
+        options: {
+          type: 'error'
+        }
+      }
+    ]
+},
 }

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
         "@nuxtjs/axios": "^5.0.0",
+        "@nuxtjs/toast": "^3.3.1",
         "axios": "^1.2.1",
         "bootstrap": "^4.6.2",
         "bootstrap-vue": "^2.23.1",
@@ -21,8 +22,10 @@
         "prism-themes": "^1.9.0",
         "vue": "^2.7.10",
         "vue-axios": "^3.5.2",
+        "vue-notification": "^1.3.20",
         "vue-server-renderer": "^2.7.10",
         "vue-template-compiler": "^2.7.10",
+        "vue-toasted": "^1.1.28",
         "vuetify": "^2.6.13"
       },
       "devDependencies": {
@@ -2430,6 +2433,14 @@
         "http-proxy-middleware": "^1.0.6"
       }
     },
+    "node_modules/@nuxtjs/toast": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
+      "integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
+      "dependencies": {
+        "vue-toasted": "^1.1.28"
+      }
+    },
     "node_modules/@nuxtjs/vuetify": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
@@ -12473,6 +12484,14 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "node_modules/vue-notification": {
+      "version": "1.3.20",
+      "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
+      "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
@@ -12561,6 +12580,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "node_modules/vue-toasted": {
+      "version": "1.1.28",
+      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
+      "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
+    },
     "node_modules/vuetify": {
       "version": "2.6.13",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.13.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
     "@nuxtjs/axios": "^5.0.0",
+    "@nuxtjs/toast": "^3.3.1",
     "axios": "^1.2.1",
     "bootstrap": "^4.6.2",
     "bootstrap-vue": "^2.23.1",
@@ -21,8 +22,10 @@
     "prism-themes": "^1.9.0",
     "vue": "^2.7.10",
     "vue-axios": "^3.5.2",
+    "vue-notification": "^1.3.20",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10",
+    "vue-toasted": "^1.1.28",
     "vuetify": "^2.6.13"
   },
   "devDependencies": {

pages/home/table.vue

+<template>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    sort-by="calories"
+    class="elevation-1"
+  >
+    <template v-slot:top>
+      <v-toolbar
+        flat
+      >
+        <v-toolbar-title>My CRUD</v-toolbar-title>
+        <v-divider
+          class="mx-4"
+          inset
+          vertical
+        ></v-divider>
+        <v-spacer></v-spacer>
+        <v-dialog
+          v-model="dialog"
+          max-width="500px"
+        >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              color="primary"
+              dark
+              class="mb-2"
+              v-bind="attrs"
+              v-on="on"
+            >
+              New Item
+            </v-btn>
+          </template>
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">{{ formTitle }}</span>
+            </v-card-title>
+
+            <v-card-text>
+              <v-container>
+                <v-row>
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    md="4"
+                  >
+                    <v-text-field
+                      v-model="editedItem.name"
+                      label="Dessert name"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    md="4"
+                  >
+                    <v-text-field
+                      v-model="editedItem.calories"
+                      label="Calories"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    md="4"
+                  >
+                    <v-text-field
+                      v-model="editedItem.fat"
+                      label="Fat (g)"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    md="4"
+                  >
+                    <v-text-field
+                      v-model="editedItem.carbs"
+                      label="Carbs (g)"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col
+                    cols="12"
+                    sm="6"
+                    md="4"
+                  >
+                    <v-text-field
+                      v-model="editedItem.protein"
+                      label="Protein (g)"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="close"
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="save"
+              >
+                Save
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+        <v-dialog v-model="dialogDelete" max-width="500px">
+          <v-card>
+            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
+              <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
+              <v-spacer></v-spacer>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-toolbar>
+    </template>
+    <template v-slot:item.actions="{ item }">
+      <v-icon
+        small
+        class="mr-2"
+        @click="editItem(item)"
+      >
+        mdi-pencil
+      </v-icon>
+      <v-icon
+        small
+        @click="deleteItem(item)"
+      >
+        mdi-delete
+      </v-icon>
+    </template>
+    <template v-slot:no-data>
+      <v-btn
+        color="primary"
+        @click="initialize"
+      >
+        Reset
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      dialog: false,
+      dialogDelete: false,
+      headers: [
+        {
+          text: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          value: 'name',
+        },
+        { text: 'Calories', value: 'calories' },
+        { text: 'Fat (g)', value: 'fat' },
+        { text: 'Carbs (g)', value: 'carbs' },
+        { text: 'Protein (g)', value: 'protein' },
+        { text: 'Actions', value: 'actions', sortable: false },
+      ],
+      desserts: [],
+      editedIndex: -1,
+      editedItem: {
+        name: '',
+        calories: 0,
+        fat: 0,
+        carbs: 0,
+        protein: 0,
+      },
+      defaultItem: {
+        name: '',
+        calories: 0,
+        fat: 0,
+        carbs: 0,
+        protein: 0,
+      },
+    }),
+    computed: {
+      formTitle () {
+        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
+      },
+    },
+    watch: {
+      dialog (val) {
+        val || this.close()
+      },
+      dialogDelete (val) {
+        val || this.closeDelete()
+      },
+    },
+    created () {
+      this.initialize()
+    },
+    methods: {
+      initialize () {
+        this.desserts = [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+          },
+          {
+            name: 'Honeycomb',
+            calories: 408,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+          },
+          {
+            name: 'Donut',
+            calories: 452,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+          },
+        ]
+      },
+      editItem (item) {
+        this.editedIndex = this.desserts.indexOf(item)
+        this.editedItem = Object.assign({}, item)
+        this.dialog = true
+      },
+      deleteItem (item) {
+        this.editedIndex = this.desserts.indexOf(item)
+        this.editedItem = Object.assign({}, item)
+        this.dialogDelete = true
+      },
+      deleteItemConfirm () {
+        this.desserts.splice(this.editedIndex, 1)
+        this.closeDelete()
+      },
+      close () {
+        this.dialog = false
+        this.$nextTick(() => {
+          this.editedItem = Object.assign({}, this.defaultItem)
+          this.editedIndex = -1
+        })
+      },
+      closeDelete () {
+        this.dialogDelete = false
+        this.$nextTick(() => {
+          this.editedItem = Object.assign({}, this.defaultItem)
+          this.editedIndex = -1
+        })
+      },
+      save () {
+        if (this.editedIndex > -1) {
+          Object.assign(this.desserts[this.editedIndex], this.editedItem)
+        } else {
+          this.desserts.push(this.editedItem)
+        }
+        this.close()
+      },
+    },
+  }
+</script>
\ No newline at end of file

pages/home/user.vue

 <template>
   <div>
-    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
-      <b-form-group
-        id="input-group-1"
-        label="Email address:"
-        label-for="input-1"
-        description="We'll never share your email with anyone else."
-      >
-        <b-form-input
-          id="input-1"
-          v-model="form.email"
-          type="email"
-          placeholder="Enter email"
-          required
-        ></b-form-input>
-      </b-form-group>
+    <div>
+      <Nav />
+    </div>
+    <b-breadcrumb>
+    <b-breadcrumb-item href="/home">
+      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
+      Home
+    </b-breadcrumb-item>
+    <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
+  </b-breadcrumb>
+  <div style="float: right">
+  <b-button v-b-modal.modal-1 >New User</b-button>
+    
+  <b-modal id="modal-1" title="Create User" class="modal fade" >
+    <Notification :message="error" v-if="error" />
+    <p class="my-4">
+      <form @submit.prevent="createUser" >
+          <label>Name :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            v-model="name"
+            max="255"
+            min="1"
+            required
+          />
+          <label>Email :</label>
+          <input
+            type="email"
+            class="form-control mb-2"
+            placeholder="Email"
+            v-model="email"
+            required
+          />
 
-      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
-        <b-form-input
-          id="input-2"
-          v-model="form.name"
-          placeholder="Enter name"
-          required
-        ></b-form-input>
-      </b-form-group>
+          <label>Password :</label>
+          <input
+            type="password"
+            class="form-control mb-2"
+            placeholder="password"
+            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>
+        <button v-b-modal.modal-close_visit  @click="this.hide('modal-1')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="createUser" 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"
+      :items="users"
+      sort-by="calories"
+      class="elevation-1"
+    >
+      <template v-slot:top>
+        <v-toolbar flat>
+          <v-toolbar-title>User Manage</v-toolbar-title>
+          <v-divider class="mx-4" inset vertical></v-divider>
+          <v-spacer></v-spacer>
+          <v-dialog v-model="dialog" max-width="500px">
+            <template v-slot:activator="{ on, attrs }">
+              <!-- <v-btn
+                color="primary"
+                dark
+                class="mb-2"
+                v-bind="attrs"
+                v-on="on"
+                v-on:click="getUser"
+              >
+                New User
+              </v-btn> -->
+              <!-- modal create user -->
+            </template>
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">{{ formTitle }}</span>
+              </v-card-title>
 
-      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
-        <b-form-select
-          id="input-3"
-          v-model="form.food"
-          :options="foods"
-          required
-        ></b-form-select>
-      </b-form-group>
+              <v-card-text>
+                <v-container>
+                  <v-row>
+                    <v-col cols="12" sm="6" md="4">
+                      <v-text-field
+                        v-model="editedItem.name"
+                        label="name"
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12" sm="6" md="4">
+                      <v-text-field
+                        v-model="editedItem.id"
+                        label="id"
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12" sm="6" md="4">
+                      <v-text-field
+                        v-model="editedItem.email"
+                        label="email"
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12" sm="6" md="4">
+                      <v-text-field
+                        v-model="editedItem.created_at"
+                        label="created_at"
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12" sm="6" md="4">
+                      <v-text-field
+                        v-model="editedItem.updated_at"
+                        label="updated_at"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </v-card-text>
 
-      <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
-        <b-form-checkbox-group
-          v-model="form.checked"
-          id="checkboxes-4"
-          :aria-describedby="ariaDescribedby"
-        >
-          <b-form-checkbox value="me">Check me out</b-form-checkbox>
-          <b-form-checkbox value="that">Check that out</b-form-checkbox>
-        </b-form-checkbox-group>
-      </b-form-group>
-
-      <b-button type="submit" variant="primary">Submit</b-button>
-      <b-button type="reset" variant="danger">Reset</b-button>
-    </b-form>
-    <b-card class="mt-3" header="Form Data Result">
-      <pre class="m-0">{{ form }}</pre>
-    </b-card>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="close">
+                  Cancel
+                </v-btn>
+                <v-btn color="blue darken-1" text @click="save"> Save </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+          <v-dialog v-model="dialogDelete" max-width="500px">
+            <v-card>
+              <v-card-title class="text-h5"
+                >Are you sure you want to delete this item?</v-card-title
+              >
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="closeDelete"
+                  >Cancel</v-btn
+                >
+                <v-btn color="blue darken-1" text @click="deleteItemConfirm"
+                  >OK</v-btn
+                >
+                <v-spacer></v-spacer>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-toolbar>
+      </template>
+      <template v-slot:item.actions="{ item }">
+        <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
+        <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
+      </template>
+      <template v-slot:no-data>
+        <v-btn color="primary" @click="initialize"> Reset </v-btn>
+      </template>
+    </v-data-table>
   </div>
   
 </template>
-
 <script>
-  export default {
-    data() {
-      return {
-        form: {
-          email: '',
-          name: '',
-          food: null,
-          checked: []
-        },
-        foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
-        show: true
-      }
-    },
-    methods: {
-      onSubmit(event) {
-        event.preventDefault()
-        alert(JSON.stringify(this.form))
+import Nav from "@/components/Nav";
+import Navigation from "@/components/Navigation";
+import axios from "axios";
+import notification from "@/components/notification";
+import Toasted from 'vue-toasted';
+import { ModalPlugin } from 'bootstrap-vue';
+
+export default {
+  components: { Nav },
+  components: { Navigation },
+  components: { notification },
+  middleware: ["web"],
+      
+  data: () => {
+    return {
+    email:'',
+    name:'',
+    password:'',
+    error: '',
+    dialog: false,
+    dialogDelete: false,
+    headers: [
+      {
+        text: "Name",
+        align: "start",
+        sortable: false,
+        value: "name",
       },
-      onReset(event) {
-        event.preventDefault()
-        // Reset our form values
-        this.form.email = ''
-        this.form.name = ''
-        this.form.food = null
-        this.form.checked = []
-        // Trick to reset/clear native browser form validation state
-        this.show = false
-        this.$nextTick(() => {
-          this.show = true
-        })
+      { text: "id", value: "id" },
+      { text: "email", value: "email" },
+      { text: "status", value: "status", sortable: false },
+      { text: "created_at", value: "created_at" },
+      { text: "updated_at", value: "updated_at" },
+      
+    ],
+    users: [],
+    message: [],
+    editedIndex: -1,
+    editedItem: {
+      name: "",
+      id: "",
+      email: "",
+      status: "",
+      created_at: "",
+      updated_at: "",
+    
+    },
+    defaultItem: {
+      name: "",
+      id: "",
+      email: "",
+      status: "",
+      created_at: "",
+      updated_at: "",
+    },
+    }
+  },
+  computed: {
+    formTitle() {
+      return this.editedIndex === -1 ? "New Item" : "Edit Item";
+    },
+  },
+  watch: {
+    dialog(val) {
+      val || this.close();
+    },
+    dialogDelete(val) {
+      val || this.closeDelete();
+    },
+  },
+  created() {
+    this.initialize();
+  },
+  methods: {
+    initialize() {
+      this.users = [];
+    },
+    editItem(item) {
+      this.editedIndex = this.users.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog = true;
+    },
+    deleteItem(item) {
+      this.editedIndex = this.users.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialogDelete = true;
+    },
+    deleteItemConfirm() {
+      this.users.splice(this.editedIndex, 1);
+      this.closeDelete();
+    },
+    close() {
+      this.dialog = false;
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      });
+    },
+    closeDelete() {
+      this.dialogDelete = false;
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      });
+    },
+    save() {
+      if (this.editedIndex > -1) {
+        Object.assign(this.users[this.editedIndex], this.editedItem);
+      } else {
+        this.users.push(this.editedItem);
       }
+      this.close();
+    },
+    getUser() {
+      axios
+        .get('http://127.0.0.1:8000/api/users/')
+        .then((response) => (this.users = response.data.data.data))
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    async createUser() {
+      try {
+      const response = await axios
+      .post('http://127.0.0.1:8000/api/users/',{
+        email: this.email,
+        password: this.password,
+        name:this.name,
+      })
+      console.log(response)
+    }  catch(error) {
+      console.log(error)
     }
-  }
-</script>
\ No newline at end of file
+  },
+  created() {
+    this.getUser();
+  },
+}
+};
+</script>

pages/home/users.vue

@@ -11,9 +11,9 @@
     <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
   </b-breadcrumb>
   <div style="float: right">
-  <b-button v-b-modal.modal-1>New User</b-button>
+  <b-button v-b-modal.modal-1 >New User</b-button>
     
-  <b-modal id="modal-1" title="Create User">
+  <b-modal id="modal-1" title="Create User" class="modal fade" >
     <Notification :message="error" v-if="error" />
     <p class="my-4">
       <form @submit.prevent="createUser" >
@@ -44,13 +44,17 @@
             v-model="password"
             required
           />
-          <div class="button">
+          <!-- <div class="button">
             <button class="w-30 btn btn-sm btn-primary" type="submit">
               Create
             </button>
-            </div>
+            </div> -->
         </form>
     </p>
+    <template #modal-footer>
+        <button v-b-modal.modal-close_visit  @click="this.hide('modal-1')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
   </b-modal>
 </div>
     <v-data-table
@@ -59,7 +63,7 @@
       sort-by="calories"
       class="elevation-1"
     >
-      <template v-slot:top>
+      <template v-slot:top >
         <v-toolbar flat>
           <v-toolbar-title>User Manage</v-toolbar-title>
           <v-divider class="mx-4" inset vertical></v-divider>
@@ -149,8 +153,8 @@
         </v-toolbar>
       </template>
       <template v-slot:item.actions="{ item }">
-        <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
-        <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
+        <v-icon small class="mr-2" @click="editItem(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>
         <v-btn color="primary" @click="initialize"> Reset </v-btn>
@@ -164,6 +168,8 @@ import Nav from "@/components/Nav";
 import Navigation from "@/components/Navigation";
 import axios from "axios";
 import notification from "@/components/notification";
+import Toasted from 'vue-toasted';
+import { ModalPlugin } from 'bootstrap-vue';
 
 export default {
   components: { Nav },
@@ -191,8 +197,10 @@ export default {
       { text: "status", value: "status", sortable: false },
       { text: "created_at", value: "created_at" },
       { text: "updated_at", value: "updated_at" },
+      { text: 'Actions', value: 'actions', sortable: false },
     ],
     users: [],
+    message: [],
     editedIndex: -1,
     editedItem: {
       name: "",
@@ -278,19 +286,31 @@ export default {
         });
     },
     createUser() {
-      console.log('create user');
       axios
       .post('http://127.0.0.1:8000/api/users/',{
+        headers: {
+        'Content-Type': 'application/json'
+        },
         email: this.email,
         password: this.password,
         name:this.name,
       })
-      .then((response) => (this.res = response.data.data.data))
-      .catch(function (error) {
-        this.error = "Username or Password not valid";
-        console.log(error);
+      .then(response => (this.message = response))
+      .catch(function (errors) {
+        console.log(errors);
+        this.message = errors;
         });
     },
+    deleteUser(userID) {
+
+      try{
+      axios
+        .delete(`http://127.0.0.1:8000/api/users/${userID}`)
+      } catch(error){
+        console.log(error)
+      }
+
+    },
   },
   created() {
     this.getUser();

pages/index.vue

@@ -60,6 +60,7 @@
 <script>
 import Nav from "@/components/Nav";
 import notification from "@/components/notification";
+import Toasted from 'vue-toasted';
 
 export default {
   components: { Nav },
@@ -101,10 +102,16 @@ export default {
         this.$auth.$storage.setUniversal("userName", resp.data.name);
         this.$auth.$storage.setUniversal("loggedIn", "true");
         if (resp.status == "success") {
+          this.$toast.success('Successfully authenticated',{
+        duration: 2000
+      });
           this.$router.push("home");
         }
       } catch (e) {
-        this.error = "Username or Password not valid";
+        // this.error = "Username or Password not valid";
+        this.$toast.error('Username or Password not valid',{
+        duration: 2000
+      });
         this.$router.push("/");
       }