From 1339b2dc5f821e1e7625af5ab0778242135e2c67 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 29 Oct 2021 09:52:18 -0400 Subject: [PATCH 01/30] vue loader --- package-lock.json | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 74815f878..cde6a019f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2724,7 +2724,6 @@ "thread-loader": "^2.1.3", "url-loader": "^2.2.0", "vue-loader": "^15.9.2", - "vue-loader-v16": "npm:vue-loader@^16.1.0", "vue-style-loader": "^4.1.2", "webpack": "^4.0.0", "webpack-bundle-analyzer": "^3.8.0", @@ -3026,7 +3025,6 @@ "merge-source-map": "^1.1.0", "postcss": "^7.0.36", "postcss-selector-parser": "^6.0.2", - "prettier": "^1.18.2", "source-map": "~0.6.1", "vue-template-es2015-compiler": "^1.9.0" }, @@ -4985,7 +4983,6 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", - "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -7279,8 +7276,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -10827,7 +10823,6 @@ "@jest/types": "^24.9.0", "anymatch": "^2.0.0", "fb-watchman": "^2.0.0", - "fsevents": "^1.2.7", "graceful-fs": "^4.1.15", "invariant": "^2.2.4", "jest-serializer": "^24.9.0", @@ -17893,8 +17888,7 @@ "dependencies": { "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0", - "watchpack-chokidar2": "^2.0.1" + "neo-async": "^2.5.0" }, "optionalDependencies": { "chokidar": "^3.4.1", @@ -18269,7 +18263,6 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", - "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", From a21c5c61c1a0182cfad12f985c23509484fdd913 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 29 Oct 2021 16:40:18 -0400 Subject: [PATCH 02/30] edits --- .../carAttributes/carAttributes.vue | 6 +++--- src/layouts/selectYear/selectYear.vue | 2 +- src/router/index.js | 12 ++++++++++++ src/store/index.js | 13 ++----------- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/commonComponents/carAttributes/carAttributes.vue b/src/commonComponents/carAttributes/carAttributes.vue index 0297654ee..1bb084cb4 100644 --- a/src/commonComponents/carAttributes/carAttributes.vue +++ b/src/commonComponents/carAttributes/carAttributes.vue @@ -2,14 +2,14 @@
- +
diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 4f0a2a018..f7d49cf58 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -22,7 +22,7 @@ export default { }; }, mounted() { - axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => { + axios.get("https://consumerapidev.safelite.com/vehicle/api/v1/vehicle/years").then((response) => { this.years = response.data.Result; }); }, diff --git a/src/router/index.js b/src/router/index.js index c0e4b170d..e7dafb885 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -4,6 +4,8 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js" import NotFound from "@/layouts/notFound/notFound.vue"; import Home from "@/layouts/home/home.vue"; import store from "@/store"; +import selectYear from "@/layouts/selectYear/selectYear.vue" +import selectMake from "@/layouts/selectMake/selectMake.vue" const routes = [ { @@ -16,6 +18,16 @@ const routes = [ Name: "Home", component: Home, }, + { + path: "/select-year", + name: "selectYear", + component: selectYear, + }, + { + path: "/select-make", + name: "selectMake", + component: selectMake, + }, ]; const router = createRouter({ diff --git a/src/store/index.js b/src/store/index.js index aa638fb86..6c35ceffb 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -27,7 +27,7 @@ export default createStore({ mutations: { updateYear(state, data) { state.year = data.year; - state.makes = data.makes; + state.makes = data.makes.data.Result; state.slideTransition = "slide"; }, updateMake(state, data) { @@ -56,16 +56,7 @@ export default createStore({ }, 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; - }); + 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}`); }, From bd623e09c55e9da02e4234125426c32ab6aa0466 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 4 Nov 2021 10:16:02 -0400 Subject: [PATCH 03/30] funnel process --- src/App.vue | 2 +- src/assets/img/icons/back-forward.svg | 3 + src/assets/scss/components/_SelectCar.scss | 9 +- src/assets/scss/components/_buttons.scss | 3 + .../baseTemplate/baseTemplate.vue | 7 +- .../carAttributes/carAttributes.vue | 10 +- src/constants/endpoints.js | 16 +++ src/global-methods.js | 5 + src/layouts/selectDamage/selectDamage.vue | 83 ++++++++++++---- src/layouts/selectMake/selectMake.vue | 5 +- src/layouts/selectModel/selectModel.vue | 5 +- src/layouts/selectStyle/selectStyle.vue | 5 +- src/layouts/selectYear/selectYear.vue | 20 ++-- src/router/index.js | 26 ++++- src/store/index.js | 97 ++++++++++++------- .../buttonPrimary/buttonPrimary.vue | 6 +- src/uxComponents/radioCard/radioCard.vue | 2 +- 17 files changed, 222 insertions(+), 82 deletions(-) create mode 100644 src/assets/img/icons/back-forward.svg diff --git a/src/App.vue b/src/App.vue index 640ecadbb..24e965342 100644 --- a/src/App.vue +++ b/src/App.vue @@ -64,6 +64,6 @@ export default { buttonPrimary, radioCard, listButton - }, + } }; diff --git a/src/assets/img/icons/back-forward.svg b/src/assets/img/icons/back-forward.svg new file mode 100644 index 000000000..3835f94cc --- /dev/null +++ b/src/assets/img/icons/back-forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/scss/components/_SelectCar.scss b/src/assets/scss/components/_SelectCar.scss index 541fe8960..e79519191 100644 --- a/src/assets/scss/components/_SelectCar.scss +++ b/src/assets/scss/components/_SelectCar.scss @@ -5,7 +5,7 @@ background: $white; height: 100%; - form { + .list-view { height: calc(100% - 230px); overflow-y: scroll; overflow-x: hidden; @@ -27,6 +27,13 @@ position: absolute; } } + + .back-button { + margin-left: 5px; + img { + width: 20px; + } + } } .slide-enter-from { diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 857802c65..05f513114 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -50,6 +50,9 @@ border-radius: $border-radius-lg; border: 1px solid rgba($gray-300,.3); width: 100%; + &:focus, &:focus-visible { + box-shadow: none; + } &.button-loader { padding: 0 40px 0 12px; &:after { diff --git a/src/commonComponents/baseTemplate/baseTemplate.vue b/src/commonComponents/baseTemplate/baseTemplate.vue index 0263616b0..6c39f8a66 100644 --- a/src/commonComponents/baseTemplate/baseTemplate.vue +++ b/src/commonComponents/baseTemplate/baseTemplate.vue @@ -13,11 +13,14 @@
- {{ +
+ {{ this.currentCarInfo }} + back-button +
{{ style }} diff --git a/src/commonComponents/carAttributes/carAttributes.vue b/src/commonComponents/carAttributes/carAttributes.vue index 1bb084cb4..ac187f700 100644 --- a/src/commonComponents/carAttributes/carAttributes.vue +++ b/src/commonComponents/carAttributes/carAttributes.vue @@ -1,11 +1,11 @@ diff --git a/src/layouts/selectMake/selectMake.vue b/src/layouts/selectMake/selectMake.vue index 412e235c1..eb5f8f1aa 100644 --- a/src/layouts/selectMake/selectMake.vue +++ b/src/layouts/selectMake/selectMake.vue @@ -9,6 +9,7 @@ diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 1128790eb..4781bb392 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -79,6 +79,16 @@
h6 Heading
+
+
+
+ +
+
+
@@ -86,12 +96,19 @@ import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary"; import radioCard from "@/uxComponents/radioCard/radioCard"; import listButton from "@/uxComponents/listButton/listButton"; +import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion"; export default { name: "App", components: { buttonPrimary, radioCard, - listButton + listButton, + radioQuestion }, + data() { + return { + years: [2023, 2022, 2021, 2020], + }; + } }; diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index f5a363467..a39c7d65b 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -1,17 +1,22 @@ diff --git a/src/uxComponents/header/header.spec.js b/src/uxComponents/header/header.spec.js new file mode 100644 index 000000000..882a68129 --- /dev/null +++ b/src/uxComponents/header/header.spec.js @@ -0,0 +1 @@ +test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/uxComponents/header/header.vue b/src/uxComponents/header/header.vue new file mode 100644 index 000000000..a2a68eeb7 --- /dev/null +++ b/src/uxComponents/header/header.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/src/uxComponents/radio/radio.spec.js b/src/uxComponents/radio/radio.spec.js new file mode 100644 index 000000000..882a68129 --- /dev/null +++ b/src/uxComponents/radio/radio.spec.js @@ -0,0 +1 @@ +test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/uxComponents/radio/radio.vue b/src/uxComponents/radio/radio.vue new file mode 100644 index 000000000..eaf181f39 --- /dev/null +++ b/src/uxComponents/radio/radio.vue @@ -0,0 +1,39 @@ + + + From 2db9ccfdf0f9eb1269bd4d6958d5b6b0169e7d56 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 4 Nov 2021 17:08:33 -0400 Subject: [PATCH 05/30] dev merge --- src/layouts/selectYear/selectYear.vue | 44 +++++++-------- src/styles/commonStyles.scss | 77 +++++++++++++++------------ 2 files changed, 64 insertions(+), 57 deletions(-) diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 56ab2c502..f87273b99 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -19,6 +19,7 @@ import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion"; import Header from "@/uxComponents/header/header"; import { endpoints } from "@/constants/endpoints.js"; import globalMethods from "@/global-methods"; +import axios from "axios"; export default { name: "SelectCar", @@ -28,7 +29,7 @@ export default { }; }, mounted() { - return globalMethods.callHttpClient({ + globalMethods.callHttpClient({ method: endpoints.GetYears.method, endpoint: endpoints.GetYears.url, payload:{} @@ -36,6 +37,26 @@ export default { .then( (response) => { this.years = response.data.Result; }); + + // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to + // be prosessed and passed to child components. + axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { + response.data.Result.forEach((m) => { + switch (m.Type) { + case this.widgetNames.PAGE_HEADING_WIDGET: { + this.pageHeader = m.Model; + break; + } + case this.widgetNames.RADIO_QUESTION_WIDGET: { + this.radioQuestion = m.Model; + break; + } + default: { + break; + } + } + }) + }); }, methods: { selectYear(year) { @@ -48,26 +69,5 @@ export default { radioQuestion, Header, }, - // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to - }); - - }) - } - } - break; - } - default: { - break; - this.radioQuestion = m.Model; - case this.widgetNames.RADIO_QUESTION_WIDGET: { - } - this.pageHeader = m.Model; - break; - case this.widgetNames.PAGE_HEADING_WIDGET: { - switch (m.Type) { - response.data.Result.forEach((m) => { - - // be prosessed and passed to child components. - axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { }; diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss index 37dab947c..3defe4aa7 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -146,63 +146,70 @@ caption { // SelectCar styles .select-car { - height: 100vh; + height: 100vh; - .select-car-form { - background: $white; - height: 100%; + .select-car-form, .car_info, .radio_question { + background: $white; + height: 100%; - form { - height: calc(100% - 230px); - overflow-y: scroll; - overflow-x: hidden; - } + .list-view { + height: calc(100% - 230px); + overflow-y: scroll; + overflow-x: hidden; + } - .car_list, .current_car_info-text, .needed_car_info-text { - flex-shrink: 0; - width: 100%; - position: relative; - transition: transform .3s; - } - } + .car_list, .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + } - .current_car_info { - position: relative; - min-height: 2.5rem; + .current_car_info { + position: relative; + min-height: 2.5rem; - .current_car_info-text { - position: absolute; - } - } + .current_car_info-text { + position: absolute; + } + } + + .back-button { + margin-left: 5px; + img { + width: 20px; + } + } } .slide-enter-from { - opacity: 0; - transform: translateX(30vw); + opacity: 0; + transform: translateX(30vw); } .slide-enter-active, .slide-leave-active { - transition: all .4s; + transition: all .4s; } .slide-leave-to { - opacity: 0; - transform: translateX(-30vw); + opacity: 0; + transform: translateX(-30vw); } .slide_reverse-enter-from { - opacity: 0; - transform: translateX(-30vw); + opacity: 0; + transform: translateX(-30vw); } .slide_reverse-enter-active, .slide_reverse-leave-active { - transition: all .4s; + transition: all .4s; } .slide_reverse-leave-to { - opacity: 0; - transform: translateX(30vw); + opacity: 0; + transform: translateX(30vw); } .fade-enter-from, .fade-leave-to { - opacity: 0; + opacity: 0; } .fade-enter-active, .fade-leave-active { - transition: all .5s ease; + transition: all .5s ease; } From 66ee43e269f1f4f4a25d8c2ba8b9d52520b710b7 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 5 Nov 2021 10:22:50 -0400 Subject: [PATCH 06/30] Changing list style --- .../radioQuestion/radioQuestion.vue | 12 ++-- src/layouts/selectYear/selectYear.vue | 58 +++++++++---------- src/styles/commonStyles.scss | 29 +++++----- 3 files changed, 46 insertions(+), 53 deletions(-) diff --git a/src/commonComponents/radioQuestion/radioQuestion.vue b/src/commonComponents/radioQuestion/radioQuestion.vue index 2724c069f..8f00064ff 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.vue +++ b/src/commonComponents/radioQuestion/radioQuestion.vue @@ -3,13 +3,11 @@
{{ questionText }}
-
-
-
- -
-
-
+
+
+ +
+
diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index f87273b99..2f8699ffa 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -1,15 +1,13 @@ @@ -26,6 +24,8 @@ export default { data() { return { years: [], + pageHeader: {}, + radioQuestion: {} }; }, mounted() { @@ -38,25 +38,23 @@ export default { this.years = response.data.Result; }); - // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to - // be prosessed and passed to child components. - axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { - response.data.Result.forEach((m) => { - switch (m.Type) { - case this.widgetNames.PAGE_HEADING_WIDGET: { - this.pageHeader = m.Model; - break; - } - case this.widgetNames.RADIO_QUESTION_WIDGET: { - this.radioQuestion = m.Model; - break; - } - default: { - break; - } - } - }) - }); + axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => { + response.data.Result.forEach((m) => { + switch (m.Type) { + case this.widgetNames.PAGE_HEADING_WIDGET: { + this.pageHeader = m.Model; + break; + } + case this.widgetNames.RADIO_QUESTION_WIDGET: { + this.radioQuestion = m.Model; + break; + } + default: { + break; + } + } + }) + }); }, methods: { selectYear(year) { diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss index 3defe4aa7..d38cf6050 100644 --- a/src/styles/commonStyles.scss +++ b/src/styles/commonStyles.scss @@ -146,24 +146,21 @@ caption { // SelectCar styles .select-car { - height: 100vh; + height: calc(100vh - 1rem); - .select-car-form, .car_info, .radio_question { - background: $white; - height: 100%; + .car_list { + position: absolute; + height: calc(100% - 1rem); + width: calc(100% - 1rem); + overflow-y: scroll; + overflow-x: hidden; + } - .list-view { - height: calc(100% - 230px); - overflow-y: scroll; - overflow-x: hidden; - } - - .car_list, .current_car_info-text, .needed_car_info-text { - flex-shrink: 0; - width: 100%; - position: relative; - transition: transform .3s; - } + .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; } .current_car_info { From b6503025a44cd437c4758c51ae6904caf46b00e4 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 5 Nov 2021 10:27:13 -0400 Subject: [PATCH 07/30] commenting out custom routes --- src/router/index.js | 60 ++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 0d4279df8..23b67c303 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -4,11 +4,11 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js" import ComponentTest from "@/layouts/componentTest/componentTest.vue"; import NotFound from "@/layouts/notFound/notFound.vue"; import store from "@/store"; -import selectYear from "@/layouts/selectYear/selectYear.vue"; -import selectMake from "@/layouts/selectMake/selectMake.vue"; -import selectModel from "@/layouts/selectModel/selectModel.vue"; -import selectStyle from "@/layouts/selectStyle/selectStyle.vue"; -import selectDamage from "@/layouts/selectDamage/selectDamage.vue"; +// import selectYear from "@/layouts/selectYear/selectYear.vue"; +// import selectMake from "@/layouts/selectMake/selectMake.vue"; +// import selectModel from "@/layouts/selectModel/selectModel.vue"; +// import selectStyle from "@/layouts/selectStyle/selectStyle.vue"; +// import selectDamage from "@/layouts/selectDamage/selectDamage.vue"; const routes = [ { @@ -66,31 +66,31 @@ const routes = [ } }, }, - { - 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, - }, - { - path: "/select-damage", - name: "selectDamage", - component: selectDamage, - }, + // { + // 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, + // }, + // { + // path: "/select-damage", + // name: "selectDamage", + // component: selectDamage, + // }, ]; const router = createRouter({ From 8a84eb62943679bafb313c0b3926be26afd78b90 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 5 Nov 2021 16:26:11 -0400 Subject: [PATCH 08/30] adding unit tests and refactoring dispatch functions --- .../radioQuestion/radioQuestion.spec.js | 19 +++++- .../radioQuestion/radioQuestion.vue | 5 +- src/layouts/selectYear/selectYear.vue | 11 +++- src/router/index.js | 60 +++++++++---------- src/store/index.js | 7 +-- src/uxComponents/header/header.spec.js | 16 ++++- src/uxComponents/radio/radio.spec.js | 19 +++++- 7 files changed, 93 insertions(+), 44 deletions(-) diff --git a/src/commonComponents/radioQuestion/radioQuestion.spec.js b/src/commonComponents/radioQuestion/radioQuestion.spec.js index 882a68129..4c267491a 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.spec.js +++ b/src/commonComponents/radioQuestion/radioQuestion.spec.js @@ -1 +1,18 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +import { shallowMount } from '@vue/test-utils'; +import radioQuestion from './radioQuestion'; + +test('radioQuestion', () => { + // render the component + const wrapper = shallowMount(radioQuestion, { + propsData: { + questionText: 'testString', + chooseAnswer: function(){ console.log('test') } + } + }); + + // test if questionText is a string + expect(typeof wrapper.props().questionText).toBe('string'); + + // test if chooseAnswer is a function + expect(typeof wrapper.props().chooseAnswer).toBe('function'); +}); \ No newline at end of file diff --git a/src/commonComponents/radioQuestion/radioQuestion.vue b/src/commonComponents/radioQuestion/radioQuestion.vue index 8f00064ff..d906bc5d3 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.vue +++ b/src/commonComponents/radioQuestion/radioQuestion.vue @@ -5,7 +5,7 @@
- +
@@ -17,7 +17,8 @@ export default { name: "radio-question", props: { questionText: String, - answers: Array + answers: Array, + chooseAnswer: Function }, components: { radio diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 2f8699ffa..25914ad83 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -7,6 +7,7 @@ @@ -18,6 +19,8 @@ import Header from "@/uxComponents/header/header"; import { endpoints } from "@/constants/endpoints.js"; import globalMethods from "@/global-methods"; import axios from "axios"; +import store from "@/store"; +import router from "@/router"; export default { name: "SelectCar", @@ -58,9 +61,11 @@ export default { }, methods: { selectYear(year) { - const listButtons = document.querySelectorAll('.list-button'); - globalMethods.disableItems(listButtons); - this.dispatchNonBlockingStoreAction("selectYear", { year: year }); + this.dispatchNonBlockingStoreAction("selectYear", { year: year }).then( (response) => { + const makes = response; + store.commit('updateYear', {year, makes}); + router.push(`select-make?year=${year}`); + }); } }, components: { diff --git a/src/router/index.js b/src/router/index.js index 23b67c303..0d4279df8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -4,11 +4,11 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js" import ComponentTest from "@/layouts/componentTest/componentTest.vue"; import NotFound from "@/layouts/notFound/notFound.vue"; import store from "@/store"; -// import selectYear from "@/layouts/selectYear/selectYear.vue"; -// import selectMake from "@/layouts/selectMake/selectMake.vue"; -// import selectModel from "@/layouts/selectModel/selectModel.vue"; -// import selectStyle from "@/layouts/selectStyle/selectStyle.vue"; -// import selectDamage from "@/layouts/selectDamage/selectDamage.vue"; +import selectYear from "@/layouts/selectYear/selectYear.vue"; +import selectMake from "@/layouts/selectMake/selectMake.vue"; +import selectModel from "@/layouts/selectModel/selectModel.vue"; +import selectStyle from "@/layouts/selectStyle/selectStyle.vue"; +import selectDamage from "@/layouts/selectDamage/selectDamage.vue"; const routes = [ { @@ -66,31 +66,31 @@ const routes = [ } }, }, - // { - // 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, - // }, - // { - // path: "/select-damage", - // name: "selectDamage", - // component: selectDamage, - // }, + { + 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, + }, + { + path: "/select-damage", + name: "selectDamage", + component: selectDamage, + }, ]; const router = createRouter({ diff --git a/src/store/index.js b/src/store/index.js index b1da436f1..c9abb233b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -61,15 +61,10 @@ export default createStore({ payload:{ "Year": year } - }) - .then( (response) => { - const makes = response; - context.commit('updateYear', {year, makes}); - router.push(`select-make?year=${year}`); }); }, selectMake({ commit, state }, { make }) { - return globalMethods.callHttpClient({ + globalMethods.callHttpClient({ method: endpoints.GetModels.method, endpoint: endpoints.GetModels.url, payload:{ diff --git a/src/uxComponents/header/header.spec.js b/src/uxComponents/header/header.spec.js index 882a68129..8bf197638 100644 --- a/src/uxComponents/header/header.spec.js +++ b/src/uxComponents/header/header.spec.js @@ -1 +1,15 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +import { shallowMount } from '@vue/test-utils'; +import Header from './header'; + +test('Header', () => { + // render the component + const wrapper = shallowMount(Header, { + propsData: { + text: 'testString' + } + }); + + // test if text is a string + expect(typeof wrapper.props().text).toBe('string'); + +}); \ No newline at end of file diff --git a/src/uxComponents/radio/radio.spec.js b/src/uxComponents/radio/radio.spec.js index 882a68129..bdaa1d748 100644 --- a/src/uxComponents/radio/radio.spec.js +++ b/src/uxComponents/radio/radio.spec.js @@ -1 +1,18 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +import { shallowMount } from '@vue/test-utils'; +import radio from './radio'; + +test('radioQuestion', () => { + // render the component + const wrapper = shallowMount(radio, { + propsData: { + value: 'testString', + text: 'testString2' + } + }); + + // test if value is a string + expect(typeof wrapper.props().value).toBe('string'); + + // test if text is a string + expect(typeof wrapper.props().text).toBe('string'); +}); \ No newline at end of file From ed32135565e584599c06390d3360bf6b27259ec9 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 5 Nov 2021 16:29:44 -0400 Subject: [PATCH 09/30] Adding new styling --- .../ymmsCommonStyles.scss | 87 ++++++++++--------- 1 file changed, 46 insertions(+), 41 deletions(-) diff --git a/src/styles/commonComponentStyles/ymmsCommonStyles.scss b/src/styles/commonComponentStyles/ymmsCommonStyles.scss index a550552b9..d3d5e5d7f 100644 --- a/src/styles/commonComponentStyles/ymmsCommonStyles.scss +++ b/src/styles/commonComponentStyles/ymmsCommonStyles.scss @@ -1,61 +1,66 @@ -.vehicle-select-attributes { - height: 100vh; - - .select-car-form { - background: $white; - height: 100%; - - form { - height: calc(100% - 230px); - overflow-y: scroll; - overflow-x: hidden; - } - - .car_list, .current_car_info-text, .needed_car_info-text { - flex-shrink: 0; - width: 100%; - position: relative; - transition: transform .3s; - } +// SelectCar styles +.select-car { + height: calc(100vh - 1rem); + + .car_list { + position: absolute; + height: calc(100% - 1rem); + width: calc(100% - 1rem); + overflow-y: scroll; + overflow-x: hidden; } - + + .current_car_info-text, .needed_car_info-text { + flex-shrink: 0; + width: 100%; + position: relative; + transition: transform .3s; + } + .current_car_info { position: relative; min-height: 2.5rem; - + .current_car_info-text { position: absolute; } } -} - -.slide-enter-from { + + .back-button { + margin-left: 5px; + img { + width: 20px; + } + } + } + + .slide-enter-from { opacity: 0; transform: translateX(30vw); -} -.slide-enter-active, .slide-leave-active { + } + .slide-enter-active, .slide-leave-active { transition: all .4s; -} -.slide-leave-to { + } + .slide-leave-to { opacity: 0; transform: translateX(-30vw); -} - -.slide_reverse-enter-from { + } + + .slide_reverse-enter-from { opacity: 0; transform: translateX(-30vw); -} -.slide_reverse-enter-active, .slide_reverse-leave-active { + } + .slide_reverse-enter-active, .slide_reverse-leave-active { transition: all .4s; -} -.slide_reverse-leave-to { + } + .slide_reverse-leave-to { opacity: 0; transform: translateX(30vw); -} - -.fade-enter-from, .fade-leave-to { + } + + .fade-enter-from, .fade-leave-to { opacity: 0; -} -.fade-enter-active, .fade-leave-active { + } + .fade-enter-active, .fade-leave-active { transition: all .5s ease; -} + } \ No newline at end of file From e4fd4499428828d8abcacf107ac03e414d04a6f5 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 5 Nov 2021 19:22:25 -0400 Subject: [PATCH 10/30] List scroll and function structure updates --- src/layouts/selectMake/selectMake.vue | 36 +++++++++++------ src/layouts/selectModel/selectModel.vue | 40 +++++++++++-------- src/layouts/selectStyle/selectStyle.vue | 39 ++++++++++-------- src/layouts/selectYear/selectYear.spec.js | 10 ++++- src/layouts/selectYear/selectYear.vue | 14 +++++-- src/store/index.js | 18 +-------- .../ymmsCommonStyles.scss | 4 +- 7 files changed, 91 insertions(+), 70 deletions(-) diff --git a/src/layouts/selectMake/selectMake.vue b/src/layouts/selectMake/selectMake.vue index eb5f8f1aa..8821286a3 100644 --- a/src/layouts/selectMake/selectMake.vue +++ b/src/layouts/selectMake/selectMake.vue @@ -1,15 +1,23 @@ diff --git a/src/layouts/selectModel/selectModel.vue b/src/layouts/selectModel/selectModel.vue index 02b2a84aa..4c0bd9b0d 100644 --- a/src/layouts/selectModel/selectModel.vue +++ b/src/layouts/selectModel/selectModel.vue @@ -1,19 +1,23 @@ diff --git a/src/layouts/selectStyle/selectStyle.vue b/src/layouts/selectStyle/selectStyle.vue index 0f9db51b7..731b0d8d9 100644 --- a/src/layouts/selectStyle/selectStyle.vue +++ b/src/layouts/selectStyle/selectStyle.vue @@ -1,19 +1,23 @@ diff --git a/src/layouts/selectYear/selectYear.spec.js b/src/layouts/selectYear/selectYear.spec.js index 882a68129..cd791df22 100644 --- a/src/layouts/selectYear/selectYear.spec.js +++ b/src/layouts/selectYear/selectYear.spec.js @@ -1 +1,9 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +import { shallowMount } from '@vue/test-utils'; +import SelectYear from './SelectYear'; + +test('SelectYear', () => { + // render the component + const wrapper = shallowMount(SelectYear, { + + }); +}); \ No newline at end of file diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue index 25914ad83..65b12e615 100644 --- a/src/layouts/selectYear/selectYear.vue +++ b/src/layouts/selectYear/selectYear.vue @@ -1,6 +1,7 @@ From b477a6f5f0136761206626f64957d790ed426f85 Mon Sep 17 00:00:00 2001 From: bmauger Date: Wed, 17 Nov 2021 19:13:25 -0500 Subject: [PATCH 28/30] CSR-185 update Alert component. --- src/layouts/componentTest/componentTest.vue | 174 ++++++++++++-------- src/styles/commonAlertStyles.scss | 47 ------ src/uxComponents/alert/alert.vue | 73 ++++++-- vue.config.js | 1 - vue.release.config.js | 1 - 5 files changed, 171 insertions(+), 125 deletions(-) delete mode 100644 src/styles/commonAlertStyles.scss diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 1eafa1e14..8f5316d14 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -1,47 +1,47 @@ -