From f347b525a7a49ef7eece2b2398d65e025bc7acca Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Tue, 23 Nov 2021 17:23:59 +0100
Subject: [PATCH] use vuex
---
package-lock.json | 17 ++++++++++++++++-
package.json | 3 ++-
src/components/Autocomplete.vue | 10 +++++-----
src/components/Menu.vue | 27 +++++++++++++--------------
src/main.js | 27 +++++++++++++++++++++++++++
5 files changed, 63 insertions(+), 21 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index bc860886..6c34910c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
"vue-material-design-icons": "^4.11.0",
"vue-plausible": "^1.1.4",
"vue-router": "^3.5.1",
- "vuetify": "^2.5.8"
+ "vuetify": "^2.5.8",
+ "vuex": "^3.6.2"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
@@ -15058,6 +15059,14 @@
"url": "https://opencollective.com/webpack"
}
},
+ "node_modules/vuex": {
+ "version": "3.6.2",
+ "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+ "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+ "peerDependencies": {
+ "vue": "^2.0.0"
+ }
+ },
"node_modules/watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -27981,6 +27990,12 @@
}
}
},
+ "vuex": {
+ "version": "3.6.2",
+ "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+ "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+ "requires": {}
+ },
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index 0b6d0675..a6c30f88 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
"vue-material-design-icons": "^4.11.0",
"vue-plausible": "^1.1.4",
"vue-router": "^3.5.1",
- "vuetify": "^2.5.8"
+ "vuetify": "^2.5.8",
+ "vuex": "^3.6.2"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 755e64c1..40fb8d15 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -27,8 +27,8 @@
:dense="$vuetify.breakpoint.smAndDown"
>
<template v-slot:append>
- <v-divider vertical v-if="!$parent.settings.show_radio_buttons"/>
- <v-menu allowOverflow: true v-if="!$parent.settings.show_radio_buttons">
+ <v-divider vertical/>
+ <v-menu allowOverflow: true>
<template v-slot:activator="{ on, attrs }">
<v-btn min-width="0px" v-bind="attrs" v-on="on" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{{"bm,nn":"begge ordbøkene", "bm": "bokmålsordboka (bm)", "nn":"nynorskordboka (nn)"}[$parent.lang]}}</span><v-icon>expand_more</v-icon></v-btn>
</template>
@@ -40,8 +40,8 @@
</v-list>
</v-menu>
- <v-divider vertical v-if="$parent.settings.show_pos_select"/>
- <v-menu allowOverflow: true v-if="$parent.settings.show_pos_select">
+ <v-divider vertical v-if="$store.state.showSearchToolbar"/>
+ <v-menu allowOverflow: true v-if="$store.state.showSearchToolbar">
<template v-slot:activator="{ on, attrs }">
<v-btn min-width="0px" plain depressed v-bind="attrs" v-on="on" color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp">{{$parent.pos_selected.label}}</span><v-icon>expand_more</v-icon></v-btn>
</template>
@@ -51,7 +51,7 @@
</v-list-item>
</v-list>
</v-menu><v-divider vertical/>
- <v-dialog max-width="800px" v-model="settings_dialog" hide-overlay fullscreen
+ <v-dialog max-width="800px" v-model="settings_dialog" hide-overlay
:close-on-content-click="false" origin="bottom" >
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" min-width="0px" class = "search-field-button" plain depressed color = "primary" text><span v-if="$vuetify.breakpoint.mdAndUp"></span><v-icon>more_vert</v-icon></v-btn>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index b5532c2b..3a447e32 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -22,19 +22,9 @@
<v-container><v-row><v-col>
<v-checkbox
- v-model="$parent.$parent.settings.show_pos_select"
+ v-model="toggleSearchToolbar"
label="Vis valg av ordklasse"
hide-details
- ></v-checkbox>
- <v-checkbox
- v-model="$parent.$parent.settings.fulltext_search"
- label="Fritekstsøk"
- hide-details
- ></v-checkbox>
- <v-checkbox
- v-model="$parent.$parent.settings.show_radio_buttons"
- label="Vis radioknapper"
- hide-details
></v-checkbox>
</v-col> </v-row>
</v-container>
@@ -43,11 +33,20 @@
<script>
-
export default {
name: "Menu",
- mounted: function() {
- console.log(this.$parent.$parent.settings)
+ computed: {
+ toggleSearchToolbar: {
+ get () {
+ return this.$store.state.showSearchToolbar
+ },
+ set (value) {
+ this.$store.commit("toggleSearchToolbar")
+ }
+ }
}
+
+
+
}
</script>
diff --git a/src/main.js b/src/main.js
index 48eebe4c..cdeffcd9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,9 +6,11 @@ import DictionaryView from './components/DictionaryView.vue'
import VueRouter from 'vue-router'
import { VuePlausible } from 'vue-plausible'
import vuetify from './plugins/vuetify'
+import Vuex from 'vuex'
Vue.config.productionTip = false
+Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(VuePlausible, {
domain: 'beta.ordbok.uib.no'
@@ -16,6 +18,27 @@ Vue.use(VuePlausible, {
Vue.$plausible.enableAutoPageviews()
+const store = new Vuex.Store({
+ strict: true,
+ state: {
+ showRadioButtons: null,
+ showSearchToolbar: null,
+ locale: null
+ },
+ mutations: {
+ initStore(state) {
+ state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
+ state.showRadioButtons = localStorage.getItem('showRadioButtons') || false
+
+ },
+ toggleSearchToolbar(state) {
+ let value = !state.showSearchToolbar
+ state.showSearchToolbar = value
+ localStorage.setItem("showSearchToolbar", value);
+ }
+ }
+})
+
const router = new VueRouter({
mode: 'history',
base: __dirname,
@@ -79,5 +102,9 @@ const router = new VueRouter({
new Vue({
router,
vuetify,
+ store,
+ beforeCreate() {
+ this.$store.commit('initStore');
+ },
render: h => h(Root )
}).$mount('#app')
--
GitLab