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
+			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

src/init-reference.js

@@ -20,34 +20,39 @@
  */
 
 import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
-
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import './shared-init.js'
 
-const prepareVue = (Vue) => {
+const prepareVue = async (Component = null) => {
+	const { default: Vue } = await import('vue')
+	const { default: ClickOutside } = await import('vue-click-outside')
+
 	Vue.prototype.t = translate
 	Vue.prototype.n = translatePlural
 	Vue.prototype.OC = window.OC
 	Vue.prototype.OCA = window.OCA
+	Vue.directive('click-outside', ClickOutside)
 	Vue.directive('focus', {
 		inserted(el) {
 			el.focus()
 		},
 	})
+	if (!Component) {
+		return Vue
+	}
+
+	return Vue.extend(Component)
 }
 
 registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import('vue')
-	prepareVue(Vue)
 	const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
+	const Widget = await prepareVue(CardReferenceWidget)
 	// trick to change the wrapper element size, otherwise it always is 100%
 	// which is not very nice with a simple card
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
-
-	const Widget = Vue.extend(CardReferenceWidget)
 	new Widget({
 		propsData: {
 			richObjectType,
@@ -57,34 +62,33 @@ registerWidget('deck-card', async (el, { richObjectType, richObject, accessible
 	}).$mount(el)
 })
 
-registerWidget('deck-board', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import('vue')
-	prepareVue(Vue)
+const boardWidgets = {}
+registerWidget('deck-board', async (el, { richObjectType, richObject, accessible, interactive }) => {
 	const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
-	el.parentNode.style['max-width'] = '400px'
-	el.parentNode.style['margin-left'] = '0'
-	el.parentNode.style['margin-right'] = '0'
-
-	const Widget = Vue.extend(BoardReferenceWidget)
-	new Widget({
+	const Widget = await prepareVue(BoardReferenceWidget)
+	boardWidgets[el] = new Widget({
 		propsData: {
 			richObjectType,
 			richObject,
 			accessible,
+			interactive,
 		},
 	}).$mount(el)
+}, (el) => {
+	boardWidgets[el].$destroy()
+	delete boardWidgets[el]
+}, {
+	fullWidth: true,
 })
 
 registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import('vue')
-	prepareVue(Vue)
 	const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
+	const Widget = await prepareVue(CommentReferenceWidget)
 
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 
-	const Widget = Vue.extend(CommentReferenceWidget)
 	new Widget({
 		propsData: {
 			richObjectType,
@@ -95,10 +99,8 @@ registerWidget('deck-comment', async (el, { richObjectType, richObject, accessib
 })
 
 registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
-	const { default: Vue } = await import('vue')
-	Vue.mixin({ methods: { t, n } })
 	const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
-	const Element = Vue.extend(CreateNewCardCustomPicker)
+	const Element = await prepareVue(CreateNewCardCustomPicker)
 	const vueElement = new Element({
 		propsData: {
 			providerId,

src/store/main.js

@@ -58,6 +58,7 @@ export default new Vuex.Store({
 	},
 	strict: debug,
 	state: {
+		isFullApp: true,
 		config: loadState('deck', 'config', {}),
 		showArchived: false,
 		navShown: localStorage.getItem('deck.navShown') === null || localStorage.getItem('deck.navShown') === 'true',
@@ -78,6 +79,10 @@ export default new Vuex.Store({
 	},
 	getters: {
 		config: state => (key) => {
+			if (!state.isFullApp && key === 'cardDetailsInModal') {
+				return true
+			}
+
 			return state.config[key]
 		},
 		getSearchQuery: state => {
@@ -140,6 +145,9 @@ export default new Vuex.Store({
 		},
 	},
 	mutations: {
+		setFullApp(state, isFullApp) {
+			Vue.set(state, 'isFullApp', isFullApp)
+		},
 		SET_CONFIG(state, { key, value }) {
 			const [scope, id, configKey] = key.split(':', 3)
 			let indexExisting = -1
@@ -313,6 +321,9 @@ export default new Vuex.Store({
 		},
 	},
 	actions: {
+		setFullApp({ commit }, isFullApp) {
+			commit('setFullApp', isFullApp)
+		},
 		async setConfig({ commit }, config) {
 			for (const key in config) {
 				try {

src/views/BoardReferenceWidget.vue

@@ -20,7 +20,10 @@
   -->
 
 <template>
-	<div class="deck-board-reference">
+	<div v-if="interactive" class="deck-board-reference-interactive">
+		<Board :id="board.id" />
+	</div>
+	<div v-else class="deck-board-reference">
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
 			<strong>
@@ -41,19 +44,33 @@
 </template>
 
 <script>
+import Board from '../components/board/Board.vue'
 import DeckIcon from '../components/icons/DeckIcon.vue'
+import { BoardApi } from './../services/BoardApi.js'
+import store from './../store/main.js'
 
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 
+const boardApi = new BoardApi()
+
 export default {
 	name: 'BoardReferenceWidget',
 
+	store,
+
 	components: {
 		DeckIcon,
 		NcUserBubble,
+		Board,
+	},
+
+	provide() {
+		return {
+			boardApi,
+		}
 	},
 
 	props: {
@@ -69,6 +86,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		interactive: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -92,8 +113,10 @@ export default {
 		},
 	},
 
-	methods: {
+	created() {
+		this.$store.commit('setFullApp', false)
 	},
+
 }
 </script>
 
@@ -123,6 +146,22 @@ export default {
 			margin-right: 8px;
 		}
 	}
+}
 
+.deck-board-reference-interactive {
+	width: 100%;
+	height: 100%;
+	min-height: min(200px, 100vh);
+	&:deep(.controls) {
+		padding-left: 12px;
+	}
+	&:deep(.board) {
+		padding-left: 0;
+	}
+	&:deep(*) {
+		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+		box-sizing: border-box;         /* Opera/IE 8+ */
+	}
 }
 </style>