add image

components/Footer.vue

@@ -30,7 +30,7 @@
       <div class="footer-bottom">
         <div class="footer-bottom-left">
           <figure class="payment">
-            <img src="~/assets/images/payment.png" alt="payment" width="159" height="29"></img>
+            <img src="~/assets/images/payment.png" alt="payment" width="159" height="29">
           </figure>
         </div>
         <p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p>

components/Shared/Header/Header.vue

@@ -37,7 +37,7 @@
           <b-icon icon="info-circle"></b-icon>
           Need Help
         </a>
-        <a href="#signin" class="login-toggle link-to-tab d-md-show">
+        <a  @click="openModal" v-b-modal.modal-login class="login-toggle link-to-tab d-md-show">
           <b-icon icon="person" font-scale="1.3"></b-icon>
           Sign in
         </a>
@@ -119,11 +119,16 @@
 
 <script>
 import NavBar from "@/components/Shared/Header/NavBar";
+import LoginForm from "@/components/Shared/Header/LoginForm";
 export default {
   name: "Header",
   components: {
     NavBar,
+    LoginForm,
   },
+  methods: {
+     openModal() { this.$bvModal.show('modal-login') }
+    }
 };
 </script>
 

components/Shared/Header/LoginForm.vue

+<template>
+  <b-modal id="modal-login" title="Create User" class="modal fade" v-if="showModal">
+    <p class="my-4">
+      <form >
+          <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
+          />
+
+          <label>Password :</label>
+          <input
+            type="password"
+            class="form-control mb-2"
+            placeholder="password"
+            v-model="password"
+            required
+          />
+
+        </form>
+    </p>
+    <template #modal-footer>
+        <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-login')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
+  </b-modal>
+</template> 
+
+<script>
+export default {
+  name: "LoginForm",
+  data() {
+     return {
+      
+     }
+   },
+   methods: {
+     show() {
+      this.showModal = true
+     },
+     hide(){
+      this.showModal = false
+     }
+   }
+
+
+}
+</script>
\ No newline at end of file

components/nav.vue

@@ -13,7 +13,7 @@
       <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav>
           <b-nav-item href="/home/users">USER</b-nav-item>
-          <b-nav-item href="#">CATEGORY</b-nav-item>
+          <b-nav-item href="/home/categories">CATEGORY</b-nav-item>
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->

pages/about.vue

@@ -3,6 +3,8 @@
   <div>
 
     <h1 style="text-align: center">ABOUT</h1>
+
+    
     
   </div>
     

pages/home/user.vue → pages/home/categories.vue

 <template>
   <div>
-    <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-item href="/home/categories">Category</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" />
+  <b-button v-b-modal.modal-create >New Category</b-button></div>
+  <!-- create modal -->
+  <b-modal id="modal-create" title="Create Category" class="modal fade" >
     <p class="my-4">
-      <form @submit.prevent="createUser" >
+      <form @submit.prevent="" >
           <label>Name :</label>
           <input
             type="text"
@@ -27,60 +23,54 @@
             min="1"
             required
           />
-          <label>Email :</label>
+          <label>Parent ID :</label>
           <input
-            type="email"
+            type="text"
             class="form-control mb-2"
-            placeholder="Email"
-            v-model="email"
-            required
+            placeholder="Parent ID"
+            v-model="parent_id"
           />
 
-          <label>Password :</label>
+          <label>Ordering :</label>
           <input
-            type="password"
+            type="text"
             class="form-control mb-2"
             placeholder="password"
-            v-model="password"
+            v-model="ordering"
             required
           />
-          <!-- <div class="button">
-            <button class="w-30 btn btn-sm btn-primary" type="submit">
-              Create
-            </button>
-            </div> -->
+          <!-- <b-form-select v-model="selected" :options="options"></b-form-select> -->
+          <label>Image :</label>
+          <b-form-file
+            @change="fileSelected"
+            v-model="image"
+            :state="Boolean(image)"
+            placeholder="Choose a image or drop it here..."
+            drop-placeholder="Drop file here..."
+    ></b-form-file>
+
         </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>
+        <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-create')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="createCategory" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
     </template>
   </b-modal>
-</div>
+  <div>
+
     <v-data-table
       :headers="headers"
-      :items="users"
+      :items="categories"
       sort-by="calories"
       class="elevation-1"
     >
       <template v-slot:top >
         <v-toolbar flat>
-          <v-toolbar-title>User Manage</v-toolbar-title>
+          <v-toolbar-title>Category 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>
@@ -104,8 +94,8 @@
                     </v-col>
                     <v-col cols="12" sm="6" md="4">
                       <v-text-field
-                        v-model="editedItem.email"
-                        label="email"
+                        v-model="editedItem.ordering"
+                        label="ordering"
                       ></v-text-field>
                     </v-col>
                     <v-col cols="12" sm="6" md="4">
