create component product and fetch api product

src/components/Task.vue

@@ -59,14 +59,14 @@ export default {
     };
   },
 
-  mounted: function () {
+  created: function () {
     if (!localStorage.getItem("tasks")) {
       this.axios.get("https://dog.ceo/api/breeds/list/all").then((response) => {
-        let ar = response.data.message.hound;
+        var ar = response.data.message.hound;
         if (ar.length != 0) {
-          for (let i = 0; i < ar.length; i++) {
+          for (var i = 0; i < ar.length; i++) {
             this.task = ar[i];
-            this.tasks.unshift({
+            this.tasks.push({
               name: this.task,
               status: "to-do",
             });

src/components/addTask.vue

@@ -51,7 +51,7 @@ export default {
         return;
       }
 
-      this.tasks.unshift({
+      this.tasks.push({
         name: this.task,
         status: "to-do",
       });

src/components/editTask.vue

@@ -39,9 +39,7 @@ Vue.use(VueAlertify);
 
 export default {
   created: function () {
-    if (localStorage.getItem("tasks")) {
     this.tasks = JSON.parse(localStorage.getItem("tasks"));
-    }
     
     if (this.tasks[this.id]) {
       this.selected = this.tasks[this.id].status;

src/components/product/Index.vue

+<template>
+  <div class="container mt-5">
+    <div class="row">
+      <h3 class="mb-5 text-center">Product app using Vue</h3>
+    </div>
+    <router-link
+      class="d-inline-block btn btn-primary mb-2"
+      :to="{ name: 'addProduct' }"
+      >Add Product</router-link
+    >
+    <div class="row">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col" style="width: 100px">#</th>
+            <th scope="col">Name</th>
+            <th scope="col" style="width: 300px">Color</th>
+            <th scope="col" style="width: 200px">Price</th>
+            <th scope="col" style="width: 200px">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in products" :key="index">
+            <th>{{ index + 1 }}</th>
+            <td>{{ item.name }}</td>
+            <td>{{ item.color }}</td>
+            <td>{{ item.price }}</td>
+            <td>
+              <router-link
+                tag="span"
+                class="icon_action icon_edit"
+                :to="{ name: 'editProduct', params: { id: index } }"
+              >
+                <ion-icon name="create-outline"></ion-icon>
+              </router-link>
+              <span class="icon_action icon_del" @click="removeProduct(index)"
+                ><ion-icon name="trash-outline"></ion-icon
+              ></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import VueAlertify from "vue-alertify";
+import axios from "axios";
+import VueAxios from "vue-axios";
+
+Vue.use(VueAxios, axios);
+Vue.use(VueAlertify);
+
+export default {
+  data: function () {
+    return {
+      products: [],
+    };
+  },
+
+  mounted: function () {
+    if (!localStorage.getItem("products")) {
+      this.axios.get("http://127.0.0.1:8000/api/products/").then((response) => {
+        this.products = response.data
+        localStorage.setItem("products", JSON.stringify(this.products));
+      });
+    }else{
+      this.products = JSON.parse(localStorage.getItem("products"));
+    }
+  },
+
+  methods: {
+    removeProduct(index) {
+      if (confirm("Are you sure you want to delete products?")) {
+        this.products.splice(index, 1);
+        localStorage.setItem("products", JSON.stringify(this.products));
+        this.$alertify.error("Delete product successfully");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input_task {
+  width: 250px;
+  padding: 4px 8px;
+  margin-right: 12px;
+}
+.select_task {
+  width: 100px;
+  display: none;
+  height: 100%;
+}
+.btn_submit {
+  margin-left: 12px;
+}
+.icon_action {
+  margin-right: 12px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.icon_edit:hover {
+  color: rgb(255, 123, 0);
+}
+.icon_del:hover {
+  color: red;
+}
+.active {
+  display: inline-block;
+}
+</style>
\ No newline at end of file

src/components/product/addProduct.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <h3 class="mb-5 text-center mt-3">Add Product</h3>
+    </div>
+    <form class="row g-3">
+      <div class="col-md-6 offset-md-3">
+        <label for="name" class="form-label">Name</label>
+        <input type="text" class="form-control" id="name" v-model="name" />
+      </div>
+      <div class="col-md-6 offset-md-3">
+        <label for="color" class="form-label">Color</label>
+        <input type="text" class="form-control" id="color" v-model="color" />
+      </div>
+      <div class="col-md-6 offset-md-3">
+        <label for="price" class="form-label">Price</label>
+        <input type="number" class="form-control" id="price" v-model="price" />
+      </div>
+
+      <div class="col-md-6 offset-md-3">
+        <button
+          type="submit"
+          class="btn btn-primary d-block w-100 mt-2"
+          @click="submit()"
+        >
+          Add Product
+        </button>
+        <router-link tag="a" class="d-block text-end" :to="{ name: 'product' }"
+          >back</router-link
+        >
+      </div>
+    </form>
+  </div>
+</template>
+
+
+<script>
+import Vue from "vue";
+import VueAlertify from "vue-alertify";
+
+Vue.use(VueAlertify);
+
+export default {
+  data: function () {
+    return {
+      name: '',
+      color: '',
+      price: '',
+      products: [],
+    };
+  },
+  created: function () {
+    if (localStorage.getItem("products")) {
+      this.products = JSON.parse(localStorage.getItem("products"));
+    }
+  },
+  methods: {
+    submit() {
+
+      if (this.name == '' || this.price == '' || this.color == '') {
+        alert("Please fill it out completely form!!");
+        return;
+      }else if(isNaN(this.price)){
+        alert("price only accepts numeric data!!");
+        return;
+      }
+
+      this.products.push({
+        name: this.name,
+        color: this.color,
+        price: this.price
+      });
+
+      localStorage.setItem("products", JSON.stringify(this.products));
+      this.name = '';
+      this.color = '';
+      this.price = '';
+      this.$router.push({ name : 'product'});
+      this.$alertify.success("Add task successfully");
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

src/components/product/editProduct.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <h3 class="mb-5 text-center mt-3">Edit Product</h3>
+    </div>
+    <form class="row g-3">
+      <div class="col-md-6 offset-md-3">
+        <label for="name" class="form-label">Name</label>
+        <input type="text" class="form-control" id="name" v-model="name" />
+      </div>
+      <div class="col-md-6 offset-md-3">
+        <label for="color" class="form-label">Color</label>
+        <input type="text" class="form-control" id="color" v-model="color" />
+      </div>
+      <div class="col-md-6 offset-md-3">
+        <label for="price" class="form-label">Price</label>
+        <input type="number" class="form-control" id="price" v-model="price" />
+      </div>
+
+      <div class="col-md-6 offset-md-3">
+        <button
+          type="submit"
+          class="btn btn-warning d-block w-100 mt-2"
+          @click="submit()"
+        >
+          Edit Product
+        </button>
+        <router-link tag="a" class="d-block text-end" :to="{ name: 'product' }"
+          >back</router-link
+        >
+      </div>
+    </form>
+  </div>
+</template>
+
+
+<script>
+import Vue from "vue";
+import VueAlertify from "vue-alertify";
+
+Vue.use(VueAlertify);
+
+export default {
+  data: function () {
+    return {
+      id: this.$route.params.id,
+      name: "",
+      color: "",
+      price: "",
+      products: [],
+    };
+  },
+  created: function () {
+    if (localStorage.getItem("products")) {
+      this.products = JSON.parse(localStorage.getItem("products"));
+    }
+  },
+  created: function () {
+    this.products = JSON.parse(localStorage.getItem("products"));
+    
+    if (this.products[this.id]) {
+      this.name = this.products[this.id].name;
+      this.color = this.products[this.id].color;
+      this.price = this.products[this.id].price;
+    } else {
+      this.$router.push("/product");
+      this.$alertify.error('Product not found!');
+    }
+  },
+  methods: {
+    submit() {
+      if (this.name == "" || this.price == "" || this.color == "") {
+        alert("Please fill it out completely form!!");
+        return;
+      } else if (isNaN(this.price)) {
+        alert("price only accepts numeric data!!");
+        return;
+      }
+
+      this.products[this.id].name = this.name
+      this.products[this.id].color = this.color
+      this.products[this.id].price = this.price
+
+      localStorage.setItem("products", JSON.stringify(this.products));
+      this.name = "";
+      this.color = "";
+      this.price = "";
+      this.$router.push({ name: "product" });
+      this.$alertify.warning("Add task successfully");
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

src/routes.js

@@ -2,11 +2,22 @@ import Task from './components/Task.vue';
 import addTask from './components/addTask.vue';
 import editTask from './components/editTask.vue';
 import Error404 from './components/Error/404.vue';
+import Product from './components/product/index.vue';
+import addProduct from './components/product/addProduct.vue';
+import editProduct from './components/product/editProduct.vue';
 
 export const routes = [
+    // Task
     { path: '/', name: 'Task', component: Task },
     { path: '/task/add', name: 'addTask', component: addTask },
     { path: '/task/edit/:id', name: 'editTask', component: editTask },
+
+    // Product
+    { path: '/product', name: 'product', component: Product },
+    { path: '/product/add', name: 'addProduct', component: addProduct },
+    { path: '/product/edit/:id', name: 'editProduct', component: editProduct },
+
+    // Error
     { path: '/404', name: 'Error404', component: Error404 },
     { path: '*', redirect: '/404' },
 ];
\ No newline at end of file