ajout fonctionalite ecraser et annuler depot
This commit is contained in:
commit
28d6b8d176
1
src/.gitignore
vendored
Normal file
1
src/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
output.css
|
@ -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>
|
||||||
|
1
src/assets/package-x-generic.svg
Normal file
1
src/assets/package-x-generic.svg
Normal 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 |
@ -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);
|
||||||
|
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user