From 74ea9ad5f1475d0337399b6d304fb4c46f1a7ed2 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 6 Oct 2021 09:54:17 -0400
Subject: [PATCH] updates

---
 src/App.vue                                |  34 +------
 src/assets/scss/_GlobalStyles.scss         |   4 +
 src/assets/scss/components/_SelectCar.scss |  47 +++++----
 src/components/SelectCar.vue               | 108 +++++++++++++++------
 4 files changed, 114 insertions(+), 79 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1a6b3d9c6..8c0a05dcd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,7 @@
 <template>
   <div class="container-lg">
     <div class="row">
-      <div class="col-lg-8">
-        <HeaderNav/>
-        <div class="select-car-button d-flex justify-content-center my-4">
-          <button v-on:click="slideSelectCar">Get quote + schedule</button>
-        </div>
-        <div class="row">
-          <div class="col">
-            <HelloWorld msg="VueJS with Bootstrap"/>
-          </div>
-        </div>
-        <Colors/>
-        <Colors/>
-        <Colors/>
-        <Colors/>
-        <Colors/>
-        <Colors/>
-        <Colors/>
-      </div>
-      <div class="col" id="car-select-col">
+      <div class="col">
         <SelectCar/>
       </div>
     </div>
@@ -29,26 +11,12 @@
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue';
-import HeaderNav from './components/HeaderNav';
-import Colors from './components/Colors';
 import SelectCar from './components/SelectCar';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld,
-    HeaderNav,
-    Colors,
     SelectCar
-  },
-  methods: {
-    slideSelectCar(){
-      const selectCar = document.getElementById('car-select-col');
-      selectCar.style.opacity = '1';
-      selectCar.style.transform = 'translateY(0)';
-      document.body.classList.add('no-scroll_mobile');
-    }
   }
 }
 </script>
diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss
index 198686215..57d72c537 100644
--- a/src/assets/scss/_GlobalStyles.scss
+++ b/src/assets/scss/_GlobalStyles.scss
@@ -10,3 +10,7 @@ body {
     }
   }
 }
+
+.pointer {
+  cursor: pointer;
+}
diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss
index 9a8007ef1..629b8fba3 100644
--- a/src/assets/scss/components/_SelectCar.scss
+++ b/src/assets/scss/components/_SelectCar.scss
@@ -4,13 +4,11 @@
     .select-car-form {
         background: $white;
         height: 100%;
-        overflow: hidden;
 
         form {
             height: calc(100% - 80px);
             overflow-y: scroll;
             overflow-x: hidden;
-            display: flex;
 
             .form-control {
                 border: 2px solid $light;
@@ -18,26 +16,23 @@
                 font-weight: bold;
                 cursor: pointer;
             }
+        }
 
-            &.show_years {
-                .car_list {
-                    transform: translateX(0);
-                }
-            }
+        .car_list, .current_car_info-text, .needed_car_info-text {
+            flex-shrink: 0;
+            width: 100%;
+            position: relative;
+            transition: transform .3s;
+        }
+    }
 
-            &.show_brands {
-                .car_list {
-                    transform: translateX(-100%);
-                }
-            }
+    .current_car_info {
+        position: relative;
+        min-height: 2.5rem;
 
-            .car_list {
-                flex-shrink: 0;
-                width: 100%;
-                position: relative;
-                transition: transform .3s;
-            }
-        } 
+        .current_car_info-text {
+            position: absolute;
+        }
     }
 }
 
@@ -67,3 +62,17 @@
         opacity: 1 !important; 
     } 
 }
+
+.slide-fade-enter-active {
+    transition: all .3s ease-out;
+  }
+  
+.slide-fade-leave-active {
+transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+transform: translateX(20px);
+opacity: 0;
+}
diff --git a/src/components/SelectCar.vue b/src/components/SelectCar.vue
index b83c50ee0..19a4d36c3 100644
--- a/src/components/SelectCar.vue
+++ b/src/components/SelectCar.vue
@@ -1,20 +1,55 @@
 <template>
     <div class="select-car sticky-lg-top py-4">
