fix(files_sharing): Add missing "note to recipient"

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

3 files changed, 119 insertions, 2 deletions

diff --git a/apps/files_sharing/src/files_headers/noteToRecipient.ts b/apps/files_sharing/src/files_headers/noteToRecipient.ts
new file mode 100644
index 00000000000..31e383d3634
--- /dev/null
+++ b/apps/files_sharing/src/files_headers/noteToRecipient.ts
@@ -0,0 +1,38 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import type { ComponentPublicInstance, VueConstructor } from 'vue'
+
+import { Folder, Header, registerFileListHeaders } from '@nextcloud/files'
+import Vue from 'vue'
+
+type IFilesHeaderNoteToRecipient = ComponentPublicInstance & { updateFolder: (folder: Folder) => void }
+
+/**
+ * Register the  "note to recipient" as a files list header
+ */
+export default function registerNoteToRecipient() {
+	let FilesHeaderNoteToRecipient: VueConstructor
+	let instance: IFilesHeaderNoteToRecipient
+
+	registerFileListHeaders(new Header({
+		id: 'note-to-recipient',
+		order: 0,
+		// Always if there is a note
+		enabled: (folder: Folder) => Boolean(folder.attributes.note),
+		// Update the root folder if needed
+		updated: (folder: Folder) => {
+			instance.updateFolder(folder)
+		},
+		// render simply spawns the component
+		render: async (el: HTMLElement, folder: Folder) => {
+			if (FilesHeaderNoteToRecipient === undefined) {
+				const { default: component } = await import('../views/FilesHeaderNoteToRecipient.vue')
+				FilesHeaderNoteToRecipient = Vue.extend(component)
+			}
+			instance = new FilesHeaderNoteToRecipient().$mount(el) as unknown as IFilesHeaderNoteToRecipient
+			instance.updateFolder(folder)
+		},
+	}))
+}
diff --git a/apps/files_sharing/src/init.ts b/apps/files_sharing/src/init.ts
index 26e664324a8..36f0a7c31a1 100644
--- a/apps/files_sharing/src/init.ts
+++ b/apps/files_sharing/src/init.ts
@@ -3,23 +3,29 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { addNewFileMenuEntry, registerDavProperty } from '@nextcloud/files'
+import { registerAccountFilter } from './filters/AccountFilter'
+import { entry as newFileRequest } from './new/newFileRequest.ts'
+
+import registerNoteToRecipient from './files_headers/noteToRecipient'
 import registerSharingViews from './views/shares'
 
-import { entry as newFileRequest } from './new/newFileRequest'
 import './actions/acceptShareAction'
 import './actions/openInFilesAction'
 import './actions/rejectShareAction'
 import './actions/restoreShareAction'
 import './actions/sharingStatusAction'
-import { registerAccountFilter } from './filters/AccountFilter'
 
 registerSharingViews()
 
 addNewFileMenuEntry(newFileRequest)
 
+registerDavProperty('nc:note', { nc: 'http://nextcloud.org/ns' })
 registerDavProperty('nc:sharees', { nc: 'http://nextcloud.org/ns' })
 registerDavProperty('nc:share-attributes', { nc: 'http://nextcloud.org/ns' })
 registerDavProperty('oc:share-types', { oc: 'http://owncloud.org/ns' })
 registerDavProperty('ocs:share-permissions', { ocs: 'http://open-collaboration-services.org/ns' })
 
 registerAccountFilter()
+
+// Add "note to recipient" message
+registerNoteToRecipient()
diff --git a/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue b/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue
new file mode 100644
index 00000000000..bb71f0455a2
--- /dev/null
+++ b/apps/files_sharing/src/views/FilesHeaderNoteToRecipient.vue
@@ -0,0 +1,73 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcNoteCard v-if="note.length > 0"
+		class="note-to-recipient"
+		type="info">
+		<p v-if="user" class="note-to-recipient__heading">
+			{{ t('files_sharing', 'Note from') }}
+			<NcUserBubble :user="user.id" :display-name="user.displayName" />
+		</p>
+		<p v-else class="note-to-recipient__heading">
+			{{ t('files_sharing', 'Note:') }}
+		</p>
+		<p class="note-to-recipient__text" v-text="note" />
+	</NcNoteCard>
+</template>
+
+<script setup lang="ts">
+import type { Folder } from '@nextcloud/files'
+import { getCurrentUser } from '@nextcloud/auth'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+
+const folder = ref<Folder>()
+const note = computed<string>(() => folder.value?.attributes.note ?? '')
+const user = computed(() => {
+	const id = folder.value?.attributes?.['owner-id']
+	const displayName = folder.value?.attributes?.['owner-display-name']
+	if (id !== getCurrentUser()?.uid) {
+		return {
+			id,
+			displayName,
+		}
+	}
+	return null
+})
+
+/**
+ * Update the current folder
+ * @param newFolder the new folder to show note for
+ */
+function updateFolder(newFolder: Folder) {
+	folder.value = newFolder
+}
+
+defineExpose({ updateFolder })
+</script>
+
+<style scoped>
+.note-to-recipient {
+	margin-inline: var(--row-height)
+}
+
+.note-to-recipient__text {
+	/* respect new lines */
+	white-space: pre-line;
+}
+
+.note-to-recipient__heading {
+	font-weight: bold;
+}
+
+@media screen and (max-width: 512px) {
+	.note-to-recipient {
+		margin-inline: var(--default-grid-baseline);
+	}
+}
+</style>