Merge pull request #3429 from Themanwhosmellslikesugar/rework/store-card-details-in-modal

docs/API.md

@@ -1004,6 +1004,7 @@ Deck stores user and app configuration values globally and per board. The GET en
 | Config key | Description |
 | --- | --- |
 | calendar | Determines if the calendar/tasks integration through the CalDAV backend is enabled for the user (boolean) | 
+| cardDetailsInModal | Determines if the bigger view is used (boolean) | 
 | groupLimit | Determines if creating new boards is limited to certain groups of the instance. The resulting output is an array of group objects with the id and the displayname (Admin only)|  
 
 ```
@@ -1016,6 +1017,7 @@ Deck stores user and app configuration values globally and per board. The GET en
     },
     "data": {
       "calendar": true,
+      "cardDetailsInModal": true,
       "groupLimit": [
         {
           "id": "admin",
@@ -1045,6 +1047,7 @@ Deck stores user and app configuration values globally and per board. The GET en
 | --- | ----- |
 | notify-due | `off`, `assigned` or `all` |
 | calendar | Boolean |
+| cardDetailsInModal | Boolean |
  
 #### Example request
 

lib/Service/ConfigService.php

@@ -66,7 +66,8 @@ class ConfigService {
 		}
 
 		$data = [
-			'calendar' => $this->isCalendarEnabled()
+			'calendar' => $this->isCalendarEnabled(),
+			'cardDetailsInModal' => $this->isCardDetailsInModal(),
 		];
 		if ($this->groupManager->isAdmin($this->getUserId())) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -88,6 +89,11 @@ class ConfigService {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'calendar', true);
+			case 'cardDetailsInModal':
+			  if ($this->getUserId() === null) {
+			  	return false;
+			  }
+				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardDetailsInModal', true);
 		}
 	}
 
@@ -104,6 +110,19 @@ class ConfigService {
 		return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'board:' . $boardId . ':calendar', $defaultState);
 	}
 
+	public function isCardDetailsInModal(int $boardId = null): bool {
+		if ($this->getUserId() === null) {
+			return false;
+		}
+
+		$defaultState = (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardDetailsInModal', true);
+		if ($boardId === null) {
+			return $defaultState;
+		}
+
+		return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'board:' . $boardId . ':cardDetailsInModal', $defaultState);
+	}
+
 	public function set($key, $value) {
 		if ($this->getUserId() === null) {
 			throw new NoPermissionException('Must be logged in to set user config');
@@ -122,6 +141,10 @@ class ConfigService {
 				$this->config->setUserValue($this->getUserId(), Application::APP_ID, 'calendar', (string)$value);
 				$result = $value;
 				break;
+			case 'cardDetailsInModal':
+				$this->config->setUserValue($this->getUserId(), Application::APP_ID, 'cardDetailsInModal', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				[$boardId, $boardConfigKey] = explode(':', $key);
 				if ($boardConfigKey === 'notify-due' && !in_array($value, [self::SETTING_BOARD_NOTIFICATION_DUE_ALL, self::SETTING_BOARD_NOTIFICATION_DUE_ASSIGNED, self::SETTING_BOARD_NOTIFICATION_DUE_OFF], true)) {

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)
 		},