ajout fonctionalite ecraser et annuler depot

src/.gitignore

@@ -0,0 +1 @@
+output.css

src/App.vue

@@ -5,12 +5,12 @@
 			<!-- Première section -->
 			<div 
 				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
-				<WebContentViewer @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
+				<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
 			</div>
 			<!-- Deuxième section -->
 			<div 
 				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl">
-				<FileTable :file="sharedFile"/>
+				<FileTable :file="sharedFile" :zip="zip"/>
 			</div>
 		</div>
 	</div>
@@ -30,12 +30,16 @@ export default {
 	data() {
 		return {
 		sharedFile: null,
+		zip: null,
 		};
 	},
 	methods: {
 		handleFileUpload(file) {
 		this.sharedFile = file;
 		},
+		handleZipUpload(zip) {
+		this.zip = zip;
+		},
 	},
 }
 </script>

src/assets/package-x-generic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#969696" d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z"/></svg>

src/components/FileTable.vue

@@ -56,7 +56,8 @@
         <div :class="[
             'overflow-y-auto h-full rounded-xl',
             isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : ''
-        ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" >
+        ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent
+            @dragleave.prevent="onDragLeave($event)">
 
             <div v-for="file in files" :key="file.filename"
                 class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
@@ -72,7 +73,7 @@
                                 </path>
                             </svg>
                         </template>
-                        <template v-else>
+                        <template v-if="file.type === 'file' && file.basename.split('.').pop() !== 'zip'">
                             <div class="flex items-center justify-center cursor-pointer">
                                 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
                                     class="w-10 h-10"
@@ -84,6 +85,12 @@
                                 </svg>
                             </div>
                         </template>
+                        <template v-if="file.type === 'file' && file.basename.split('.').pop() === 'zip'">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 ">
+                                <path fill="#969696"
+                                    d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z" />
+                            </svg>
+                        </template>
                     </div>
                     <div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
                 </div>
@@ -118,7 +125,8 @@
             </div>
         </div>
 
-        <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog">
+        <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory"
+            @update="updateFileName" @close="closeEditDialog">
         </EditFileName>
         <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="setOverwrite" @rename="" @cancel="cancelDrop">
         </FileExistsDialog>
@@ -128,9 +136,8 @@
 
 
 <script>
-import { getClient, getRootPath } from '@nextcloud/files/dav';
-
 // NextCloud Components
+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 NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
@@ -165,6 +172,10 @@ export default {
             type: Object,
             default: null,
         },
+        zip: {
+            type: Object,
+            default: null,
+        },
     },
     data() {
         return {
@@ -293,9 +304,28 @@ export default {
                 this.isDragging = false;
                 this.isTransfering = true;
                 const file = this.file;
+                const zip = this.zip;
                 console.log(file);
-                if (!file) return;
+                console.log(zip);
 
+
+                if (!file && !zip) return;
+
+                if (zip) {
+                    const response = await fetch(zip.url);
+                    this.transferProgress = 25;
+                    if (!response.ok) {
+                        throw new Error(`Erreur lors du téléchargement : ${response.statusText}`);
+                    }
+                    const zipFile = await response.arrayBuffer();
+                    this.transferProgress = 50;
+
+                    await this.moveFileToTarget({
+                        name: zip.name,
+                        content: zipFile
+                    }, '');
+                    this.transferProgress = 100;
+                } else {
                     if (file.isDirectory) {
                         await this.moveFilesOfFolder(file, '');
                     } else {
@@ -307,7 +337,7 @@ export default {
                         await this.moveFileToTarget(file, '');
                         this.transferProgress = 100;
                     }
-
+                }
                 this.isTransfering = false;
                 this.transferProgress = 0;
                 this.cancelOperation = false;

src/components/WebContentViewer.vue

@@ -4,16 +4,30 @@
             <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
             <div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
         </div>
+
+        <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading"
+            draggable="true" @dragstart="dragZip()">
+            <template>
+                <div class="flex items-center justify-center cursor-pointer">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 ">
+                        <path fill="#969696" d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z"/>
+                    </svg>
+                </div>
+            </template>
+            <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
+                <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div>
+
+            </div>
+            <div class="w-2/6 py-2 cursor-pointer">
+                {{ formatFileSize(zipSize) }}
+            </div>
+        </div>
+
         <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto h-full">
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
 
-                <div
+                <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
-                    class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    @click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)">
-                    @click="toggleFolder(file)"
-                    v-if="file.isDirectory"
-                    draggable="true" 
-                    @dragstart="onDragStart(file)"
-                >
                     <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                         <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
                             <template>
@@ -27,10 +41,8 @@
                         <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                             <!-- Icône dynamique pour plié/déplié -->
                             <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
-                                <component 
+                                <component :is="folderMap[file.fullPath] ? ChevronDownIcon : ChevronRightIcon"
-                                    :is="folderMap[file.fullPath] ? ChevronDownIcon : ChevronRightIcon" 
+                                    class="text-NcBlue w-6 h-6" />
-                                    class="text-NcBlue w-6 h-6"
-                                />
                             </div>
                             <span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
                         </div>
@@ -38,12 +50,8 @@
                     <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
                 </div>
 
-                <div
+                <div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
-                    class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
+                    v-else draggable="true" @dragstart="onDragStart(file, $event)">
-                    v-else
-                    draggable="true"
-                    @dragstart="onDragStart(file, $event)"
-                >
                     <template>
                         <div class="flex items-center justify-center cursor-pointer">
                             <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
@@ -56,7 +64,7 @@
                         </div>
                     </template>
                     <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
-                        <div class="truncate max-sm:max-w-32 max-w-64">{{ file.name }}</div>
+                        <div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ file.name }}</div>
 
                     </div>
                     <div class="w-2/6 py-2 cursor-pointer">
@@ -94,6 +102,8 @@ export default {
             ChevronDownIcon,
             isLoading: ref(false),
             Loading,
+            zipName: '',
+            zipSize: 0,
         };
     },
     props: {
@@ -146,7 +156,9 @@ export default {
             try {
                 const response = await fetch(this.zipUrl);
                 const zipData = await response.blob();
+                this.zipName = this.zipUrl.split('/').pop();
                 const zip = await JSZip.loadAsync(zipData);
+                this.zipSize = zipData.size;
 
                 const files = [];
 
@@ -219,6 +231,14 @@ export default {
             const currentState = this.folderMap[file.fullPath];
             this.$set(this.folderMap, file.fullPath, !currentState);
         },
+        async dragZip() {
+            try {
+                const zip = {name: this.zipName, url: this.zipUrl};
+                this.$emit('zip-upload', zip);
+            } catch (error) {
+                console.error('Erreur lors du drag du ZIP :', error);
+            }
+        },
         async onDragStart(file) {
 
             const getFilesFromFolder = (folder) => {