From d6a319e01d2112bf2d7f6fed32c961f366079fe3 Mon Sep 17 00:00:00 2001 From: Vitor Mattos Date: Mon, 25 Nov 2024 15:18:55 -0300 Subject: [PATCH] chore: unify code into a new component Signed-off-by: Vitor Mattos --- 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 0000000000..bef2a7067b --- /dev/null +++ b/src/Components/Request/RequestPicker.vue @@ -0,0 +1,292 @@ + + + + + diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue index f1732826a8..3b0f5a3305 100644 --- a/src/views/FilesList/FilesList.vue +++ b/src/views/FilesList/FilesList.vue @@ -20,31 +20,7 @@ @@ -75,37 +51,6 @@ - - - - {{ message }} - - - - - - @@ -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 - }) - }, }, } diff --git a/src/views/Request.vue b/src/views/Request.vue index 7da26e9ec4..424dfef5b8 100644 --- a/src/views/Request.vue +++ b/src/views/Request.vue @@ -7,11 +7,6 @@

{{ t('libresign', 'Request Signatures') }}

- - {{ message }} -

{{ t('libresign', 'Choose the file to request signatures.') }}

@@ -20,155 +15,32 @@ - - {{ t('libresign', 'Upload from URL') }} - - - - {{ t('libresign', 'Choose from Files') }} - - - - {{ t('libresign', 'Upload') }} - - +
- - - - {{ message }} - - - - - -