jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added store actions to real api calls

Browse source
This commit is contained in:
Frank 2021-10-27 21:09:38 -04:00
parent 4547e988cd
commit d85a1feb7b
8 changed files with 181 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/constants/endpoints.js Normal file
View file

@ -0,0 +1,8 @@
const endpoints = {
GetRouteInfoEndpoint: {
url: '/content/api/v1/content/RouteInfo',
method: 'POST'
}
}
export { endpoints }

5
src/constants/storeActions.js Normal file
View file

@ -0,0 +1,5 @@
const storeActions = {
GET_ROUTE_INFO_ACTION: "getRouteInfo",
}
export { storeActions }

80
src/global-methods.js
View file

@ -1,60 +1,30 @@
import axios from 'axios'; import axios from "axios";
import { StatusCodes } from 'http-status-codes';
export default { export default {
callHttpClient({ callHttpClient({ method, endpoint, payload, responseType = {} }) {
method, return new Promise((resolve, reject) => {
endpoint,
payload,
responseType = {},
ignoreErrors = false
}) {
return new Promise((resolve, reject) => {
// Grab our accessToken from Okta.
const accessToken = this.getBearerTokenForStorage();
// Merge payload with analytics data const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable
const payloadAndAnalyticsData = Object.assign({}, payload, { const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass",});
AppName: "Agency Advantage Dashboard"
});
axios({ axios({
method: method, method: method,
url: endpoint, url: `${apiGatewayUrl}${endpoint}`,
//data: payloadAndAnalyticsData, data: payloadAndAnalyticsData,
crossdomain: true, crossDomain: true,
responseType: responseType responseType: responseType,
// headers: { }).then(
// Authorization: `Bearer ${accessToken}` function (response) {
// } if (response.data.isSuccess || response.status == 200) {
}) resolve(response);
.then(function(response) { } else {
if (response.data.isSuccess || (response.status == 200)) { reject(response);
resolve(response); }
} else { },
reject(response); (error) => {
} let statusCode = error.response.status;
}, error => {
let statusCode = error.response.status;
let message = 'Sorry, something happened on our end. Please try again';
if (!ignoreErrors) {
switch (statusCode) {
case StatusCodes.UNAUTHORIZED:
this.createPromiseRejection("Unauthorized, routing back to login page.", error.response, reject, true, false);
break;
case StatusCodes.BAD_REQUEST:
this.createPromiseRejection(error.response.data, error.response, reject, true, false);
break;
}
}
});
})
},
getBearerTokenForStorage() {
try {
return JSON.parse(localStorage.getItem('okta-token-storage')).accessToken.accessToken;
} catch (error) {
return '';
} }
} );
} });
},
};

2
src/layouts/home/home.vue
View file

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

12
src/main.js
View file

@ -2,11 +2,19 @@ import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import router from './router'; import router from './router';
import store from '@/store'; import store from '@/store';
import baseMixin from "@/mixins/baseMixin.js";
//Bootstrap JavaScript //Bootstrap JavaScript
import "../node_modules/bootstrap/dist/js/bootstrap.js"; import "../node_modules/bootstrap/dist/js/bootstrap.js";
//Get Bootstrap and Custom Styles //Get Bootstrap and Custom Styles
import "./assets/scss/custom.scss"; import "./assets/scss/custom.scss";
createApp(App).use(router).use(store).mount("#app"); // Vue App Setup
const vueApp = createApp(App);
vueApp.use(router);
vueApp.use(store);
vueApp.mixin(baseMixin);
vueApp.mount("#app");

22
src/mixins/baseMixin.js Normal file
View file

@ -0,0 +1,22 @@
import { storeActions } from "@/constants/storeActions.js";
export default {
methods: {
dispatchBlockingStoreAction(type, payload) {
// globalMethods.showWaitingModal(true);
return this.dispatchNonBlockingStoreAction(type, payload)
.finally(() => {
// globalMethods.showWaitingModal(false);
});;
},
dispatchNonBlockingStoreAction(type, payload) {
return this.$store.dispatch(type, payload);
},
},
computed: {
storeActions() {
return storeActions;
},
},
}

21
src/router/index.js
View file

