Create API to fetch career page images and show them on career page

nuxt-frontend/components/jobs/LifeAtCanopas.vue

@@ -65,116 +65,36 @@
 import AspectRatio from "@/components/utils/AspectRatio.vue";
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
-
-import life1_400w from "@/assets/images/life/jobs_canopas_life_1-400w.webp";
-import life1_800w from "@/assets/images/life/jobs_canopas_life_1-800w.webp";
-import life1_1600w from "@/assets/images/life/jobs_canopas_life_1-1600w.webp";
-
-import life2_400w from "@/assets/images/life/jobs_canopas_life_2-400w.webp";
-import life2_800w from "@/assets/images/life/jobs_canopas_life_2-800w.webp";
-import life2_1600w from "@/assets/images/life/jobs_canopas_life_2-1600w.webp";
-
-import life3_400w from "@/assets/images/life/jobs_canopas_life_3-400w.webp";
-import life3_800w from "@/assets/images/life/jobs_canopas_life_3-800w.webp";
-import life3_1600w from "@/assets/images/life/jobs_canopas_life_3-1600w.webp";
-
-import life4_400w from "@/assets/images/life/jobs_canopas_life_4-400w.webp";
-import life4_800w from "@/assets/images/life/jobs_canopas_life_4-800w.webp";
-import life4_1600w from "@/assets/images/life/jobs_canopas_life_4-1600w.webp";
-
-import life5_400w from "@/assets/images/life/jobs_canopas_life_5-400w.webp";
-import life5_800w from "@/assets/images/life/jobs_canopas_life_5-800w.webp";
-import life5_1600w from "@/assets/images/life/jobs_canopas_life_5-1600w.webp";
-
-import life6_400w from "@/assets/images/life/jobs_canopas_life_6-400w.webp";
-import life6_800w from "@/assets/images/life/jobs_canopas_life_6-800w.webp";
-import life6_1600w from "@/assets/images/life/jobs_canopas_life_6-1600w.webp";
-
-import life7_400w from "@/assets/images/life/jobs_canopas_life_7-400w.webp";
-import life7_800w from "@/assets/images/life/jobs_canopas_life_7-800w.webp";
-import life7_1600w from "@/assets/images/life/jobs_canopas_life_7-1600w.webp";
-
-import life8_400w from "@/assets/images/life/jobs_canopas_life_8-400w.webp";
-import life8_800w from "@/assets/images/life/jobs_canopas_life_8-800w.webp";
-import life8_1600w from "@/assets/images/life/jobs_canopas_life_8-1600w.webp";
-
-import life9_400w from "@/assets/images/life/jobs_canopas_life_9-400w.webp";
-import life9_800w from "@/assets/images/life/jobs_canopas_life_9-800w.webp";
-import life9_1600w from "@/assets/images/life/jobs_canopas_life_9-1600w.webp";
-
-import life10_400w from "@/assets/images/life/jobs_canopas_life_10-400w.webp";
-import life10_800w from "@/assets/images/life/jobs_canopas_life_10-800w.webp";
-import life10_1600w from "@/assets/images/life/jobs_canopas_life_10-1600w.webp";
-
-import life11_400w from "@/assets/images/life/jobs_canopas_life_11-400w.webp";
-import life11_800w from "@/assets/images/life/jobs_canopas_life_11-800w.webp";
-import life11_1600w from "@/assets/images/life/jobs_canopas_life_11-1600w.webp";
-
-import life12_400w from "@/assets/images/life/jobs_canopas_life_12-400w.webp";
-import life12_800w from "@/assets/images/life/jobs_canopas_life_12-800w.webp";
-import life12_1600w from "@/assets/images/life/jobs_canopas_life_12-1600w.webp";
+import axios from "axios";
+import config from "@/config.js";
+import { getDiffrentWidthImages } from "@/utils.js";
 
 export default {
   data() {
     return {
+      getDiffrentWidthImages,
       modules: [Pagination, Autoplay],
-      slides: [
-        {
-          id: 2,
-          image: [life2_400w, life2_800w, life2_1600w],
-        },
-        {
-          id: 12,
-          image: [life12_400w, life12_800w, life12_1600w],
-        },
-        {
-          id: 7,
-          image: [life7_400w, life7_800w, life7_1600w],
-        },
-        {
-          id: 1,
-          image: [life1_400w, life1_800w, life1_1600w],
-        },
-        {
-          id: 4,
-          image: [life4_400w, life4_800w, life4_1600w],
-        },
-        {
-          id: 10,
-          image: [life10_400w, life10_800w, life10_1600w],
-        },
-        {
-          id: 3,
-          image: [life3_400w, life3_800w, life3_1600w],
-        },
-        {
-          id: 9,
-          image: [life9_400w, life9_800w, life9_1600w],
-        },
-        {
-          id: 6,
-          image: [life6_400w, life6_800w, life6_1600w],
-        },
-        {
-          id: 8,
-          image: [life8_400w, life8_800w, life8_1600w],
-        },
-        {
-          id: 5,
-          image: [life5_400w, life5_800w, life5_1600w],
-        },
-        {
-          id: 11,
-          image: [life11_400w, life11_800w, life11_1600w],
-        },
-      ],
-
+      slides: [],
       pagination: {
         el: ".swiper-pagination",
         clickable: true,
       },
     };
   },
+  methods: {
+    async fetchDataFromAPI() {
+      try {
+        const response = await axios.get(config.API_BASE + "/api/lifeimages");
+        this.slides = getDiffrentWidthImages(response);
+      } catch (error) {
+        console.error("Error fetching data from the API", error);
+      }
+    },
+  },
+  created() {
+    this.fetchDataFromAPI();
+  },
+
   components: {
     Swiper,
     SwiperSlide,

nuxt-frontend/components/jobs/PerksAndBenefits.vue

@@ -75,23 +75,9 @@
 
 <script type="module">
 import AspectRatio from "@/components/utils/AspectRatio.vue";
-
-import perks1_400w from "@/assets/images/perks/jobs_canopas_perks_1_400w.webp";
-import perks1_800w from "@/assets/images/perks/jobs_canopas_perks_1_800w.webp";
-import perks2_400w from "@/assets/images/perks/jobs_canopas_perks_2_400w.webp";
-import perks2_800w from "@/assets/images/perks/jobs_canopas_perks_2_800w.webp";
-import perks3_400w from "@/assets/images/perks/jobs_canopas_perks_3_400w.webp";
-import perks3_800w from "@/assets/images/perks/jobs_canopas_perks_3_800w.webp";
-import perks4_400w from "@/assets/images/perks/jobs_canopas_perks_4_400w.webp";
-import perks4_800w from "@/assets/images/perks/jobs_canopas_perks_4_800w.webp";
-import perks5_400w from "@/assets/images/perks/jobs_canopas_perks_5_400w.webp";
-import perks5_800w from "@/assets/images/perks/jobs_canopas_perks_5_800w.webp";
-import perks6_400w from "@/assets/images/perks/jobs_canopas_perks_6_400w.webp";
-import perks6_800w from "@/assets/images/perks/jobs_canopas_perks_6_800w.webp";
-import perks7_400w from "@/assets/images/perks/jobs_canopas_perks_7_400w.webp";
-import perks7_800w from "@/assets/images/perks/jobs_canopas_perks_7_800w.webp";
-import perks8_400w from "@/assets/images/perks/jobs_canopas_perks_8_400w.webp";
-import perks8_800w from "@/assets/images/perks/jobs_canopas_perks_8_800w.webp";
+import axios from "axios";
+import config from "@/config.js";
+import { getDiffrentWidthImages } from "@/utils.js";
 import learning from "@/assets/images/benefits/jobs_canopas_learning.svg";
 import health from "@/assets/images/benefits/jobs_canopas_health.svg";
 import clock from "@/assets/images/benefits/jobs_canopas_clock.svg";
@@ -109,7 +95,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks1_400w, perks1_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -126,7 +112,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks2_400w, perks2_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -144,7 +130,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks3_400w, perks3_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -162,7 +148,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks4_400w, perks4_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -180,7 +166,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks5_400w, perks5_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -198,7 +184,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks6_400w, perks6_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -216,7 +202,7 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks7_400w, perks7_800w],
+          image: ["", ""],
           description: "",
         },
         {
@@ -234,11 +220,12 @@ export default {
           title: "",
           icon: "",
           bgColor: "transparent",
-          image: [perks8_400w, perks8_800w],
+          image: ["", ""],
           description: "",
         },
       ],
       isMobile: false,
