extract attachments actions

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

2 files changed, 202 insertions, 67 deletions

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 947965776..a1c1d3d6f 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -35,57 +35,24 @@
 			aria-hidden="true"
 			class="hidden-visually"
 			@change="handleFileInput">
+
 		<div class="new-message">
 			<form class="new-message-form"
 				@submit.prevent>
 				<!-- Attachments menu -->
-				<div v-if="showAttachmentsMenu"
-					class="new-message-form__upload-menu">
-					<NcActions ref="attachmentsMenu"
-						:container="container"
-						:boundaries-element="containerElement"
-						:disabled="disabled"
-						:aria-label="t('spreed', 'Share files to the conversation')"
-						:aria-haspopup="true">
-						<template #icon>
-							<Paperclip :size="16" />
-						</template>
+				<NewMessageFormAttachments v-if="showAttachmentsMenu"
+					:token="token"
+					:container="container"
+					:boundaries-element="containerElement"
+					:disabled="disabled"
+					:can-upload-files="canUploadFiles"
+					:can-share-files="canShareFiles"
+					:can-create-poll="canCreatePoll"
+					@open-file-upload="openFileUploadWindow"
+					@handle-file-share="handleFileShare"
+					@toggle-poll-editor="togglePollEditor"
+					@update-text-file-dialog="updateTextFileDialog" />
 
-						<NcActionButton v-if="canUploadFiles"
-							:close-after-click="true"
-							@click.prevent="clickImportInput">
-							<template #icon>
-								<Upload :size="20" />
-							</template>
-							{{ t('spreed', 'Upload from device') }}
-						</NcActionButton>
-						<NcActionButton v-if="canShareFiles"
-							:close-after-click="true"
-							@click.prevent="handleFileShare">
-							<template #icon>
-								<Folder :size="20" />
-							</template>
-							{{ shareFromNextcloudLabel }}
-						</NcActionButton>
-						<template v-if="canShareFiles">
-							<NcActionButton v-for="(provider, i) in fileTemplateOptions"
-								:key="i"
-								:close-after-click="true"
-								:icon="provider.iconClass"
-								@click.prevent="showTextFileDialog = i">
-								{{ provider.label }}
-							</NcActionButton>
-						</template>
-						<NcActionButton v-if="canCreatePoll"
-							:close-after-click="true"
-							@click.prevent="toggleSimplePollsEditor(true)">
-							<template #icon>
-								<Poll :size="20" />
-							</template>
-							{{ t('spreed', 'Create new poll') }}
-						</NcActionButton>
-					</NcActions>
-				</div>
 				<!-- Input area -->
 				<div class="new-message-form__input">
 					<div class="new-message-form__emoji-picker">
@@ -235,11 +202,7 @@
 <script>
 import BellOff from 'vue-material-design-icons/BellOff.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
-import Folder from 'vue-material-design-icons/Folder.vue'
-import Paperclip from 'vue-material-design-icons/Paperclip.vue'
-import Poll from 'vue-material-design-icons/Poll.vue'
 import Send from 'vue-material-design-icons/Send.vue'
-import Upload from 'vue-material-design-icons/Upload.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
@@ -254,6 +217,7 @@ import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContente
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import Quote from '../Quote.vue'
+import NewMessageFormAttachments from './NewMessageFormAttachments.vue'
 import NewMessageFormAudioRecorder from './NewMessageFormAudioRecorder.vue'
 import NewMessageFormPollEditor from './NewMessageFormPollEditor.vue'
 import NewMessageFormTemplatePreview from './NewMessageFormTemplatePreview.vue'
