Merge pull request #14 from Safelite/feature/dynamic-routing

Initial Dynamic Routing

package.json

@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --coverageReporters=html --ci --watchAll=false --reporters=jest-junit --reporters=default"
   },
   "dependencies": {
+    "axios": "^0.23.0",
     "bootstrap": "^5.1.1",
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",

src/Funnel1.vue

@@ -1,59 +1,43 @@
 <template>
-  <div class="container-fluid">
+<router-view></router-view>
+<div class="container-fluid">
     <div class="row">
-      <div class="col my-3 d-flex justify-content-center">
+        <div class="col my-3 d-flex justify-content-center">
-        <vehicleImage/>
+            <vehicleImage />
-      </div>
+        </div>
     </div>
     <div class="row">
-      <div class="col">
+        <div class="col">
-        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
-        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-      </div>
+        </div>
     </div>
     <div class="row">
-      <div class="col">
+        <div class="col">
-        <buttonFunnel/>
+            <buttonFunnel />
-        <confetti/>
+            <confetti />
-      </div>
+        </div>
     </div>
     <div class="row mt-5">
-      <imageButton
+        <imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
-        btnText="windshield-damage.svg"
+        <imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
-        altText="Windshield"
+        <imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
-        damageTitle="Windshield"
-        ariaLabel="Windshield"
-      />
-      <imageButton
-        btnText="side-window-damage.svg"
-        altText="Side Window"
-        damageTitle="Side door"
-        ariaLabel="Side door"
-      />
-      <imageButton
-        btnText="back-glass-damage.svg"
-        altText="Back Glass"
-        damageTitle="Back glass"
-        ariaLabel="Back glass"
-      />
     </div>
-  </div>
+</div>
 </template>
 
 <script>
-  import buttonFunnel from './components/buttons/buttonFunnel';
+import buttonFunnel from './components/buttons/buttonFunnel';
-  import vehicleImage from './components/vehicleImage';
+import vehicleImage from './components/vehicleImage';
-  import imageButton from './components/imageButton';
+import imageButton from './components/imageButton';
-  import confetti from './components/confetti';
+import confetti from './components/confetti';
-
+export default {
-
-  export default {
     name: 'App',
     components: {
-      buttonFunnel,
+        buttonFunnel,
-      vehicleImage,
+        vehicleImage,
-      imageButton,
+        imageButton,
-      confetti
+        confetti
     }
-  }
+}
 </script>

src/layouts/Home.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="home">
+        <h1>Home</h1>
+        <router-link to="/select-car">SelectCar</router-link>
+    </div>
+</template>

src/layouts/NotFound.vue

@@ -0,0 +1,6 @@
+<template>
+    <div> 
+        <p> Not found </p>
+
+    </div>
+</template>

src/layouts/SelectCar.vue

@@ -0,0 +1,141 @@
+<template>
+<router-link to="/Home">Home</router-link>
+    <div class="select-car sticky-lg-top py-4">
+        <div class="select-car-form overflow-hidden p-3 rounded">
+            <div class="car_info text-center">
+                <div class="car-image mb-3">
+                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
+                </div>
+                <div class="current_car_info mb-4">
+                    <transition name="slide-fade">
+                        <div class="current_car_info-text" v-if="translate === 0">
+                            <p class="text-center text-secondary fs-5">Select a year to get started</p>
+                        </div>
+                    </transition>
+                    <transition name="slide-fade">
+                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
+                            <p class="text-center text-secondary fs-5">{{ this.year }}</p>
+                        </div>
+                    </transition>
+                    <transition name="slide-fade">
+                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
+                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
+                        </div>
+                    </transition>
+                    <transition name="slide-fade">
+                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
+                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
+                        </div>
+                    </transition>
+                </div>
+                <div class="needed_car_info d-flex overflow-hidden">
+                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
+                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
+                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
+                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
+                </div>
+            </div>
+            <form class="list-view d-flex ">
+                <div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="year in years" :key="year" class="mb-2">
+                        <Button
+                            :buttonText="year"
+                            v-on:click="selectAttribute(year, 'year')"
+                            buttonType="btn-funnel"
+                         />
+                    </div>
+                </div>
+                <div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="make in makes" :key="make" class="mb-2">
+                        <Button
+                            :buttonText="make"
+                            v-on:click="selectAttribute(make, 'make')"
+                            buttonType="btn-funnel"
+                         />
+                    </div>
+                </div>
+                <div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="model in models" :key="model" class="mb-2">
+                        <Button
+                            :buttonText="model"
+                            v-on:click="selectAttribute(model, 'model')"
+                            buttonType="btn-funnel"
+                         />
+                    </div>
+                </div>
+                <div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="style in styles" :key="style" class="mb-2">
+                        <Button
+                            :buttonText="style"
+                            buttonType="btn-funnel"
+                         />
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+import Button from '@/components/buttons/buttonFunnel.vue';
+
+export default {
+  name: 'SelectCar',
+  data() {
+      return {
+          years: [],
+          makes: [],
+          models: [],
+          styles: [],
+          translate: 0,
+          carViewTranslate: 'translateX(0%)',
+          year: '',
+          make: '',
+          model: ''
+      }
+  },
+  mounted() {
+      axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
+          this.years = response.data.Result;
+          console.log(this.years);
+      });
+  },
+  methods: {
+      translateView(forward=true) {
+          this.translate = forward ? this.translate - 100 : this.translate + 100;
+          this.carViewTranslate = `translateX(${this.translate}%)`;
+      },
+      selectAttribute(attribute, attributeType){
+          let link;
+          switch (attributeType) {
+              case 'year':
+                  link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
+                  this.year = attribute;
+                  axios.get(link).then((response) => {
+                     this.makes = response.data.Result;
+                  });
+                  break;
+              case 'make':
+                  link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
+                  this.make = attribute;
+                  axios.get(link).then((response) => {
+                     this.models = response.data.Result;
+                  });
+                  break;
+              case 'model':
+                  link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
+                  this.model = attribute;
+                  axios.get(link).then((response) => {
+                     this.styles = response.data.Result;
+                  });
+                  break;
+          }
+          this.translateView();
+      }
+  }, 
+  components: {
+      Button
+  }
+}
+</script>

