feat: Implement reference resolving for cards that have a link in the title

lib/Model/CardDetails.php

@@ -7,10 +7,12 @@
 
 use OCA\Deck\Db\Board;
 use OCA\Deck\Db\Card;
+use OCP\Collaboration\Reference\Reference;
 
 class CardDetails extends Card {
 	private Card $card;
 	private ?Board $board;
+	private ?Reference $referenceData = null;
 
 	public function __construct(Card $card, ?Board $board = null) {
 		parent::__construct();
@@ -22,6 +24,10 @@ public function setBoard(?Board $board): void {
 		$this->board = $board;
 	}
 
+	public function setReferenceData(?Reference $data): void {
+		$this->referenceData = $data;
+	}
+
 	public function jsonSerialize(array $extras = []): array {
 		$array = parent::jsonSerialize();
 		$array['overdue'] = $this->getDueStatus();
@@ -37,6 +43,8 @@ public function jsonSerialize(array $extras = []): array {
 		$array['overdue'] = $this->getDueStatus();
 		$this->appendBoardDetails($array);
 
+		$array['referenceData'] = $this->referenceData?->jsonSerialize();
+
 		return $array;
 	}
 

lib/Service/CardService.php

@@ -28,6 +28,7 @@
 use OCA\Deck\Notification\NotificationHelper;
 use OCA\Deck\StatusException;
 use OCA\Deck\Validators\CardServiceValidator;
+use OCP\Collaboration\Reference\IReferenceManager;
 use OCP\Comments\ICommentsManager;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IRequest;
@@ -77,6 +78,7 @@ public function __construct(
 		LoggerInterface $logger,
 		IRequest $request,
 		CardServiceValidator $cardServiceValidator,
+		private IReferenceManager $referenceManager,
 		?string $userId
 	) {
 		$this->cardMapper = $cardMapper;
@@ -101,6 +103,10 @@ public function __construct(
 		$this->cardServiceValidator = $cardServiceValidator;
 	}
 
+	public function enrichCard($card) {
+		return $this->enrichCards([$card])[0];
+	}
+
 	public function enrichCards($cards) {
 		$user = $this->userManager->get($this->currentUser);
 
@@ -142,10 +148,20 @@ public function enrichCards($cards) {
 
 		return array_map(
 			function (Card $card): CardDetails {
-				return new CardDetails($card);
+				$referenceData = $this->referenceManager->resolveReference($card->getTitle());
+				$cardDetails = new CardDetails($card);
+				if ($referenceData) {
+					$cardDetails->setReferenceData($referenceData);
+				}
+				return $cardDetails;
 			},
 			$cards
 		);
+	}
+
+	private function applyReferenceData(CardDetails $cardDetails) {
+
+
 	}
 	public function fetchDeleted($boardId) {
 		$this->cardServiceValidator->check(compact('boardId'));
@@ -226,7 +242,7 @@ public function create($title, $stackId, $type, $order, $owner, $description = '
 		$this->changeHelper->cardChanged($card->getId(), false);
 		$this->eventDispatcher->dispatchTyped(new CardCreatedEvent($card));
 
-		return $card;
+		return $this->enrichCard($card);
 	}
 
 	/**

src/App.vue

@@ -6,12 +6,13 @@
 <template>
 	<NcContent app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<NcAppContent>
+		<NcAppContent :allow-swipe-navigation="false">
 			<router-view />
 		</NcAppContent>
 
 		<div v-if="$route.params.id || $route.params.cardId">
 			<NcModal v-if="cardDetailsInModal && $route.params.cardId"
+				:name="t('deck', 'Card details')"
 				:clear-view-delay="0"
 				:close-button-contained="true"
 				size="large"

src/CardSelector.vue

@@ -13,16 +13,16 @@
 				:disabled="loading"
 				label="title"
 				@option:selected="fetchCardsFromBoard">
-				<template slot="singleLabel" slot-scope="props">
+				<template #selected-option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
-				<template slot="option" slot-scope="props">
+				<template #option="props">
 					<span>
-						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-						<span>{{ props.option.title }}</span>
+						<span :style="{ 'backgroundColor': '#' + props.color }" class="board-bullet" />
+						<span>{{ props.title }}</span>
 					</span>
 				</template>
 			</NcSelect>

src/components/Controls.vue

@@ -544,7 +544,7 @@ export default {
 	.filter--item {
 		input + label {
 			display: block;
-			padding: 6px 0;
+			padding: var(--default-grid-baseline) 0;
 			.avatardiv {
 				vertical-align: middle;
 				margin-bottom: 2px;

src/components/board/Board.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="board-wrapper" :tabindex="-1">
+	<div class="board-wrapper" :tabindex="-1" @touchend="fixActionRestriction">
 		<Controls :board="board" />
 
 		<transition name="fade" mode="out-in">
@@ -22,23 +22,27 @@
 				<template #icon>
 					<DeckIcon />
 				</template>
-				<template #title>
+				<template #name>
 					{{ t('deck', 'No lists available') }}
 				</template>
 				<template v-if="canManage" #action>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
 					<form @submit.prevent="addNewStack()">
-						<input id="new-stack-input-main"
-							v-model="newStackTitle"
-							v-focus
-							type="text"
-							class="no-close"
+						<NcTextField ref="newStackInput"
+							:disable="loading"
+							:value.sync="newStackTitle"
 							:placeholder="t('deck', 'List name')"
-							required>
-						<input title="t('deck', 'Add list')"
-							class="icon-confirm"
-							type="submit"
-							value="">
+							type="text" />
+						<NcButton type="secondary"
+							native-type="submit"
+							:disabled="loading"
+							:title="t('deck', 'Add list')">
+							<template #icon>
+								<CheckIcon v-if="!loading" :size="20" />
+								<NcLoadingIcon v-else :size="20" />
+							</template>
+							{{ t('deck', 'Add list') }}
+						</NcButton>
 					</form>
 				</template>
 			</NcEmptyContent>
@@ -82,8 +86,9 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent, NcModal } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
@@ -99,6 +104,10 @@ export default {
 		Stack,
 		NcEmptyContent,
 		NcModal,
+		NcTextField,
+		NcButton,
+		NcLoadingIcon,
+		CheckIcon,
 		CardSidebar,
 	},
 	inject: [
@@ -131,7 +140,7 @@ export default {
 			'canManage',
 		]),
 		stacksByBoard() {
-			return this.$store.getters.stacksByBoard(this.board.id)
+			return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []
 		},
 		dragHandleSelector() {
 			return this.canEdit ? '.stack__title' : '.no-drag'
@@ -147,6 +156,11 @@ export default {
 		showArchived() {
 			this.fetchData()
 		},
+		isEmpty(newValue) {
+			newValue && this.$nextTick(() => {
+				this.$refs?.newStackInput?.focus()
+			})
+		},
 	},
 	created() {
 		this.session = createSession(this.id)
@@ -217,6 +231,13 @@ export default {
 			window.removeEventListener('mouseup', this.stopMouseDrag)
 			window.removeEventListener('mouseleave', this.stopMouseDrag)
 		},
+
+		fixActionRestriction() {
+			document.body.classList.remove(
+				'smooth-dnd-no-user-select',
+				'smooth-dnd-disable-touch-action',
+			)
+		},
 	},
 }
 </script>
@@ -229,13 +250,16 @@ export default {
 		text-align: center;
 		display: flex;
 		width: 100%;
-		max-width: 200px;
 		margin: auto;
-		margin-top: 20px;
+		margin-top: calc(var(--default-grid-baseline) * 4);
+		gap: var(--default-grid-baseline);
 
-		input[type=text] {
+		input[type="text"] {
 			flex-grow: 1;
 		}
+		button[type="submit"] {
+			flex-shrink: 0;
+		}
 	}
 
 	.board-wrapper {
@@ -278,7 +302,9 @@ export default {
 					flex-grow: 1;
 					display: flex;
 					flex-direction: column;
-					padding: $stack-spacing;
+					// Margin left instead of padidng to avoid jumps on dropping a card
+					margin-left: $stack-spacing;
+					padding-right: $stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding-top: 15px;