[OP#48106] link previews UI implementation

lib/Reference/WorkPackageReferenceProvider.php

@@ -151,7 +151,7 @@ public function resolveReference(string $referenceText): ?IReference {
 				// this is the data you will get in your custom reference widget
 				$reference->setRichObject(
 					self::RICH_OBJECT_TYPE,
-					$wpInfo
+					$wpInfo['entry']
 				);
 				return $reference;
 			}

lib/Service/OpenProjectAPIService.php

@@ -1155,6 +1155,7 @@ public function getWorkPackageInfo(string $userId, int $wpId): array {
 		$result['title'] = $this->getSubline($searchResult[0]);
 		$result['description'] = $this->getMainText($searchResult[0]);
 		$result['imageUrl'] = $this->getOpenProjectUserAvatarUrl($searchResult[0]);
+		$result['entry'] = $searchResult[0];
 		return $result;
 	}
 

src/components/PersonalSettings.vue

@@ -72,11 +72,6 @@ export default {
 		},
 	},
 	watch: {
-		'state.notification_enabled'(newVal) {
-			this.saveOptions({
-				notification_enabled: newVal ? '1' : '0',
-			})
-		},
 		'state.search_enabled'(newVal) {
 			this.saveOptions({
 				search_enabled: newVal ? '1' : '0',

src/utils/workpackageHelper.js

@@ -27,7 +27,7 @@ export const workpackageHelper = {
 			? href.replace(/.*\//, '')
 			: null
 	},
-	async getAdditionalMetaData(workPackage) {
+	async getAdditionalMetaData(workPackage, linkableWorkpackage = false) {
 		if (typeof workPackage._links.status.href !== 'string'
 			|| workPackage._links.status.href === ''
 			|| typeof workPackage._links.type.href !== 'string'
@@ -41,11 +41,14 @@ export const workpackageHelper = {
 			|| workPackage._links.status.title === ''
 			|| typeof workPackage._links.type.title !== 'string'
 			|| workPackage._links.type.title === ''
-			|| typeof workPackage.fileId !== 'number'
-			|| workPackage.fileId <= 0
 		) {
 			throw new Error('missing data in workpackage object')
 		}
+
+		if (linkableWorkpackage && typeof workPackage.fileId !== 'number' && workPackage.fileId <= 0) {
+			throw new Error('missing data in workpackage object')
+		}
+
 		const statusId = this.replaceHrefToGetId(workPackage._links.status.href)
 		const typeId = this.replaceHrefToGetId(workPackage._links.type.href)
 		const userId = this.replaceHrefToGetId(workPackage._links.assignee.href)

src/views/ProjectsTab.vue

@@ -252,7 +252,7 @@ export default {
 							// and came back to a file that was selected before and so work-packages are already
 							// in the list. In that case don't even try to fetch all the additional meta data
 							if (!this.workpackageAlreadyInList(workPackage)) {
-								workPackage = await workpackageHelper.getAdditionalMetaData(workPackage)
+								workPackage = await workpackageHelper.getAdditionalMetaData(workPackage, true)
 								// check again, the WP might have been added by an outstanding request
 								// from another file or the file might have changed while fetching metadata
 								if (

src/views/WorkPackageReferenceWidget.vue

@@ -31,23 +31,26 @@
 				{{ t('integration_openproject', 'OpenProject settings') }}
 			</a>
 		</div>
-		<div v-else class="work-package-wrapper">
-			{{ richObject.title }}
-		</div>
+		<WorkPackage :id="'workpackage-'+ richObject.id"
+			class="work-package-reference__link-preview"
+			:workpackage="workpackage" />
 	</div>
 </template>
 
 <script>
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import { generateUrl } from '@nextcloud/router'
+import WorkPackage from '../components/tab/WorkPackage.vue'
+import { workpackageHelper } from '../utils/workpackageHelper.js'
 
 export default {
 	name: 'WorkPackageReferenceWidget',
 
 	components: {
 		OpenInNewIcon,
 		CloseIcon,
+		WorkPackage,
 	},
 
 	props: {
@@ -68,6 +71,7 @@ export default {
 	data() {
 		return {
 			settingsUrl: generateUrl('/settings/user/openproject'),
+			workpackage: null,
 		}
 	},
 
@@ -77,7 +81,14 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.processWorkpackages()
+	},
+
 	methods: {
+		async processWorkpackages() {
+			this.workpackage = await workpackageHelper.getAdditionalMetaData(this.richObject)
+		},
 	},
 }
 </script>
@@ -86,7 +97,9 @@ export default {
 .work-package-reference {
 	width: 100%;
 	white-space: normal;
-	padding: 12px;
+	&__link-preview {
+		border-bottom: none;
+	}
 
 	a {
 		padding: 0 !important;
@@ -104,13 +117,6 @@ export default {
 		}
 	}
 
-	.work-package-wrapper {
-		width: 100%;
-		display: flex;
-		align-items: start;
-
-	}
-
 	.settings-link {
 		display: flex;
 		align-items: center;