src/layouts/SelectYear.vue

@@ -0,0 +1,11 @@
+<template>
+<router-link to="/select-car">select-car</router-link>
+</template>
+<script>
+export default {
+  name: 'SelectCar',
+  data() {
+
+  }
+}
+</script>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import Funnel1 from "./Funnel1.vue";
+import router from '@/router';
 
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
@@ -7,4 +8,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
 //Get Bootstrap and Custom Styles
 import "./assets/scss/custom.scss";
 
-createApp(Funnel1).mount("#Funnel1");
+createApp(Funnel1).use(router).mount("#Funnel1");

src/router/index.js

@@ -0,0 +1,54 @@
+import { createWebHistory, createRouter } from "vue-router";
+import { getRouteData } from "@/utilities/route-compile.js";
+import NotFound from "@/layouts/NotFound.vue";
+import Home from "@/layouts/Home.vue";
+
+const routes = [
+  {
+    path: "/not-found",
+    name: "NotFound",
+    component: NotFound,
+  },
+  {
+    path: "/",
+    Name: "Home",
+    component: Home
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach(async (to, from, next) => {
+  await GoToDynamicRoute(to, next);
+});
+
+async function GoToDynamicRoute(to, next) {
+
+  let doesRouteResolve = router.resolve(to.path).matched.length > 0;
+
+  console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
+
+  if (!doesRouteResolve) {
+
+    let routeData = await getRouteData(to.path).catch((exp) => {
+      console.log(exp);
+      next({ name: "NotFound" });
+    });
+
+    // Add our dynamic route.
+    router.addRoute({
+      path: routeData[0].path,
+      name: routeData[0].name,
+      component: routeData[0].component,
+    });
+
+    next(to.fullPath);
+  } else {
+    next();
+  }
+}
+
+export default router;

src/utilities/component-loader.js

@@ -0,0 +1,3 @@
+export function lazyLoadComponent(componentName) {
+    return () => import(`@/layouts/${componentName}.vue`)
+}

src/utilities/route-compile.js

@@ -0,0 +1,29 @@
+import axios from "axios";
+import { lazyLoadComponent } from "@/utilities/component-loader.js";
+
+export function getRouteData(relativeUrl) {
+  return axios
+    .get("https://mockey.qa.sagaws.net/service/content/sitemap" + relativeUrl)
+    .then((response) => {
+      // This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
+      if (response.data.Result === undefined) {
+        return Promise.reject("Could not find any details about given route.");
+      }
+
+      // Get our route data
+      let json = JSON.parse(response.data.Result);
+      let routeData = [];
+
+      // Push the item onto the array
+      Object.keys(json).forEach((key) => {
+        routeData.push({
+          path: `${json[key].RelativeUrl}`,
+          name: `${key}`,
+          component: lazyLoadComponent(json[key].LayoutName),
+        });
+      });
+
+      
+      return Promise.resolve(routeData);
+    });
+}