Remove Zone.Identifier

src/App.vue

@@ -1,26 +1,21 @@
 <template>
-	<NcAppContent>
-		<div id="webtransfer">
-			<h1>Hello world!</h1>
-		</div>
-	</NcAppContent>
+	<div id="app">
+		<h1>Hello world</h1>
+		<FileTable />
+	</div>
 </template>
 
 <script>
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import FileTable from './views/FileTable.vue'
 
 export default {
 	name: 'App',
 	components: {
-		NcAppContent,
+		FileTable,
 	},
 }
 </script>
 
-<style scoped lang="scss">
-#webtransfer {
-	display: flex;
-	justify-content: center;
-	margin: 16px;
-}
+<style>
+
 </style>

src/main.jsZone.Identifier

@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://apps.nextcloud.com/developer/apps/generate
-HostUrl=https://apps.nextcloud.com/developer/apps/generate

src/views/FileTable.vue

@@ -0,0 +1,94 @@
+<template>
+	<table>
+		<thead>
+			<tr>
+				<th>Nom</th>
+				<th>Type</th>
+				<th>Taille</th>
+			</tr>
+		</thead>
+		<tbody>
+			<!-- Boucle pour afficher les fichiers et dossiers récupérés -->
+			<tr v-for="file in files" :key="file.filename">
+				<td>
+					<!-- Affiche un lien cliquable vers le fichier ou le dossier -->
+					<a :href="file.href" target="_blank">{{ file.basename }}</a>
+				</td>
+				<td>{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}</td>
+				<td>{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+import { getClient } from '@nextcloud/files/dav'
+
+export default {
+	name: 'FileTable',
+	data() {
+		return {
+			files: [], // Liste des fichiers et dossiers récupérés
+		}
+	},
+	async mounted() {
+		await this.fetchFiles()
+	},
+	methods: {
+		async fetchFiles() {
+			try {
+				// Création du client WebDAV
+				const client = getClient()
+
+				// Récupération des fichiers et dossiers à la racine
+				const directoryItems = await client.getDirectoryContents('/files/admin') // changer admin par le nom de l'utilisateur courant
+
+				// Mise à jour de la liste des fichiers et dossiers
+				this.files = directoryItems.map(file => ({
+					basename: file.basename,
+					size: file.size,
+					href: client.getFileDownloadLink(file.filename),
+					type: file.type,
+				}))
+			} catch (error) {
+				console.error('Erreur lors de la récupération des fichiers et dossiers :', error)
+			}
+		},
+		// Fonction pour formater la taille des fichiers
+		formatFileSize(size) {
+			if (size < 1024) return `${size} B`
+			if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`
+			if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`
+			return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
+		},
+	},
+}
+</script>
+
+<style scoped>
+    /* Styles pour le tableau */
+    table {
+        border-collapse: collapse;
+        width: 80%;
+        margin: 20px auto;
+    }
+
+    table, th, td {
+        border: 1px solid #ddd;
+        padding: 8px;
+    }
+
+    th {
+        background-color: #4CAF50;
+        color: white;
+    }
+
+    tr {
+        background-color: #f2f2f2;
+    }
+
+    td a {
+        color: #4CAF50;
+        text-decoration: none;
+    }
+</style>