@@ -153,7 +143,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>
@@ -161,6 +151,12 @@
       </template>
     </v-data-table>
   </div>
+
+    
+
+    
+    
+  </div>
   
 </template>
 <script>
@@ -168,23 +164,30 @@ 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 {
+  layout: 'admin',
   components: { Nav },
   components: { Navigation },
   components: { notification },
   middleware: ["web"],
-      
+
   data: () => {
     return {
-    email:'',
+    parent_id:'',
     name:'',
-    password:'',
+    ordering:'',
+    image: null,
     error: '',
     dialog: false,
     dialogDelete: false,
+    options: [
+          { value: null, text: 'Please select an option' },
+          { value: 'a', text: 'This is First option' },
+          { value: 'b', text: 'Selected Option' },
+          { value: { C: '3PO' }, text: 'This is an option with object value' },
+          { value: 'd', text: 'This one is disabled', disabled: true }
+        ],
     headers: [
       {
         text: "Name",
@@ -193,19 +196,23 @@ export default {
         value: "name",
       },
       { text: "id", value: "id" },
-      { text: "email", value: "email" },
-      { text: "status", value: "status", sortable: false },
+      { text: "ordering", value: "ordering" },
+      { text: "parent", value: "parent_id", sortable: false },
       { text: "created_at", value: "created_at" },
       { text: "updated_at", value: "updated_at" },
       { text: 'Actions', value: 'actions', sortable: false },
     ],
-    users: [],
+    categories: [],
+    eID: '',
+    eEmail:'',
+    eName:'',
+    ePassword:'', 
     message: [],
     editedIndex: -1,
     editedItem: {
       name: "",
       id: "",
-      email: "",
+      ordering: "",
       status: "",
       created_at: "",
       updated_at: "",
@@ -214,7 +221,7 @@ export default {
     defaultItem: {
       name: "",
       id: "",
-      email: "",
+      ordering: "",
       status: "",
       created_at: "",
       updated_at: "",
@@ -236,23 +243,25 @@ export default {
   },
   created() {
     this.initialize();
+    this.getCategories();
   },
   methods: {
     initialize() {
       this.users = [];
+      this.categories= [];
     },
     editItem(item) {
-      this.editedIndex = this.users.indexOf(item);
+      this.editedIndex = this.categories.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
     },
     deleteItem(item) {
-      this.editedIndex = this.users.indexOf(item);
+      this.editedIndex = this.categories.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialogDelete = true;
     },
     deleteItemConfirm() {
-      this.users.splice(this.editedIndex, 1);
+      this.categories.splice(this.editedIndex, 1);
       this.closeDelete();
     },
     close() {
@@ -271,49 +280,96 @@ export default {
     },
     save() {
       if (this.editedIndex > -1) {
-        Object.assign(this.users[this.editedIndex], this.editedItem);
+        Object.assign(this.categories[this.editedIndex], this.editedItem);
       } else {
-        this.users.push(this.editedItem);
+        this.categories.push(this.editedItem);
       }
       this.close();
     },
-    getUser() {
+    getCategories() {
       axios
-        .get("http://127.0.0.1:8000/api/users/")
-        .then((response) => (this.users = response.data.data.data))
+        .get("http://127.0.0.1:8000/api/categories/")
+        .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error);
         });
     },
-    createUser() {
+    createCategory() {
+      const self = this
       axios
-      .post('http://127.0.0.1:8000/api/users/',{
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        email: this.email,
-        password: this.password,
-        name:this.name,
+      .post('http://127.0.0.1:8000/api/categories/',{
+        name: this.name,
+        ordering: this.ordering,
+        parent_id: this.parent_id,
+        image: this.image,
+      })
+      .then(response => {
+        // $bvModal.hide('modal-login');
+        self.$toast.success('Category created successfully!',{
+        duration: 3000
+      });
+        console.log(response);
       })
-      .then(response => (this.message = response))
-      .catch(function (errors) {
-        console.log(errors);
-        this.message = errors;
+      .catch(errors => {
+        this.$bvModal.hide('modal-create')
+        console.log(errors.response.data.message);
+        this.message = errors.response.data.message;
+        self.$toast.error('something went wrong while trying create!',{
+        duration: 3000
+      });
         });
+        
+    },
+    fileSelected(event){
+      console.log(event)
+      const file = event.target.files[0];
+      this.url = URL.createObjectURL(file);
+      this.image = file;
+      console.log(file)
+      
     },
     deleteUser(userID) {
-
+      if(confirm("Do you really want to delete?")){
       try{
       axios
-        .delete(`http://127.0.0.1:8000/api/users/${userID}`)
+        .delete(`http://127.0.0.1:8000/api/categories/${userID}`)
       } catch(error){
         console.log(error)
       }
+    }
 
     },
-  },
-  created() {
-    this.getUser();
+    
+    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/categories/${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)
+      }
+    }
+
+    
   },
 };
-</script>
+
+</script>
\ No newline at end of file