@@ -294,6 +258,7 @@ export default {
 		NcModal,
 		NcRichContenteditable,
 		NcTextField,
+		NewMessageFormAttachments,
 		NewMessageFormAudioRecorder,
 		NewMessageFormPollEditor,
 		NewMessageFormTemplatePreview,
@@ -303,11 +268,7 @@ export default {
 		// Icons
 		BellOff,
 		EmoticonOutline,
-		Folder,
-		Paperclip,
-		Poll,
 		Send,
-		Upload,
 	},
 
 	props: {
@@ -420,9 +381,8 @@ export default {
 		},
 
 		canUploadFiles() {
-			const allowed = getCapabilities()?.spreed?.config?.attachments?.allowed
-			return allowed
-				&& this.attachmentFolderFreeSpace !== 0
+			return getCapabilities()?.spreed?.config?.attachments?.allowed
+				&& this.$store.getters.getAttachmentFolderFreeSpace() !== 0
 				&& this.canShareFiles
 		},
 
@@ -430,10 +390,6 @@ export default {
 			return !this.isOneToOne && !this.noChatPermission
 		},
 
-		attachmentFolderFreeSpace() {
-			return this.$store.getters.getAttachmentFolderFreeSpace()
-		},
-
 		currentConversationIsJoined() {
 			return this.$store.getters.currentConversationIsJoined
 		},
@@ -459,10 +415,6 @@ export default {
 			}
 		},
 
-		shareFromNextcloudLabel() {
-			return t('spreed', 'Share from {nextcloud}', { nextcloud: OC.theme.productName })
-		},
-
 		fileTemplateOptions() {
 			return this.$store.getters.getFileTemplates()
 		},
@@ -496,7 +448,7 @@ export default {
 		},
 
 		showAttachmentsMenu() {
-			return (this.canUploadFiles || this.canShareFiles) && !this.broadcast
+			return this.canShareFiles && !this.broadcast
 		},
 
 		showAudioRecorder() {
@@ -713,10 +665,14 @@ export default {
 		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
 		 * thus opening the file-picker
 		 */
-		clickImportInput() {
+		openFileUploadWindow() {
 			this.$refs.fileUploadInput.click()
 		},
 
+		updateTextFileDialog(value) {
+			this.showTextFileDialog = value
+		},
+
 		handleFileInput(event) {
 			const files = Object.values(event.target.files)
 
diff --git a/src/components/NewMessageForm/NewMessageFormAttachments.vue b/src/components/NewMessageForm/NewMessageFormAttachments.vue
new file mode 100644
index 000000000..3ebe00cec
--- /dev/null
+++ b/src/components/NewMessageForm/NewMessageFormAttachments.vue
@@ -0,0 +1,179 @@
+<!--
+  - @copyright Copyright (c) 2022, Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NcActions ref="attachmentsMenu"
+		:container="container"
+		:boundaries-element="boundariesElement"
+		:disabled="disabled"
+		:aria-label="t('spreed', 'Share files to the conversation')"
+		:aria-haspopup="true">
+		<template #icon>
+			<Paperclip :size="16" />
+		</template>
+
+		<NcActionButton v-if="canUploadFiles"
+			close-after-click
+			@click.prevent="$emit('open-file-upload')">
+			<template #icon>
+				<Upload :size="20" />
+			</template>
+			{{ t('spreed', 'Upload from device') }}
+		</NcActionButton>
+
+		<template v-if="canShareFiles">
+			<NcActionButton close-after-click
+				@click.prevent="handleFileShare">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+				{{ shareFromNextcloudLabel }}
+			</NcActionButton>
+
+			<NcActionButton v-for="(provider, index) in fileTemplateOptions"
+				:key="index"
+				close-after-click
+				:icon="provider.iconClass"
+				@click.prevent="$emit('update-text-file-dialog', index)">
+				{{ provider.label }}
+			</NcActionButton>
+		</template>
+
+		<NcActionButton v-if="canCreatePoll"
+			close-after-click
+			@click.prevent="$emit('toggle-poll-editor')">
+			<template #icon>
+				<Poll :size="20" />
+			</template>
+			{{ t('spreed', 'Create new poll') }}
+		</NcActionButton>
+	</NcActions>
+</template>
+
+<script>
+import Folder from 'vue-material-design-icons/Folder.vue'
+import Paperclip from 'vue-material-design-icons/Paperclip.vue'
+import Poll from 'vue-material-design-icons/Poll.vue'
+import Upload from 'vue-material-design-icons/Upload.vue'
+
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+
+import { shareFile } from '../../services/filesSharingServices.js'
+
+const picker = getFilePickerBuilder(t('spreed', 'File to share'))
+	.setMultiSelect(false)
+	.setModal(true)
+	.setType(1)
+	.allowDirectories()
+	.build()
+
+export default {
+	name: 'NewMessageFormAttachments',
+
+	components: {
+		NcActionButton,
+		NcActions,
+		// Icons
+		Folder,
+		Paperclip,
+		Poll,
+		Upload,
+	},
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
+		container: {
+			type: String,
+			required: true,
+		},
+
+		boundariesElement: {
+			type: Element,
+			required: true,
+		},
+
+		disabled: {
+			type: Boolean,
+			required: true,
+		},
+
+		canShareFiles: {
+			type: Boolean,
+			required: true,
+		},
+
+		canUploadFiles: {
+			type: Boolean,
+			required: true,
+		},
+
+		canCreatePoll: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	computed: {
+		fileTemplateOptions() {
+			return this.$store.getters.getFileTemplates()
+		},
+
+		shareFromNextcloudLabel() {
+			return t('spreed', 'Share from {nextcloud}', { nextcloud: OC.theme.productName })
+		},
+	},
+
+	methods: {
+		handleFileShare() {
+			picker.pick()
+				.then((path) => {
+					console.debug(`path ${path} selected for sharing`)
+					if (!path.startsWith('/')) {
+						throw new Error(t('files', 'Invalid path selected'))
+					}
+					return shareFile(path, this.token)
+				})
+
+			// FIXME Remove this hack once it is possible to set the parent
+			// element of the file picker.
+			// By default, the file picker is a sibling of the fullscreen
+			// element, so it is not visible when in fullscreen mode. It is not
+			// possible to specify the parent nor to know when the file picker
+			// was actually opened, so for the time being it is moved if
+			// needed shortly after calling it.
+			setTimeout(() => {
+				if (this.$store.getters.isFullscreen()) {
+					document.getElementById('content-vue').appendChild(document.querySelector('.oc-dialog'))
+				}
+			}, 1000)
+		},
+	},
+}
+</script>