add CRUD category

nuxt.config.js

@@ -28,8 +28,7 @@ export default {
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-  ],
+  plugins: ['~/plugins/axios.js'],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -57,6 +56,7 @@ export default {
     debug: process.env.DEBUG || false,
     proxyHeaders: false,
     credentials: false,
+            
   },
   auth: {
 
@@ -79,5 +79,6 @@ export default {
         }
       }
     ]
-},
+ },
+  
 }

pages/home/categories.vue

@@ -35,7 +35,7 @@
           <input
             type="text"
             class="form-control mb-2"
-            placeholder="password"
+            placeholder="Ordering"
             v-model="ordering"
             required
           />
@@ -56,6 +56,50 @@
         <button @click="createCategory" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
     </template>
   </b-modal>
+  <!-- edit-modal -->
+  <b-modal id="modal-edit" title="Edit Category" class="modal fade" >
+    <p class="my-4">
+      <form  >
+          <label>Name :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            v-model="eName"
+            max="255"
+            min="1"
+          />
+          <label>Parent ID :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Parent ID"
+            v-model="eParent_id"
+          />
+
+          <label>Ordering :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Ordering"
+            v-model="eOrdering"
+          />
+          <!-- <b-form-select v-model="selected" :options="options"></b-form-select> -->
+          <label>Image :</label>
+          <b-form-file
+            v-model="eImage"
+            :state="Boolean(eImage)"
+            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="$bvModal.hide('modal-edit')"  class="btn btn-danger btn-sm m-1">Close</button>
+        <button @click="updateCategory(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
@@ -143,8 +187,8 @@
         </v-toolbar>
       </template>
       <template v-slot:item.actions="{ item }">
-        <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>
+        <v-icon small class="mr-2" @click=" editCategory(item.id)" :id ="item.id"> mdi-pencil </v-icon>
+        <v-icon small @click="deleteCategory(item.id,item)" :id ="item.id"> mdi-delete </v-icon>
       </template>
       <template v-slot:no-data>
         <v-btn color="primary" @click="initialize"> Reset </v-btn>
@@ -204,9 +248,10 @@ export default {
     ],
     categories: [],
     eID: '',
-    eEmail:'',
     eName:'',
-    ePassword:'', 
+    eOrdering:'',
+    eParent_id:'', 
+    eImage: null,
     message: [],
     editedIndex: -1,
     editedItem: {
@@ -305,7 +350,7 @@ export default {
       }, {
         headers: {
           "Content-Type": "multipart/form-data",
-          "Authorization": "bearer " + this.$auth.$storage.getUniversal("token")
+          "Authorization": this.$auth.$storage.getUniversal("token")
         }
       })
       .then(response => {
@@ -329,37 +374,50 @@ export default {
       this.url = URL.createObjectURL(file);
       this.image = file;
       console.log(file)
+      console.log(this.image)
       
     },
-    deleteUser(userID) {
+    deleteCategory(ID,index) {
+      this.editedIndex = this.categories.indexOf(index);
       if(confirm("Do you really want to delete?")){
       try{
       axios
-        .delete(`http://127.0.0.1:8000/api/categories/${userID}`)
+        .delete(`http://127.0.0.1:8000/api/categories/${ID}`)
+        .then(response => {
+          this.categories.splice(this.editedIndex, 1);
+      })
       } catch(error){
         console.log(error)
       }
     }
 
     },
-    
-    editUser(userID) {
+    getID(item) {
+      console.log(this.categories.indexOf(item))
+    },
+    editCategory(userID) {
       this.$bvModal.show('modal-edit');
       this.eID = userID;
       console.log(this?.eID);
+      console.log(this.eName);
     },
-    updateUser(userID) {
+    updateCategory(userID) {
       const self = this
       console.log(this.eName);
-      console.log(this.eEmail);
+      console.log(this.eOrdering);
       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,} )
+        .post(`http://127.0.0.1:8000/api/categories/update/${this?.eID}`,{
+          name: this.eName,
+          ordering: this.eOrdering,
+          parent_id: this.eParent_id,
+          image: this.eImage }, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+          "Authorization": this.$auth.$storage.getUniversal("token")
+        }
+      } )
         .then(response => {
         self.$toast.success('User updated successfully!',{
         duration: 3000

pages/index.vue

@@ -94,6 +94,7 @@ export default {
           body: JSON.stringify({
             email: this.email,
             password: this.password,
+            status: this.status,
           }),
         }).then((response) => {
           return response.json();

pages/register.vue

@@ -78,6 +78,7 @@ export default {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Accept: "application/json",
         },
         body: JSON.stringify({
           name: this.name,

plugins/axios.js

+export default ({ $axios}) => {
+  $axios.onRequest(config => {
+    config.headers.common['Content-Type'] = 'multipart/form-data';
+  });
+}
\ No newline at end of file

schemes/customScheme.js

-import { LocalScheme } from '~auth/runtime'
-
-export default class CustomScheme extends LocalScheme {
-  // Override `fetchUser` method of `local` scheme
-  async fetchUser (endpoint) {
-    // Token is required but not available
-    if (!this.check().valid) {
-      return
-    }
-
-    // User endpoint is disabled.
-    if (!this.options.endpoints.user) {
-      this.$auth.setUser({})
-      return
-    }
-    
-    // Try to fetch user and then set
-    return this.$auth.requestWith(
-      this.name,
-      endpoint,
-      this.options.endpoints.user
-    ).then((response) => {
-      const user = getProp(response.data, this.options.user.property)
-      
-      // Transform the user object
-      const customUser = {
-        ...user,
-        fullName: user.firstName + ' ' + user.lastName,
-        roles: ['user']
-      }
-      
-      // Set the custom user
-      // The `customUser` object will be accessible through `this.$auth.user`
-      // Like `this.$auth.user.fullName` or `this.$auth.user.roles`
-      this.$auth.setUser(customUser)
-
-      return response
-    }).catch((error) => {
-      this.$auth.callOnError(error, { method: 'fetchUser' })
-    })
-  }
-}
\ No newline at end of file