List scroll and function structure updates

src/layouts/selectMake/selectMake.vue

@@ -1,15 +1,23 @@
 <template>
-<div>
-    <baseTemplate :currentCarInfo="year" neededCarInfo="What make is your vehicle?" :backFunction="goBack">
-        <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
-    </baseTemplate>
-</div>
+  <div class="select-car overflow-hidden">
+    <div class="select-car-form rounded text-center">
+      <Header
+        :text="year"
+      />
+      <radioQuestion
+        questionText="What is the make of your vehicle?"
+        :answers="makes"
+        :chooseAnswer="selectMake"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
-import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
-import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import globalMethods from "@/global-methods";
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import Header from "@/uxComponents/header/header";
+import store from "@/store";
+import router from "@/router";
 import {
     mapState
 } from "vuex";
@@ -21,9 +29,11 @@ export default {
     },
     methods: {
         selectMake(make) {
-            const listButtons = document.querySelectorAll('.list-button');
-            globalMethods.disableItems(listButtons);
-            this.dispatchNonBlockingStoreAction("selectMake", { make: make })
+            this.dispatchNonBlockingStoreAction("selectMake", { make: make }).then( (response) => {
+        const models = response;
+        store.commit('updateMake', {make, models});
+        router.push(`/select-model?year=${store.year}&make=${make}`);
+      });
         },
         goBack() {
             this.$store.state.slideTransition = "slide_reverse";
@@ -31,8 +41,8 @@ export default {
         },
     },
     components: {
-        baseTemplate,
-        carAttributes,
+        radioQuestion,
+        Header,
     },
 };
 </script>

src/layouts/selectModel/selectModel.vue

@@ -1,19 +1,23 @@
 <template>
-  <div>
-    <baseTemplate
-      :currentCarInfo="year + ' ' + make"
-      :neededCarInfo="'What is the model of your ' + make + '?'"
-      :backFunction="goBack"
-    >
-      <carAttributes :attritbutes="models" :selectAttribute="selectModel" />
-    </baseTemplate>
+  <div class="select-car overflow-hidden">
+    <div class="select-car-form rounded text-center">
+      <Header
+        :text="year + ' ' + make"
+      />
+      <radioQuestion
+        :questionText="'What is the model of your ' + make + '?'"
+        :answers="models"
+        :chooseAnswer="selectModel"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
-import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import globalMethods from "@/global-methods";
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import Header from "@/uxComponents/header/header";
+import store from "@/store";
+import router from "@/router";
 import { mapState } from "vuex";
 
 export default {
@@ -23,18 +27,20 @@ export default {
   },
   methods: {
     selectModel(model) {
-      const listButtons = document.querySelectorAll('.list-button');
-      globalMethods.disableItems(listButtons);
-      this.dispatchNonBlockingStoreAction("selectModel", { model: model })
+      this.dispatchNonBlockingStoreAction("selectModel", { model: model }).then( (response) => {
+          const styles = response;
+          store.commit("updateModel", { model, styles });
+          router.push(`/select-style?year=${store.year}&make=${store.make}&model=${model}`);
+        });
     },
     goBack() {
       this.$store.state.slideTransition = "slide_reverse";
-      this.$router.push(`/select-make?year=${this.$store.state.year}`);
+      this.$router.push(`/select-make?year=${store.year}`);
     },
   },
   components: {
-    baseTemplate,
-    carAttributes,
+    radioQuestion,
+    Header,
   },
 };
 </script>

src/layouts/selectStyle/selectStyle.vue

@@ -1,19 +1,23 @@
 <template>
