ajout composant fileExistsDialog (non fonctionnel)

src/components/FileExistsDialog.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
+        <div v-if="!displayRename" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+            <h2 class="text-lg font-semibold mb-4">Le fichier existe déjà</h2>
+            <p>Le fichier "{{ fileName }}" existe déjà. Que voulez-vous faire ?</p>
+            <div class="flex justify-end mt-4 space-x-2">
+                <button @click="onOverwrite">Écraser</button>
+                <button @click="toggleRename">Renommer</button>
+                <button @click="onCancel">Annuler</button>
+            </div>
+        </div>
+
+        <!-- Renommer le fichier -->
+        <div v-else class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+            <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">Valider</button>
+                <button @click="toggleRename" 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 {
+    props: {
+        fileName: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        var oldFileName = this.fileName;
+        var newFileName = this.fileName;
+        var extension = '';
+        if(!this.isDirectory) {
+            let nameSplit = newFileName.split('.');
+            if (nameSplit.length > 1) {
+                extension = nameSplit.pop();
+            }
+        }
+        
+        return {
+            displayRename: false,
+            oldFileName,
+            newFileName,
+            extension,
+        }
+    },
+    methods: {
+        onOverwrite() {
+            this.$emit('overwrite', {forAll : false});
+        },
+        onCancel() {
+            this.$emit('cancel');
+        },
+        toggleRename() {
+            this.displayRename = !this.displayRename;
+        },  
+        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.isDirectory && this.newFileName !== newFileNameWithOriginalExtension) {
+                    // L'extension a été modifiée, on rétablit l'extension correcte
+                    this.newFileName = newFileNameWithOriginalExtension;
+                }
+
+                this.$emit("rename", { initialFileName: this.initialFileName, newFileName: this.newFileName });
+                this.onCancel();
+            }
+        },
+        onInputChange() {
+            if (!this.isDirectory) {
+                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) {
+                    // Vous pouvez ici vérifier si l'extension a été modifiée et la rétablir
+                    
+                    this.newFileName = newFileNameWithOriginalExtension;
+                }
+            }
+        },
+    }
+};
+</script>
+
+<style></style>

src/components/FileTable.vue

@@ -15,9 +15,9 @@
                             <Plus :size="20" />
                             <span>Nouveau</span>
                         </button>
-                        <span v-else>
+                        <div v-else>
                             <ProgressBar :value="transferProgress" :color="transferStatus" />
-                        </span>
+                        </div>
                     </div>
                 </template>
             </NcBreadcrumbs>
@@ -117,8 +117,11 @@
                 </div>
             </div>
         </div>
+
         <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog">
         </EditFileName>
+        <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" @cancel="fileExistDialogDisabled = true">
+        </FileExistsDialog>
     </div>
 </template>
 
@@ -126,16 +129,22 @@
 
 <script>
 import { getClient, getRootPath } from '@nextcloud/files/dav';
+
+// NextCloud Components
 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'
+// Custom components
-//import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import ProgressBar from './ProgressBar.vue';
 import EditFileName from './EditFileName.vue';
+import FileExistsDialog from './FileExistsDialog.vue';
+
+// Icons
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Delete from 'vue-material-design-icons/Delete.vue';
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 export default {
     name: 'FileTable',
@@ -149,6 +158,7 @@ export default {
         Delete,
         Pencil,
         EditFileName,
+        FileExistsDialog
     },
     props: {
         file: {
@@ -167,8 +177,9 @@ export default {
             isTransfering: false,
             isDragging: false,
             editDialogDisabled: true,
-            initialFileName: '', // Nom originel du fichier/dossier edite
+            fileExistDialogDisabled:true,
-            isDirectory: false, // Si l'element edite est un dossier ou non
+            initialFileName: '', // Nom originel du fichier/dossier a edite
+            isDirectory: false, // Si l'element a edite est un dossier ou non
             transferProgress: 0,
             transferStatus: 'bg-blue-500',
         };
@@ -350,7 +361,11 @@ export default {
                     await this.fetchFiles();
                 }
                 else{
-                    alert(`Vous ne pouvez pas deposer le fichier : ${file.name} car un autre fichier porte deja le meme nom.`);
+                    this.initialFileName = file.name;
+                    this.fileExistDialogDisabled = false;
+                    while(!this.fileExistDialogDisabled) {
+                        await this.sleep(50);
+                    }
                 }
             } catch (error) {
                 console.error('Erreur lors du déplacement du fichier:', error);
@@ -368,7 +383,11 @@ export default {
                     await this.fetchFiles();
                 }
                 else{
-                    alert(`Vous ne pouvez pas deposer le dossier : ${folder.name} car un autre dossier porte deja le meme nom.`);
+                    this.initialFileName = folder.name;
+                    this.fileExistDialogDisabled = false;
+                    while(!this.fileExistDialogDisabled) {
+                        await this.sleep();
+                    }
                 }
             } catch (error) {
                 console.error('Erreur lors de la création du dossier :', error);
@@ -427,7 +446,6 @@ export default {
                 catch(error){
                     console.error('Erreur lors du renommage d\'un element : ', error);
                 }
-                
                 await this.fetchFiles();
             }
         },
@@ -440,6 +458,9 @@ export default {
             let exists = await client.exists(path);
 
             return exists;
+        },
+        async sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
         }
     }
 };

src/output.css

@@ -579,10 +579,18 @@ video {
   }
 }
 
+.visible {
+  visibility: visible;
+}
+
 .fixed {
   position: fixed;
 }
 
+.relative {
+  position: relative;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -631,6 +639,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -679,6 +691,10 @@ video {
   width: 66.666667%;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -747,6 +763,10 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -757,6 +777,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -817,6 +841,11 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -827,11 +856,20 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-200\/10 {
+  background-color: rgb(229 231 235 / 0.1);
+}
+
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }