diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files/src/components/BreadCrumbs.vue | 50 |
1 files changed, 37 insertions, 13 deletions
diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue index 9931642342c..ba3670cbcde 100644 --- a/apps/files/src/components/BreadCrumbs.vue +++ b/apps/files/src/components/BreadCrumbs.vue @@ -1,3 +1,25 @@ +<!-- + - @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com> + - + - @author John Molakvoæ <skjnldsv@protonmail.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> <NcBreadcrumbs data-cy-files-content-breadcrumbs @@ -22,18 +44,20 @@ </NcBreadcrumbs> </template> -<script> +<script lang="ts"> +import type { Node } from '@nextcloud/files' + import { translate as t} from '@nextcloud/l10n' import { basename } from 'path' import Home from 'vue-material-design-icons/Home.vue' import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js' import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js' -import Vue from 'vue' +import { defineComponent } from 'vue' import { useFilesStore } from '../store/files.ts' import { usePathsStore } from '../store/paths.ts' -export default Vue.extend({ +export default defineComponent({ name: 'BreadCrumbs', components: { @@ -63,16 +87,16 @@ export default Vue.extend({ return this.$navigation.active }, - dirs() { - const cumulativePath = (acc) => (value) => (acc += `${value}/`) + dirs(): string[] { + const cumulativePath = (acc: string) => (value: string) => (acc += `${value}/`) // Generate a cumulative path for each path segment: ['/', '/foo', '/foo/bar', ...] etc - const paths = this.path.split('/').filter(Boolean).map(cumulativePath('/')) + const paths: string[] = this.path.split('/').filter(Boolean).map(cumulativePath('/')) // Strip away trailing slash - return ['/', ...paths.map(path => path.replace(/^(.+)\/$/, '$1'))] + return ['/', ...paths.map((path: string) => path.replace(/^(.+)\/$/, '$1'))] }, sections() { - return this.dirs.map(dir => { + return this.dirs.map((dir: string) => { const fileid = this.getFileIdFromPath(dir) const to = { ...this.$route, params: { fileid }, query: { dir } } return { @@ -86,19 +110,19 @@ export default Vue.extend({ }, methods: { - getNodeFromId(id) { + getNodeFromId(id: number): Node | undefined { return this.filesStore.getNode(id) }, - getFileIdFromPath(path) { + getFileIdFromPath(path: string): number | undefined { return this.pathsStore.getPath(this.currentView?.id, path) }, - getDirDisplayName(path) { + getDirDisplayName(path: string): string { if (path === '/') { return t('files', 'Home') } - const fileId = this.getFileIdFromPath(path) - const node = this.getNodeFromId(fileId) + const fileId: number | undefined = this.getFileIdFromPath(path) + const node: Node | undefined = (fileId) ? this.getNodeFromId(fileId) : undefined return node?.attributes?.displayName || basename(path) }, |