Merge pull request #42513 from nextcloud/enh/files/42508/enhance-breadcrumb-component

enh(files): made breadcrumb component lang=ts

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)
 		},