From d6a319e01d2112bf2d7f6fed32c961f366079fe3 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Mon, 25 Nov 2024 15:18:55 -0300
Subject: [PATCH] chore: unify code into a new component

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/Request/RequestPicker.vue | 292 +++++++++++++++++++++++
 src/views/FilesList/FilesList.vue        | 244 +------------------
 src/views/Request.vue                    | 232 +-----------------
 3 files changed, 299 insertions(+), 469 deletions(-)
 create mode 100644 src/Components/Request/RequestPicker.vue

diff --git a/src/Components/Request/RequestPicker.vue b/src/Components/Request/RequestPicker.vue
new file mode 100644
index 000000000..bef2a7067
--- /dev/null
+++ b/src/Components/Request/RequestPicker.vue
@@ -0,0 +1,292 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<form>
+		<NcActions :menu-name="t('libresign', 'Request')"
+			:inline="inline ? 3 : 0"
+			:force-name="inline"
+			:class="{column: inline}"
+			:open.sync="openedMenu">
+			<template #icon>
+				<PlusIcon :size="20" />
+			</template>
+			<NcActionButton @click="showModalUploadFromUrl()"
+				:wide="true">
+				<template #icon>
+					<LinkIcon :size="20" />
+				</template>
+				{{ t('libresign', 'Upload from URL') }}
+			</NcActionButton>
+			<NcActionButton @click="showFilePicker = true"
+				:wide="true">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+				{{ t('libresign', 'Choose from Files') }}
+			</NcActionButton>
+			<NcActionButton @click="uploadFile"
+				:wide="true">
+				<template #icon>
+					<NcLoadingIcon v-if="isUploading" :size="20" />
+					<UploadIcon v-else :size="20" />
+				</template>
+				{{ t('libresign', 'Upload') }}
+			</NcActionButton>
+		</NcActions>
+		<FilePicker v-if="showFilePicker"
+			:name="t('libresign', 'Select your file')"
+			:multiselect="false"
+			:buttons="filePickerButtons"
+			:mimetype-filter="['application/pdf']"
+			@close="showFilePicker = false" />
+		<NcDialog v-if="modalUploadFromUrl"
+			:name="t('libresign', 'URL of a PDF file')"
+			:can-close="!loading"
+			@closing="closeModalUploadFromUrl">
+			<NcNoteCard v-for="message in uploadUrlErrors"
+				:key="message"
+				type="error">
+				{{ message }}
+			</NcNoteCard>
+			<NcTextField v-model="pdfUrl"
+				:label="t('libresign', 'URL of a PDF file')">
+				<LinkIcon :size="20" />
+			</NcTextField>
+			<template #actions>
+				<NcButton :disabled="!canUploadFronUrl"
+					type="primary"
+					@click="uploadUrl">
+					{{ t('libresign', 'Send') }}
+					<template #icon>
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<CloudUploadIcon v-else :size="20" />
+					</template>
+				</NcButton>
+			</template>
+		</NcDialog>
+	</form>
+</template>
+<script>
+import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { generateOcsUrl } from '@nextcloud/router'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+import { filesService } from '../../domains/files/index.js'
+import { useActionsMenuStore } from '../../store/actionsmenu.js'
+import { useFilesStore } from '../../store/files.js'
+
+const loadFileToBase64 = file => {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = () => resolve(reader.result)
+		reader.onerror = (error) => reject(error)
+	})
+}
+export default {
+	name: 'RequestPicker',
+	components: {
+		CloudUploadIcon,
+		FilePicker,
+		FolderIcon,
+		LinkIcon,
+		NcActionButton,
+		NcActions,
+		NcButton,
+		NcDialog,
+		NcLoadingIcon,
+		NcNoteCard,
+		NcTextField,
+		PlusIcon,
+		UploadIcon,
+	},
+	props: {
+		inline: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
+	},
+	data() {
+		return {
+			modalUploadFromUrl: false,
+			uploadUrlErrors: [],
+			pdfUrl: '',
+			isUploading: false,
+			showingFilePicker: false,
+			loading: false,
+		}
+	},
+	computed: {
+		filePickerButtons() {
+			return [{
+				label: t('libresign', 'Choose'),
+				callback: (nodes) => this.handleFileChoose(nodes),
+				type: 'primary',
+			}]
+		},
+		canUploadFronUrl() {
+			if (this.loading) {
+				return false
+			}
+			try {
+				// eslint-disable-next-line no-new
+				new URL(this.pdfUrl)
+				return true
+			} catch (e) {
+				return false
+			}
+		},
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === 'global'
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? 'global' : null
+			},
+		},
+		showFilePicker: {
+			get() {
+				return this.showingFilePicker
+			},
+			set(state) {
+				this.showingFilePicker = state
+				if (state) {
+					this.openedMenu = false
+				}
+			},
+		},
+	},
+	methods: {
+		showModalUploadFromUrl() {
+			this.actionsMenuStore.opened = false
+			this.modalUploadFromUrl = true
+		},
+		closeModalUploadFromUrl() {
+			this.cleanErrors()
+			this.pdfUrl = ''
+			this.modalUploadFromUrl = false
+		},
+		cleanErrors() {
+			this.uploadUrlErrors = []
+		},
+		async upload(file) {
+			try {
+				const { name: original } = file
+
+				const name = original.split('.').slice(0, -1).join('.')
+
+				const data = await loadFileToBase64(file)
+
+				const res = await filesService.uploadFile({ name, file: data })
+
+				this.filesStore.addFile({
+					nodeId: res.id,
+					name: res.name,
+				})
+				this.filesStore.selectFile(res.id)
+				this.cleanErrors()
+			} catch (err) {
+				showError(err.response.data.ocs.data.message)
+			}
+		},
+		uploadFile() {
+			this.loading = true
+			const input = document.createElement('input')
+			input.accept = 'application/pdf'
+			input.type = 'file'
+
+			input.onchange = async (ev) => {
+				const file = ev.target.files[0]
+
+				if (file) {
+					this.upload(file)
+				}
+
+				input.remove()
+			}
+
+			input.click()
+			this.loading = false
+		},
+		async uploadUrl() {
+			this.loading = true
+			this.cleanErrors()
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					url: this.pdfUrl,
+				},
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.closeModalUploadFromUrl()
+				})
+				.catch(({ response }) => {
+					this.uploadUrlErrors = [response.data.ocs.data.message]
+				})
+			this.loading = false
+		},
+		async handleFileChoose(nodes) {
+			const path = nodes[0]?.path
+			if (!path) {
+				return
+			}
+
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					path,
+				},
+				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.cleanErrors()
+				})
+				.catch(({ response }) => {
+					showError(response.data.ocs.data.message)
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.column {
+	display: flex;
+	gap: 12px; flex: 1;
+	flex-direction: column;
+}
+</style>
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index f1732826a..3b0f5a330 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -20,31 +20,7 @@
 					</template>
 				</NcBreadcrumb>
 				<template #actions>
-					<NcActions :menu-name="t('libresign', 'Request')"
-						:open.sync="openedMenu">
-						<template #icon>
-							<PlusIcon :size="20" />
-						</template>
-						<NcActionButton @click="showModalUploadFromUrl()">
-							<template #icon>
-								<LinkIcon :size="20" />
-							</template>
-							{{ t('libresign', 'Upload from URL') }}
-						</NcActionButton>
-						<NcActionButton @click="showFilePicker = true">
-							<template #icon>
-								<FolderIcon :size="20" />
-							</template>
-							{{ t('libresign', 'Choose from Files') }}
-						</NcActionButton>
-						<NcActionButton @click="uploadFile">
-							<template #icon>
-								<NcLoadingIcon v-if="isUploading" :size="20" />
-								<UploadIcon v-else :size="20" />
-							</template>
-							{{ t('libresign', 'Upload') }}
-						</NcActionButton>
-					</NcActions>
+					<RequestPicker />
 				</template>
 			</NcBreadcrumbs>
 
@@ -75,37 +51,6 @@
 		<FilesListVirtual v-else
 			:nodes="dirContentsSorted"
 			:loading="loading" />
-		<FilePicker v-if="showFilePicker"
-			:name="t('libresign', 'Select your file')"
-			:multiselect="false"
-			:buttons="filePickerButtons"
-			:mimetype-filter="['application/pdf']"
-			@close="showFilePicker = false" />
-		<NcDialog v-if="modalUploadFromUrl"
-			:name="t('libresign', 'URL of a PDF file')"
-			:can-close="!loading"
-			@closing="closeModalUploadFromUrl">
-			<NcNoteCard v-for="message in uploadUrlErrors"
-				:key="message"
-				type="error">
-				{{ message }}
-			</NcNoteCard>
-			<NcTextField v-model="pdfUrl"
-				:label="t('libresign', 'URL of a PDF file')">
-				<LinkIcon :size="20" />
-			</NcTextField>
-			<template #actions>
-				<NcButton :disabled="!canUploadFronUrl"
-					type="primary"
-					@click="uploadUrl">
-					{{ t('libresign', 'Send') }}
-					<template #icon>
-						<NcLoadingIcon v-if="loading" :size="20" />
-						<CloudUploadIcon v-else :size="20" />
-					</template>
-				</NcButton>
-			</template>
-		</NcDialog>
 	</NcAppContent>
 </template>
 
@@ -113,143 +58,57 @@
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
 
-import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
-import LinkIcon from 'vue-material-design-icons/Link.vue'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import UploadIcon from 'vue-material-design-icons/Upload.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
-import axios from '@nextcloud/axios'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { generateOcsUrl } from '@nextcloud/router'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import FilesListVirtual from './FilesListVirtual.vue'
+import RequestPicker from '../../Components/Request/RequestPicker.vue'
 
-import { filesService } from '../../domains/files/index.js'
-import { useActionsMenuStore } from '../../store/actionsmenu.js'
 import { useFilesStore } from '../../store/files.js'
-import { useSidebarStore } from '../../store/sidebar.js'
 import { useUserConfigStore } from '../../store/userconfig.js'
 
-const PDF_MIME_TYPE = 'application/pdf'
-
-const loadFileToBase64 = file => {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader()
-		reader.readAsDataURL(file)
-		reader.onload = () => resolve(reader.result)
-		reader.onerror = (error) => reject(error)
-	})
-}
 export default {
 	name: 'FilesList',
 	components: {
-		FilePicker,
-		NcDialog,
-		NcNoteCard,
-		NcTextField,
-		CloudUploadIcon,
 		NcAppContent,
 		NcButton,
-		PlusIcon,
 		ListViewIcon,
 		ViewGridIcon,
 		NcLoadingIcon,
 		FolderIcon,
-		UploadIcon,
-		LinkIcon,
 		NcBreadcrumb,
 		NcBreadcrumbs,
-		NcActions,
-		NcActionButton,
 		NcIconSvgWrapper,
 		FilesListVirtual,
+		RequestPicker,
 		NcEmptyContent,
 	},
 	setup() {
-		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
-		const sidebarStore = useSidebarStore()
 		const userConfigStore = useUserConfigStore()
 		return {
-			actionsMenuStore,
 			filesStore,
-			sidebarStore,
 			userConfigStore,
 		}
 	},
 	data() {
 		return {
-			modalUploadFromUrl: false,
-			showingFilePicker: false,
-			pdfUrl: '',
-			file: {},
-			signers: [],
-			uploadUrlErrors: [],
-			errors: [],
-			isUploading: false,
 			loading: false,
 			dirContentsFiltered: [],
 		}
 	},
 	computed: {
-		filePickerButtons() {
-			return [{
-				label: t('libresign', 'Choose'),
-				callback: (nodes) => this.handleFileChoose(nodes),
-				type: 'primary',
-			}]
-		},
-		canRequest() {
-			return this.signers.length > 0
-		},
-		canUploadFronUrl() {
-			if (this.loading) {
-				return false
-			}
-			try {
-				// eslint-disable-next-line no-new
-				new URL(this.pdfUrl)
-				return true
-			} catch (e) {
-				return false
-			}
-		},
-		openedMenu: {
-			get() {
-				return this.actionsMenuStore.opened === 'global'
-			},
-			set(opened) {
-				this.actionsMenuStore.opened = opened ? 'global' : null
-			},
-		},
-		showFilePicker: {
-			get() {
-				return this.showingFilePicker
-			},
-			set(state) {
-				this.showingFilePicker = state
-				if (state) {
-					this.openedMenu = false
-				}
-			},
-		},
 		viewIcon() {
 			return HomeSvg
 		},
@@ -291,103 +150,6 @@ export default {
 		closeSidebar() {
 			this.filesStore.selectFile()
 		},
-		showModalUploadFromUrl() {
-			this.actionsMenuStore.opened = false
-			this.modalUploadFromUrl = true
-		},
-		closeModalUploadFromUrl() {
-			this.cleanErrors()
-			this.modalUploadFromUrl = false
-		},
-		cleanErrors() {
-			this.uploadUrlErrors = []
-			this.errors = []
-		},
-		async uploadUrl() {
-			this.loading = true
-			this.cleanErrors()
-			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
-				file: {
-					url: this.pdfUrl,
-				},
-			})
-				.then(({ data }) => {
-					this.filesStore.addFile({
-						nodeId: data.ocs.data.id,
-						name: data.ocs.data.name,
-					})
-					this.filesStore.selectFile(data.ocs.data.id)
-					this.closeModalUploadFromUrl()
-				})
-				.catch(({ response }) => {
-					this.uploadUrlErrors = [response.data.ocs.data.message]
-				})
-			this.loading = false
-		},
-		async upload(file) {
-			try {
-				const { name: original } = file
-
-				const name = original.split('.').slice(0, -1).join('.')
-
-				const data = await loadFileToBase64(file)
-
-				const res = await filesService.uploadFile({ name, file: data })
-
-				this.filesStore.addFile({
-					nodeId: res.id,
-					name: res.name,
-				})
-				this.filesStore.selectFile(res.id)
-				this.cleanErrors()
-			} catch (err) {
-				this.errors = [err.response.data.ocs.data.message]
-			}
-		},
-		uploadFile() {
-			this.loading = true
-			const input = document.createElement('input')
-			input.accept = PDF_MIME_TYPE
-			input.type = 'file'
-
-			input.onchange = async (ev) => {
-				const file = ev.target.files[0]
-
-				if (file) {
-					this.upload(file)
-				}
-
-				input.remove()
-			}
-
-			input.click()
-			this.loading = false
-		},
-		async handleFileChoose(nodes) {
-			const path = nodes[0]?.path
-			if (!path) {
-				return
-			}
-
-			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
-				file: {
-					path,
-				},
-				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
-			})
-				.then(({ data }) => {
-					this.filesStore.addFile({
-						nodeId: data.ocs.data.id,
-						name: data.ocs.data.name,
-					})
-					this.filesStore.selectFile(data.ocs.data.id)
-					this.cleanErrors()
-				})
-				.catch(({ response }) => {
-					this.errors = [response.data.ocs.data.message]
-					this.loading = false
-				})
-		},
 	},
 }
 </script>
