Merge branch 'feature/manage-posts' into 'dev'

Feature/manage posts

See merge request !7

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,
+      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
+    },
+    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("Post 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() {
+      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("Post 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,
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style></style>

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 => {