From 8c1d721640d282efc81a94133cb47290a0857346 Mon Sep 17 00:00:00 2001 From: Erastus Amunwe Date: Mon, 26 Oct 2020 23:06:57 +0200 Subject: [PATCH 1/5] replaced vuex 3 with vuex 4 --- package-lock.json | 5 +++++ package.json | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 631146a..d8873eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13657,6 +13657,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vuex": { + "version": "4.0.0-beta.4", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-beta.4.tgz", + "integrity": "sha512-/+4E1dokq5cwbl4mohOqOj8h0vOLOWmLSqlqTf++bfmN9/JKWtwYfsBrzlK0sYrNfuYcpQeX0BVxQHoHXDfYZQ==" + }, "watchpack": { "version": "1.7.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz", diff --git a/package.json b/package.json index 33a844a..5bf65c0 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "core-js": "^3.6.5", "lodash": "^4.17.20", "uikit": "^3.5.9", - "vue": "^3.0.0" + "vue": "^3.0.0", + "vuex": "^4.0.0-beta.4" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", From 9e487fac4da96d611e0ae68c409c281f0df9c84c Mon Sep 17 00:00:00 2001 From: Erastus Amunwe Date: Mon, 26 Oct 2020 23:07:25 +0200 Subject: [PATCH 2/5] created store --- src/store.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/store.js diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..1dcb3ce --- /dev/null +++ b/src/store.js @@ -0,0 +1,35 @@ +import { createStore } from 'vuex' + +export const store = createStore({ + state: { + settings: { + savedTr: [] + }, + search: '', + }, + mutations: { + add_translation (state,translation ) { + state.settings.savedTr.push(translation) + }, + remove_translation (state,abbr ) { + state.settings.savedTr = state.settings.savedTr.filter(tr => tr.abbreviation !==abbr) + + }, + add_search(state, search){ + state.search = search + } + }, + actions:{ + add({commit}, tr){ + commit('add_translation', tr); + }, + remove({commit}, abbr){ + commit('remove_translation', abbr); + }, + add_s({commit}, sr){ + commit('add_search', sr); + }, + } +}) + +// export default store; \ No newline at end of file From b000c343000533289a3fd7c7197fe8380ab35406 Mon Sep 17 00:00:00 2001 From: Erastus Amunwe Date: Mon, 26 Oct 2020 23:07:59 +0200 Subject: [PATCH 3/5] register store as a global plugin --- src/main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 01433bc..5c5f5c9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,7 @@ import { createApp } from 'vue' import App from './App.vue' +import {store} from './store' -createApp(App).mount('#app') +const app = createApp(App) +app.use(store) +app.mount('#app') \ No newline at end of file From e8f2ebc2a3b8bf397702138ec88b4df9f7749b8e Mon Sep 17 00:00:00 2001 From: Erastus Amunwe Date: Mon, 26 Oct 2020 23:08:45 +0200 Subject: [PATCH 4/5] and interaction with store --- src/components/NavBar.vue | 46 ++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index df1f55e..3ae0fd1 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -29,15 +29,17 @@
  • {{savedTranslations[tr]["language"]?`(${savedTranslations[tr]["language"]})`:null}} {{savedTranslations[tr]['translation']}} + >
    {{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}} + {{" "}}
    • +
  • No saved translation
    • -
  • +
  • Add
    - +
    - +
@@ -71,23 +73,33 @@ export default { data: () => { return { + translation: 'Add Translation...', translations: {}, } }, computed: { savedTranslations() { - let o = {} - let counter = 0 - for(const tr in this.translations){ - if(counter>2) - break; - o = {...o, [tr]:this.translations[tr]} - counter +=1 - // Object.assign({}, o,{[tr]: this.translations[tr]}) - } - console.log(o); - return o + // let o = {} + // let counter = 0 + // for(const tr in this.translations){ + // if(counter>2) + // break; + // o = {...o, [tr]:this.translations[tr]} + // counter +=1 + // // Object.assign({}, o,{[tr]: this.translations[tr]}) + // } + // console.log(o); + return this.$store.state.settings.savedTr; + } + }, + methods: { + add(tr){ + if(!tr) return; + this.$store.dispatch('add', tr) + }, + remove(tr){ + this.$store.dispatch('remove', tr) } }, async created(){ From f732407a4b402b5a6c5eb0964f146afda11b0fba Mon Sep 17 00:00:00 2001 From: Erastus Amunwe Date: Mon, 26 Oct 2020 23:09:28 +0200 Subject: [PATCH 5/5] added disabled css class --- src/App.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.vue b/src/App.vue index 4e3ae55..7db952a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -37,4 +37,11 @@ export default { color: #2c3e50; // margin-top: 60px; } +.disabled { + cursor: not-allowed; + color: gray +} +.disabled:hover { + color:gray +}