diff --git a/src/views/Request.vue b/src/views/Request.vue
index 7da26e9ec..424dfef5b 100644
--- a/src/views/Request.vue
+++ b/src/views/Request.vue
@@ -7,11 +7,6 @@
 		<div id="container-request">
 			<header>
 				<h1>{{ t('libresign', 'Request Signatures') }}</h1>
-				<NcNoteCard v-for="message in errors"
-					:key="message"
-					type="error">
-					{{ message }}
-				</NcNoteCard>
 				<p v-if="!sidebarStore.isVisible()">
 					{{ t('libresign', 'Choose the file to request signatures.') }}
 				</p>
@@ -20,155 +15,32 @@
 				<File v-show="filesStore.selectedNodeId > 0"
 					status="0"
 					status-text="none" />
-				<NcButton v-if="!sidebarStore.isVisible()"
-					:wide="true"
-					@click="showModalUploadFromUrl()">
-					{{ t('libresign', 'Upload from URL') }}
-					<template #icon>
-						<LinkIcon :size="20" />
-					</template>
-				</NcButton>
-				<NcButton v-if="!sidebarStore.isVisible()"
-					:wide="true"
-					@click="showFilePicker = true">
-					{{ t('libresign', 'Choose from Files') }}
-					<template #icon>
-						<FolderIcon :size="20" />
-					</template>
-				</NcButton>
-				<NcButton v-if="!sidebarStore.isVisible()"
-					:wide="true"
-					@click="uploadFile">
-					{{ t('libresign', 'Upload') }}
-					<template #icon>
-						<NcLoadingIcon v-if="loading" :size="20" />
-						<UploadIcon v-else :size="20" />
-					</template>
-				</NcButton>
+				<ReqestPicker v-if="!sidebarStore.isVisible()"
+					:inline="true" />
 			</div>
 		</div>
