ajout fonctionalite ecraser et annuler depot

src/components/FileExistsDialog.vue

@@ -29,10 +29,12 @@
 
         <!-- Appliquer l'ecrasement a tous -->
         <div v-if="displayOverwrite" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
+            <h2 class="text-lg font-semibold mb-4">Vous allez ecraser le fichier/dossier</h2>
             <div class="flex items-center content-evenly">
                 <input type="checkbox" v-model="forAll" />
-                <p>Appliquer à tous</p>
+                <p>Appliquer à tous*</p>
             </div>
+            <p class="text-xs text-gray-400">* ecrasera tous les fichiers qui ont le même nom sur votre dépôt</p>
             <div class="flex justify-end mt-4 space-x-2">
                 <button @click="onOverwrite" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Valider</button>
                 <button @click="toggleOverwrite" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Annuler</button>

src/components/FileTable.vue

@@ -120,7 +120,7 @@
 
         <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog">
         </EditFileName>
-        <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" @cancel="closeFileExistsDialog">
+        <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="setOverwrite" @rename="" @cancel="cancelDrop">
         </FileExistsDialog>
     </div>
 </template>
@@ -182,6 +182,9 @@ export default {
             isDirectory: false, // Si l'element a edite est un dossier ou non
             transferProgress: 0,
             transferStatus: 'bg-blue-500',
+            overwrite: false,
+            applyToAll: false,
+            cancelOperation: false,
         };
     },
     async mounted() {
@@ -307,12 +310,15 @@ export default {
 
                 this.isTransfering = false;
                 this.transferProgress = 0;
+                this.cancelOperation = false;
 
             } catch (error) {
                 console.error('Erreur lors du drop :', error);
                 this.transferStatus = 'bg-red-500';
                 this.isTransfering = false;
             }
+            this.overwrite = false;
+            this.applyToAll = false;
         },
         async moveFilesOfFolder(folder, parentPath) {
             await this.createFolder(folder, parentPath + '/');
@@ -329,6 +335,7 @@ export default {
             const progressSteps = Math.floor(100 / checkChildrenInChildren(folder));
 
             for (const child of folder.children) {
+                if(!this.cancelOperation){
                     this.transferProgress += progressSteps;
                     if (child.isDirectory) {
                         await this.moveFilesOfFolder(child, parentPath + '/' + child.parentPath + '/');
@@ -339,6 +346,7 @@ export default {
                         await this.moveFileToTarget(child, parentPath + '/' + child.parentPath + '/');
                     }
                 }
+            }
         },
         async moveFileToTarget(file, parentPath) {
             try {
@@ -353,10 +361,14 @@ export default {
                 }
                 
                 const alreadyExists = await this.elemtAlreadyExists(fullPath);
-                if(!alreadyExists) {
+                if(!alreadyExists || this.overwrite) {
                     // Évitez les chemins incorrects en utilisant `path.normalize` si disponible
                     await client.putFileContents(fullPath, file.content);
 
+                    if (this.overwrite && !this.applyToAll) {
+                        this.overwrite = false;
+                    }
+
                     // Recharge les fichiers après l'opération
                     await this.fetchFiles();
                 }
@@ -366,6 +378,9 @@ export default {
                     while(!this.fileExistDialogDisabled) {
                         await this.sleep(50);
                     }
+                    if(!this.cancelOperation){
+                        await this.moveFileToTarget(file,parentPath);
+                    }
                 }
             } catch (error) {
                 console.error('Erreur lors du déplacement du fichier:', error);
@@ -382,12 +397,15 @@ export default {
                     await client.createDirectory(fullPath);
                     await this.fetchFiles();
                 }
-                else{
+                else if(!this.applyToAll){
                     this.initialFileName = folder.name;
                     this.fileExistDialogDisabled = false;
                     while(!this.fileExistDialogDisabled) {
                         await this.sleep();
                     }
+                    if(this.overwrite && !this.applyToAll) {
+                        this.overwrite = false;
+                    }
                 }
             } catch (error) {
                 console.error('Erreur lors de la création du dossier :', error);
@@ -452,6 +470,11 @@ export default {
                 await this.fetchFiles();
             }
         },
+        setOverwrite(options) {
+            this.overwrite = true;
+            this.applyToAll = options.forAll;
+            this.fileExistDialogDisabled = true;
+        },
         /**
          * Check si un fichier ou un dossier existe deja sur le serveur
          * @param path le chemin du fichier/dossier
@@ -462,6 +485,10 @@ export default {
 
             return exists;
         },
+        cancelDrop(){
+            this.cancelOperation = true;
+            this.closeFileExistsDialog();
+        },
         async sleep(ms) {
             return new Promise(resolve => setTimeout(resolve, ms));
         }

src/output.css

@@ -579,10 +579,6 @@ video {
   }
 }
 
-.visible {
-  visibility: visible;
-}
-
 .fixed {
   position: fixed;
 }
@@ -741,10 +737,6 @@ video {
   flex-direction: column;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .content-evenly {
   align-content: space-evenly;
 }
@@ -909,6 +901,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -942,6 +939,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);