-  <div>
-    <baseTemplate
-      :currentCarInfo="year + ' ' + make + ' ' + model"
-      :neededCarInfo="'What style is your ' + model + '?'"
-      :backFunction="goBack"
-    >
-      <carAttributes :attritbutes="styles" :selectAttribute="selectStyle" />
-    </baseTemplate>
+  <div class="select-car overflow-hidden">
+    <div class="select-car-form rounded text-center">
+      <Header
+        :text="year + ' ' + make + ' ' + model"
+      />
+      <radioQuestion
+        :questionText="'What style is your ' + model + '?'"
+        :answers="styles"
+        :chooseAnswer="selectStyle"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
-import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import globalMethods from "@/global-methods";
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import Header from "@/uxComponents/header/header";
+import store from "@/store";
+import router from "@/router";
 import { mapState } from "vuex";
 
 export default {
@@ -23,20 +27,21 @@ export default {
   },
   methods: {
     selectStyle(style) {
-      const listButtons = document.querySelectorAll('.list-button');
-      globalMethods.disableItems(listButtons);
-      this.dispatchNonBlockingStoreAction("selectStyle", { style: style })
+        store.commit("updateStyle", { style });
+        router.push(
+          `/select-damage?year=${store.year}&make=${store.make}&model=${store.model}&style=${style}`
+        );
     },
     goBack() {
       this.$store.state.slideTransition = "slide_reverse";
       this.$router.push(
-        `/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`
+        `/select-model?year=${store.year}&make=${store.make}`
       );
     },
   },
   components: {
-    baseTemplate,
-    carAttributes,
+    radioQuestion,
+    Header,
   },
 };
 </script>

src/layouts/selectYear/selectYear.spec.js

@@ -1 +1,9 @@
-test.todo('some test to be written in the future');
+import { shallowMount } from '@vue/test-utils';
+import SelectYear from './SelectYear';
+
+test('SelectYear', () => {
+    // render the component
+    const wrapper = shallowMount(SelectYear, {
+        
+    });
+});

src/layouts/selectYear/selectYear.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="select-car overflow-hidden">
+  <div class="select-car">
     <div class="select-car-form rounded text-center">
+      
       <Header
         :text="pageHeader.Text"
       />
@@ -21,9 +22,10 @@ import globalMethods from "@/global-methods";
 import axios from "axios";
 import store from "@/store";
 import router from "@/router";
+import { mapState } from "vuex";
 
 export default {
-  name: "SelectCar",
+  name: "SelectYear",
   data() {
     return {
       years: [],
@@ -31,7 +33,13 @@ export default {
       radioQuestion: {}
     };
   },
+  computed: {
+    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
+  },
   mounted() {
+    const headerHeight = document.querySelector('.select-car-form').offsetHeight + 75;
+    document.querySelector('.car_list').style.padding = `0 0 ${headerHeight}px 0`;
+
     globalMethods.callHttpClient({
           method: endpoints.GetYears.method,
           endpoint: endpoints.GetYears.url,
@@ -57,7 +65,7 @@ export default {
               }
           }
       })
-  });
+    });
   },
   methods: {
     selectYear(year) {

src/store/index.js

@@ -64,18 +64,13 @@ export default createStore({
         });
       },
       selectMake({ commit, state }, { make }) {
-        globalMethods.callHttpClient({
+        return globalMethods.callHttpClient({
           method: endpoints.GetModels.method,
           endpoint: endpoints.GetModels.url,
           payload:{
             "Year": state.year,
             "Make": make
           }
-        })
-        .then( (response) => {
-          const models = response;
-          commit("updateMake", { make, models });
-          router.push(`/select-model?year=${state.year}&make=${make}`);
         });
       },
       selectModel({ commit, state }, { model }) {
@@ -87,19 +82,8 @@ export default createStore({
             "Make": state.make,
             "Model": model
           }
-        })
-        .then( (response) => {
-          const styles = response;
-          commit("updateModel", { model, styles });
-          router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
         });
       },
-      selectStyle({ commit, state }, { style }) {
-        commit("updateStyle", { style });
-        router.push(
-          `/select-damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
-        );
-      },
       getRouteInfo(context, { relativeUrl }) {
         return globalMethods.callHttpClient({
           method: endpoints.GetRouteInfoEndpoint.method,

src/styles/commonComponentStyles/ymmsCommonStyles.scss

@@ -1,10 +1,10 @@
 // SelectCar styles
 .select-car {
     height: calc(100vh - 1rem);
-  
+
     .car_list {
       position: absolute;
-      height: calc(100% - 1rem);
+      height: 100%;
       width: calc(100% - 1rem);
       overflow-y: scroll;
       overflow-x: hidden;