Toast Notification, Delete Job

package.json

@@ -15,7 +15,8 @@
     "primeicons": "^7.0.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
-    "vue-spinner": "^1.0.4"
+    "vue-spinner": "^1.0.4",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",

src/jobs.json

@@ -83,20 +83,6 @@
         "contactEmail": "contact@ipsumlorem.com",
         "contactPhone": "555-555-5555"
       }
-    },
-    {
-      "id": "33e5",
-      "title": "Abhay Tiwari",
-      "type": "Part-Time",
-      "location": "asdasd",
-      "description": "asdasd",
-      "salary": "$50K - $60K",
-      "company": {
-        "name": "asdasdasd",
-        "description": "adasd",
-        "contactEmail": "asdasd@gmail.com",
-        "contactPhone": "asdasd"
-      }
     }
   ]
 }

src/main.js

@@ -1,10 +1,12 @@
 import "./assets/main.css";
 import "primeicons/primeicons.css";
-
+import Toast from "vue-toastification";
+import "vue-toastification/dist/index.css";
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 
 const app = createApp(App);
 app.use(router);
+app.use(Toast);
 app.mount("#app");

src/views/AddJobView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import router from "@/router";
 import axios from "axios";
+import { useToast } from "vue-toastification";
 
 import { reactive } from "vue";
 const form = reactive({
@@ -17,6 +18,8 @@ const form = reactive({
   },
 });
 
+const toast = useToast();
+
 const handleSubmit = async () => {
   const newJob = {
     title: form.title,
@@ -33,11 +36,12 @@ const handleSubmit = async () => {
   };
   try {
     const response = await axios.post("/api/jobs", newJob);
-
+    toast.success("Job Added Successfully!");
     // @todo - show toast
     router.push(`/jobs/${response.data.id}`);
   } catch (error) {
     console.error("Something went wrong in form submission", error);
+    toast.error("Job was not added :(");
   }
 };
 </script>

src/views/JobView.vue

@@ -2,9 +2,13 @@
 import PulseLoader from "vue-spinner/src/PulseLoader.vue";
 import axios from "axios";
 import { reactive, onMounted } from "vue";
-import { useRoute, RouterLink } from "vue-router";
+import { useRoute, RouterLink, useRouter } from "vue-router";
 import BackButton from "@/components/BackButton.vue";
+import { useToast } from "vue-toastification";
+
 const route = useRoute();
+const router = useRouter();
+const toast = useToast();
 
 //this is getting id from jobs/:id check src/router/index.js
 const jobId = route.params.id;
@@ -22,6 +26,25 @@ onMounted(async () => {
     state.isLoading = false;
   }
 });
+
+const deleteJob = async () => {
+  try {
+    const confirm = window.confirm("Are you sure you want to delete this job?");
+    if (confirm) {
+      await axios.delete(`/api/jobs/${jobId}`);
+      toast.success("Job Deleted Successfully");
+      router.push("/jobs");
+    }
+  } catch (error) {
+    console.error(
+      "There is some error in deleting the job. JobID:",
+      jobId,
+      "\\",
+      error
+    );
+    toast.error("There is some error in deleting the job. JobID:", jobId);
+  }
+};
 </script>
 <template>
   <BackButton />
@@ -95,6 +118,7 @@ onMounted(async () => {
               >Edit Job</RouterLink
             >
             <button
+              @click="deleteJob"
               class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
             >
               Delete Job