Vuex setup and page components

package-lock.json

@@ -13,7 +13,8 @@
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
         "vue-router": "^4.0.11",
-        "vuex": "^4.0.2"
+        "vuex": "^4.0.2",
+        "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -12479,6 +12480,11 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -14567,6 +14573,26 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
+    },
+    "node_modules/vuex-persistedstate/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -25616,6 +25642,11 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -27336,6 +27367,22 @@
         "@vue/devtools-api": "^6.0.0-beta.11"
       }
     },
+    "vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -13,7 +13,8 @@
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/assets/scss/components/_SelectCar.scss

@@ -29,15 +29,21 @@
     }
 }
 
-.slide-fade-enter-active {
+.slide-enter-from {
-    transition: all .3s ease-out;
+    opacity: 0;
-  }
+    transform: translateX(30vw);
-  
+}
-.slide-fade-leave-active {
+.slide-enter-active, .slide-leave-active {
-    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+    transition: all .3s;
+}
+.slide-leave-to {
+    opacity: 0;
+    transform: translateX(-30vw);
 }
 
-.slide-fade-enter-from, .slide-fade-leave-to {
+.fade-enter-from, .fade-leave-to {
-    transform: translateX(20px);
     opacity: 0;
 }
+.fade-enter-active, .fade-leave-active {
+    transition: all .5s ease;
+}

src/layouts/ContentSite/Home.vue

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

src/layouts/SelectCar/SelectCarTemplate.vue

@@ -0,0 +1,49 @@
+<template>
+    <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 appear name="fade">
+                        <div class="current_car_info-text" v-on:click="goBack()">
+                            <p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
+                        </div>
+                    </transition>
+                </div>
+                <transition appear name="slide">
+                    <div class="needed_car_info d-flex overflow-hidden">
+                        <p class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</p>
+                    </div>
+                </transition>
+            </div>
+            <transition appear name="slide">
+                <form class="list-view d-flex ">
+                    <div class="car_list car_models">
+                        <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
+                            <Button
+                                :buttonText="attritbute"
+                                v-on:click="backFunction(attritbute)"
+                                buttonType="btn-funnel"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SelectCarTemplate',
+  props: {
+      currentCarInfo: String,
+      neededCarInfo: String,
+      attritbutes: Array,
+      backFunction: Function
+  }
+}
+</script>

src/layouts/SelectCar/SelectMake.vue

@@ -0,0 +1,59 @@
+<template>
+    <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 appear name="fade">
+                        <div class="current_car_info-text" v-on:click="goBack()">
+                            <p class="text-center text-secondary fs-5">{{ year }}</p>
+                        </div>
+                    </transition>
+                </div>
+                <transition appear name="slide">
+                    <div class="needed_car_info d-flex overflow-hidden">
+                        <p class="text-center fs-6 fw-bold needed_car_info-text">What make is your vehicle?</p>
+                    </div>
+                </transition>
+            </div>
+            <transition appear name="slide">
+                <form class="list-view d-flex ">
+                    <div class="car_list car_makes">
+                        <div v-for="make in makes" :key="make" class="mb-2">
+                            <Button
+                                :buttonText="make"
+                                v-on:click="selectMake(make)"
+                                buttonType="btn-funnel"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '@/sharedcomponents/Button';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'SelectCar',
+  computed: {
+      ...mapState(['year', 'makes'])
+  },
+  methods: {
+      selectMake(make){
+          this.$store.dispatch('selectMake', make);
+      },
+      goBack(){
+          this.$router.push('/select-year');
+      }
+  }, 
+  components: {
+      Button
+  }
+}
+</script>

src/layouts/SelectCar/SelectModel.vue

@@ -0,0 +1,59 @@
+<template>
+    <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 appear name="fade">
+                        <div class="current_car_info-text" v-on:click="goBack()">
+                            <p class="text-center text-secondary fs-5">{{ year }} {{ make }}</p>
+                        </div>
+                    </transition>
+                </div>
+                <transition appear name="slide">
+                    <div class="needed_car_info d-flex overflow-hidden">
+                        <p class="text-center fs-6 fw-bold needed_car_info-text">What is the model of your {{ make }}?</p>
+                    </div>
+                </transition>
+            </div>
+            <transition appear name="slide">
+                <form class="list-view d-flex ">
+                    <div class="car_list car_models">
+                        <div v-for="model in models" :key="model" class="mb-2">
+                            <Button
+                                :buttonText="model"
+                                v-on:click="selectModel(model)"
+                                buttonType="btn-funnel"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '@/sharedcomponents/Button';
+import { mapState } from 'vuex'
+
+export default {
+  name: 'SelectCar',
+  computed: {
+      ...mapState(['year', 'make', 'models'])
+  },
+  methods: {
+      selectModel(model){
+          this.$store.dispatch('selectModel', model);
+      },
+      goBack(){
+          this.$router.push(`/select-make#year=${this.$store.state.year}`);
+      }
+  }, 
+  components: {
+      Button
+  }
+}
+</script>

src/layouts/SelectCar/SelectStyle.vue

