KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug click checkbox folder resolu

Browse Source
This commit is contained in:
Alexandre_BRAVO 2024-12-11 16:27:42 +01:00
commit 1e13f68638
4 changed files with 158 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@ -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 sm:mr-0 rounded-xl dark:bg-NcBlack/40 bg-white/80">
<WebContentViewer :translate="translate" @zip-upload="handleZipUpload" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" :zipUrl="zipUrl"/>
<WebContentViewer :translate="translate" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" :zipUrl="zipUrl"/>
</div>
<!-- Deuxième section -->
<div
class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 sm:ml-4 dark:bg-NcBlack bg-white rounded-xl">
<FileTable :file="sharedFile" :zip="zip" :dragEnded="dragEnded" :translate="translate" @dragEnded="toggleDragEnded"/>
<FileTable :file="sharedFile" :dragEnded="dragEnded" :translate="translate" @dragEnded="toggleDragEnded"/>
</div>
</div>
</div>
@ -40,11 +40,10 @@ export default {
data() {
console.log('feur')
let zipUrl = document.getElementById('archiveInfos').getAttribute('dataarchiveurl');
console.log(zipUrl);
console.log(zipUrl)
return {
zipUrl,
sharedFile: null,
zip: null,
dragEnded: false,
};
},
@ -52,12 +51,8 @@ export default {
handleFileUpload(file) {
this.sharedFile = file;
},
handleZipUpload(zip) {
this.zip = zip;
},
toggleDragEnded(){
this.dragEnded = !this.dragEnded;
this.zip = null;
this.sharedFile = null;
},
translate(id) {

2
src/components/EditFileName.vue
View File

@ -1,6 +1,6 @@
<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>
<div class="dark:bg-NcBlack bg-white rounded-lg shadow-lg p-6 w-96" @click.stop>
<h2 class="text-lg font-semibold mb-4">{{ translate('modify.file.name') }}</h2>
<input
type="text"

41
src/components/FileTable.vue
View File

@ -190,10 +190,6 @@ export default {
type: Object,
default: null,
},
zip: {
type: Object,
default: null,
},
dragEnded: {
type: Boolean,
Required: true,
@ -411,26 +407,10 @@ export default {
try {
this.isTransfering = true;
const file = this.file;
const zip = this.zip;
console.log(file);
console.log(zip);
if (!file) return;
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;
if (file.isList) {
await this.moveListOfFiles(file);
} else {
if (file.isDirectory) {
await this.moveFilesOfFolder(file, '');
@ -444,6 +424,7 @@ export default {
this.transferProgress = 100;
}
}
this.isTransfering = false;
this.transferProgress = 0;
this.cancelOperation = false;
@ -460,6 +441,20 @@ export default {
}
this.isDroppable = true;
},
async moveListOfFiles(files) {
for (const file of files.children) {
this.transferProgress += 100 / files.children.length;
if (file.isDirectory) {
//just create the folder
await this.createFolder(file, file.parentPath + '/');
} else {
if (file.content && typeof file.content.arrayBuffer === 'function') {
file.content = await file.content.arrayBuffer();
}
await this.moveFileToTarget(file, file.parentPath + '/');
}
}
},
async moveFilesOfFolder(folder, parentPath) {
await this.createFolder(folder, parentPath + '/');
const checkChildrenInChildren = (folder) => {

151
src/components/WebContentViewer.vue
View File

@ -12,35 +12,21 @@
</div>
<div class="flex h-12 items-center border-b border-gray-300">
<div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">{{ translate('name') }}</div>
<div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">{{ translate('name') }}
</div>
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">{{ translate('size') }}</div>
</div>
<!-- Fichier .zip -->
<div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading && zipContent.length !== 0"
draggable="true" @dragstart="dragZip()" @dragend="onDragEnd">
<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-5/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-1/6 py-2 cursor-pointer">
{{ formatFileSize(zipSize) }}
</div>
</div>
<!-- Archive depliee -->
<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 class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
@click="toggleFolder(file)" v-if="file.isDirectory && isVisible(file)" draggable="true" @dragstart="onDragStart(file)" @dragend="onDragEnd">
<div @click.stop class="flex items-center">
<input type="checkbox" id="checkbox-file"
class="form-checkbox h-5 w-5 text-blue-600 transition duration-150 ease-in-out cursor-pointer"
@change="handleCheckboxChange(file, $event)" :checked="isChecked(file)">
</div>
<div class="w-5/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>
@ -60,6 +46,11 @@
<div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
v-else-if="isVisible(file)" draggable="true" @dragstart="onDragStart(file, $event)">
<div class="flex items-center">
<input type="checkbox" id="checkbox-file"
class="form-checkbox h-5 w-5 text-blue-600 transition duration-150 ease-in-out cursor-pointer"
@change="handleCheckboxChange(file, $event)" :checked="isChecked(file)">
</div>
<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"
@ -78,7 +69,6 @@
{{ formatFileSize(file.size) }}
</div>
</div>
</div>
</div>
<div v-if="isLoading" class="flex h-full items-center justify-center">
@ -98,7 +88,6 @@ import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
import Loading from 'vue-material-design-icons/Loading.vue';
import { ref } from 'vue';
import path from 'path';
export default {
name: 'WebContentViewer',
@ -120,6 +109,7 @@ export default {
zipSize: 0,
currentDir: '',
breadcrumbParts: [],
cochedFiles: [],
};
},
props: {
@ -247,6 +237,59 @@ export default {
event.preventDefault();
this.$emit('dragEnded');
},
handleCheckboxChange(file, event) {
if (event.target.checked) {
this.cocheFile(file);
// Si c'est un dossier, cocher récursivement tous les fichiers enfants
if (file.isDirectory && file.children) {
this.cocheFilesRecursively(file.children);
}
} else {
this.decocheFile(file);
// Si c'est un dossier, décocher récursivement tous les fichiers enfants
if (file.isDirectory && file.children) {
this.decocheFilesRecursively(file.children);
}
}
},
getFullPath(file) {
if (!file.parentPath || file.parentPath === '') {
return file.name;
} else {
return `${file.parentPath}/${file.name}`;
}
},
cocheFile(file) {
if (!this.cochedFiles.some(f => this.getFullPath(f) === this.getFullPath(file))) {
this.cochedFiles.push(file);
console.log(this.cochedFiles);
}
},
decocheFile(file) {
this.cochedFiles = this.cochedFiles.filter(f => this.getFullPath(f) !== this.getFullPath(file));
console.log(this.cochedFiles);
},
cocheFilesRecursively(files) {
files.forEach(file => {
this.cocheFile(file);
if (file.isDirectory && file.children) {
this.cocheFilesRecursively(file.children);
}
});
},
decocheFilesRecursively(files) {
files.forEach(file => {
this.decocheFile(file);
if (file.isDirectory && file.children) {
this.decocheFilesRecursively(file.children);
}
});
},
isChecked(file) {
return this.cochedFiles.some(f => this.getFullPath(f) === this.getFullPath(file));
},
formatFileSize(size) {
if (size < 1024) return `${size} B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
@ -274,13 +317,13 @@ export default {
},
async dragZip() {
try {
const zip = {name: this.zipName, url: this.zipUrl};
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) {
async onDragStart(file, event) {
const getFilesFromFolder = (folder) => {
const files = [];
if (!folder.children || folder.children.length === 0) return files;
@ -296,6 +339,25 @@ export default {
return files;
};
if (this.cochedFiles.length > 0) {
const folder = {
// Si des fichiers sont cochés, utiliser cette liste
name: file.name,
isDirectory: true,
isList: true,
children: this.cochedFiles,
unzip: Promise.all(this.cochedFiles.map(file => file.unzip))
};
try {
await folder.unzip;
this.$emit('file-upload', folder);
} catch (error) {
console.error('Erreur lors du drag start :', error);
}
} else {
// Logique existante pour un seul fichier/dossier
try {
if (file.isDirectory) {
const files = getFilesFromFolder(file);
@ -308,6 +370,45 @@ export default {
} catch (error) {
console.error('Erreur lors du drag start :', error);
}
}
},
isVisible(file){
let parentPath = file.parentPath;
if(this.currentDir === parentPath){
return true;
}
else{
return false;
}
},
getBreadcrumbParts() {
// Si le currentDir est un simple '/', on le renvoie sous forme de tableau vide.
if (this.currentDir === '') return [];
return this.currentDir.split('/').filter(part => part);
},
generateCrumbHref(index) {
const parts = this.breadcrumbParts.slice(0, index + 1);
return parts.join('/');
},
handleClickBreadcrumb(index) {
if (this.isTransfering) return;
let dir = '';
if (index >= -1) {
dir = this.generateCrumbHref(index);
}
this.currentDir = dir;
this.breadcrumbParts = this.getBreadcrumbParts();
//console.log('cur : ', this.currentDir)
let file = {
fullPath : dir,
parentPath: this.generateCrumbHref(index -1),
isDirectory: true,
};
Object.keys(this.folderMap).forEach(key => {
this.folderMap[key] = false;
});
this.toggleFolder(file)
},
isVisible(file){
let parentPath = file.parentPath;