From aad09764cd67ab751444c74de8b5066ec5564626 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 24 Jul 2024 19:25:47 +0200 Subject: [PATCH] refactor: Make route parameters accessible using composables to reuse Signed-off-by: Ferdinand Thiessen --- apps/files/src/components/FileEntry.vue | 9 +++- apps/files/src/components/FileEntryGrid.vue | 9 +++- apps/files/src/components/FileEntryMixin.ts | 9 +--- .../files/src/components/FilesListVirtual.vue | 18 +++---- .../src/composables/useRouteParameters.ts | 47 +++++++++++++++++++ apps/files/src/views/FilesList.vue | 36 +++++--------- 6 files changed, 82 insertions(+), 46 deletions(-) create mode 100644 apps/files/src/composables/useRouteParameters.ts diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue index 48b6dcfd8a0..298500dd472 100644 --- a/apps/files/src/components/FileEntry.vue +++ b/apps/files/src/components/FileEntry.vue @@ -89,7 +89,8 @@ import { defineComponent } from 'vue' import { formatFileSize } from '@nextcloud/files' import moment from '@nextcloud/moment' -import { useNavigation } from '../composables/useNavigation' +import { useNavigation } from '../composables/useNavigation.ts' +import { useRouteParameters } from '../composables/useRouteParameters.ts' import { useActionsMenuStore } from '../store/actionsmenu.ts' import { useDragAndDropStore } from '../store/dragging.ts' import { useFilesStore } from '../store/files.ts' @@ -134,6 +135,10 @@ export default defineComponent({ const renamingStore = useRenamingStore() const selectionStore = useSelectionStore() const { currentView } = useNavigation() + const { + directory: currentDir, + fileId: currentFileId, + } = useRouteParameters() return { actionsMenuStore, @@ -142,6 +147,8 @@ export default defineComponent({ renamingStore, selectionStore, + currentDir, + currentFileId, currentView, } }, diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue index 1f0992bc851..6d31542a15b 100644 --- a/apps/files/src/components/FileEntryGrid.vue +++ b/apps/files/src/components/FileEntryGrid.vue @@ -71,7 +71,8 @@ import { defineComponent } from 'vue' import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js' -import { useNavigation } from '../composables/useNavigation' +import { useNavigation } from '../composables/useNavigation.ts' +import { useRouteParameters } from '../composables/useRouteParameters.ts' import { useActionsMenuStore } from '../store/actionsmenu.ts' import { useDragAndDropStore } from '../store/dragging.ts' import { useFilesStore } from '../store/files.ts' @@ -107,6 +108,10 @@ export default defineComponent({ const renamingStore = useRenamingStore() const selectionStore = useSelectionStore() const { currentView } = useNavigation() + const { + directory: currentDir, + fileId: currentFileId, + } = useRouteParameters() return { actionsMenuStore, @@ -115,6 +120,8 @@ export default defineComponent({ renamingStore, selectionStore, + currentDir, + currentFileId, currentView, } }, diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts index da9b93107c7..d9117053dd8 100644 --- a/apps/files/src/components/FileEntryMixin.ts +++ b/apps/files/src/components/FileEntryMixin.ts @@ -56,17 +56,10 @@ export default defineComponent({ }, computed: { - currentDir() { - // Remove any trailing slash but leave root slash - return (this.$route.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1') - }, - currentFileId() { - return this.$route.params?.fileid || this.$route.query?.fileid || null - }, - fileid() { return this.source.fileid ?? 0 }, + uniqueId() { return hashCode(this.source.source) }, diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 5fd22d825da..17de4b15b68 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -69,6 +69,7 @@ import { translate as t } from '@nextcloud/l10n' import { defineComponent } from 'vue' import { action as sidebarAction } from '../actions/sidebarAction.ts' +import { useRouteParameters } from '../composables/useRouteParameters.ts' import { getSummaryFor } from '../utils/fileUtils' import { useSelectionStore } from '../store/selection.js' import { useUserConfigStore } from '../store/userconfig.ts' @@ -118,7 +119,12 @@ export default defineComponent({ setup() { const userConfigStore = useUserConfigStore() const selectionStore = useSelectionStore() + const { fileId, openFile } = useRouteParameters() + return { + fileId, + openFile, + userConfigStore, selectionStore, } @@ -139,18 +145,6 @@ export default defineComponent({ return this.userConfigStore.userConfig }, - fileId() { - return Number.parseInt(this.$route.params.fileid ?? '0') || null - }, - - /** - * If the current `fileId` should be opened - * The state of the `openfile` query param - */ - openFile() { - return !!this.$route.query.openfile - }, - summary() { return getSummaryFor(this.nodes) }, diff --git a/apps/files/src/composables/useRouteParameters.ts b/apps/files/src/composables/useRouteParameters.ts new file mode 100644 index 00000000000..931b6eeefb2 --- /dev/null +++ b/apps/files/src/composables/useRouteParameters.ts @@ -0,0 +1,47 @@ +/*! + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { computed } from 'vue' +import { useRoute } from 'vue-router/composables' + +/** + * Get information about the current route + */ +export function useRouteParameters() { + + const route = useRoute() + + /** + * Get the path of the current active directory + */ + const directory = computed( + () => String(route.query.dir || '/') + // Remove any trailing slash but leave root slash + .replace(/^(.+)\/$/, '$1') + ) + + /** + * Get the current fileId used on the route + */ + const fileId = computed(() => { + const fileId = Number.parseInt(route.params.fileid ?? '0') || null + return Number.isNaN(fileId) ? null : fileId + }) + + /** + * State of `openFile` route param + */ + const openFile = computed(() => 'openFile' in route.params && route.params.openFile.toLocaleLowerCase() !== 'false') + + return { + /** Path of currently open directory */ + directory, + + /** Current active fileId */ + fileId, + + /** Should the active node should be opened (`openFile` route param) */ + openFile, + } +} diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue index c125d907a8e..ca868b5d526 100644 --- a/apps/files/src/views/FilesList.vue +++ b/apps/files/src/views/FilesList.vue @@ -6,7 +6,7 @@
- +