MERCI VUE

2024-11-20 15:12:59 +01:00
parent 34d3d8eea0
commit e2752c2440
6 changed files with 96 additions and 238 deletions
--- a/src/App.vue
+++ b/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 zipUrl="http://localhost:8000/dummyZip.zip"/>
+				<WebContentViewer @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/>
+				<FileTable :file="sharedFile"/>
 			</div>
 		</div>
 	</div>
@ -26,7 +26,17 @@ export default {
 	components: {
 		FileTable,
 		WebContentViewer  
-	}
+	},
+	data() {
+		return {
+		sharedFile: null,
+		};
+	},
+	methods: {
+		handleFileUpload(file) {
+		this.sharedFile = file;
+		},
+	},
 }
 </script>

--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@ -59,7 +59,7 @@
        </div>

        <!-- Contenu -->
-        <div class="overflow-y-auto" @dragover.prevent @drop="onDrop">
+        <div class="overflow-y-auto" @dragover.prevent @dragenter.prevent @dragleave.prevent @drop.prevent="onDrop">
            <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"
                @click="handleClickElem(file)">
@ -119,6 +119,12 @@ export default {
        NcBreadcrumb,
        Plus
    },
+    props: {
+        file: {
+        type: Object,
+        default: null,
+        },
+    },
    data() {
        return {
            files: [], // Liste des fichiers et dossiers récupérés
@ -202,13 +208,10 @@ export default {
        async onDrop(event) {
            event.preventDefault();
            try {
-                const fileData = JSON.parse(event.dataTransfer.getData('application/json'));
-                
-                if (Array.isArray(fileData.content)) {
-                    fileData.content = new Uint8Array(fileData.content);
-                }
-                
-                await this.moveFileToTarget(fileData);
+                const file = this.file;
+                console.log('Fichier déposé :', file);
+                file.content = await file.content.arrayBuffer();
+                await this.moveFileToTarget(file);
            } catch (error) {
                console.error('Erreur lors du drag and drop :', error);
            }
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@ -12,7 +12,7 @@
                    @click="toggleFolder(file)"
                    v-if="file.isDirectory"
                    draggable="true" 
-                    @dragstart="onDragStart(file, $event)"
+                    @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">
@ -211,23 +211,10 @@ export default {
            const currentState = this.folderMap[file.fullPath];
            this.$set(this.folderMap, file.fullPath, !currentState);
        },
-        async onDragStart(file, event) {
-            if (!file || !file.content) {
-                event.preventDefault();
-                return;
-            }
-            
-            let fileToTransfer = { ...file }; // Clone l'objet file
-            
-            if (file.content instanceof Blob) {
-                // Convertir le Blob en base64 string
-                const arrayBuffer = await file.content.arrayBuffer();
-                const uint8Array = new Uint8Array(arrayBuffer);
-                fileToTransfer.content = Array.from(uint8Array); // Convertir Uint8Array en array normal
-            }
-            
-            event.dataTransfer.setData('application/json', JSON.stringify(fileToTransfer));
-        },
+        async onDragStart(file) {
+            console.log('Drag start', file);
+            this.$emit('file-upload', file); 
+        }
    },
 };
 </script>
--- a/src/output.css
+++ b/src/output.css
@ -579,10 +579,6 @@ video {
  }
 }

-.visible {
-  visibility: visible;
-}
-
 .fixed {
  position: fixed;
 }
@ -619,22 +615,10 @@ video {
  margin-top: 1rem;
 }

-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .flex {
  display: flex;
 }

-.contents {
-  display: contents;
-}
-
-.hidden {
-  display: none;
-}
-
 .h-10 {
  height: 2.5rem;
 }
@ -647,18 +631,14 @@ video {
  height: 4rem;
 }

-.h-full {
-  height: 100%;
-}
-
-.h-5 {
-  height: 1.25rem;
-}
-
 .h-6 {
  height: 1.5rem;
 }

+.h-full {
+  height: 100%;
+}
+
 .max-h-8 {
  max-height: 2rem;
 }
@ -675,10 +655,18 @@ video {
  width: 3rem;
 }

+.w-2\/6 {
+  width: 33.333333%;
+}
+
 .w-4\/6 {
  width: 66.666667%;
 }

+.w-6 {
+  width: 1.5rem;
+}
+
 .w-96 {
  width: 24rem;
 }
@ -687,35 +675,6 @@ video {
  width: 100%;
 }

-.w-5 {
-  width: 1.25rem;
-}
-
-.w-5\/6 {
-  width: 83.333333%;
-}
-
-.w-2\/6 {
-  width: 33.333333%;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.rotate-90 {
-  --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@ -788,10 +747,6 @@ video {
  border-right-width: 1px;
 }

-.border-t {
-  border-top-width: 1px;
-}
-
 .border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@ -830,16 +785,6 @@ video {
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }

-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
-.bg-NcGray {
-  --tw-bg-opacity: 1;
-  background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
-}
-
 .bg-opacity-50 {
  --tw-bg-opacity: 0.5;
 }
@ -862,15 +807,6 @@ video {
  padding-bottom: 0.5rem;
 }

-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .pl-4 {
  padding-left: 1rem;
 }
@ -913,11 +849,6 @@ video {
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }

-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / 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);
@ -936,12 +867,6 @@ video {
  transition-duration: 150ms;
 }

-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .last\:border-b-0:last-child {
  border-bottom-width: 0px;
 }
@ -966,11 +891,6 @@ video {
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }

-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
 .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;