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

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

fix: Enrich on update

Signed-off-by: Julius Knorr <jus@bitgrid.net>

fix: Enrich on create

Signed-off-by: Julius Knorr <jus@bitgrid.net>

src/components/cards/CardCover.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
+	<div v-if="referencePreview" class="card-cover">
+		<div class="image-wrapper rounded-left rounded-right" :style="{ backgroundImage: `url(${referencePreview})`}" />
+	</div>
+	<div v-else-if="cardId && ( attachments.length > 0 )" class="card-cover">
 		<div v-for="(attachment, index) in attachments"
 			:key="attachment.id"
 			:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
@@ -43,6 +46,12 @@ export default {
 				attachment.extendedData.fileid ? generateUrl(`/core/preview?fileId=${attachment.extendedData.fileid}&x=${x}&y=${y}&a=1`) : null
 			)
 		},
+		card() {
+			return this.$store.getters.cardById(this.cardId)
+		},
+		referencePreview() {
+			return this.card?.referenceData?.richObject?.thumb
+		},
 	},
 	watch: {
 		cardId: {

src/components/cards/CardItem.vue

@@ -20,7 +20,7 @@
 			<CardCover v-if="showCardCover" :card-id="card.id" />
 			<div class="card-upper">
 				<h4 v-if="inlineEditingBlocked" dir="auto">
-					{{ card.title }}
+					{{ displayTitle }}
 				</h4>
 				<h4 v-else
 					dir="auto"
@@ -133,11 +133,15 @@ export default {
 			return board ? !board.archived && board.permissions.PERMISSION_EDIT : false
 		},
 		inlineEditingBlocked() {
-			return this.isArchived || this.showArchived || !this.canEdit || this.standalone
+			return this.card.referenceData || this.isArchived || this.showArchived || !this.canEdit || this.standalone
 		},
 		card() {
 			return this.item ? this.item : this.$store.getters.cardById(this.id)
 		},
+		displayTitle() {
+			const reference = this.card.referenceData
+			return reference ? reference.openGraphObject.name : this.card.title
+		},
 		currentCard() {
 			return this.card && this.$route && this.$route.params.cardId === this.card.id
 		},

src/components/cards/CardMenu.vue

@@ -5,23 +5,35 @@
 
 <template>
 	<div v-if="card" class="card-menu" @click.stop.prevent>
+		<NcButton v-if="card.referenceData" type="tertiary" @click="openLink">
+			<template #icon>
+				<LinkIcon :size="20" />
+			</template>
+		</NcButton>
 		<NcActions>
 			<CardMenuEntries :card="card" />
 		</NcActions>
 	</div>
 </template>
 <script>
-import { NcActions } from '@nextcloud/vue'
+import { NcActions, NcButton } from '@nextcloud/vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
 import CardMenuEntries from './CardMenuEntries.vue'
 
 export default {
 	name: 'CardMenu',
-	components: { NcActions, CardMenuEntries },
+	components: { NcActions, NcButton, LinkIcon, CardMenuEntries },
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
 	},
+	methods: {
+		openLink() {
+			window.open(this.card?.referenceData?.openGraphObject?.link)
+			return false
+		},
+	},
 }
 </script>