fix post creen

pages/categories/index.vue

@@ -2,78 +2,125 @@
   <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>
+        <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true" />
         Home
       </b-breadcrumb-item>
-      <b-breadcrumb-item href="/categories">Category</b-breadcrumb-item>
+      <b-breadcrumb-item href="/categories">
+        Category
+      </b-breadcrumb-item>
     </b-breadcrumb>
     <div style="float: right">
-      <b-button v-b-modal.modal-create class="text-white">New Category</b-button>
+      <b-button v-b-modal.modal-create class="text-white">
+        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="createCategory">
+      <p class="my-4" /></p><form @submit.prevent="createCategory">
         <label>Name :</label>
-        <input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
+        <input
+          v-model="name"
+          type="text"
+          class="form-control mb-2"
+          placeholder="name"
+          max="255"
+          min="1"
+          required
+        >
         <label>Parent :</label>
         <b-form-select v-model="parent_id">
-          <option v-for="item in categories" :value="item.id" v-if="item.parent_id == null">
+          <option v-for="item in categories" v-if="item.parent_id == null" :value="item.id">
             {{ item.name }}
           </option>
         </b-form-select>
         <label>Ordering :</label>
-        <input type="text" class="form-control mb-2" placeholder="Ordering" v-model="ordering" required />
+        <input v-model="ordering" type="text" class="form-control mb-2" placeholder="Ordering" required>
         <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>
+        <b-form-file
+          v-model="image"
+          :state="Boolean(image)"
+          placeholder="Choose a image or drop it here..."
+          drop-placeholder="Drop file here..."
+          @change="fileSelected"
+        />
       </form>
       </p>
       <template #modal-footer>
-        <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>
+        <button
+          v-b-modal.modal-close_visit
+          class="btn btn-danger btn-sm m-1"
+          @click="$bvModal.hide('modal-create')"
+        >
+          Close
+        </button>
+        <button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createCategory">
+          Submit
+        </button>
       </template>
     </b-modal>
     <!-- edit-modal -->
     <b-modal id="modal-edit" title="Edit Category" class="modal fade">
-      <p class="my-4">
-      <form>
+      <p class="my-4" /></p><form>
         <label>Name :</label>
-        <input type="text" class="form-control mb-2" placeholder="name" v-model="eName" max="255" min="1"
-          value="this?.eName" />
+        <input
+          v-model="eName"
+          type="text"
+          class="form-control mb-2"
+          placeholder="name"
+          max="255"
+          min="1"
+          value="this?.eName"
+        >
         <label>Parent :</label>
         <b-form-select v-model="eParentId">
-          <option v-for="item in categories" :value="item.id" :key="item.id">
+          <option v-for="item in categories" :key="item.id" :value="item.id">
             {{ item.name }}
           </option>
         </b-form-select>
         <label>Ordering :</label>
-        <input type="text" class="form-control mb-2" placeholder="Ordering" v-model="eOrdering"
-          value="this?.eOrdering" />
+        <input
+          v-model="eOrdering"
+          type="text"
+          class="form-control mb-2"
+          placeholder="Ordering"
+          value="this?.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>
+        <b-form-file
+          v-model="eImage"
+          :state="Boolean(eImage)"
+          placeholder="Choose a image or drop it here..."
+          drop-placeholder="Drop file here..."
+        />
       </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>
+        <button
+          v-b-modal.modal-close_visit
+          class="btn btn-danger btn-sm m-1"
+          @click="$bvModal.hide('modal-edit')"
+        >
+          Close
+        </button>
+        <button
+          v-b-modal.modal-close_visit
+          class="btn btn-success btn-sm m-1"
+          @click="updateCategory(eID)"
+        >
+          Submit
+        </button>
       </template>
     </b-modal>
     <div>
       <v-data-table :headers="headers" :items="categories" sort-by="calories" class="elevation-1">
-        <template v-slot:top>
+        <template #top>
           <v-toolbar flat>
             <v-toolbar-title>Category Manage</v-toolbar-title>
-            <v-divider class="mx-4" inset vertical></v-divider>
-            <v-spacer></v-spacer>
+            <v-divider class="mx-4" inset vertical />
+            <v-spacer />
             <v-dialog v-model="dialog" max-width="500px">
-              <template v-slot:activator="{ on, attrs }">
-              </template>
+              <template #activator="{ on, attrs }" />
               <v-card>
                 <v-card-title>
                   <span class="text-h5">{{ formTitle }}</span>
@@ -82,51 +129,65 @@
                   <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-text-field v-model="editedItem.name" label="name" />
                       </v-col>
                       <v-col cols="12" sm="6" md="4">
-                        <v-text-field v-model="editedItem.id" label="id"></v-text-field>
+                        <v-text-field v-model="editedItem.id" label="id" />
                       </v-col>
                       <v-col cols="12" sm="6" md="4">
