Store cardDetailsInModal in config instead of state

Signed-off-by: Dmitriy Ivanko <tmwsls12@gmail.com>

src/App.vue

@@ -88,7 +88,6 @@ export default {
 			navShown: state => state.navShown,
 			sidebarShownState: state => state.sidebarShown,
 			currentBoard: state => state.currentBoard,
-			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		// TODO: properly handle sidebar showing for route subview and board sidebar
 		sidebarRouterView() {
@@ -98,6 +97,14 @@ export default {
 		sidebarShown() {
 			return this.sidebarRouterView || this.sidebarShownState
 		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.config('cardDetailsInModal')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+			},
+		},
 	},
 	created() {
 		this.$store.dispatch('loadBoards')

src/components/board/Stack.vue

@@ -162,7 +162,6 @@ export default {
 		]),
 		...mapState({
 			showArchived: state => state.showArchived,
-			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		cardsByStack() {
 			return this.$store.getters.cardsByStack(this.stack.id).filter((card) => {
@@ -175,6 +174,14 @@ export default {
 		dragHandleSelector() {
 			return this.canEdit ? null : '.no-drag'
 		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.config('cardDetailsInModal')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+			},
+		},
 	},
 
 	methods: {

src/components/card/CardSidebar.vue

@@ -31,7 +31,7 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="showModal()">
+			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
 			</ActionButton>
 			<ActionButton v-else icon="icon-external" @click.stop="showModal()">
@@ -131,7 +131,6 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit', 'assignables', 'cardActions', 'stackById']),
 		title() {
@@ -152,6 +151,14 @@ export default {
 				link: window.location.protocol + '//' + window.location.host + generateUrl('/apps/deck/') + `#/board/${this.currentBoard.id}/card/${this.currentCard.id}`,
 			}
 		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.config('cardDetailsInModal')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+			},
+		},
 	},
 	methods: {
 		handleUpdateTitleEditable(value) {
@@ -177,7 +184,10 @@ export default {
 		},
 
 		showModal() {
-			this.$store.dispatch('setCardDetailsInModal', true)
+			this.$store.dispatch('setConfig', { cardDetailsInModal: true })
+		},
+		closeModal() {
+			this.$store.dispatch('setConfig', { cardDetailsInModal: false })
 		},
 	},
 }

src/components/card/CardSidebarTabDetails.vue

@@ -224,7 +224,6 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit', 'assignables']),
 		formatedAssignables() {
@@ -250,6 +249,14 @@ export default {
 				return assignable
 			})
 		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.config('cardDetailsInModal')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+			},
+		},
 		duedate: {
 			get() {
 				return this.card.duedate ? new Date(this.card.duedate) : null

src/components/card/Description.vue

@@ -132,7 +132,6 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		...mapGetters(['canEdit']),
 		attachments() {

src/components/navigation/AppNavigation.vue

@@ -144,10 +144,10 @@ export default {
 		},
 		cardDetailsInModal: {
 			get() {
-				return this.$store.getters.cardDetailsInModal
+				return this.$store.getters.config('cardDetailsInModal')
 			},
 			set(newValue) {
-				this.$store.dispatch('setCardDetailsInModal', newValue)
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
 		configCalendar: {

src/store/main.js

@@ -62,7 +62,6 @@ export default new Vuex.Store({
 		showArchived: false,
 		navShown: localStorage.getItem('deck.navShown') === 'true',
 		compactMode: localStorage.getItem('deck.compactMode') === 'true',
-		cardDetailsInModal: localStorage.getItem('deck.cardDetailsInModal') === 'true',
 		sidebarShown: false,
 		currentBoard: null,
 		currentCard: null,
@@ -79,9 +78,6 @@ export default new Vuex.Store({
 		config: state => (key) => {
 			return state.config[key]
 		},
-		cardDetailsInModal: state => {
-			return state.cardDetailsInModal
-		},
 		getSearchQuery: state => {
 			return state.searchQuery
 		},
@@ -233,10 +229,6 @@ export default new Vuex.Store({
 			state.compactMode = !state.compactMode
 			localStorage.setItem('deck.compactMode', state.compactMode)
 		},
-		setCardDetailsInModal(state) {
-			state.cardDetailsInModal = !state.cardDetailsInModal
-			localStorage.setItem('deck.cardDetailsInModal', state.cardDetailsInModal)
-		},
 		setBoards(state, boards) {
 			state.boards = boards
 		},
@@ -441,9 +433,6 @@ export default new Vuex.Store({
 		toggleCompactMode({ commit }) {
 			commit('toggleCompactMode')
 		},
-		setCardDetailsInModal({ commit }, show) {
-			commit('setCardDetailsInModal', show)
-		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
 		},