@@ -0,0 +1,55 @@
+<template>
+    <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 appear name="fade">
+                        <div class="current_car_info-text" v-on:click="goBack()">
+                            <p class="text-center text-secondary fs-5">{{ year }} {{ make }} {{ model }}</p>
+                        </div>
+                    </transition>
+                </div>
+                <transition appear name="slide">
+                    <div class="needed_car_info d-flex overflow-hidden">
+                        <p class="text-center fs-6 fw-bold needed_car_info-text">What style is your {{ model }}?</p>
+                    </div>
+                </transition>
+            </div>
+            <transition appear name="slide">
+                <form class="list-view d-flex ">
+                    <div class="car_list car_models">
+                        <div v-for="style in styles" :key="style" class="mb-2">
+                            <Button
+                                :buttonText="style"
+                                buttonType="btn-funnel"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '@/sharedcomponents/Button';
+import { mapState } from 'vuex'
+
+export default {
+  name: 'SelectCar',
+  computed: {
+      ...mapState(['year', 'make', 'model', 'styles'])
+  },
+  methods: {
+      goBack(){
+          this.$router.push(`/select-model#year=${this.$store.state.year}/make=${this.$store.state.make}`);
+      }
+  }, 
+  components: {
+      Button
+  }
+}
+</script>

src/layouts/SelectCar/SelectYear.vue

@@ -6,131 +6,54 @@
                     <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">
+                    <transition appear name="fade">
-                        <div class="current_car_info-text" v-if="translate === 0">
+                        <div class="current_car_info-text">
                             <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>
+                <transition appear name="slide">
+                    <div class="needed_car_info d-flex overflow-hidden">
+                        <p class="text-center fs-6 fw-bold needed_car_info-text">What year is your vehicle?</p>
+                    </div>
+                </transition>
             </div>
-            <form class="list-view d-flex ">
+            <transition appear name="slide">
-                <div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
+                <form class="list-view d-flex ">
-                    <div v-for="year in years" :key="year" class="mb-2">
+                    <div class="car_list car_years">
-                        <Button
+                        <div v-for="year in years" :key="year" class="mb-2">
-                            :buttonText="year"
+                            <Button
-                            v-on:click="selectAttribute(year, 'year')"
+                                :buttonText="year"
-                            buttonType="btn-funnel"
+                                v-on:click="selectYear(year)"
-                         />
+                                buttonType="btn-funnel"
+                            />
+                        </div>
                     </div>
-                </div>
+                </form>
-                <div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
+            </transition>
-                    <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 '../../sharedcomponents/Button';
+import Button from '@/sharedcomponents/Button';
 
 export default {
   name: 'SelectCar',
   data() {
       return {
-          years: [],
+          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) {
+      selectYear(year){
-          this.translate = forward ? this.translate - 100 : this.translate + 100;
+          this.$store.dispatch('selectYear', year);
-          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: {

src/main.js

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

src/router/index.js

@@ -1,6 +1,10 @@
 import { createWebHistory, createRouter } from "vue-router";
 import Home from "@/layouts/ContentSite/Home.vue";
 import SelectCar from "@/layouts/SelectCar/SelectCar.vue";
+import SelectYear from "@/layouts/SelectCar/SelectYear.vue";
+import SelectMake from "@/layouts/SelectCar/SelectMake.vue";
+import SelectModel from "@/layouts/SelectCar/SelectModel.vue";
+import SelectStyle from "@/layouts/SelectCar/SelectStyle.vue";
 
 const routes = [
   {
@@ -13,6 +17,26 @@ const routes = [
     name: "SelectCar",
     component: SelectCar,
   },
+  {
+    path: "/select-year",
+    name: "SelectYear",
+    component: SelectYear,
+  },
+  {
+    path: "/select-make",
+    name: "SelectMake",
+    component: SelectMake,
+  },
+  {
+    path: "/select-model",
+    name: "SelectModel",
+    component: SelectModel,
+  },
+  {
+    path: "/select-style",
+    name: "SelectStyle",
+    component: SelectStyle,
+  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -0,0 +1,50 @@
+import { createStore } from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
+import axios from 'axios';
+import router from '@/router';
+
+export default createStore({
+    plugins: [createPersistedState({
+        storage: window.sessionStorage,
+    })],
+    state: {
+        makes: [],
+        models: [],
+        styles: [],
+        year: '',
+        make: '',
+        model: ''
+    },
+    mutations: {
+        updateYear(state, data){
+            state.year = data.year;
+            state.makes = data.makes.data.Result;
+        },
+        updateMake(state, data){
+            state.make = data.make;
+            state.models = data.models.data.Result;
+        },
+        updateModel(state, data){
+            state.model = data.model;
+            state.styles = data.styles.data.Result;
+        }
+    },
+    actions: {
+        async selectYear(context, year){
+            const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`);
+            context.commit('updateYear', {year, makes});
+            router.push(`/select-make#year=${year}`);
+        },
+        async selectMake({commit, state}, make){
+            const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`);
+            commit('updateMake', {make, models});
+            router.push(`/select-model#year=${state.year}/make=${make}`);
+        },
+        async selectModel({commit, state}, model){
+            const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
+            commit('updateModel', {model, styles});
+            router.push(`/select-style#year=${state.year}/make=${state.make}/model=${model}`);
+        }
+    }
+
+})