chore: Migrate jsdoc to typescript in components to typescript

Signed-off-by: Louis Chemineau <[email protected]>

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
 	},
 	overrides: [
 		{
-			files: ['*.ts'],
+			files: ['*.ts', '*.vue'],
 			rules: {
 				'jsdoc/require-jsdoc': 'off',
 				'jsdoc/require-param': 'off',

src/components/Albums/AlbumForm.vue

@@ -87,6 +87,8 @@
 import { generateRemoteUrl } from '@nextcloud/router'
 
 import CollaboratorsSelectionForm from './CollaboratorsSelectionForm.vue'
+import type { Album, Collaborator } from '../../store/albums'
+import type { PropType } from 'vue'
 
 export default {
 	name: 'AlbumForm',
@@ -102,9 +104,8 @@
 	},
 
 	props: {
-		/** @type {import('vue').PropType<import('../../store/albums.js').Album|null>} */
 		album: {
-			type: Object,
+			type: Object as PropType<Album|null>,
 			default: null,
 		},
 		displayBackButton: {
@@ -123,24 +124,15 @@
 	},
 
 	computed: {
-		/**
-		 * @return {boolean} Whether sharing is enabled.
-		 */
-		editMode() {
+		editMode(): boolean {
 			return this.album !== null
 		},
 
-		/**
-		 * @return {boolean} Whether sharing is enabled.
-		 */
-		sharingEnabled() {
+		sharingEnabled(): boolean {
 			return OC.Share !== undefined
 		},
 
-		/**
-		 * @return {string} The album's filename based on its name. Useful to fetch the location information and content.
-		 */
-		albumFileName() {
+		albumFileName(): string {
 			return this.$store.getters.getAlbumName(this.albumName)
 		},
 	},
@@ -159,8 +151,7 @@
 	methods: {
 		...mapActions(['createCollection', 'renameCollection', 'updateCollection']),
 
-		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
-		submit(collaborators = []) {
+		submit(collaborators: Collaborator[] = []) {
 			if (this.albumName === '' || this.loading) {
 				return
 			}
@@ -172,8 +163,7 @@
 			}
 		},
 
-		/** @param {import('../../store/albums.js').Collaborator[]} collaborators */
-		async handleCreateAlbum(collaborators = []) {
+		async handleCreateAlbum(collaborators: Collaborator[] = []) {
 			try {
 				this.loading = true
 				let album = await this.createCollection({

src/components/Albums/AlbumPicker.vue

@@ -62,6 +62,7 @@
 
 import FetchCollectionsMixin from '../../mixins/FetchCollectionsMixin.js'
 import AlbumForm from './AlbumForm.vue'
+import type { Album } from '../../store/albums.js'
 
 export default {
 	name: 'AlbumPicker',
@@ -77,11 +78,7 @@
 	},
 
 	filters: {
-		/**
-		 * @param {string} fileId - The id of the file.
-		 * @return {string}
-		 */
-		toCoverUrl(fileId) {
+		toCoverUrl(fileId: string): string {
 			return generateUrl(`/apps/photos/api/v1/preview/${fileId}?x=${64}&y=${64}`)
 		},
 	},
@@ -102,10 +99,7 @@
 			'sharedAlbums',
 		]),
 
-		/**
-		 * @return {import('../../store/albums.js').Album[]}
-		 */
-		allAlbums() {
+		allAlbums(): Album[] {
 			return [...Object.values(this.albums), ...Object.values(this.sharedAlbums)]
 		},
 	},
@@ -125,23 +119,15 @@
 			this.fetchAlbumList()
 		},
 
-		pickAlbum(album) {
+		pickAlbum(album: Album) {
 			this.$emit('album-picked', album)
 		},
 
-		/**
-		 * @param {object} album
-		 * @return {boolean}
-		 */
-		isSharedAlbum(album) {
+		isSharedAlbum(album: Album): boolean {
 			return album.filename.match(/^\/photos\/.+\/sharedalbums\//) !== null
 		},
 
-		/**
-		 * @param {object} album The album's full name, including the userid.
-		 * @return {string} The album name without the userId between parentheses.
-		 */
-		originalName(album) {
+		originalName(album: Album): string {
 			if (this.isSharedAlbum(album)) {
 				return album.basename.replace(new RegExp(`\\(${album.collaborators[0].id}\\)$`), '')
 			} else {

src/components/Albums/CollaboratorsSelectionForm.vue

@@ -34,8 +34,8 @@
 					:display-name="availableCollaborators[collaboratorKey].label"
 					:name="availableCollaborators[collaboratorKey].label"
 					:user="availableCollaborators[collaboratorKey].id"
-					:is-no-user="availableCollaborators[collaboratorKey].type !== collaboratorTypes.SHARE_TYPE_USER">
-					<AccountGroup v-if="availableCollaborators[collaboratorKey].type === collaboratorTypes.SHARE_TYPE_GROUP" :title="t('photos', 'Group')" />
+					:is-no-user="availableCollaborators[collaboratorKey].type !== collaboratorTypes.User">
+					<AccountGroup v-if="availableCollaborators[collaboratorKey].type === collaboratorTypes.Group" :title="t('photos', 'Group')" />
 					<NcButton type="tertiary"
 						:aria-label="t('photos', 'Remove {collaboratorLabel} from the collaborators list', {collaboratorLabel: availableCollaborators[collaboratorKey].label})"
 						@click="unselectEntity(collaboratorKey)">
@@ -100,25 +100,19 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { NcButton, NcListItemIcon, NcSelect } from '@nextcloud/vue'
-import { Type } from '@nextcloud/sharing'
+import { ShareType } from '@nextcloud/sharing'
 import { translate } from '@nextcloud/l10n'
 
 import logger from '../../services/logger.js'
 import FetchCollectionContentMixin from '../../mixins/FetchCollectionContentMixin.js'
+import type { Collaborator } from '../../store/albums.js'
+import type { PropType } from 'vue'
 
-/**
- * @typedef {object} Collaborator
- * @property {string} id - The id of the collaborator.
- * @property {string} label - The label of the collaborator for display.
- * @property {Type.SHARE_TYPE_USER|Type.SHARE_TYPE_GROUP|Type.SHARE_TYPE_LINK} type - The type of the collaborator.
- */
-
-/**
- * @typedef {Collaborator} SearchResult
- * @property {string} key
- * @property {string} displayName - The label of the collaborator for display.
- * @property {Element} [iconSvg] - An icon to differentiate the collaborator type.
- */
+type CollaboratorSearchResult = Collaborator & {
+	key: string
+	displayName: string // The label of the collaborator for display.
+	iconSvg?: Element // An icon to differentiate the collaborator type.
+}
 
 export default {
 	name: 'CollaboratorsSelectionForm',
@@ -142,9 +136,8 @@
 			required: true,
 		},
 
-		/** @type {import('vue').PropType<import('../../store/albums.js').Collaborator[]>} */
 		collaborators: {
-			type: Array,
+			type: Array as PropType<Collaborator[]>,
 			default: () => [],
 		},
 
@@ -157,76 +150,56 @@
 	data() {
 		return {
 			searchText: null,
-			/** @type {import('../../store/albums.js').IndexedCollaborators} */
-			availableCollaborators: {},
-			/** @type {string[]} */
-			selectedCollaboratorsKeys: [],
-			/** @type {import('../../store/albums.js').Collaborator[]} */
-			currentSearchResults: [],
+			availableCollaborators: {} as Record<string, Collaborator>,
+			selectedCollaboratorsKeys: [] as string[],
+			currentSearchResults: [] as Collaborator[],
 			loadingCollaborators: false,
 			randomId: Math.random().toString().substring(2, 10),
 			publicLinkCopied: false,
-			collaboratorTypes: Type,
+			collaboratorTypes: ShareType,
 			config: {
 				minSearchStringLength: parseInt(OC.config['sharing.minSearchStringLength'], 10) || 0,
 			},
 		}
 	},
 
 	computed: {
-		/**
-		 * @return {SearchResult[]}
-		 */
-		searchResults() {
+		searchResults(): CollaboratorSearchResult[] {
 			return this.currentSearchResults
-				.filter(({ id }) => id !== getCurrentUser().uid)
+				.filter(({ id }) => id !== getCurrentUser()?.uid)
 				.map((collaborator) => {
 					return {
 						...collaborator,
 						key: `${collaborator.type}:${collaborator.id}`,
-						iconSvg: collaborator.type === Type.SHARE_TYPE_GROUP ? AccountGroupSvg : undefined,
+						iconSvg: collaborator.type === ShareType.Group ? AccountGroupSvg : undefined,
 					}
 				})
 				.filter(({ key }) => !this.selectedCollaboratorsKeys.includes(key))
 		},
 
-		/**
-		 * @return {string[]}
-		 */
-		listableSelectedCollaboratorsKeys() {
+		listableSelectedCollaboratorsKeys(): string[] {
 			return this.selectedCollaboratorsKeys
-				.filter(collaboratorKey => this.availableCollaborators[collaboratorKey].type !== Type.SHARE_TYPE_LINK)
+				.filter(collaboratorKey => this.availableCollaborators[collaboratorKey].type !== ShareType.Link)
 		},
 
-		/**
-		 * @return {import('../../store/albums.js').Collaborator[]}
-		 */
-		selectedCollaborators() {
+		selectedCollaborators(): Collaborator[] {
 			return this.selectedCollaboratorsKeys
 				.map((collaboratorKey) => this.availableCollaborators[collaboratorKey])
 		},
 
-		/**
-		 * @return {boolean}
-		 */
-		isPublicLinkSelected() {
-			return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`)
+		isPublicLinkSelected(): boolean {
+			return this.selectedCollaboratorsKeys.includes(`${ShareType.Link}`)
 		},
 
-		/** @return {import('../../store/albums.js').Collaborator} */
-		publicLink() {
-			return this.availableCollaborators[Type.SHARE_TYPE_LINK]
+		publicLink(): Collaborator {
+			return this.availableCollaborators[ShareType.Link]
 		},
 
-		/** @return {string} */
-		publicLinkURL() {
+		publicLinkURL(): string {
 			return `${window.location.protocol}//${window.location.host}${generateUrl(`apps/photos/public/${this.publicLink.id}`)}`
 		},
 
-		/**
-		 * @return {string} The album's filename based on its name. Useful to fetch the location information and content.
-		 */
-		albumFileName() {
+		albumFileName(): string {
 			return this.$store.getters.getAlbumName(this.albumName)
 		},
 	},
@@ -246,10 +219,8 @@
 
 		/**
 		 * Fetch possible collaborators.
-		 *
-		 * @param {string} query
 		 */
-		async searchCollaborators(query) {
+		async searchCollaborators(query: string) {
 			if (query === undefined) {
 				return
 			}
@@ -267,8 +238,8 @@
 						search: query,
 						itemType: 'share-recipients',
 						shareTypes: [
-							Type.SHARE_TYPE_USER,
-							Type.SHARE_TYPE_GROUP,
+							ShareType.User,
+							ShareType.Group,
 						],
 					},
 				})
@@ -277,9 +248,9 @@
 					.map(collaborator => {
 						switch (collaborator.source) {
 						case 'users':
-							return { id: collaborator.id, label: collaborator.label, type: Type.SHARE_TYPE_USER }
+							return { id: collaborator.id, label: collaborator.label, type: ShareType.User }
 						case 'groups':
-							return { id: collaborator.id, label: collaborator.label, type: Type.SHARE_TYPE_GROUP }
+							return { id: collaborator.id, label: collaborator.label, type: ShareType.Group }
 						default:
 							throw new Error(`Invalid collaborator source ${collaborator.source}`)
 						}
@@ -291,42 +262,36 @@
 				}
 			} catch (error) {
 				this.errorFetchingCollaborators = error
-				logger.error(t('photos', 'Failed to fetch collaborators list.'), error)
-				showError(t('photos', 'Failed to fetch collaborators list.'))
+				logger.error(this.t('photos', 'Failed to fetch collaborators list.'), { error })
+				showError(this.t('photos', 'Failed to fetch collaborators list.'))
 			} finally {
 				this.loadingCollaborators = false
 			}
 		},
 
 		/**
 		 * Populate selectedCollaboratorsKeys and availableCollaborators.
-		 *
-		 * @param {import('../../store/albums.js').Collaborator[]} collaborators - The list of collaborators
 		 */
-		populateCollaborators(collaborators) {
+		populateCollaborators(collaborators: Collaborator[]) {
 			const initialCollaborators = collaborators.reduce(this.indexCollaborators, {})
 			this.selectedCollaboratorsKeys = Object.keys(initialCollaborators)
 			this.availableCollaborators = {
 				3: {
 					id: '',
-					label: t('photos', 'Public link'),
-					type: Type.SHARE_TYPE_LINK,
+					label: this.t('photos', 'Public link'),
+					type: ShareType.Link,
 				},
 				...this.availableCollaborators,
 				...initialCollaborators,
 			}
 		},
 
-		/**
-		 * @param {import('../../store/albums.js').IndexedCollaborators} collaborators - Index of collaborators
-		 * @param {import('../../store/albums.js').Collaborator} collaborator - A collaborator
-		 */
-		indexCollaborators(collaborators, collaborator) {
-			return { ...collaborators, [`${collaborator.type}${collaborator.type === Type.SHARE_TYPE_LINK ? '' : ':'}${collaborator.type === Type.SHARE_TYPE_LINK ? '' : collaborator.id}`]: collaborator }
+		indexCollaborators(collaborators: Record<string, Collaborator>, collaborator: Collaborator) {
+			return { ...collaborators, [`${collaborator.type}${collaborator.type === ShareType.Link ? '' : ':'}${collaborator.type === ShareType.Link ? '' : collaborator.id}`]: collaborator }
 		},
 
 		async createPublicLinkForAlbum() {
-			this.selectEntity(`${Type.SHARE_TYPE_LINK}`)
+			this.selectEntity(`${ShareType.Link}`)
 			await this.updateAlbumCollaborators()
 			await this.fetchCollection(
 				this.albumFileName,
@@ -335,11 +300,11 @@
 		},
 
 		async deletePublicLink() {
-			this.unselectEntity(`${Type.SHARE_TYPE_LINK}`)
+			this.unselectEntity(`${ShareType.Link}`)
 			this.availableCollaborators[3] = {
 				id: '',
-				label: t('photos', 'Public link'),
-				type: Type.SHARE_TYPE_LINK,
+				label: this.t('photos', 'Public link'),
+				type: ShareType.Link,
 			}
 			this.publicLinkCopied = false
 			await this.updateAlbumCollaborators()