-                        <v-text-field v-model="editedItem.ordering" label="ordering"></v-text-field>
+                        <v-text-field v-model="editedItem.ordering" label="ordering" />
                       </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-text-field v-model="editedItem.created_at" label="created_at" />
                       </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-text-field v-model="editedItem.updated_at" label="updated_at" />
                       </v-col>
                     </v-row>
                   </v-container>
                 </v-card-text>
                 <v-card-actions>
-                  <v-spacer></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-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-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-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-card-actions>
               </v-card>
             </v-dialog>
           </v-toolbar>
         </template>
-        <template v-slot:item.actions="{ item }">
-          <v-icon small class="mr-2" @click="editCategory(item)" :id="item.id"> mdi-pencil </v-icon>
-          <v-icon small @click="deleteCategory(item.id, item)" :id="item.id"> mdi-delete </v-icon>
+        <template #item.actions="{ item }">
+          <v-icon :id="item.id" small class="mr-2" @click="editCategory(item)">
+            mdi-pencil
+          </v-icon>
+          <v-icon :id="item.id" small @click="deleteCategory(item.id, item)">
+            mdi-delete
+          </v-icon>
         </template>
-        <template v-slot:no-data>
-          <v-btn color="primary" @click="initialize"> Reset </v-btn>
+        <template #no-data>
+          <v-btn color="primary" @click="initialize">
+            Reset
+          </v-btn>
         </template>
       </v-data-table>
     </div>
@@ -151,14 +212,14 @@ export default {
           text: 'Name',
           align: 'start',
           sortable: false,
-          value: 'name',
+          value: 'name'
         },
         { text: 'id', value: 'id' },
         { 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 },
+        { text: 'Actions', value: 'actions', sortable: false }
       ],
       categories: [],
       eID: '',