-        <div class="select-car-form p-3 rounded">
-            <div class="close_select-car d-flex justify-content-end my-3">
-                <button type="button" class="btn-close" aria-label="Close" v-on:click="closeSelectCar"></button>
+        <div class="select-car-form overflow-hidden p-3 rounded">
+            <div class="car_info text-center">
+                <div class="current_car_info">
+                    <transition name="slide-fade">
+                        <div class="current_car_info-text" v-if="translate === 0">
+                            <h3>Select a year to get started</h3>
+                        </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">
+                            <h3>{{ this.year }}</h3>
+                        </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">
+                            <h3>{{ this.year }} {{ this.brand }}</h3>
+                        </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">
+                            <h3>{{ this.year }} {{ this.brand }} {{ this.model }}</h3>
+                        </div>
+                    </transition>
+                </div>
+                <div class="needed_car_info d-flex overflow-hidden">
+                    <h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</h5>
+                    <h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</h5>
+                    <h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.brand }}?</h5>
+                    <h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</h5>
+                </div>
             </div>
-            <h3 class="d-flex justify-content-center">Select a year to get started</h3>
-            <h5 class="d-flex justify-content-center">What year is your vehicle?</h5>
-            <form :class="carView" class="list-view">
-                <div class="car_list car_years">
-                    <div v-for="car in cars" :key="car.year" class="mb-3">
-                        <input type="text" v-on:click="selectBrand(car.brands)" class="form-control" id="year" :value="car.year" readonly >
+            <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-3">
+                        <input type="text" v-on:click="selectYear(year)" class="form-control" id="year" :value="year" readonly >
                     </div>
                 </div>
-                <div class="car_list car_brands">
-                    <div v-for="brand in brands" :key="brand.brand" class="mb-3">
-                        <input type="text" class="form-control" id="brand" :value="brand.brand" readonly >
+                <div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="brand in brands" :key="brand" class="mb-3">
+                        <input type="text" v-on:click="selectBrand(brand)" class="form-control" id="brand" :value="brand" readonly >
+                    </div>
+                </div>
+                <div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="model in models" :key="model" class="mb-3">
+                        <input type="text" v-on:click="selectModel(model)" class="form-control" id="model" :value="model" readonly >
+                    </div>
+                </div>
+                <div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
+                    <div v-for="style in styles" :key="style" class="mb-3">
+                        <input type="text" class="form-control" id="style" :value="style" readonly >
                     </div>
                 </div>
             </form>
@@ -29,29 +64,48 @@ export default {
   name: 'SelectCar',
   data() {
       return {
-          cars: [],
+          years: [],
           brands: [],
-          carView: 'show_years'
+          models: [],
+          styles: [],
+          translate: 0,
+          carViewTranslate: 'translateX(0%)',
+          year: '',
+          brand: '',
+          model: ''
       }
   },
   mounted() {
-      axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
-          this.cars = response.data.cars;
-          console.log(this.cars);
+      axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
+          this.years = response.data.Result;
+          console.log(this.years);
       });
   },
   methods: {
-      closeSelectCar() {
-          const selectCar = document.getElementById('car-select-col');
-          selectCar.style.transform = 'translateY(100%)';
-          document.body.classList.remove('no-scroll_mobile');
-          setTimeout(function(){
-            selectCar.style.opacity = '0';
-          }, 310);
+      translateView(forward=true) {
+          this.translate = forward ? this.translate - 100 : this.translate + 100;
+          this.carViewTranslate = `translateX(${this.translate}%)`;
       },
-      selectBrand(brands) {
-          this.brands = brands;
-          this.carView = 'show_brands'
+      selectYear(year) {
+          this.year = year;
+          axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`).then((response) => {
+            this.brands = response.data.Result;
+          });
+          this.translateView();
+      },
+      selectBrand(brand) {
+         this.brand = brand;
+         axios.get(`https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${brand}`).then((response) => {
+            this.models = response.data.Result;
+          });
+         this.translateView();
+      },
+      selectModel(model) {
+         this.model = model;
+         axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.brand}/model=${model}`).then((response) => {
+            this.styles = response.data.Result;
+          });
+         this.translateView();
       }
   }
 }