@ -1,7 +1,8 @@
import { createWebHistory, createRouter } from "vue-router"; import { createWebHistory, createRouter } from "vue-router";
import { getRouteData } from "@/router/dynamic-routing/route-compile.js"; import { storeActions } from "@/constants/storeActions.js";
import NotFound from "@/layouts/notFound/notFound.vue"; import NotFound from "@/layouts/notFound/notFound.vue";
import Home from "@/layouts/home/home.vue"; import Home from "@/layouts/home/home.vue";
import store from "@/store";
const routes = [ const routes = [
{ {
@ -12,12 +13,12 @@ const routes = [
{ {
path: "/", path: "/",
Name: "Home", Name: "Home",
component: Home component: Home,
}, },
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHistory('/fmg/'), history: createWebHistory("/fmg/"),
routes, routes,
}); });
@ -26,18 +27,18 @@ router.beforeEach(async (to, from, next) => {
}); });
async function GoToDynamicRoute(to, next) { async function GoToDynamicRoute(to, next) {
let doesRouteResolve = router.resolve(to.path).matched.length > 0; let doesRouteResolve = router.resolve(to.path).matched.length > 0;
console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
if (!doesRouteResolve) { if (!doesRouteResolve) {
let routeData = await getRouteData(to.path).catch((exp) => { store
console.log(exp); .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: to.path })
next({ name: "NotFound" }); // Go to 404. .then((response) => {
}); console.log(response);
});
let routeData = [];
// Add our dynamic route. // Add our dynamic route.
router.addRoute({ router.addRoute({
path: routeData[0].path, path: routeData[0].path,

175
src/store/index.js
View file

@ -1,81 +1,104 @@
import { createStore } from 'vuex'; import { createStore } from "vuex";
import createPersistedState from 'vuex-persistedstate'; import { endpoints } from "@/constants/endpoints.js";
import axios from 'axios'; import createPersistedState from "vuex-persistedstate";
import globalMethods from '../global-methods' import axios from "axios";
import router from '@/router'; import globalMethods from "@/global-methods";
import router from "@/router";
export default createStore({ export default createStore({
plugins: [createPersistedState({ plugins: [
storage: window.sessionStorage, createPersistedState({
})], storage: window.sessionStorage,
state: { }),
makes: [], ],
models: [], state: {
styles: [], makes: [],
year: '', models: [],
make: '', styles: [],
model: '', year: "",
style: '', make: "",
slideTransition: 'none', model: "",
carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", style: "",
blurImg: true slideTransition: "none",
carImg:
"https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
blurImg: true,
},
mutations: {
updateYear(state, data) {
state.year = data.year;
state.makes = data.makes;
state.slideTransition = "slide";
}, },
mutations: { updateMake(state, data) {
updateYear(state, data){ state.make = data.make;
state.year = data.year; state.models = data.models.data.Result;
state.makes = data.makes; state.slideTransition = "slide";
state.slideTransition = 'slide'
},
updateMake(state, data){
state.make = data.make;
state.models = data.models.data.Result;
state.slideTransition = 'slide';
},
updateModel(state, data){
state.model = data.model;
state.styles = data.styles.data.Result;
state.slideTransition = 'slide';
},
updateStyle(state, data){
state.style = data.style;
state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
state.blurImg = false;
state.slideTransition = 'slide';
},
removeStyle(state) {
state.style = '';
state.blurImg = true;
state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg'
}
}, },
actions: { updateModel(state, data) {
async selectYear(context, year){ state.model = data.model;
let makes = []; state.styles = data.styles.data.Result;
await globalMethods.callHttpClient({ state.slideTransition = "slide";
method: 'GET', },
endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`, updateStyle(state, data) {
payload: {}, state.style = data.style;
}) state.carImg =
.then(function (response) { "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
makes = response.data.Result; state.blurImg = false;
}); state.slideTransition = "slide";
context.commit('updateYear', {year, makes}); },
router.push(`/select-make?year=${year}`); removeStyle(state) {
state.style = "";
state.blurImg = true;
state.carImg =
"https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
},
},
actions: {
async selectYear(context, year) {
let makes = [];
await globalMethods
.callHttpClient({
method: "GET",
endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`,
payload: {},
})
.then(function (response) {
makes = response.data.Result;
});
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}`
);
},
selectStyle({ commit, state }, style) {
commit("updateStyle", { style });
router.push(
`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
);
},
getRouteInfo(context, { relativeUrl }) {
return globalMethods.callHttpClient({
method: endpoints.GetRouteInfoEndpoint.method,
endpoint: endpoints.GetRouteInfoEndpoint.url,
payload: {
relativeUrl: relativeUrl,
}, },
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}`);
},
selectStyle({commit, state}, style){
commit('updateStyle', {style});
router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`);
}
}
})