@@ -174,7 +235,7 @@ export default {
         ordering: '',
         parent_id: '',
         created_at: '',
-        updated_at: '',
+        updated_at: ''
       },
       defaultItem: {
         name: '',
@@ -182,61 +243,61 @@ export default {
         ordering: '',
         status: '',
         created_at: '',
-        updated_at: '',
-      },
+        updated_at: ''
+      }
     }
   },
   computed: {
-    formTitle() {
+    formTitle () {
       return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
-    },
+    }
   },
   watch: {
-    dialog(val) {
+    dialog (val) {
       val || this.close()
     },
-    dialogDelete(val) {
+    dialogDelete (val) {
       val || this.closeDelete()
-    },
+    }
   },
-  created() {
+  created () {
     this.initialize()
     this.getCategories()
   },
   methods: {
-    initialize() {
+    initialize () {
       this.users = []
       this.categories = []
     },
-    editItem(item) {
+    editItem (item) {
       this.editedIndex = this.categories.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialog = true
     },
-    deleteItem(item) {
+    deleteItem (item) {
       this.editedIndex = this.categories.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialogDelete = true
     },
-    deleteItemConfirm() {
+    deleteItemConfirm () {
       this.categories.splice(this.editedIndex, 1)
       this.closeDelete()
     },
-    close() {
+    close () {
       this.dialog = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    closeDelete() {
+    closeDelete () {
       this.dialogDelete = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    save() {
+    save () {
       if (this.editedIndex > -1) {
         Object.assign(this.categories[this.editedIndex], this.editedItem)
       } else {
@@ -244,56 +305,57 @@ export default {
       }
       this.close()
     },
-    getCategories() {
+    getCategories () {
       this.$axios
-        .get("/categories/",{
+        .get('/categories/', {
           headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
-          }})
-        .then((response) => (this.categories = response.data.data))
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        })
+        .then(response => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
         })
     },
-    createCategory() {
+    createCategory () {
       const set = new Set([this.image])
       const image = Array.from(set)
       const self = this
       this.$axios
-      .post('/categories/',
-        {
-          name: this.name,
-          ordering: this.ordering,
-          parent_id: this.parent_id,
-          images: image,
-        }, 
-        {
-          headers: {
-            "Content-Type": "multipart/form-data",
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+        .post('/categories/',
+          {
+            name: this.name,
+            ordering: this.ordering,
+            parent_id: this.parent_id,
+            images: image
           },
-        }
-      )
-      .then(response => {
-        this.$bvModal.hide('modal-create')
-        self.$toast.success('Category created successfully!', {
-          duration: 3000
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+            }
+          }
+        )
+        .then((response) => {
+          this.$bvModal.hide('modal-create')
+          self.$toast.success('Category created successfully!', {
+            duration: 3000
+          })
+          this.editedItem = response.data.data
+          console.log(this.editedItem)
+          this.categories.push(this.editedItem)
         })
-        this.editedItem = response.data.data
-        console.log(this.editedItem)
-        this.categories.push(this.editedItem)
-      })
-      .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
+        .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) {
+    fileSelected (event) {
       console.log(event)
       const file = event.target.files[0]
       this.url = URL.createObjectURL(file)
@@ -301,34 +363,34 @@ export default {
       console.log(file)
       console.log(this.image)
     },
-    deleteCategory(ID, index) {
+    deleteCategory (ID, index) {
       const self = this
       this.editedIndex = this.categories.indexOf(index)
-      if(confirm("Do you really want to delete?")){
-      try{
-      this.$axios
-        .delete(`/categories/${ID}`,
-        {
-          headers: {
-            "Content-Type": "multipart/form-data",
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
-          },
-        })
-        .then(response => {
-          this.categories.splice(this.editedIndex, 1)
-          self.$toast.success('Category deleted successfully!',{
-        duration: 3000
-      })
-      })
-      } catch(error){
-        console.log(error)
+      if (confirm('Do you really want to delete?')) {
+        try {
+          this.$axios
+            .delete(`/categories/${ID}`,
+              {
+                headers: {
+                  'Content-Type': 'multipart/form-data',
+                  Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+                }
+              })
+            .then((response) => {
+              this.categories.splice(this.editedIndex, 1)
+              self.$toast.success('Category deleted successfully!', {
+                duration: 3000
+              })
+            })
+        } catch (error) {
+          console.log(error)
+        }
       }
-    }
     },
-    getID(item) {
+    getID (item) {
       console.log(this.categories.indexOf(item))
     },
-    editCategory(item) {
+    editCategory (item) {
       this.$bvModal.show('modal-edit')
       this.eID = item.id
       this.eName = item.name
@@ -339,41 +401,42 @@ export default {
       console.log(this?.eID)
       console.log(item)
     },
-    updateCategory(userID) {
+    updateCategory (userID) {
       const set = new Set([this.eImage])
       const image = Array.from(set)
       const self = this
       console.log(this.eName)
       console.log(this.eOrdering)
       console.log(this?.eID)
-      try{
-      this.$axios
-        .post(`categories/update/${this?.eID}`,
-          {
-            name: this.eName,
-            ordering: this.eOrdering,
-            parent_id: this.eParentId,
-            images: image }, 
-          {
-            headers: {
-              "Content-Type": "multipart/form-data",
-              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+      try {
+        this.$axios
+          .post(`categories/update/${this?.eID}`,
+            {
+              name: this.eName,
+              ordering: this.eOrdering,
+              parent_id: this.eParentId,
+              images: image
+            },
+            {
+              headers: {
+                'Content-Type': 'multipart/form-data',
+                Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+              }
             }
-          } 
-        )
-        .then(response => {
-        self.$toast.success('User updated successfully!',{
-        duration: 3000
-      })
-        console.log(response)
-        this.editedItem = response.data.data
-        this.$bvModal.hide('modal-edit')
-        Object.assign(this.categories[this.editedIndex], this.editedItem)
-      })
-      } catch(error){
+          )
+          .then((response) => {
+            self.$toast.success('User updated successfully!', {
+              duration: 3000
+            })
+            console.log(response)
+            this.editedItem = response.data.data
+            this.$bvModal.hide('modal-edit')
+            Object.assign(this.categories[this.editedIndex], this.editedItem)
+          })
+      } catch (error) {
         console.log(error)
       }
     }
-  },
+  }
 }
-</script>
\ No newline at end of file
+</script>

pages/posts/index.vue

@@ -247,10 +247,9 @@
                 <v-file-input
                   v-model="eImages"
                   label="File input"
+                  accept="image/*"
                   small-chips
                   dense
-                  multiple
-                  :state="Boolean(eImages)"
                 />
               </v-col>
             </v-row>
@@ -270,7 +269,7 @@
             color="blue darken-1"
             text
             type="submit"
-            @click="dialog = false;"
+            @click="dialog = false; updatePost()"
           >
             Save
           </v-btn>
@@ -382,7 +381,7 @@
             <v-spacer />
           </v-toolbar>
         </template>
-        <template v-slot:[`item.actions`]="{ item }">
+        <template #[`item.actions`]="{ item }">
           <v-icon :id="item.id" small @click="editPost(item)">
             mdi-pencil
           </v-icon>
@@ -472,11 +471,11 @@ export default {
       sImages: null,
       eId: '',
       eTitle: '',
-      eCategoryId: '',
+      eCategoryId: [],
       eContent: '',
       eUserId: '',
       eStatus: '',
-      eImages: null,
+      eImages: [],
       message: [],
       editedIndex: -1,
       editedItem: {
@@ -593,19 +592,18 @@ export default {
     },
     createPost () {
       const self = this
+      const fd = new FormData()
+      fd.append('title', this.title)
+      fd.append('category_id', this.category_id)
+      fd.append('content', this.content)
+      fd.append('images', this.images)
+      fd.append('status', this.status)
       this.$axios
         .post('/posts/',
-          {
-            title: this.title,
-            category_id: this.category_id,
-            content: this.content,
-            images: this.images,
-            user_id: this.user_id,
-            status: this.status
-          },
+          fd,
           {
             headers: {
-              'Content-Type': 'application/json; multipart/form-data; boundary=---------------------------974767299852498929531610575 ',
+              'Content-Type': 'multipart/form-data; application/json',
               Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
             }
           }
@@ -619,8 +617,6 @@ export default {
           this.posts.push(this.editedItem)
         })
         .catch((errors) => {
-          console.log(errors.response.data.message)
-          this.message = errors.response.data.message
           self.$toast.error('something went wrong while trying create!', {
             duration: 3000
           })
@@ -665,7 +661,6 @@ export default {
         this.sTitle = resp.data.data.title
         this.sContent = resp.data.data.content
         this.sCategoryId = resp.data.data.category_id
-        this.sUserId = resp.data.data.user_id
         this.sStatus = resp.data.data.status
         this.sImages = resp.data.data.images
       } catch (error) {
@@ -679,27 +674,29 @@ export default {
       this.eCategoryId = item.category_id
       this.eContent = item.content
       this.eStatus = item.status
-      this.eUserId = item.user_id
       this.editedIndex = this.posts.indexOf(item)
+      console.log(this.editedIndex)
       this.dialog = true
     },
     updatePost () {
       const self = this
+      const fd = new FormData()
+      fd.append('title', this.eTitle)
+      fd.append('category_id', this.eCategoryId)
+      fd.append('content', this.eContent)
+      fd.append('images', this.eImages)
+      fd.append('status', this.eStatus)
+
+      const currentPostIndex = this.editedIndex
       this.$axios
         .post(
           `/posts/update/${this?.eId}`,
-          {
-            title: this.eTitle,
-            category_id: this.eCategoryId,
-            content: this.eContent,
-            images: this.eImages,
-            user_id: this.eUserId,
-            status: this.eStatus
-          },
+          fd,
           {
             headers: {
               'Content-Type': 'multipart/form-data',
-              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
+              Accept: 'application/json, text/plain, */*'
             }
           }
         )
@@ -707,10 +704,8 @@ export default {
           self.$toast.success('Post updated successfully!', {
             duration: 3000
           })
-          console.log(response)
           this.editedItem = response.data.data
-          this.$bvModal.hide('modal-edit')
-          Object.assign(this.posts[this.editedIndex], this.editedItem)
+          Object.assign(this.posts[currentPostIndex], this.editedItem)
         })
         .catch((error) => {
           console.log(error)

pages/products/index.vue

@@ -72,7 +72,6 @@
                     small-chips
                     dense
                     multiple
-                    :state="Boolean(images)"
                   />
                 </v-col>
                 <v-col cols="12">
@@ -148,7 +147,7 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="dialog1 = false"
+              @click="dialog1 = false; seeVariant()"
             >
               Close
             </v-btn>
@@ -718,7 +717,7 @@
             <v-spacer />
           </v-toolbar>
         </template>
-        <template v-slot:[`item.actions`]="{ item }">
+        <template #[`item.actions`]="{ item }">
           <v-icon :id="item.id" small @click="editProduct(item)">
             mdi-pencil
           </v-icon>
@@ -948,21 +947,24 @@ export default {
       const self = this
       // const set = new Set([this.images])
       // const images = Array.from(set)
+      const fd = new FormData()
+      fd.append('name', this.name)
+      fd.append('price', this.price)
+      fd.append('category_id', this.category_id)
+      fd.append('description', this.description)
+      fd.append('image', this.images)
+      fd.append('variants', this.variants)
       this.$axios
-        .post('/products/', {
-          name: this.name,
-          price: this.price,
-          category_id: this.category_id,
-          description: this.description,
-          images: this.images,
-          variants: this.variants
-        }, {
-          headers: {
-            'Content-Type': 'application/json; multipart/form-data;  boundary=---------------------------974767299852498929531610575 ',
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
-            Accept: 'application/json; multipart/form-data'
-          }
-        })
+        .post('/products/',
+          fd
+          ,
+          {
+            headers: {
+              'Content-Type': 'application/json; multipart/form-data ',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
+              Accept: 'application/json; multipart/form-data'
+            }
+          })
         .then((response) => {
           self.$toast.success('Product created successfully!', {
             duration: 3000
@@ -1085,6 +1087,9 @@ export default {
     },
     removeVariant (index) {
       this.eVariants.splice(index, 1)
+    },
+    seeVariant () {
+      console.log(this.variants)
     }
   }
 }