add CRUD posts

components/nav.vue

@@ -15,6 +15,7 @@
           <b-nav-item href="/home/users">USER</b-nav-item>
           <b-nav-item href="/home/categories">CATEGORY</b-nav-item>
           <b-nav-item href="/home/products">PRODUCT</b-nav-item>
+          <b-nav-item href="/home/posts">POST</b-nav-item>
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->

pages/home/posts.vue

+<template>
+  <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/posts">Post</b-breadcrumb-item>
+  </b-breadcrumb>
+  <div style="float: right">
+    <b-button class="text-white" v-b-modal.modal-create >New Post</b-button></div>
+    <b-modal id="modal-create" title="create Post" class="modal fade" >
+    <div class="w-full mt-4 p-10">
+      <form >
+      <label for="input-live">Title :</label>
+          <b-form-input
+            id="input-live"
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            aria-describedby="input-live-help input-live-feedback"
+            v-model="title"
+            max="255"
+            min="1"            
+            trim
+            >
+          </b-form-input>
+          <label>Category ID :</label>
+          <b-form-select v-model="category_id">
+            <option v-for="item in categories" :value="item.id">
+              {{item.name}}
+            </option>
+          </b-form-select>
+
+          <label>Content :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Ordering"
+            v-model="content"
+            size="sm"
+            required
+          />
+          <label>Author :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Description"
+            v-model="user_id"
+            size="sm"
+            required
+          />
+          <label>Status :</label>
+          <b-form-select v-model="status" :options="options"></b-form-select>
+          <label>Image :</label>
+          <b-form-file
+            v-model="images"
+            multiple
+            :state="Boolean(images)"
+            placeholder="Choose a image or drop it here..."
+            drop-placeholder="Drop file here..."
+          ></b-form-file>
+    </form>
+    </div>
+    <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="createPost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
+  </b-modal>
+  <!-- modal-show -->
+  <b-modal id="modal-show" title="POST" class="modal fade" >
+    <div class="w-full mt-4 p-10">
+      <form >
+      <label>Title :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            v-model="sTitle"
+            size="sm"
+            disabled
+          />
+          <label>Category ID :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            v-model="sCategoryId"
+            size="sm"
+            disabled
+          />
+          <label>Content :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            v-model="sContent"
+            size="sm"
+            disabled
+          />
+          <label>Author :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Description"
+            v-model="sUserID"
+            size="sm"
+            disabled
+          />
+          <label>Status :</label>
+          <b-form-select v-model="sStatus" :options="options" disabled></b-form-select>
+          <label>Image :</label>
+          <div v-for="(image, index) in sImages" :key="index">
+            <b-img :src="image" fluid alt="Fluid image"></b-img>
+          </div>
+    </form>
+    </div>
+    <template #modal-footer>
+        <button v-b-modal.modal-close_visit  @click="$bvModal.hide('modal-show')"  class="btn btn-danger btn-sm m-1">Close</button>
+    </template>
+  </b-modal>
+  <!-- modal-edit -->
+  <b-modal id="modal-edit" title="Edit Post " class="modal fade" >
+    <div class="w-full mt-4 p-10">
+      <form >
+      <label>Title :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="name"
+            v-model="eTitle"
+            max="255"
+            min="1"
+            size="sm"
+            required
+          />
+          <label>Category ID :</label>
+          <b-form-select v-model="eCategoryId">
+            <option v-for="item in categories" :value="item.id">
+              {{item.name}}
+            </option>
+          </b-form-select>
+          <label>Content :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Ordering"
+            v-model="eContent"
+            size="sm"
+            required
+          />
+          <label>Author :</label>
+          <input
+            type="text"
+            class="form-control mb-2"
+            placeholder="Description"
+            v-model="eUserId"
+            size="sm"
+          />
+          <label>Status :</label>
+          <b-form-select v-model="eStatus" :options="options"></b-form-select>
+          <label>Image :</label>
+          <b-form-file
+            v-model="eImages"
+            multiple
+            :state="Boolean(eImages)"
+            placeholder="Choose a image or drop it here..."
+            drop-placeholder="Drop file here..."
+    ></b-form-file>
+    </form>
+    </div>
+    <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="updatePost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
+    </template>
+  </b-modal>
+  <!-- table -->
+  <div>
+    <v-data-table
+      :headers="headers"
+      :items="posts"
+      sort-by="calories"
+      class="elevation-1"
+    >
+      <template v-slot:top >
+        <v-toolbar flat>
+          <v-toolbar-title>Post Manage</v-toolbar-title>
+          <v-divider class="mx-4" inset vertical></v-divider>
+          <v-spacer></v-spacer>
+        </v-toolbar>  
+      </template>
+      <template v-slot:item.actions="{ item }">
+        <v-icon small  @click="editPost(item)" :id ="item.id"> mdi-pencil </v-icon>
+        <v-icon small  @click="deletePost(item.id,item)" :id ="item.id"> mdi-delete </v-icon>
+        <v-icon small  @click="showPost(item)" :id ="item.id"> mdi-account-details </v-icon>
+      </template>
+      <template v-slot:no-data>
+        <v-btn color="primary" @click="initialize"> Reset </v-btn>
+      </template>
+    </v-data-table>
+  </div>
+  </div>
+</template>
+
+<script>
+import Nav from "@/components/Nav";
+import axios from "axios";
+
+export default {
+  layout: 'admin',
+  name: "App",
+  components: {
+    Nav,
+  },
+  middleware: ["web"],
+  data: () => {
+    return {
+      title: '',
+      category_id: null,
+      content: '',
+      user_id: '',
+      status: null,
+      images: [],
+    dialog: false,
+    dialogDelete: false,
+    options: [
+          { value: 1, text: 'Draft' },
+          { value: 2, text: 'Publish' },
+          { value: 3, text: 'UnPublish' },
+        ],
+    headers: [
+      {
+        text: "Title",
+        align: "start",
+        sortable: false,
+        value: "title",  
+      },
+      { text: "Category ID", value: "category_id" },
+      { text: "content", value: "content", sortable: false },
+      { text: "user_id", value: "user_id" },
+      { text: "status", value: "status" },
+      { text: 'Actions', value: 'actions', sortable: false },
+    ],
+    posts: [],
+    categories: [],
+    sTitle: '',
+    sCategoryId: '',
+    sContent: '',
+    sUserId: '',
+    sStatus: null,
+    sImages: null,
+    sVariants: [
+        {
+          color: "",
+          size: "",
+          quantity: "",          
+        },
+      ],
+    eId: '',
+    eTitle: '',
+    eCategoryId: '',
+    eContent: '',
+    eUserId: '',
+    eStatus: '',
+    eImages: null,
+    message: [],
+    editedIndex: -1,
+    editedItem: {
+      name: "",
+      id: "",
+      ordering: "",
+      status: "",
+      created_at: "",
+      updated_at: "",
+    },
+    defaultItem: {
+      name: "",
+      id: "",
+      ordering: "",
+      status: "",
+      created_at: "",
+      updated_at: "",
+    },
+    }
+  },
+  computed: {
+    formTitle() {
+      return this.editedIndex === -1 ? "New Item" : "Edit Item"
+    },
+    nameState() {
+      return this.name.length > 2 ? true : false
+    }
+  },
+  watch: {
+    dialog(val) {
+      val || this.close()
+    },
+    dialogDelete(val) {
+      val || this.closeDelete()
+    },
+  },
+  created() {
+    this.initialize(),
+    this.getposts(),
+    this.getCategories()
+  },
+  methods: {
+    initialize() {
+      this.posts= [],
+      this.product= [],
+      this.categories= [],
+      this.sTitle= '',
+      this.sCategoryId= '',
+      this.sContent= '',
+      this.sUserId= '',
+      this.sStatus= '',
+      this.sImages= null,
+      this.sVariants= [
+        {
+          color: "",
+          size: "",
+          quantity: "",
+          
+        },
+      ];
+    },
+    editItem(item) {
+      this.editedIndex = this.posts.indexOf(item)
+      this.editedItem = Object.assign({}, item)
+      this.dialog = true
+    },
+    deleteItem(item) {
+      this.editedIndex = this.posts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialogDelete = true;
+    },
+    deleteItemConfirm() {
+      this.posts.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.posts[this.editedIndex], this.editedItem);
+      } else {
+        this.posts.push(this.editedItem);
+      }
+      this.close()
+    },
+    getCategories() {
+      axios
+        .get("http://127.0.0.1:8000/api/categories/")
+        .then((response) => (this.categories = response.data.data))
+        .catch(function (error) {
+          console.log(error)
+        });
+    },
+    getposts() {
+      axios
+        .get("http://127.0.0.1:8000/api/posts/")
+        .then((response) => (this.posts = response.data.data))
+        .catch(function (error) {
+          console.log(error)
+        });
+    },
+    createPost() {
+      const self = this;
+      axios
+      .post('http://127.0.0.1:8000/api/posts/',{
+        title: this.title,
+        category_id: this.category_id,
+        content: this.content,
+        images: this.images,
+        user_id: this.user_id,
+        status: this.status,
+      }, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'Authorization': this.$auth.$storage.getUniversal('token')
+        }
+      })
+      .then(response => {
+        this.$bvModal.hide('modal-create')
+        self.$toast.success('Product created successfully!', {
+          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
+        })
+      })
+    },
+    deletePost(ID,index) {
+      const self = this;
+      this.editedIndex = this.posts.indexOf(index);
+      if(confirm("Do you really want to delete?")){
+      axios
+        .delete(`http://127.0.0.1:8000/api/posts/${ID}`)
+        .then(response => {
+          this.posts.splice(this.editedIndex, 1);
+          self.$toast.success('Post deleted successfully!',{
+        duration: 3000
+      });
+      })
+       .catch(error =>{
+        console.log(error)
+        self.$toast.error('Error!',{
+        duration: 3000
+      })
+      })
+    }
+    },
+    async showPost(item) {
+      const ID = item.id
+      try {
+        const resp = await fetch(`http://127.0.0.1:8000/api/posts/${ID}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "multipart/form-data",
+            "Authorization": this.$auth.$storage.getUniversal("token")
+          }
+        }).then((response) => {
+          return response.json()
+        });
+        this.sTitle = resp.data.title
+        this.sContent = resp.data.content
+        this.sCategoryId = resp.data.category_id
+        this.sUserId = resp.data.user_id
+        this.sStatus = resp.data.status
+        this.sImages = resp.data.images
+      } catch (error) {
+        console.log(error)       
+      }      
+      this.$bvModal.show('modal-show')
+    },
+    editPost(item) {
+      this.$bvModal.show('modal-edit')
+      this.eId = item.id
+      this.eTitle = item.title
+      this.eCategoryId = item.category_id
+      this.eContent = item.content
+      this.eStatus = item.status
+      this.eUserId = item.user_id
+      // this.eImages = item.images    
+    },
+    updatePost(ID) {
+      const self = this;
+      axios
+        .post(`http://127.0.0.1:8000/api/posts/update/${this?.eId}`,{
+          title: this.eTitle,
+          category_id: this.eCategoryId,
+          content: this.eContent,
+          images: this.eImages,
+          user_id: this.eUserId,
+          status: this.eStatus,
+        }, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+          "Authorization": this.$auth.$storage.getUniversal("token")
+        }
+        })
+        .then(response => {
+          this.$bvModal.hide('modal-edit')
+          self.$toast.success('User updated successfully!',{
+            duration: 3000
+          });
+        console.log(response)
+        })
+        .catch(error => {
+        console.log(error)
+        this.$bvModal.hide('modal-edit')
+        self.$toast.error('something went wrong while trying create!',{
+          duration: 3000
+        })
+      })
+    },
+    addMore() {
+      this.variants.push({
+        color: "",
+        size: "",
+        quantity: "",
+      });
+    },
+    addMoreVariant() {
+      this.eVariants.push({
+        color: "",
+        size: "",
+        quantity: "",
+      });
+    },
+    remove(index) {
+      this.variants.splice(index, 1)
+    },
+    removeVariant(index) {
+      this.eVariants.splice(index, 1)
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

pages/home/products.vue

@@ -516,8 +516,8 @@ export default {
         variants: this.variants,
       }, {
         headers: {
-          "Content-Type": "multipart/form-data",
-          "Authorization": this.$auth.$storage.getUniversal("token")
+          'Content-Type': 'multipart/form-data',
+          'Authorization': this.$auth.$storage.getUniversal('token')
         }
       })
       .then(response => {