diff --git a/package.json b/package.json index 0d0046895f1f55e7ac2a66e17f9982af7f46eb4f..700e0faf8c6e1e8b5de88d32dd224ec801dcbd77 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vapi", - "version": "0.5.1", + "version": "0.6.0", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue index 3a3f09c65a6c2738b2fe4075949b0b014a6acef3..e324dcc66a01e5f2ac119e319c5fb56f9ebe53c4 100644 --- a/src/components/Dashboard.vue +++ b/src/components/Dashboard.vue @@ -1,13 +1,32 @@ @@ -23,6 +42,7 @@ export default { computed: { ...mapGetters({ routeCollection: 'routeCollection', + isFilterOn: 'isFilterOn', }), totalRoutes() { return this.routeCollection.length; diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue index d05f0157704b0abc6e87b305359991b6aa2efd63..fec44f6e320d43f5bdc44e55f3bff9d6fe6d861b 100644 --- a/src/components/DashboardCard.vue +++ b/src/components/DashboardCard.vue @@ -1,16 +1,20 @@ diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue index c332b2b9c71a8f9de1b29d9985fe65a98002cc6d..cb30e8ba7181946bbea3c74af2720f5339f87482 100644 --- a/src/components/Onboard.vue +++ b/src/components/Onboard.vue @@ -1,6 +1,6 @@ diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue index 6c948238ab5e4529724be299bf775f26030afc2f..4e966d57bb69b245c1638ad6468939dec55c6e92 100644 --- a/src/components/RouteBlock.vue +++ b/src/components/RouteBlock.vue @@ -28,7 +28,7 @@ class="request-response"> - + @@ -39,7 +39,7 @@ import axios from 'axios'; export default { name: 'RouteBlock', props: { - idx: { + id: { type: Number, required: true, }, @@ -57,11 +57,11 @@ export default { }), routeVerb: { get() { - return this.$store.getters.routeData(this.idx).routeVerb; + return this.$store.getters.routeData(this.id).routeVerb; }, set(value) { const data = { - idx: this.idx, + id: this.id, routeVerb: value, }; @@ -70,11 +70,11 @@ export default { }, routePath: { get() { - return this.$store.getters.routeData(this.idx).routePath; + return this.$store.getters.routeData(this.id).routePath; }, set(value) { const data = { - idx: this.idx, + id: this.id, routePath: value, }; @@ -83,11 +83,11 @@ export default { }, routeBody: { get() { - return this.$store.getters.routeData(this.idx).routeBody; + return this.$store.getters.routeData(this.id).routeBody; }, set(value) { const data = { - idx: this.idx, + id: this.id, routeBody: value, }; @@ -97,14 +97,14 @@ export default { apiResponse: { get() { const key = this.$store.getters.displayOnlyKey; - if (key && this.$store.getters.routeData(this.idx).apiResponse[key]) { - return this.$store.getters.routeData(this.idx).apiResponse[key]; + if (key && this.$store.getters.routeData(this.id).apiResponse[key]) { + return this.$store.getters.routeData(this.id).apiResponse[key]; } - return this.$store.getters.routeData(this.idx).apiResponse; + return this.$store.getters.routeData(this.id).apiResponse; }, set(value) { const data = { - idx: this.idx, + id: this.id, apiResponse: value, }; @@ -112,7 +112,7 @@ export default { }, }, apiResponseStatus() { - return this.$store.getters.routeDataStatus(this.idx); + return this.$store.getters.routeDataStatus(this.id); }, apiResponseAsText() { if (this.apiResponse === '') { return null; } @@ -150,10 +150,10 @@ export default { }); }, cleanResponse() { - this.$store.dispatch('CLEAN_RESPONSE', this.idx); + this.$store.dispatch('CLEAN_RESPONSE', this.id); }, deleteRoute() { - this.$store.dispatch('DELETE_ROUTE', this.idx); + this.$store.dispatch('DELETE_ROUTE', this.id); }, }, }; diff --git a/src/components/RouteBlockCollection.vue b/src/components/RouteBlockCollection.vue index 8c682e1910c41bae421de99246b5a8162dafe985..646f662d9adfe06c678c11c6827bc9bd79de3bf5 100644 --- a/src/components/RouteBlockCollection.vue +++ b/src/components/RouteBlockCollection.vue @@ -1,7 +1,7 @@ @@ -50,10 +56,20 @@ export default { }, }, }, + methods: { + reinitApp() { + localStorage.removeItem('vapi'); + window.location.reload(); + }, + }, }; diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js index ca802992584be0ee49de747b593336dcd72fd5ab..a63748a68d460fd453f21bdf326396ea80c7cbf2 100644 --- a/src/store/routeCollection.js +++ b/src/store/routeCollection.js @@ -11,76 +11,149 @@ export const INITIAL_STATE = { routeBody: '{\n}', apiResponse: '', }, + filter: { + routeVerb: [], + status: [], + }, }; export default { state: () => ({ ...INITIAL_STATE }), + // -------------------------------------------------------------------------------- + // GUETTERS + // -------------------------------------------------------------------------------- getters: { routeCollection: (state) => state.routeCollection, - routeData: (state) => (idx) => state.routeCollection[idx], - routeDataStatus: (state) => (idx) => state.routeCollection[idx]?.apiResponse?.status || 0, + + routeData: (state) => (id) => state.routeCollection.find((r) => r.id === id), + + routeDataStatus: (state) => (id) => { + const idx = state.routeCollection.findIndex((r) => r.id === id); + return state.routeCollection[idx]?.apiResponse?.status || 0; + }, + defaultRoute: (state) => state.defaultRoute, + + filter: (state) => state.filter, + + isFilterOn: (state) => { + let isOn = false; + Object.keys(state.filter).forEach((k) => { + if (state.filter[k].length > 0) { + isOn = true; + } + }); + return isOn; + }, }, + // -------------------------------------------------------------------------------- + // MUTATIONS + // -------------------------------------------------------------------------------- mutations: { ADD_ROUTE(state) { - state.routeCollection.push({ ...state.defaultRoute }); + state.routeCollection.push({ ...state.defaultRoute, id: new Date().getTime() }); }, + UPDATE_ROUTE(state, data) { - const payload = state.routeCollection[data.idx]; + const idx = state.routeCollection.findIndex((r) => r.id === data.id); + const payload = state.routeCollection[idx]; payload.routeVerb = data.routeVerb; payload.routePath = data.routePath; payload.routeBody = data.routeBody; - Vue.set(state.routeCollection, data.idx, payload); + Vue.set(state.routeCollection, idx, payload); }, - DELETE_ROUTE(state, idx) { + + DELETE_ROUTE(state, id) { + const idx = state.routeCollection.findIndex((r) => r.id === id); state.routeCollection.splice(idx, 1); }, + UPDATE_ROUTE_VERB(state, data) { - const payload = state.routeCollection[data.idx]; + const idx = state.routeCollection.findIndex((r) => r.id === data.id); + const payload = state.routeCollection[idx]; payload.routeVerb = data.routeVerb; - Vue.set(state.routeCollection, data.idx, payload); + Vue.set(state.routeCollection, idx, payload); }, + UPDATE_ROUTE_PATH(state, data) { - const payload = state.routeCollection[data.idx]; + const idx = state.routeCollection.findIndex((r) => r.id === data.id); + const payload = state.routeCollection[idx]; payload.routePath = data.routePath; - Vue.set(state.routeCollection, data.idx, payload); + Vue.set(state.routeCollection, idx, payload); }, + UPDATE_ROUTE_BODY(state, data) { - const payload = state.routeCollection[data.idx]; + const idx = state.routeCollection.findIndex((r) => r.id === data.id); + const payload = state.routeCollection[idx]; payload.routeBody = data.routeBody === '' ? '{\n}' : data.routeBody; - Vue.set(state.routeCollection, data.idx, payload); + Vue.set(state.routeCollection, idx, payload); }, + UPDATE_ROUTE_RESPONSE(state, data) { - const payload = state.routeCollection[data.idx]; + const idx = state.routeCollection.findIndex((r) => r.id === data.id); + const payload = state.routeCollection[idx]; payload.apiResponse = data.apiResponse; - Vue.set(state.routeCollection, data.idx, payload); + Vue.set(state.routeCollection, idx, payload); }, + SET_COLLECTION_FROM_FILE(state, data) { state.routeCollection = data; }, - CLEAN_RESPONSE(state, idx) { + + CLEAN_RESPONSE(state, id) { + const idx = state.routeCollection.findIndex((r) => r.id === id); const payload = state.routeCollection[idx]; payload.apiResponse = ''; Vue.set(state.routeCollection, idx, payload); }, + + ADD_FILTER(state, filter) { + const [k, v] = filter; + if (state.filter[k].includes(v)) { + const idx = state.filter[k].findIndex((elm) => elm === v); + state.filter[k].splice(idx, 1); + } else { + state.filter[k].push(v); + } + }, + + REINIT_FILTER(state) { + state.filter.routeVerb = []; + state.filter.status = []; + }, }, + // -------------------------------------------------------------------------------- + // ACTIONS + // -------------------------------------------------------------------------------- actions: { ADD_ROUTE({ commit }) { commit('ADD_ROUTE'); }, + UPDATE_ROUTE({ commit }, data) { commit('UPDATE_ROUTE', data); }, - DELETE_ROUTE({ commit }, idx) { - commit('DELETE_ROUTE', idx); + + DELETE_ROUTE({ commit }, id) { + commit('DELETE_ROUTE', id); }, + SET_COLLECTION_FROM_FILE({ commit }, data) { commit('SET_COLLECTION_FROM_FILE', data); }, - CLEAN_RESPONSE({ commit }, idx) { - commit('CLEAN_RESPONSE', idx); + + CLEAN_RESPONSE({ commit }, id) { + commit('CLEAN_RESPONSE', id); + }, + + ADD_FILTER({ commit }, filter) { + commit('ADD_FILTER', filter); + }, + + REINIT_FILTER({ commit }) { + commit('REINIT_FILTER'); }, }, };