Vuex setup and page components
This commit is contained in:
Max
parent
e67c64bb42
commit
ff5409dbf6
12 changed files with 388 additions and 114 deletions
49
package-lock.json
generated
49
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -29,15 +29,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30vw);
|
||||
}
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: all .3s;
|
||||
}
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30vw);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from, .slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
|
|
@ -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>
|
||||
49
src/layouts/SelectCar/SelectCarTemplate.vue
Normal file
49
src/layouts/SelectCar/SelectCarTemplate.vue
Normal file
|
|
@ -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>
|
||||
59
src/layouts/SelectCar/SelectMake.vue
Normal file
59
src/layouts/SelectCar/SelectMake.vue
Normal file
|
|
@ -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>
|
||||
59
src/layouts/SelectCar/SelectModel.vue
Normal file
59
src/layouts/SelectCar/SelectModel.vue
Normal file
|
|
@ -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>
|
||||
55
src/layouts/SelectCar/SelectStyle.vue
Normal file
55
src/layouts/SelectCar/SelectStyle.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
<div class="current_car_info-text" v-if="translate === 0">
|
||||
<transition appear name="fade">
|
||||
<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 ">
|
||||
<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"
|
||||
/>
|
||||
<transition appear name="slide">
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_years">
|
||||
<div v-for="year in years" :key="year" class="mb-2">
|
||||
<Button
|
||||
:buttonText="year"
|
||||
v-on:click="selectYear(year)"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
</form>
|
||||
</transition>
|
||||
</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: [],
|
||||
makes: [],
|
||||
models: [],
|
||||
styles: [],
|
||||
translate: 0,
|
||||
carViewTranslate: 'translateX(0%)',
|
||||
year: '',
|
||||
make: '',
|
||||
model: ''
|
||||
years: []
|
||||
}
|
||||
},
|
||||
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();
|
||||
selectYear(year){
|
||||
this.$store.dispatch('selectYear', year);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
Loading…
Reference in a new issue