-		<FilePicker v-if="showFilePicker"
-			:name="t('libresign', 'Select your file')"
-			:multiselect="false"
-			:buttons="filePickerButtons"
-			:mimetype-filter="['application/pdf']"
-			@close="showFilePicker = false" />
-		<NcDialog v-if="modalUploadFromUrl"
-			:name="t('libresign', 'URL of a PDF file')"
-			:can-close="!loading"
-			@closing="closeModalUploadFromUrl">
-			<NcNoteCard v-for="message in uploadUrlErrors"
-				:key="message"
-				type="error">
-				{{ message }}
-			</NcNoteCard>
-			<NcTextField v-model="pdfUrl"
-				:label="t('libresign', 'URL of a PDF file')">
-				<LinkIcon :size="20" />
-			</NcTextField>
-			<template #actions>
-				<NcButton :disabled="!canUploadFronUrl"
-					type="primary"
-					@click="uploadUrl">
-					{{ t('libresign', 'Send') }}
-					<template #icon>
-						<NcLoadingIcon v-if="loading" :size="20" />
-						<CloudUploadIcon v-else :size="20" />
-					</template>
-				</NcButton>
-			</template>
-		</NcDialog>
 	</div>
 </template>
 <script>
-import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import LinkIcon from 'vue-material-design-icons/Link.vue'
-import UploadIcon from 'vue-material-design-icons/Upload.vue'
-
-import axios from '@nextcloud/axios'
-import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { generateOcsUrl } from '@nextcloud/router'
-
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import File from '../Components/File/File.vue'
+import ReqestPicker from '../Components/Request/RequestPicker.vue'
 
