ajout options (delete et edit) pour les fichiers

src/components/EditFileName.vue

@@ -0,0 +1,79 @@
+<template>
+<div  class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50" @click="closeModal">
+    <div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96" @click.stop>
+        <h2 class="text-lg font-semibold mb-4">Modifier le nom du fichier</h2>
+        <input
+            type="text"
+            v-model="newFileName"
+            @input="onInputChange"
+            @keyup.enter="save"
+            placeholder="Entrez le nom du fichier"
+            class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <div class="flex justify-end mt-4 space-x-2">
+            <button @click="save" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Sauvegarder</button>
+            <button @click="closeModal" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Annuler</button>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: "FileNameEditor",
+    props: {
+        initialFileName: {
+        type: String,
+        required: true,
+        },
+    },
+    data() {
+        var newFileName = this.initialFileName;
+        var extension = '';
+        let nameSplit = newFileName.split('.');
+        if (nameSplit.length > 1) {
+            extension = nameSplit.pop();
+        }
+        return {
+            newFileName,
+            extension,
+        };
+    },
+    methods: {
+        save() {
+            if(this.newFileName !== ''){
+                // Séparer le nom de fichier sans l'extension
+                const fileNameWithoutExtension = this.newFileName.slice(0, this.newFileName.lastIndexOf('.'));
+                
+                // Re-construire le nom du fichier avec l'extension d'origine
+                const newFileNameWithOriginalExtension = fileNameWithoutExtension + '.' + this.extension;
+
+                if (this.extension !== '' && this.newFileName !== newFileNameWithOriginalExtension) {
+                    // L'extension a été modifiée, on rétablit l'extension correcte
+                    this.newFileName = newFileNameWithOriginalExtension;
+                }
+
+                this.$emit("update", { initialFileName: this.initialFileName, newFileName: this.newFileName });
+                this.closeModal();
+            }
+        },
+        closeModal() {
+            this.$emit("close");
+        },
+        onInputChange() {
+            // Vous pouvez ici vérifier si l'extension a été modifiée et la rétablir
+            const fileNameWithoutExtension = this.newFileName.slice(0, this.newFileName.lastIndexOf('.'));
+            const newFileNameWithOriginalExtension = fileNameWithoutExtension + '.' + this.extension;
+
+            // Si l'extension est différente de celle d'origine, on la rétablit
+            if (this.extension !== '' && this.newFileName !== newFileNameWithOriginalExtension) {
+                this.newFileName = newFileNameWithOriginalExtension;
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/FileTable.vue

@@ -53,9 +53,10 @@
 
         <!-- En-tête -->
         <div class="flex h-12 items-center border-b border-gray-300">
-            <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
+            <div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
-            <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
+            <div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
-            <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
+            <div class="w-2/12 px-4 py-2 text-gray-500 font-semibold">Taille</div>
+            <div class="w-1/12 px-4 py-2 text-gray-500 font-semibold">Options</div>
         </div>
 
         <!-- Contenu -->
@@ -65,7 +66,7 @@
                 @click="handleClickElem(file)">
 
                 <!-- Nom -->
-                <div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
+                <div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
                     <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
                         <template v-if="file.type === 'directory'">
                             <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
@@ -90,34 +91,64 @@
                 </div>
 
                 <!-- Type -->
-                <div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
+                <div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
                     {{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
                 </div>
 
                 <!-- Taille -->
-                <div class="w-1/6 px-4 py-2 cursor-pointer">
+                <div class="w-2/12 px-4 py-2 cursor-pointer">
                     {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
                 </div>
+
+                <!-- Options -->
+                <div class="w-1/12 px-4 py-2 cursor-pointer" @click.stop>
+                    <NcActions>
+                        <NcActionButton @click="deleteElem(file)">
+                            <template #icon>
+                                <Delete :size="20" />
+                            </template>
+                            Supprimer
+                        </NcActionButton>
+                        <NcActionButton @click="editElem(file)">
+                            <template #icon>
+                                <Pencil :size="20" />
+                            </template>
+                            Editer
+                        </NcActionButton>
+                    </NcActions>
+                </div>
             </div>
         </div>
-
+        <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" @update="updateFileName" @close="closeEditDialog">
+        </EditFileName>
     </div>
 </template>
 
 
 
 <script>
+import { ref } from 'vue';
 import { getClient, getRootPath } from '@nextcloud/files/dav';
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
 import Plus from 'vue-material-design-icons/Plus.vue'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
+import Delete from 'vue-material-design-icons/Delete.vue';
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import EditFileName from './EditFileName.vue';
 
 export default {
     name: 'FileTable',
     components: {
         NcBreadcrumbs,
         NcBreadcrumb,
-        Plus
+        Plus,
+        NcActions,
+        NcActionButton,
+        Delete,
+        Pencil,
+        EditFileName
     },
     props: {
         file: {
@@ -134,6 +165,8 @@ export default {
             isAddFilePopupVisible: false,
             newFileName: '',
             isTransfering: false,
+            editDialogDisabled: true,
+            initialFileName: '',
         };
     },
     async mounted() {
@@ -278,7 +311,41 @@ export default {
             } catch (error) {
                 console.error('Erreur lors de la création du dossier :', error);
             }
-        }
+        },
+        async deleteElem(file){
+            const client = getClient()
+            try{
+                let path = this.root_path + this.current_dir + file.basename;
+                await client.deleteFile(path);
+            }
+            catch(error){
+                console.error('Erreur lors de la suppression d\'un element : ', error);
+            }
+            
+            await this.fetchFiles();
+        },
+        async editElem(file) {
+            this.initialFileName = file.basename;
+            this.editDialogDisabled = false;
+        },
+        closeEditDialog() {
+            this.editDialogDisabled = true;
+        },
+        async updateFileName(names){
+            if(names[0] !== names[1]){
+                const client = getClient()
+                try{
+                    const oldName = this.root_path + this.current_dir + names.initialFileName;
+                    const newName = this.root_path + this.current_dir + names.newFileName;
+                    await client.moveFile(oldName,newName);
+                }
+                catch(error){
+                    console.error('Erreur lors du renommage d\'un element : ', error);
+                }
+                
+                await this.fetchFiles();
+            }
+        },
     }
 };
 </script>

src/output.css

@@ -631,6 +631,10 @@ video {
   height: 4rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-6 {
   height: 1.5rem;
 }
@@ -639,14 +643,14 @@ video {
   height: 100%;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .max-h-8 {
   max-height: 2rem;
 }
 
+.w-1\/12 {
+  width: 8.333333%;
+}
+
 .w-1\/6 {
   width: 16.666667%;
 }
@@ -659,10 +663,18 @@ video {
   width: 3rem;
 }
 
+.w-2\/12 {
+  width: 16.666667%;
+}
+
 .w-2\/6 {
   width: 33.333333%;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .w-4\/6 {
   width: 66.666667%;
 }
@@ -671,6 +683,10 @@ video {
   width: 1.5rem;
 }
 
+.w-7\/12 {
+  width: 58.333333%;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -679,14 +695,6 @@ video {
   width: 100%;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
-.w-24 {
-  width: 6rem;
-}
-
 .max-w-64 {
   max-width: 16rem;
 }