fix(files_sharing): Ensure "note to recipient" textarea is shown if there is a note

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

1 files changed, 19 insertions, 13 deletions

diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
index 2c544e12c64..fb32b4f9e02 100644
--- a/apps/files_sharing/src/views/SharingDetailsTab.vue
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -164,10 +164,9 @@
 						{{ t('files_sharing', 'Note to recipient') }}
 					</NcCheckboxRadioSwitch>
 					<template v-if="writeNoteToRecipientIsChecked">
-						<label for="share-note-textarea">
-							{{ t('files_sharing', 'Enter a note for the share recipient') }}
-						</label>
-						<textarea id="share-note-textarea" :value="share.note" @input="share.note = $event.target.value" />
+						<NcTextArea :label="t('files_sharing', 'Note to recipient')"
+							:placeholder="t('files_sharing', 'Enter a note for the share recipient')"
+							:value.sync="share.note" />
 					</template>
 					<ExternalShareAction v-for="action in externalLinkActions"
 						:id="action.id"
@@ -247,15 +246,17 @@
 <script>
 import { emit } from '@nextcloud/event-bus'
 import { getLanguage } from '@nextcloud/l10n'
-import { Type as ShareType } from '@nextcloud/sharing'
+import { ShareType } from '@nextcloud/sharing'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
+
 import CircleIcon from 'vue-material-design-icons/CircleOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import EditIcon from 'vue-material-design-icons/Pencil.vue'
@@ -290,11 +291,12 @@ export default {
 	components: {
 		NcAvatar,
 		NcButton,
-		NcInputField,
-		NcPasswordField,
-		NcDateTimePickerNative,
 		NcCheckboxRadioSwitch,
+		NcDateTimePickerNative,
+		NcInputField,
 		NcLoadingIcon,
+		NcPasswordField,
+		NcTextArea,
 		CloseIcon,
 		CircleIcon,
 		EditIcon,
@@ -717,7 +719,7 @@ export default {
 		 * @return {Array}
 		 */
 		externalLinkActions() {
-			const filterValidAction = (action) => (action.shareType.includes(ShareType.SHARE_TYPE_LINK) || action.shareType.includes(ShareType.SHARE_TYPE_EMAIL)) && action.advanced
+			const filterValidAction = (action) => (action.shareType.includes(ShareType.Link) || action.shareType.includes(ShareType.Email)) && action.advanced
 			// filter only the advanced registered actions for said link
 			return this.ExternalShareActions.actions
 				.filter(filterValidAction)
@@ -808,6 +810,10 @@ export default {
 				this.advancedSectionAccordionExpanded = true
 			}
 
+			if (this.share.note) {
+				this.writeNoteToRecipientIsChecked = true
+			}
+
 		},
 		handleShareType() {
 			if ('shareType' in this.share) {