+      slides: [],
     };
   },
   components: {
@@ -256,6 +243,26 @@ export default {
         this.$emit("scroll-to-career");
       }
     },
+    async fetchDataFromAPI() {
+      try {
+        const response = await axios.get(config.API_BASE + "/api/perksimages");
+        this.slides = getDiffrentWidthImages(response);
+        this.perks.forEach((perk, index) => {
+          if (index % 2 === 0 && index / 2 < this.slides.length) {
+            const slideIndex = Math.floor(index / 2);
+            perk.image = [
+              this.slides[slideIndex].image[0],
+              this.slides[slideIndex].image[1],
+            ];
+          }
+        });
+      } catch (error) {
+        console.error("Error fetching data from the API", error);
+      }
+    },
+  },
+  created() {
+    this.fetchDataFromAPI();
   },
 };
 </script>

nuxt-frontend/utils.js

@@ -34,7 +34,7 @@ function setGithubStars(contributions, githubRepos) {
       .filter(
         (repo) =>
           repo.name ==
-          contribution.link.slice(contribution.link.lastIndexOf("/") + 1),
+          contribution.link.slice(contribution.link.lastIndexOf("/") + 1)
       )
       .map((repo) => repo.stargazers_count.toString())[0];
   });
@@ -77,7 +77,7 @@ function getJobDates() {
     currentDay <= maxDays
       ? startDateOfMonth
       : new Date(
-          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays),
+          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays)
         );
 
   const datePosted = jobPosted.toISOString().split("T")[0];
@@ -91,11 +91,26 @@ function getJobDates() {
   return { datePosted, validThrough };
 }
 
+function getDiffrentWidthImages(response) {
+  let imageUrls = response.data;
+  let slides = [];
+  slides = imageUrls.map((set) => ({
+    image: parseImageUrls(set.imageUrls),
+  }));
+  return slides;
+}
+
+function parseImageUrls(imageUrls) {
+  return imageUrls.split(",").map((url) => url.trim());
+}
+
 export {
   elementInViewPort,
   handleAnimationOnScroll,
   setGithubStars,
   openBlog,
   unescapeHTML,
   getJobDates,
+  getDiffrentWidthImages,
+  parseImageUrls,
 };