refactor(vue3): migrate FileStatusList to script setup ts

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/components/FileStatusList.vue

@@ -42,127 +42,143 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { mdiFilePdfBox } from '@mdi/js'
 import { formatFileSize } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
 import Moment from '@nextcloud/moment'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 
 import { FILE_STATUS } from '../constants.js'
 import { getStatusLabel, getStatusIcon } from '../utils/fileStatus.js'
 
-export default {
+defineOptions({
 	name: 'FileStatusList',
-	components: {
-		NcEmptyContent,
-		NcIconSvgWrapper,
-	},
-	props: {
-		fileIds: {
-			type: Array,
-			default: () => [],
-		},
-		updateInterval: {
-			type: Number,
-			default: 2000, // 2 seconds
-		},
-	},
-	emits: ['file-signed', 'files-updated'],
-	setup() {
-		return {
-			t,
-			n,
-			formatFileSize,
-			getStatusIcon,
-			getStatusLabel,
-			mdiFilePdfBox,
-		}
-	},
-	data() {
-		return {
-			files: [],
-			isLoading: false,
-			updatePollingInterval: null,
-			previouslySignedIds: [],
-		}
-	},
-	mounted() {
-		this.loadFiles()
-		this.startUpdatePolling()
-	},
-	beforeUnmount() {
-		this.stopUpdatePolling()
-	},
-	methods: {
-		async loadFiles() {
-			if (this.isLoading || this.fileIds.length === 0) {
-				return
-			}
+})
+
+type FileEntry = {
+	id: number
+	uuid?: string
+	name: string
+	status?: string | number
+	size?: number
+	signedAt?: string
+}
 
-			this.isLoading = true
-			try {
-				const { data } = await axios.get(
-					generateOcsUrl('/apps/libresign/api/v1/file/list'),
-					{ timeout: 10000 }
-				)
+const props = withDefaults(defineProps<{
+	fileIds?: number[]
+	updateInterval?: number
+}>(), {
+	fileIds: () => [],
+	updateInterval: 2000,
+})
+
+const emit = defineEmits<{
+	(event: 'file-signed', file: FileEntry): void
+	(event: 'files-updated', files: FileEntry[]): void
+}>()
+
+const files = ref<FileEntry[]>([])
+const isLoading = ref(false)
+const updatePollingInterval = ref<ReturnType<typeof setInterval> | null>(null)
+const previouslySignedIds = ref<number[]>([])
+
+async function loadFiles() {
+	if (isLoading.value || props.fileIds.length === 0) {
+		return
+	}
 
-				const fileList = data.ocs?.data?.data ?? []
-				const fileMap = new Map(fileList.map(f => [f.id, f]))
+	isLoading.value = true
+	try {
+		const { data } = await axios.get(
+			generateOcsUrl('/apps/libresign/api/v1/file/list'),
+			{ timeout: 10000 },
+		)
 
-				this.files = this.fileIds
-					.map(id => fileMap.get(id))
-					.filter(Boolean)
+		const fileList = data.ocs?.data?.data ?? []
+		const fileMap = new Map(fileList.map((file: FileEntry) => [file.id, file]))
 
-				this.$emit('files-updated', this.files)
+		files.value = props.fileIds
+			.map(id => fileMap.get(id))
+			.filter((file): file is FileEntry => Boolean(file))
 
-				const signedFile = this.files.find(f => f.status === FILE_STATUS.SIGNED)
-				if (signedFile && !this.previouslySignedIds?.includes(signedFile.id)) {
-					this.$emit('file-signed', signedFile)
-				}
+		emit('files-updated', files.value)
 
-				this.previouslySignedIds = this.files
-					.filter(f => f.status === FILE_STATUS.SIGNED)
-					.map(f => f.id)
-			} catch (error) {
-				console.error('[libresign][FileStatusList] Error loading files:', error)
-			} finally {
-				this.isLoading = false
-			}
-		},
-		startUpdatePolling() {
-			this.updatePollingInterval = setInterval(() => {
-				this.loadFiles()
-			}, this.updateInterval)
-		},
-		stopUpdatePolling() {
-			if (this.updatePollingInterval) {
-				clearInterval(this.updatePollingInterval)
-				this.updatePollingInterval = null
-			}
-		},
-		getStatusClass(status) {
-			const statusMap = {
-				[FILE_STATUS.NOT_LIBRESIGN_FILE]: 'not-libresign',
-				[FILE_STATUS.DRAFT]: 'draft',
-				[FILE_STATUS.ABLE_TO_SIGN]: 'ready',
-				[FILE_STATUS.PARTIAL_SIGNED]: 'partial',
-				[FILE_STATUS.SIGNED]: 'signed',
-				[FILE_STATUS.DELETED]: 'deleted',
-				[FILE_STATUS.SIGNING_IN_PROGRESS]: 'signing',
-			}
-			return statusMap[status] || 'unknown'
-		},
-		formatDate(date) {
-			if (!date) return ''
-			return Moment(date).calendar()
-		},
-	},
+		const signedFile = files.value.find(file => file.status === FILE_STATUS.SIGNED)
+		if (signedFile && !previouslySignedIds.value.includes(signedFile.id)) {
+			emit('file-signed', signedFile)
+		}
+
+		previouslySignedIds.value = files.value
+			.filter(file => file.status === FILE_STATUS.SIGNED)
+			.map(file => file.id)
+	} catch (error) {
+		console.error('[libresign][FileStatusList] Error loading files:', error)
+	} finally {
+		isLoading.value = false
+	}
 }
+
+function startUpdatePolling() {
+	updatePollingInterval.value = setInterval(() => {
+		loadFiles()
+	}, props.updateInterval)
+}
+
+function stopUpdatePolling() {
+	if (updatePollingInterval.value) {
+		clearInterval(updatePollingInterval.value)
+		updatePollingInterval.value = null
+	}
+}
+
+function getStatusClass(status: string | number | undefined) {
+	const statusMap: Record<string | number, string> = {
+		[FILE_STATUS.NOT_LIBRESIGN_FILE]: 'not-libresign',
+		[FILE_STATUS.DRAFT]: 'draft',
+		[FILE_STATUS.ABLE_TO_SIGN]: 'ready',
+		[FILE_STATUS.PARTIAL_SIGNED]: 'partial',
+		[FILE_STATUS.SIGNED]: 'signed',
+		[FILE_STATUS.DELETED]: 'deleted',
+		[FILE_STATUS.SIGNING_IN_PROGRESS]: 'signing',
+	}
+	return status === undefined ? 'unknown' : statusMap[status] || 'unknown'
+}
+
+function formatDate(date: string | undefined) {
+	if (!date) {
+		return ''
+	}
+	return Moment(date).calendar()
+}
+
+onMounted(() => {
+	loadFiles()
+	startUpdatePolling()
+})
+
+onBeforeUnmount(() => {
+	stopUpdatePolling()
+})
+
+defineExpose({
+	files,
+	isLoading,
+	updatePollingInterval,
+	previouslySignedIds,
+	loadFiles,
+	startUpdatePolling,
+	stopUpdatePolling,
+	getStatusClass,
+	formatDate,
+	getStatusIcon,
+	getStatusLabel,
+})
 </script>
 
 <style lang="scss" scoped>