ajout favoris et probleme dragend resolu
This commit is contained in:
parent
8f580aa924
commit
f62cbf4941
16
src/App.vue
16
src/App.vue
@ -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 @zip-upload="handleZipUpload" @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
|
<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" @dragEnded="toggleDragEnded" 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" :zip="zip"/>
|
<FileTable :file="sharedFile" :zip="zip" :dragEnded="dragEnded" @dragEnded="toggleDragEnded"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -29,16 +29,20 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sharedFile: null,
|
sharedFile: null,
|
||||||
zip: null,
|
zip: null,
|
||||||
|
dragEnded: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleFileUpload(file) {
|
handleFileUpload(file) {
|
||||||
this.sharedFile = file;
|
this.sharedFile = file;
|
||||||
},
|
},
|
||||||
handleZipUpload(zip) {
|
handleZipUpload(zip) {
|
||||||
this.zip = zip;
|
this.zip = zip;
|
||||||
|
},
|
||||||
|
toggleDragEnded(){
|
||||||
|
this.dragEnded = !this.dragEnded;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,135 +1,154 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col h-full w-full border">
|
<div>
|
||||||
<!-- Breadcrumb -->
|
<!-- Boutons pour fichiers :thumbsup: -->
|
||||||
<div class="flex flex-row mt-1 ml-3 items-start container">
|
<div class="flex flex-row gap-2 p-2">
|
||||||
<NcBreadcrumbs class="max-h-8">
|
<div
|
||||||
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
|
:class="getClassButton('default')"
|
||||||
</NcBreadcrumb>
|
@click="changeTab('default')"
|
||||||
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts"
|
>
|
||||||
:key="index" :name="part" @click="handleClickBreadcrumb(index)">
|
Tous les fichiers
|
||||||
</NcBreadcrumb>
|
</div>
|
||||||
<template #actions>
|
<div
|
||||||
<div class="flex items-center ml-2">
|
:class="getClassButton('favorites')"
|
||||||
<button v-if="!isTransfering" @click="toggleAddFilePopup"
|
@click="changeTab('favorites')"
|
||||||
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition">
|
>
|
||||||
<Plus :size="20" />
|
Favoris
|
||||||
<span>Nouveau</span>
|
|
||||||
</button>
|
|
||||||
<div v-else>
|
|
||||||
<ProgressBar :value="transferProgress" :color="transferStatus" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NcBreadcrumbs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Popup pour la création de fichier -->
|
|
||||||
<div v-if="isAddFilePopupVisible"
|
|
||||||
class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
|
|
||||||
<div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
|
|
||||||
<h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2>
|
|
||||||
<input v-model="newFileName" type="text" placeholder="Nom du fichier"
|
|
||||||
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
||||||
<div class="flex justify-end mt-4 space-x-2">
|
|
||||||
<button @click="toggleAddFilePopup"
|
|
||||||
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button @click="createNewFile"
|
|
||||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
|
|
||||||
Créer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- En-tête -->
|
<div class="flex flex-col h-full w-full border">
|
||||||
<div class="flex h-12 items-center border-b border-gray-300">
|
<!-- Breadcrumb -->
|
||||||
<div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
<div class="flex flex-row mt-1 ml-3 items-start container">
|
||||||
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
<NcBreadcrumbs class="max-h-8">
|
||||||
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
|
||||||
<div class="w-1/12 px-4 py-2 text-gray-500 font-semibold">Options</div>
|
</NcBreadcrumb>
|
||||||
</div>
|
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts"
|
||||||
|
:key="index" :name="part" @click="handleClickBreadcrumb(index)">
|
||||||
<!-- Contenu -->
|
</NcBreadcrumb>
|
||||||
<div :class="[
|
<template #actions>
|
||||||
'overflow-y-auto h-full rounded-xl',
|
<div class="flex items-center ml-2">
|
||||||
isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : ''
|
<button v-if="!isTransfering" @click="toggleAddFilePopup"
|
||||||
]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent
|
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition">
|
||||||
@dragleave.prevent="onDragLeave($event)">
|
<Plus :size="20" />
|
||||||
|
<span>Nouveau</span>
|
||||||
<div v-for="file in files" :key="file.filename"
|
</button>
|
||||||
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
<div v-else>
|
||||||
@click="handleClickElem(file)">
|
<ProgressBar :value="transferProgress" :color="transferStatus" />
|
||||||
|
|
||||||
<!-- Nom -->
|
|
||||||
<div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
|
||||||
<template v-if="file.type === 'directory'">
|
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
|
||||||
<path
|
|
||||||
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<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"
|
|
||||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
|
||||||
<path
|
|
||||||
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
|
|
||||||
style="fill:#969696;fill-rule:nonzero"
|
|
||||||
transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template v-if="file.type === 'file' && file.basename.split('.').pop() === 'zip'">
|
</template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 ">
|
</NcBreadcrumbs>
|
||||||
<path fill="#969696"
|
</div>
|
||||||
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>
|
<!-- Popup pour la création de fichier -->
|
||||||
|
<div v-if="isAddFilePopupVisible"
|
||||||
|
class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
|
||||||
|
<div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
|
||||||
|
<h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2>
|
||||||
|
<input v-model="newFileName" type="text" placeholder="Nom du fichier"
|
||||||
|
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||||
|
<div class="flex justify-end mt-4 space-x-2">
|
||||||
|
<button @click="toggleAddFilePopup"
|
||||||
|
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
<button @click="createNewFile"
|
||||||
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
|
||||||
|
Créer
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Type -->
|
|
||||||
<div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
|
||||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Taille -->
|
|
||||||
<div class="w-2/12 px-4 py-2 cursor-pointer">
|
|
||||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Options -->
|
|
||||||
<div class="w-1/12 px-4 py-2 cursor-pointer" @click.stop>
|
|
||||||
<NcActions>
|
|
||||||
<NcActionButton @click="deleteElem(file)">
|
|
||||||
<template #icon>
|
|
||||||
<Delete :size="20" />
|
|
||||||
</template>
|
|
||||||
Supprimer
|
|
||||||
</NcActionButton>
|
|
||||||
<NcActionButton @click="editElem(file)">
|
|
||||||
<template #icon>
|
|
||||||
<Pencil :size="20" />
|
|
||||||
</template>
|
|
||||||
Editer
|
|
||||||
</NcActionButton>
|
|
||||||
</NcActions>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory"
|
<!-- En-tête -->
|
||||||
@update="updateFileName" @close="closeEditDialog">
|
<div class="flex h-12 items-center border-b border-gray-300">
|
||||||
</EditFileName>
|
<div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||||
<FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" :isDirectory="isDirectory" @overwrite="setOverwrite" @rename="setRename" @cancel="cancelDrop">
|
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||||
</FileExistsDialog>
|
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||||
|
<div class="w-1/12 px-4 py-2 text-gray-500 font-semibold">Options</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenu -->
|
||||||
|
<div :class="[
|
||||||
|
'overflow-y-auto h-full rounded-xl',
|
||||||
|
isDragging && isDroppable ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' :
|
||||||
|
isDragging && !isDroppable ? 'border-red-500 border-4 border-dashed transition-all ease-in-out !cursor-no-drop' : ''
|
||||||
|
]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent="onDragEnter"
|
||||||
|
@dragleave.prevent="onDragLeave($event)" @dragend="onDragEnd">
|
||||||
|
|
||||||
|
<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)">
|
||||||
|
|
||||||
|
<!-- Nom -->
|
||||||
|
<div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300">
|
||||||
|
<div class="w-12 h-12 flex items-center justify-center">
|
||||||
|
<template v-if="file.type === 'directory'">
|
||||||
|
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
||||||
|
<path
|
||||||
|
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template v-if="file.type === 'file' && file.basename.split('.').pop() !== 'zip'">
|
||||||
|
<div :class="['flex items-center justify-center']">
|
||||||
|
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
||||||
|
class="w-10 h-10"
|
||||||
|
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||||
|
<path
|
||||||
|
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
|
||||||
|
style="fill:#969696;fill-rule:nonzero"
|
||||||
|
transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Type -->
|
||||||
|
<div class="w-2/12 px-4 py-2 border-r border-gray-300">
|
||||||
|
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Taille -->
|
||||||
|
<div class="w-2/12 px-4 py-2">
|
||||||
|
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Options -->
|
||||||
|
<div class="w-1/12 px-4 py-2" @click.stop>
|
||||||
|
<NcActions>
|
||||||
|
<NcActionButton @click="deleteElem(file)">
|
||||||
|
<template #icon>
|
||||||
|
<Delete :size="20" />
|
||||||
|
</template>
|
||||||
|
Supprimer
|
||||||
|
</NcActionButton>
|
||||||
|
<NcActionButton @click="editElem(file)">
|
||||||
|
<template #icon>
|
||||||
|
<Pencil :size="20" />
|
||||||
|
</template>
|
||||||
|
Editer
|
||||||
|
</NcActionButton>
|
||||||
|
</NcActions>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory"
|
||||||
|
@update="updateFileName" @close="closeEditDialog">
|
||||||
|
</EditFileName>
|
||||||
|
<FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" :isDirectory="isDirectory" @overwrite="setOverwrite" @rename="setRename" @cancel="cancelDrop">
|
||||||
|
</FileExistsDialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -137,7 +156,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
// NextCloud Components
|
// NextCloud Components
|
||||||
import { getClient, getRootPath } from '@nextcloud/files/dav';
|
import { getClient, getRootPath, getFavoriteNodes } 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';
|
||||||
@ -176,6 +195,19 @@ export default {
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
dragEnded: {
|
||||||
|
type: Boolean,
|
||||||
|
Required: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dragEnded(val) {
|
||||||
|
if(val === true) {
|
||||||
|
this.isDragging = false;
|
||||||
|
this.isDroppable = false;
|
||||||
|
this.$emit('dragEnded');
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -187,6 +219,7 @@ export default {
|
|||||||
newFileName: '',
|
newFileName: '',
|
||||||
isTransfering: false,
|
isTransfering: false,
|
||||||
isDragging: false,
|
isDragging: false,
|
||||||
|
isDroppable: true,
|
||||||
editDialogDisabled: true,
|
editDialogDisabled: true,
|
||||||
fileExistDialogDisabled: true,
|
fileExistDialogDisabled: true,
|
||||||
initialFileName: '', // Nom originel du fichier/dossier a edite
|
initialFileName: '', // Nom originel du fichier/dossier a edite
|
||||||
@ -198,6 +231,7 @@ export default {
|
|||||||
cancelOperation: false,
|
cancelOperation: false,
|
||||||
rename: false,
|
rename: false,
|
||||||
newElemName: '',
|
newElemName: '',
|
||||||
|
currentTab: 'default',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
@ -205,10 +239,28 @@ export default {
|
|||||||
this.breadcrumbParts = this.getBreadcrumbParts();
|
this.breadcrumbParts = this.getBreadcrumbParts();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async changeTab(name) {
|
||||||
|
this.currentTab = name;
|
||||||
|
this.current_dir = '/';
|
||||||
|
await this.fetchFiles();
|
||||||
|
if(this.currentTab === 'default'){
|
||||||
|
this.isDroppable = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.isDroppable = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
async fetchFiles() {
|
async fetchFiles() {
|
||||||
try {
|
try {
|
||||||
const client = getClient();
|
const client = getClient();
|
||||||
const directoryItems = await client.getDirectoryContents(this.root_path + this.current_dir);
|
let directoryItems;
|
||||||
|
if (this.currentTab === 'default'){
|
||||||
|
directoryItems = await client.getDirectoryContents(this.root_path + this.current_dir);
|
||||||
|
}
|
||||||
|
else if(this.currentTab === 'favorites'){
|
||||||
|
let favoriteNodes = await getFavoriteNodes(client);
|
||||||
|
directoryItems = this.computeFavoritesNodes(favoriteNodes);
|
||||||
|
}
|
||||||
|
|
||||||
this.files = directoryItems.map(file => ({
|
this.files = directoryItems.map(file => ({
|
||||||
basename: file.basename,
|
basename: file.basename,
|
||||||
@ -220,6 +272,29 @@ export default {
|
|||||||
console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
|
console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computeFavoritesNodes(favoriteNodes) {
|
||||||
|
let directoryItems = [];
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
favoriteNodes.forEach(element => {
|
||||||
|
// Création de l'objet elemData pour chaque élément
|
||||||
|
let elemData = {
|
||||||
|
basename: element._data.displayname,
|
||||||
|
etag: element._attributes.etag,
|
||||||
|
filename: element._attributes.filename,
|
||||||
|
lastmod: element._attributes.lastmod,
|
||||||
|
mime: element._data.mime,
|
||||||
|
size: element._data.size,
|
||||||
|
type: element._attributes.type,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Ajout de elemData à directoryItems, indexé par un identifiant unique (par exemple, basename)
|
||||||
|
directoryItems[i] = elemData;
|
||||||
|
i++;
|
||||||
|
});
|
||||||
|
|
||||||
|
return directoryItems;
|
||||||
|
},
|
||||||
formatFileSize(size) {
|
formatFileSize(size) {
|
||||||
if (size < 1024) return `${size} B`;
|
if (size < 1024) return `${size} B`;
|
||||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
|
||||||
@ -287,71 +362,89 @@ export default {
|
|||||||
},
|
},
|
||||||
onDragOver(event) {
|
onDragOver(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
if(this.currentTab === 'favorites' && this.current_dir === '/'){
|
||||||
|
event.dataTransfer.dropEffect = 'none';
|
||||||
|
this.isDroppable = false;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.isDroppable = true;
|
||||||
|
}
|
||||||
if (!this.isDragging) {
|
if (!this.isDragging) {
|
||||||
this.isDragging = true;
|
this.isDragging = true;
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onDragEnter(event){
|
||||||
|
event.preventDefault()
|
||||||
|
},
|
||||||
onDragLeave(event) {
|
onDragLeave(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (event.target === event.currentTarget) {
|
if (event.target === event.currentTarget) {
|
||||||
this.isDragging = false;
|
this.isDragging = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onDragEnd() {
|
||||||
|
this.isDragging = false;
|
||||||
|
console.log('feur2')
|
||||||
|
},
|
||||||
async onDrop(event) {
|
async onDrop(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
try {
|
this.isDragging = false; // Pour enlever le contour rouge si on ne peut pas drop sinon il reste affiche
|
||||||
this.isDragging = false;
|
if(this.isDroppable){
|
||||||
this.isTransfering = true;
|
try {
|
||||||
const file = this.file;
|
this.isTransfering = true;
|
||||||
const zip = this.zip;
|
const file = this.file;
|
||||||
console.log(file);
|
const zip = this.zip;
|
||||||
console.log(zip);
|
console.log(file);
|
||||||
|
console.log(zip);
|
||||||
|
|
||||||
|
|
||||||
if (!file && !zip) return;
|
if (!file && !zip) return;
|
||||||
|
|
||||||
if (zip) {
|
if (zip) {
|
||||||
const response = await fetch(zip.url);
|
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 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.isTransfering = false;
|
|
||||||
this.transferProgress = 0;
|
|
||||||
this.cancelOperation = false;
|
|
||||||
|
|
||||||
} catch (error) {
|
await this.moveFileToTarget({
|
||||||
console.error('Erreur lors du drop :', error);
|
name: zip.name,
|
||||||
this.transferStatus = 'bg-red-500';
|
content: zipFile
|
||||||
this.isTransfering = false;
|
}, '');
|
||||||
|
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.transferProgress = 0;
|
||||||
|
this.cancelOperation = false;
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du drop :', error);
|
||||||
|
this.transferStatus = 'bg-red-500';
|
||||||
|
this.isTransfering = false;
|
||||||
|
}
|
||||||
|
this.overwrite = false;
|
||||||
|
this.applyToAll = false;
|
||||||
|
this.rename = false;
|
||||||
|
this.newElemName = '';
|
||||||
}
|
}
|
||||||
this.overwrite = false;
|
this.isDroppable = true;
|
||||||
this.applyToAll = false;
|
console.log('feur')
|
||||||
this.rename = false;
|
|
||||||
this.newElemName = '';
|
|
||||||
},
|
},
|
||||||
async moveFilesOfFolder(folder, parentPath) {
|
async moveFilesOfFolder(folder, parentPath) {
|
||||||
await this.createFolder(folder, parentPath + '/');
|
await this.createFolder(folder, parentPath + '/');
|
||||||
@ -389,7 +482,7 @@ export default {
|
|||||||
|
|
||||||
let fullPath = '';
|
let fullPath = '';
|
||||||
if(!this.rename) {
|
if(!this.rename) {
|
||||||
fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
|
fullPath = `${this.root_path}${this.current_dir}${parentPath}/${file.name}`;
|
||||||
}
|
}
|
||||||
else if (this.rename && newName){
|
else if (this.rename && newName){
|
||||||
fullPath = `${this.root_path}${this.current_dir}${parentPath}${newName}`;
|
fullPath = `${this.root_path}${this.current_dir}${parentPath}${newName}`;
|
||||||
@ -543,6 +636,17 @@ export default {
|
|||||||
this.cancelOperation = true;
|
this.cancelOperation = true;
|
||||||
this.closeFileExistsDialog();
|
this.closeFileExistsDialog();
|
||||||
},
|
},
|
||||||
|
getClassButton(name) {
|
||||||
|
let cssStyle = "flex h-12 w-32 text-sm py-2 transition-colors font-medium border-r last:border-r-0 justify-center items-center";
|
||||||
|
|
||||||
|
if(this.currentTab === name) {
|
||||||
|
cssStyle += ' bg-blue-400 text-white';
|
||||||
|
} else {
|
||||||
|
cssStyle += ' hover:bg-gray-100 text-gray-700 bg-gray-300';
|
||||||
|
}
|
||||||
|
|
||||||
|
return cssStyle;
|
||||||
|
},
|
||||||
async sleep(ms) {
|
async sleep(ms) {
|
||||||
return new Promise(resolve => setTimeout(resolve, ms));
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
<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 class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
|
<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"
|
||||||
@click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)">
|
@click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)" @dragend="onDragEnd">
|
||||||
<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>
|
||||||
@ -219,6 +219,10 @@ export default {
|
|||||||
console.error('Erreur lors du chargement du contenu du ZIP :', error);
|
console.error('Erreur lors du chargement du contenu du ZIP :', error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onDragEnd(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.$emit('dragEnded');
|
||||||
|
},
|
||||||
|
|
||||||
formatFileSize(size) {
|
formatFileSize(size) {
|
||||||
if (size < 1024) return `${size} B`;
|
if (size < 1024) return `${size} B`;
|
||||||
|
|||||||
@ -683,6 +683,10 @@ video {
|
|||||||
width: 6rem;
|
width: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-32 {
|
||||||
|
width: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.w-4\/6 {
|
.w-4\/6 {
|
||||||
width: 66.666667%;
|
width: 66.666667%;
|
||||||
}
|
}
|
||||||
@ -725,10 +729,22 @@ video {
|
|||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cursor-not-allowed {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.cursor-pointer {
|
.cursor-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cursor-no-drop {
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
|
||||||
|
.\!cursor-no-drop {
|
||||||
|
cursor: no-drop !important;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-row {
|
.flex-row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
@ -757,6 +773,10 @@ video {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gap-2 {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-x-reverse: 0;
|
--tw-space-x-reverse: 0;
|
||||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||||
@ -823,6 +843,11 @@ video {
|
|||||||
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-red-500 {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-NcBlack {
|
.bg-NcBlack {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
||||||
@ -841,6 +866,11 @@ video {
|
|||||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
|
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-blue-400 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-blue-500 {
|
.bg-blue-500 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||||
@ -860,6 +890,11 @@ video {
|
|||||||
background-color: rgb(229 231 235 / 0.1);
|
background-color: rgb(229 231 235 / 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-gray-300 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-gray-700 {
|
.bg-gray-700 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||||
@ -874,6 +909,10 @@ video {
|
|||||||
--tw-bg-opacity: 0.5;
|
--tw-bg-opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-2 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.p-4 {
|
.p-4 {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
@ -901,6 +940,11 @@ video {
|
|||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-sm {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-xs {
|
.text-xs {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
@ -968,6 +1012,12 @@ video {
|
|||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transition-colors {
|
||||||
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
.ease-in-out {
|
.ease-in-out {
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
@ -976,6 +1026,10 @@ video {
|
|||||||
border-bottom-width: 0px;
|
border-bottom-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.last\:border-r-0:last-child {
|
||||||
|
border-right-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.hover\:bg-NcGray:hover {
|
.hover\:bg-NcGray:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
|
background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
|
||||||
@ -991,6 +1045,11 @@ video {
|
|||||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
|
background-color: rgb(29 78 216 / 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));
|
||||||
|
}
|
||||||
|
|
||||||
.hover\:bg-gray-300:hover {
|
.hover\:bg-gray-300:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user