ajout fonctionalite ecraser et annuler depot

This commit is contained in:
Alexandre_BRAVO 2024-11-26 15:33:12 +01:00
commit 28d6b8d176
5 changed files with 139 additions and 83 deletions

1
src/.gitignore vendored Normal file
View File

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

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 339 B

View File

@ -1,4 +1,4 @@
<template> <template>
<div class="flex flex-col h-full w-full border"> <div class="flex flex-col h-full w-full border">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div class="flex flex-row mt-1 ml-3 items-start container"> <div class="flex flex-row mt-1 ml-3 items-start container">
@ -56,7 +56,8 @@
<div :class="[ <div :class="[
'overflow-y-auto h-full rounded-xl', 'overflow-y-auto h-full rounded-xl',
isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : '' 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" <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" 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> </path>
</svg> </svg>
</template> </template>
<template v-else> <template v-if="file.type === 'file' && file.basename.split('.').pop() !== 'zip'">
<div class="flex items-center justify-center cursor-pointer"> <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" <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
class="w-10 h-10" class="w-10 h-10"
@ -84,6 +85,12 @@
</svg> </svg>
</div> </div>
</template> </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>
<div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div> <div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
</div> </div>
@ -118,7 +125,8 @@
</div> </div>
</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> </EditFileName>
<FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="setOverwrite" @rename="" @cancel="cancelDrop"> <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="setOverwrite" @rename="" @cancel="cancelDrop">
</FileExistsDialog> </FileExistsDialog>
@ -128,9 +136,8 @@
<script> <script>
import { getClient, getRootPath } from '@nextcloud/files/dav';
// NextCloud Components // NextCloud Components
import { getClient, getRootPath } from '@nextcloud/files/dav';
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'; import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'; import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'; import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
@ -165,6 +172,10 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
zip: {
type: Object,
default: null,
},
}, },
data() { data() {
return { return {
@ -177,7 +188,7 @@ export default {
isTransfering: false, isTransfering: false,
isDragging: false, isDragging: false,
editDialogDisabled: true, editDialogDisabled: true,
fileExistDialogDisabled:true, fileExistDialogDisabled: true,
initialFileName: '', // Nom originel du fichier/dossier a edite initialFileName: '', // Nom originel du fichier/dossier a edite
isDirectory: false, // Si l'element a edite est un dossier ou non isDirectory: false, // Si l'element a edite est un dossier ou non
transferProgress: 0, transferProgress: 0,
@ -244,30 +255,30 @@ export default {
}, },
async createNewFile() { async createNewFile() {
if (!this.newFileName) return; if (!this.newFileName) return;
try { try {
const client = getClient(); const client = getClient();
let filePath = ''; let filePath = '';
console.log(this.newFileName) console.log(this.newFileName)
if(this.current_dir[this.current_dir.length - 1] === '/') { if (this.current_dir[this.current_dir.length - 1] === '/') {
filePath = `${this.root_path}${this.current_dir}${this.newFileName}`; filePath = `${this.root_path}${this.current_dir}${this.newFileName}`;
}
else{
filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
}
const alreadyExists = await this.elemtAlreadyExists(filePath);
if (!alreadyExists) {
await client.createDirectory(filePath, '');
this.newFileName = '';
this.isAddFilePopupVisible = false;
await this.fetchFiles();
}
else{
alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`);
}
} catch (error) {
console.error('Erreur lors de la création du fichier :', error);
} }
else {
filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
}
const alreadyExists = await this.elemtAlreadyExists(filePath);
if (!alreadyExists) {
await client.createDirectory(filePath, '');
this.newFileName = '';
this.isAddFilePopupVisible = false;
await this.fetchFiles();
}
else {
alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`);
}
} catch (error) {
console.error('Erreur lors de la création du fichier :', error);
}
}, },
toggleAddFilePopup() { toggleAddFilePopup() {
this.isAddFilePopupVisible = !this.isAddFilePopupVisible; this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
@ -285,7 +296,7 @@ export default {
event.preventDefault(); event.preventDefault();
if (event.target === event.currentTarget) { if (event.target === event.currentTarget) {
this.isDragging = false; this.isDragging = false;
} }
}, },
async onDrop(event) { async onDrop(event) {
event.preventDefault(); event.preventDefault();
@ -293,21 +304,40 @@ export default {
this.isDragging = false; this.isDragging = false;
this.isTransfering = true; this.isTransfering = true;
const file = this.file; const file = this.file;
const zip = this.zip;
console.log(file); console.log(file);
if (!file) return; console.log(zip);
if (file.isDirectory) {
await this.moveFilesOfFolder(file,''); if (!file && !zip) return;
} else {
if (zip) {
const response = await fetch(zip.url);
this.transferProgress = 25; this.transferProgress = 25;
if (file.content && typeof file.content.arrayBuffer === 'function') { if (!response.ok) {
file.content = await file.content.arrayBuffer(); throw new Error(`Erreur lors du téléchargement : ${response.statusText}`);
} }
const zipFile = await response.arrayBuffer();
this.transferProgress = 50; this.transferProgress = 50;
await this.moveFileToTarget(file, '');
this.transferProgress = 100;
}
await this.moveFileToTarget({
name: zip.name,
content: zipFile
}, '');
this.transferProgress = 100;
} else {
if (file.isDirectory) {
await this.moveFilesOfFolder(file, '');
} else {
this.transferProgress = 25;
if (file.content && typeof file.content.arrayBuffer === 'function') {
file.content = await file.content.arrayBuffer();
}
this.transferProgress = 50;
await this.moveFileToTarget(file, '');
this.transferProgress = 100;
}
}
this.isTransfering = false; this.isTransfering = false;
this.transferProgress = 0; this.transferProgress = 0;
this.cancelOperation = false; this.cancelOperation = false;
@ -352,14 +382,14 @@ export default {
try { try {
const client = getClient(); const client = getClient();
// Assurez-vous que le chemin parent est correctement formaté // Assurez-vous que le chemin parent est correctement formaté
let fullPath = ''; let fullPath = '';
fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`; fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
if (ArrayBuffer.isView(file.content)) { if (ArrayBuffer.isView(file.content)) {
file.content = Buffer.from(file.content); file.content = Buffer.from(file.content);
} }
const alreadyExists = await this.elemtAlreadyExists(fullPath); const alreadyExists = await this.elemtAlreadyExists(fullPath);
if(!alreadyExists || this.overwrite) { if(!alreadyExists || this.overwrite) {
// Évitez les chemins incorrects en utilisant `path.normalize` si disponible // Évitez les chemins incorrects en utilisant `path.normalize` si disponible
@ -372,10 +402,10 @@ export default {
// Recharge les fichiers après l'opération // Recharge les fichiers après l'opération
await this.fetchFiles(); await this.fetchFiles();
} }
else{ else {
this.initialFileName = file.name; this.initialFileName = file.name;
this.fileExistDialogDisabled = false; this.fileExistDialogDisabled = false;
while(!this.fileExistDialogDisabled) { while (!this.fileExistDialogDisabled) {
await this.sleep(50); await this.sleep(50);
} }
if(!this.cancelOperation){ if(!this.cancelOperation){
@ -393,14 +423,14 @@ export default {
fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}`; fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}`;
const alreadyExists = await this.elemtAlreadyExists(fullPath); const alreadyExists = await this.elemtAlreadyExists(fullPath);
if(!alreadyExists) { if (!alreadyExists) {
await client.createDirectory(fullPath); await client.createDirectory(fullPath);
await this.fetchFiles(); await this.fetchFiles();
} }
else if(!this.applyToAll){ else if(!this.applyToAll){
this.initialFileName = folder.name; this.initialFileName = folder.name;
this.fileExistDialogDisabled = false; this.fileExistDialogDisabled = false;
while(!this.fileExistDialogDisabled) { while (!this.fileExistDialogDisabled) {
await this.sleep(); await this.sleep();
} }
if(this.overwrite && !this.applyToAll) { if(this.overwrite && !this.applyToAll) {
@ -411,16 +441,16 @@ export default {
console.error('Erreur lors de la création du dossier :', error); console.error('Erreur lors de la création du dossier :', error);
} }
}, },
async deleteElem(file){ async deleteElem(file) {
const client = getClient() const client = getClient()
try{ try {
let path = this.root_path + this.current_dir + "/" + file.basename; let path = this.root_path + this.current_dir + "/" + file.basename;
await client.deleteFile(path); await client.deleteFile(path);
} }
catch(error){ catch (error) {
console.error('Erreur lors de la suppression d\'un element : ', error); console.error('Erreur lors de la suppression d\'un element : ', error);
} }
await this.fetchFiles(); await this.fetchFiles();
}, },
/** /**
@ -428,10 +458,10 @@ export default {
* @param file le ficher/dossier dont on veut editer le nom * @param file le ficher/dossier dont on veut editer le nom
*/ */
async editElem(file) { async editElem(file) {
if(file.type === 'file'){ if (file.type === 'file') {
this.isDirectory = false; this.isDirectory = false;
} }
else{ else {
this.isDirectory = true; this.isDirectory = true;
} }
this.initialFileName = file.basename; this.initialFileName = file.basename;
@ -450,21 +480,21 @@ export default {
* Change le nom du fichier sur le serveur Cloud via un client WebDAV * Change le nom du fichier sur le serveur Cloud via un client WebDAV
* @param names Contient un initialFileName et un newFileName * @param names Contient un initialFileName et un newFileName
*/ */
async updateFileName(names){ async updateFileName(names) {
if(names.initialFileName !== names.newFileName){ if (names.initialFileName !== names.newFileName) {
const client = getClient() const client = getClient()
try{ try {
const oldName = this.root_path + this.current_dir + names.initialFileName; const oldName = this.root_path + this.current_dir + names.initialFileName;
const newName = this.root_path + this.current_dir + names.newFileName; const newName = this.root_path + this.current_dir + names.newFileName;
let alreadyExists = await this.elemtAlreadyExists(newName); let alreadyExists = await this.elemtAlreadyExists(newName);
if(!alreadyExists) { if (!alreadyExists) {
await client.moveFile(oldName,newName); await client.moveFile(oldName, newName);
} }
else{ else {
alert(`Vous ne pouvez pas renommez le fichier/dossier : ${names.newFileName} car un autre fichier/dossier porte deja le meme nom.`); alert(`Vous ne pouvez pas renommez le fichier/dossier : ${names.newFileName} car un autre fichier/dossier porte deja le meme nom.`);
} }
} }
catch(error){ catch (error) {
console.error('Erreur lors du renommage d\'un element : ', error); console.error('Erreur lors du renommage d\'un element : ', error);
} }
await this.fetchFiles(); await this.fetchFiles();
@ -479,7 +509,7 @@ export default {
* Check si un fichier ou un dossier existe deja sur le serveur * Check si un fichier ou un dossier existe deja sur le serveur
* @param path le chemin du fichier/dossier * @param path le chemin du fichier/dossier
*/ */
async elemtAlreadyExists(path){ async elemtAlreadyExists(path) {
const client = getClient(); const client = getClient();
let exists = await client.exists(path); let exists = await client.exists(path);

View File

@ -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-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 class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</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" 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-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 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-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"> <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
<template> <template>
@ -27,10 +41,8 @@
<div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer"> <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<!-- Icône dynamique pour plié/déplié --> <!-- Icône dynamique pour plié/déplié -->
<div class="w-12 h-12 flex items-center justify-center cursor-pointer"> <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> </div>
<span class="ml-2 truncate cursor-pointer">{{ file.name }}</span> <span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
</div> </div>
@ -38,12 +50,8 @@
<div class="w-1/6 px-4 py-2 cursor-pointer">-</div> <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
</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> <template>
<div class="flex items-center justify-center cursor-pointer"> <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" <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
@ -56,8 +64,8 @@
</div> </div>
</template> </template>
<div class="w-4/6 flex items-center px-4 py-2 cursor-pointer"> <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>
<div class="w-2/6 py-2 cursor-pointer"> <div class="w-2/6 py-2 cursor-pointer">
{{ formatFileSize(file.size) }} {{ formatFileSize(file.size) }}
@ -67,7 +75,7 @@
</div> </div>
</div> </div>
<div v-if="isLoading" class="flex h-full items-center justify-center"> <div v-if="isLoading" class="flex h-full items-center justify-center">
<component :is="Loading" class="text-white w-24 h-24 animate-spin" :size="40"/> <component :is="Loading" class="text-white w-24 h-24 animate-spin" :size="40" />
</div> </div>
<div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center"> <div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
<span class="text-gray-500">Aucun contenu à afficher</span> <span class="text-gray-500">Aucun contenu à afficher</span>
@ -87,13 +95,15 @@ export default {
data() { data() {
return { return {
zipContent: [], zipContent: [],
folderMap: {}, folderMap: {},
archiveUrl: '', archiveUrl: '',
token: '', token: '',
ChevronRightIcon, ChevronRightIcon,
ChevronDownIcon, ChevronDownIcon,
isLoading: ref(false), isLoading: ref(false),
Loading, Loading,
zipName: '',
zipSize: 0,
}; };
}, },
props: { props: {
@ -146,7 +156,9 @@ export default {
try { try {
const response = await fetch(this.zipUrl); const response = await fetch(this.zipUrl);
const zipData = await response.blob(); const zipData = await response.blob();
this.zipName = this.zipUrl.split('/').pop();
const zip = await JSZip.loadAsync(zipData); const zip = await JSZip.loadAsync(zipData);
this.zipSize = zipData.size;
const files = []; const files = [];
@ -219,6 +231,14 @@ export default {
const currentState = this.folderMap[file.fullPath]; const currentState = this.folderMap[file.fullPath];
this.$set(this.folderMap, file.fullPath, !currentState); 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) { async onDragStart(file) {
const getFilesFromFolder = (folder) => { const getFilesFromFolder = (folder) => {