From babfa72ef244156bbe4b0e02afec6951cb666d13 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Thu, 26 Aug 2021 22:46:30 +0200 Subject: [PATCH 1/7] Auto save Api response in the store #14 --- src/components/RouteBlock.vue | 30 ++++++++++++++++++++++++------ src/store/routeCollection.js | 6 ++++++ 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue index eebcd44..e858f2c 100644 --- a/src/components/RouteBlock.vue +++ b/src/components/RouteBlock.vue @@ -13,15 +13,15 @@ - + @@ -41,7 +41,7 @@ export default { }, data() { return { - apiResponse: '', + // apiResponse: '', codeResponse: undefined, }; }, @@ -89,6 +89,22 @@ export default { this.$store.commit('UPDATE_ROUTE_BODY', data); }, }, + apiResponse: { + get() { + return this.$store.getters.routeData(this.idx).apiResponse; + }, + set(value) { + const data = { + idx: this.idx, + apiResponse: value, + }; + + this.$store.commit('UPDATE_ROUTE_RESPONSE', data); + }, + }, + apiResponseAsText() { + return this.apiResponse === '' ? null : JSON.stringify(this.apiResponse); + }, }, methods: { fetchData() { @@ -99,7 +115,9 @@ export default { axios[this.routeVerb](fullPath, h, b) .then((res) => { console.log('AXIOS RESPONSE: ', res); - this.apiResponse = JSON.stringify(res); + // this.apiResponse = JSON.stringify(res, undefined, 2); + // this.apiResponse = JSON.stringify(res); + this.apiResponse = res; this.codeResponse = res.status; }) .catch((err) => { diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js index 1409969..6367142 100644 --- a/src/store/routeCollection.js +++ b/src/store/routeCollection.js @@ -9,6 +9,7 @@ export const INITIAL_STATE = { routeVerb: 'get', routePath: 'people/2/', routeBody: '{\n}', + apiResponse: '', }, }; @@ -48,6 +49,11 @@ export default { payload.routeBody = data.routeBody; Vue.set(state.routeCollection, data.idx, payload); }, + UPDATE_ROUTE_RESPONSE(state, data) { + const payload = state.routeCollection[data.idx]; + payload.apiResponse = data.apiResponse; + Vue.set(state.routeCollection, data.idx, payload); + }, SET_COLLECTION_FROM_FILE(state, data) { state.routeCollection = data; }, -- GitLab From 73f88f009f3b3d59eb4c2544e6ecadeea1274f1e Mon Sep 17 00:00:00 2001 From: Jonathan Date: Thu, 26 Aug 2021 22:58:17 +0200 Subject: [PATCH 2/7] Add UserSettings Store module #9 --- src/store/index.js | 2 ++ src/store/userSettings.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/store/userSettings.js diff --git a/src/store/index.js b/src/store/index.js index 6970a9f..2154d5a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -3,6 +3,7 @@ import Vuex from 'vuex'; import createPersistedState from 'vuex-persistedstate'; import routeCollection from './routeCollection'; import apiMain from './apiMain'; +import userSettings from './userSettings'; Vue.use(Vuex); @@ -17,5 +18,6 @@ export default new Vuex.Store({ modules: { apiMain, routeCollection, + userSettings, }, }); diff --git a/src/store/userSettings.js b/src/store/userSettings.js new file mode 100644 index 0000000..5fc32de --- /dev/null +++ b/src/store/userSettings.js @@ -0,0 +1,22 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; + +Vue.use(Vuex); + +export const INITIAL_STATE = { + beatifyResponse: false, +}; + +export default { + state: () => ({ ...INITIAL_STATE }), + getters: { + beatifyResponse: (state) => state.beatifyResponse, + }, + mutations: { + UPDATE_BEAUTIFY_RESPONSE(state, isBeautify) { + state.beatifyResponse = isBeautify; + }, + }, + actions: { + }, +}; -- GitLab From 7567d43231d40920bf441415a6a7d0592f5516fd Mon Sep 17 00:00:00 2001 From: Jonathan Date: Thu, 26 Aug 2021 22:58:36 +0200 Subject: [PATCH 3/7] Create UserSetting component #9 --- src/components/UserSettings.vue | 26 ++++++++++++++++++++++++++ src/views/About.vue | 12 ++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/components/UserSettings.vue diff --git a/src/components/UserSettings.vue b/src/components/UserSettings.vue new file mode 100644 index 0000000..261f446 --- /dev/null +++ b/src/components/UserSettings.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/views/About.vue b/src/views/About.vue index 3fa2807..d6e896e 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -1,5 +1,17 @@ + + -- GitLab From 7a0bfb38e99d8bb5f0d0d50e253ed66a4f6aec8b Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 31 Aug 2021 19:30:12 +0200 Subject: [PATCH 4/7] Update user settings --- src/App.vue | 5 +++++ src/components/RouteBlock.vue | 14 ++++++++++--- src/components/UserSettings.vue | 36 +++++++++++++++++++++++++++------ src/store/userSettings.js | 11 +++++++--- src/views/About.vue | 22 +++++++++++++++++++- 5 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/App.vue b/src/App.vue index f02a087..b84e1e6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -112,6 +112,11 @@ body { right: var(--unit-2); } + .text-background { + background: var(--color-1-5); + padding: var(--unit-1); + } + @media (max-width: 700px) { body { margin: var(--unit-2); diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue index e858f2c..6e9d22d 100644 --- a/src/components/RouteBlock.vue +++ b/src/components/RouteBlock.vue @@ -91,6 +91,11 @@ export default { }, apiResponse: { get() { + const key = this.$store.getters.displayOnlyKey; + console.log('displayOnlyKey ===> ', key); + if (key && this.$store.getters.routeData(this.idx).apiResponse[key]) { + return this.$store.getters.routeData(this.idx).apiResponse[key]; + } return this.$store.getters.routeData(this.idx).apiResponse; }, set(value) { @@ -103,7 +108,12 @@ export default { }, }, apiResponseAsText() { - return this.apiResponse === '' ? null : JSON.stringify(this.apiResponse); + if (this.apiResponse === '') { return null; } + console.log('this.$store.getters.isBeautify ===> ', this.$store.getters.beautifyResponse); + if (this.$store.getters.beautifyResponse) { + return JSON.stringify(this.apiResponse, undefined, 2); + } + return JSON.stringify(this.apiResponse); }, }, methods: { @@ -115,8 +125,6 @@ export default { axios[this.routeVerb](fullPath, h, b) .then((res) => { console.log('AXIOS RESPONSE: ', res); - // this.apiResponse = JSON.stringify(res, undefined, 2); - // this.apiResponse = JSON.stringify(res); this.apiResponse = res; this.codeResponse = res.status; }) diff --git a/src/components/UserSettings.vue b/src/components/UserSettings.vue index 261f446..43817f6 100644 --- a/src/components/UserSettings.vue +++ b/src/components/UserSettings.vue @@ -1,8 +1,11 @@ @@ -10,17 +13,38 @@ export default { name: 'UserSettings', computed: { - isBeautify: { + beautifyResponse: { get() { - return this.$store.getters.isBeautify; + return this.$store.getters.beautifyResponse; }, set(value) { this.$store.commit('UPDATE_BEAUTIFY_RESPONSE', value); }, }, + displayOnlyKey: { + get() { + return this.$store.getters.displayOnlyKey; + }, + set(value) { + this.$store.commit('UPDATE_DISPLAY_ONLY_KEY', value); + }, + }, }, }; diff --git a/src/store/userSettings.js b/src/store/userSettings.js index 5fc32de..d34d519 100644 --- a/src/store/userSettings.js +++ b/src/store/userSettings.js @@ -4,17 +4,22 @@ import Vuex from 'vuex'; Vue.use(Vuex); export const INITIAL_STATE = { - beatifyResponse: false, + beautifyResponse: false, + displayOnlyKey: '', }; export default { state: () => ({ ...INITIAL_STATE }), getters: { - beatifyResponse: (state) => state.beatifyResponse, + beautifyResponse: (state) => state.beautifyResponse, + displayOnlyKey: (state) => state.displayOnlyKey, }, mutations: { UPDATE_BEAUTIFY_RESPONSE(state, isBeautify) { - state.beatifyResponse = isBeautify; + state.beautifyResponse = isBeautify; + }, + UPDATE_DISPLAY_ONLY_KEY(state, key) { + state.displayOnlyKey = key; }, }, actions: { diff --git a/src/views/About.vue b/src/views/About.vue index d6e896e..ea96c0a 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -1,7 +1,13 @@ @@ -15,3 +21,17 @@ export default { }, }; + + -- GitLab From b7b23c537520e761551943fb56bd63dd9cbccaef Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 31 Aug 2021 20:06:55 +0200 Subject: [PATCH 5/7] Fix response status when only specific key is provided --- src/components/RouteBlock.vue | 10 +++++++--- src/store/routeCollection.js | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue index 6e9d22d..4fab4ed 100644 --- a/src/components/RouteBlock.vue +++ b/src/components/RouteBlock.vue @@ -13,12 +13,12 @@ @@ -107,6 +107,10 @@ export default { this.$store.commit('UPDATE_ROUTE_RESPONSE', data); }, }, + apiResponseStatus() { + console.log('STATUS: ', this.$store.getters.routeDataStatus(this.idx)); + return this.$store.getters.routeDataStatus(this.idx); + }, apiResponseAsText() { if (this.apiResponse === '') { return null; } console.log('this.$store.getters.isBeautify ===> ', this.$store.getters.beautifyResponse); diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js index 6367142..4b65f30 100644 --- a/src/store/routeCollection.js +++ b/src/store/routeCollection.js @@ -18,6 +18,7 @@ export default { getters: { routeCollection: (state) => state.routeCollection, routeData: (state) => (idx) => state.routeCollection[idx], + routeDataStatus: (state) => (idx) => state.routeCollection[idx].apiResponse.status, defaultRoute: (state) => state.defaultRoute, }, mutations: { -- GitLab From ea4d4e37f3b0248eb95342435cedb4d751d90c7e Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 31 Aug 2021 20:15:15 +0200 Subject: [PATCH 6/7] Delete unused class in home view --- src/views/Home.vue | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 6221172..ba0fb50 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -73,16 +73,6 @@ export default { gap: var(--unit-2); } - .selector-verb { - padding: var(--unit-2); - background-color: #566584; - color: #a0caf1; - font-weight: bold; - letter-spacing: 0.1rem; - border: 1px solid #a0caf1; - width: 120px; - } - .action-button { display: grid; grid-template-columns: repeat(6, 1fr); -- GitLab From 27bcfcc7373f00ff984d896802ae703af4fd5254 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 31 Aug 2021 20:16:14 +0200 Subject: [PATCH 7/7] Update version to 0.3.3 --- package.json | 2 +- src/components/Onboard.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4f49fe7..aabd2e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vapi", - "version": "0.3.2", + "version": "0.3.3", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue index 444cd31..2f1aab8 100644 --- a/src/components/Onboard.vue +++ b/src/components/Onboard.vue @@ -1,6 +1,6 @@ -- GitLab