-import { filesService } from '../domains/files/index.js'
 import { useFilesStore } from '../store/files.js'
 import { useSidebarStore } from '../store/sidebar.js'
 
-const PDF_MIME_TYPE = 'application/pdf'
-
-const loadFileToBase64 = file => {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader()
-		reader.readAsDataURL(file)
-		reader.onload = () => resolve(reader.result)
-		reader.onerror = (error) => reject(error)
-	})
-}
 export default {
 	name: 'Request',
 	components: {
-		FilePicker,
-		NcDialog,
-		NcTextField,
-		NcButton,
-		NcNoteCard,
-		LinkIcon,
-		UploadIcon,
-		NcLoadingIcon,
-		CloudUploadIcon,
-		FolderIcon,
 		File,
+		ReqestPicker,
 	},
 	setup() {
 		const filesStore = useFilesStore()
 		const sidebarStore = useSidebarStore()
 		return { filesStore, sidebarStore }
 	},
-	data() {
-		return {
-			pdfUrl: '',
-			modalUploadFromUrl: false,
-			showFilePicker: false,
-			loading: false,
-			file: {},
-			signers: [],
-			uploadUrlErrors: [],
-			errors: [],
-		}
-	},
-	computed: {
-		filePickerButtons() {
-			return [{
-				label: t('libresign', 'Choose'),
-				callback: (nodes) => this.handleFileChoose(nodes),
-				type: 'primary',
-			}]
-		},
-		canRequest() {
-			return this.signers.length > 0
-		},
-		canUploadFronUrl() {
-			if (this.loading) {
-				return false
-			}
-			try {
-				// eslint-disable-next-line no-new
-				new URL(this.pdfUrl)
-				return true
-			} catch (e) {
-				return false
-			}
-		},
-	},
 	async mounted() {
 		subscribe('libresign:visible-elements-saved', this.closeSidebar)
 		this.filesStore.disableIdentifySigner()
@@ -181,102 +53,6 @@ export default {
 		closeSidebar() {
 			this.filesStore.selectFile()
 		},
-		showModalUploadFromUrl() {
-			this.modalUploadFromUrl = true
-		},
-		closeModalUploadFromUrl() {
-			this.cleanErrors()
-			this.modalUploadFromUrl = false
-		},
-		cleanErrors() {
-			this.uploadUrlErrors = []
-			this.errors = []
-		},
-		async uploadUrl() {
-			this.loading = true
-			this.cleanErrors()
-			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
-				file: {
-					url: this.pdfUrl,
-				},
-			})
-				.then(({ data }) => {
-					this.filesStore.addFile({
-						nodeId: data.ocs.data.id,
-						name: data.ocs.data.name,
-					})
-					this.filesStore.selectFile(data.ocs.data.id)
-					this.closeModalUploadFromUrl()
-				})
-				.catch(({ response }) => {
-					this.uploadUrlErrors = [response.data.ocs.data.message]
-				})
-			this.loading = false
-		},
-		async upload(file) {
-			try {
-				const { name: original } = file
-
-				const name = original.split('.').slice(0, -1).join('.')
-
-				const data = await loadFileToBase64(file)
-
-				const res = await filesService.uploadFile({ name, file: data })
-
-				this.filesStore.addFile({
-					nodeId: res.id,
-					name: res.name,
-				})
-				this.filesStore.selectFile(res.id)
-				this.cleanErrors()
-			} catch (err) {
-				this.errors = [err.response.data.ocs.data.message]
-			}
-		},
-		uploadFile() {
-			this.loading = true
-			const input = document.createElement('input')
-			input.accept = PDF_MIME_TYPE
-			input.type = 'file'
-
-			input.onchange = async (ev) => {
-				const file = ev.target.files[0]
-
-				if (file) {
-					this.upload(file)
-				}
-
-				input.remove()
-			}
-
-			input.click()
-			this.loading = false
-		},
-		async handleFileChoose(nodes) {
-			const path = nodes[0]?.path
-			if (!path) {
-				return
-			}
-
-			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
-				file: {
-					path,
-				},
-				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
-			})
-				.then(({ data }) => {
-					this.filesStore.addFile({
-						nodeId: data.ocs.data.id,
-						name: data.ocs.data.name,
-					})
-					this.filesStore.selectFile(data.ocs.data.id)
-					this.cleanErrors()
-				})
-				.catch(({ response }) => {
-					this.errors = [response.data.ocs.data.message]
-					this.loading = false
-				})
-		},
 	},
 }
 </script>