Merge branch 'main' of github.com:getbible/app into main

Please enter a commit message to explain why this merge is necessary,

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",

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",

src/App.vue

@@ -37,4 +37,11 @@ export default {
   color: #2c3e50;
   // margin-top: 60px;
 }
+.disabled {
+  cursor: not-allowed;
+  color: gray
+}
+.disabled:hover {
+  color:gray 
+}
 </style>

src/components/NavBar.vue

@@ -74,15 +74,17 @@
                               <div>
                                     <ul class="uk-list uk-list-large uk-list-divider">
                                         <li
-                                        v-for="(tr,i) in Object.keys(savedTranslations)" 
+                                        v-for="(tr,i) in savedTranslations" 
                                         :key="i"
-                                        ><div><span>{{savedTranslations[tr]["language"]?`(${savedTranslations[tr]["language"]})`:null}} {{savedTranslations[tr]['translation']}}</span> <a class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
+                                        ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
+                                        {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
                                         </div> </li> 
+                                        <li v-if="!savedTranslations.length">No saved translation</li>
                                         
-                                        <li>
+                                        <li>Add
                                             <div uk-form-custom="target: > * > span:first-child">
-                                <select>
-                                    <option value="">Add Translation...</option>
+                                <select v-model="translation">
+                                    <option selected value="Add Translation...">Add Translation...</option>
                                     <option 
                                     v-for="(tr,i) in Object.keys(translations)" 
                                     :key="i"
@@ -95,7 +97,7 @@
                                     <span uk-icon="icon: chevron-down"></span>
                                 </button>
                             </div>
-                            <a><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
+                            <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
                                         </li>
                                     </ul>
                                     
@@ -116,23 +118,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(){

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')

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;