feat: Interactive deck board widget

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Provide relevant app state for widgets

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Adapt interactive widget

Signed-off-by: Julius Härtl <jus@bitgrid.net>

chore: fixup

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/Controls.vue

@@ -228,7 +228,7 @@
 					</NcActionButton>
 				</NcActions>
 				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
-				<NcActions>
+				<NcActions v-if="isFullApp">
 					<NcActionButton icon="icon-menu-sidebar"
 						:aria-label="t('deck', 'Open details')"
 						:name="t('deck', 'Details')"
@@ -306,6 +306,7 @@ export default {
 			'canManage',
 		]),
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			compactMode: state => state.compactMode,
 			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
@@ -412,6 +413,9 @@ export default {
 			this.showAddCardModal = false
 		},
 		setPageTitle(title) {
+			if (!this.isFullApp) {
+				return
+			}
 			if (this.defaultPageTitle === false) {
 				this.defaultPageTitle = window.document.title
 				if (this.defaultPageTitle.indexOf(' - Deck - ') !== -1) {

src/components/board/Board.vue

@@ -81,7 +81,16 @@
 				</Container>
 			</div>
 		</transition>
-		<GlobalSearchResults />
+		<GlobalSearchResults v-if="isFullApp" />
+		<NcModal v-if="localModal"
+			:clear-view-delay="0"
+			:close-button-contained="true"
+			size="large"
+			@close="localModal = null">
+			<div class="modal__content modal__card">
+				<CardSidebar :id="localModal" @close="localModal = null" />
+			</div>
+		</NcModal>
 	</div>
 </template>
 
@@ -91,11 +100,11 @@ import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
-
+import CardSidebar from '../card/CardSidebar.vue'
 export default {
 	name: 'Board',
 	components: {
@@ -106,6 +115,8 @@ export default {
 		Draggable,
 		Stack,
 		NcEmptyContent,
+		NcModal,
+		CardSidebar,
 	},
 	inject: [
 		'boardApi',
@@ -123,10 +134,12 @@ export default {
 			newStackTitle: '',
 			currentScrollPosX: null,
 			currentMousePosX: null,
+			localModal: null,
 		}
 	},
 	computed: {
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			board: state => state.currentBoard,
 			showArchived: state => state.showArchived,
 		}),
@@ -155,6 +168,9 @@ export default {
 	created() {
 		this.session = createSession(this.id)
 		this.fetchData()
+		this.$root.$on('open-card', (cardId) => {
+			this.localModal = cardId
+		})
 	},
 	beforeDestroy() {
 		this.session.close()

src/components/card/CardSidebar.vue

@@ -32,10 +32,10 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
+			<NcActionButton v-if="cardDetailsInModal && isFullApp" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
 			</NcActionButton>
-			<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
+			<NcActionButton v-else-if="isFullApp" icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
 			</NcActionButton>
 
@@ -144,6 +144,7 @@ export default {
 	},
 	computed: {
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			currentBoard: state => state.currentBoard,
 		}),
 		...mapGetters(['canEdit', 'assignables', 'cardActions', 'stackById']),
@@ -188,7 +189,8 @@ export default {
 		},
 
 		closeSidebar() {
-			this.$router.push({ name: 'board' })
+			this.$router?.push({ name: 'board' })
+			this.$emit('close')
 		},
 
 		showModal() {

src/components/cards/CardItem.vue

@@ -212,8 +212,14 @@ export default {
 			if (this.dragging) {
 			  return
 			}
-			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
-			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+			const boardId = this.card && this.card.boardId ? this.card.boardId : (this.$route?.params.id ?? this.currentBoard.id)
+
+			if (this.$router) {
+				this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+				return
+			}
+
+			this.$root.$emit('open-card', this.card.id)
 		},
 		onTitleBlur(e) {
 			// TODO Handle empty title