ajout options (delete et edit) pour les fichiers
This commit is contained in:
Alexandre_BRAVO
commit
baa53809c2
@ -1,355 +1,366 @@
|
|||||||
<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">
|
||||||
<NcBreadcrumbs class="max-h-8">
|
<NcBreadcrumbs class="max-h-8">
|
||||||
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
|
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
|
||||||
</NcBreadcrumb>
|
</NcBreadcrumb>
|
||||||
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts" :key="index"
|
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts"
|
||||||
:name="part" @click="handleClickBreadcrumb(index)">
|
:key="index" :name="part" @click="handleClickBreadcrumb(index)">
|
||||||
</NcBreadcrumb>
|
</NcBreadcrumb>
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<div class="flex items-center ml-2">
|
<div class="flex items-center ml-2">
|
||||||
<button
|
<button @click="toggleAddFilePopup"
|
||||||
@click="toggleAddFilePopup"
|
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">
|
||||||
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" />
|
||||||
>
|
<span>Nouveau</span>
|
||||||
<Plus :size="20" />
|
</button>
|
||||||
<span>Nouveau</span>
|
</div>
|
||||||
</button>
|
</template>
|
||||||
</div>
|
</NcBreadcrumbs>
|
||||||
</template>
|
</div>
|
||||||
</NcBreadcrumbs>
|
|
||||||
</div>
|
|
||||||
|
<!-- Popup pour la création de fichier -->
|
||||||
|
<div v-if="isAddFilePopupVisible"
|
||||||
<!-- Popup pour la création de fichier -->
|
class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
|
||||||
<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">
|
||||||
<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>
|
||||||
<h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2>
|
<input v-model="newFileName" type="text" placeholder="Nom du fichier"
|
||||||
<input
|
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||||
v-model="newFileName"
|
<div class="flex justify-end mt-4 space-x-2">
|
||||||
type="text"
|
<button @click="toggleAddFilePopup"
|
||||||
placeholder="Nom du fichier"
|
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
|
||||||
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
Annuler
|
||||||
/>
|
</button>
|
||||||
<div class="flex justify-end mt-4 space-x-2">
|
<button @click="createNewFile"
|
||||||
<button
|
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
|
||||||
@click="toggleAddFilePopup"
|
Créer
|
||||||
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"
|
</button>
|
||||||
>
|
</div>
|
||||||
Annuler
|
</div>
|
||||||
</button>
|
</div>
|
||||||
<button
|
|
||||||
@click="createNewFile"
|
<!-- En-tête -->
|
||||||
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
|
<div class="flex h-12 items-center border-b border-gray-300">
|
||||||
>
|
<div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||||
Créer
|
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||||
</button>
|
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||||
</div>
|
<div class="w-1/12 px-4 py-2 text-gray-500 font-semibold">Options</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- Contenu -->
|
||||||
<!-- En-tête -->
|
<div :class="[
|
||||||
<div class="flex h-12 items-center border-b border-gray-300">
|
'overflow-y-auto h-full rounded-xl',
|
||||||
<div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : ''
|
||||||
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" >
|
||||||
<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 v-for="file in files" :key="file.filename"
|
||||||
</div>
|
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
||||||
|
@click="handleClickElem(file)">
|
||||||
<!-- Contenu -->
|
|
||||||
<div class="overflow-y-auto" @dragover.prevent @dragenter.prevent @dragleave.prevent @drop.prevent="onDrop">
|
<!-- Nom -->
|
||||||
<div v-for="file in files" :key="file.filename"
|
<div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||||
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
||||||
@click="handleClickElem(file)">
|
<template v-if="file.type === 'directory'">
|
||||||
|
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
||||||
<!-- Nom -->
|
<path
|
||||||
<div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
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">
|
||||||
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
</path>
|
||||||
<template v-if="file.type === 'directory'">
|
</svg>
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
</template>
|
||||||
<path
|
<template v-else>
|
||||||
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">
|
<div class="flex items-center justify-center cursor-pointer">
|
||||||
</path>
|
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
||||||
</svg>
|
class="w-10 h-10"
|
||||||
</template>
|
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||||
<template v-else>
|
<path
|
||||||
<div class="flex items-center justify-center cursor-pointer">
|
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"
|
||||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
style="fill:#969696;fill-rule:nonzero"
|
||||||
class="w-10 h-10"
|
transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
||||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
</svg>
|
||||||
<path
|
</div>
|
||||||
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"
|
</template>
|
||||||
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
</div>
|
||||||
</svg>
|
<div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
<!-- Type -->
|
||||||
<div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
|
<div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||||
</div>
|
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||||
|
</div>
|
||||||
<!-- Type -->
|
|
||||||
<div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
<!-- Taille -->
|
||||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
<div class="w-2/12 px-4 py-2 cursor-pointer">
|
||||||
</div>
|
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||||
|
</div>
|
||||||
<!-- Taille -->
|
|
||||||
<div class="w-2/12 px-4 py-2 cursor-pointer">
|
<!-- Options -->
|
||||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
<div class="w-1/12 px-4 py-2 cursor-pointer" @click.stop>
|
||||||
</div>
|
<NcActions>
|
||||||
|
<NcActionButton @click="deleteElem(file)">
|
||||||
<!-- Options -->
|
<template #icon>
|
||||||
<div class="w-1/12 px-4 py-2 cursor-pointer" @click.stop>
|
<Delete :size="20" />
|
||||||
<NcActions>
|
</template>
|
||||||
<NcActionButton @click="deleteElem(file)">
|
Supprimer
|
||||||
<template #icon>
|
</NcActionButton>
|
||||||
<Delete :size="20" />
|
<NcActionButton @click="editElem(file)">
|
||||||
</template>
|
<template #icon>
|
||||||
Supprimer
|
<Pencil :size="20" />
|
||||||
</NcActionButton>
|
</template>
|
||||||
<NcActionButton @click="editElem(file)">
|
Editer
|
||||||
<template #icon>
|
</NcActionButton>
|
||||||
<Pencil :size="20" />
|
</NcActions>
|
||||||
</template>
|
</div>
|
||||||
Editer
|
</div>
|
||||||
</NcActionButton>
|
</div>
|
||||||
</NcActions>
|
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" @update="updateFileName" @close="closeEditDialog">
|
||||||
</div>
|
</EditFileName>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" @update="updateFileName" @close="closeEditDialog">
|
|
||||||
</EditFileName>
|
|
||||||
</div>
|
|
||||||
</template>
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { getClient, getRootPath } from '@nextcloud/files/dav';
|
||||||
|
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
|
||||||
<script>
|
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
|
||||||
import { ref } from 'vue';
|
import Plus from 'vue-material-design-icons/Plus.vue'
|
||||||
import { getClient, getRootPath } from '@nextcloud/files/dav';
|
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
|
||||||
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
|
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
|
||||||
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
|
import Delete from 'vue-material-design-icons/Delete.vue';
|
||||||
import Plus from 'vue-material-design-icons/Plus.vue'
|
import Pencil from 'vue-material-design-icons/Pencil.vue'
|
||||||
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
|
import EditFileName from './EditFileName.vue';
|
||||||
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
|
|
||||||
import Delete from 'vue-material-design-icons/Delete.vue';
|
export default {
|
||||||
import Pencil from 'vue-material-design-icons/Pencil.vue'
|
name: 'FileTable',
|
||||||
import EditFileName from './EditFileName.vue';
|
components: {
|
||||||
|
NcBreadcrumbs,
|
||||||
export default {
|
NcBreadcrumb,
|
||||||
name: 'FileTable',
|
Plus,
|
||||||
components: {
|
NcActions,
|
||||||
NcBreadcrumbs,
|
NcActionButton,
|
||||||
NcBreadcrumb,
|
Delete,
|
||||||
Plus,
|
Pencil,
|
||||||
NcActions,
|
EditFileName
|
||||||
NcActionButton,
|
},
|
||||||
Delete,
|
props: {
|
||||||
Pencil,
|
file: {
|
||||||
EditFileName
|
type: Object,
|
||||||
},
|
default: null,
|
||||||
props: {
|
},
|
||||||
file: {
|
},
|
||||||
type: Object,
|
data() {
|
||||||
default: null,
|
return {
|
||||||
},
|
files: [], // Liste des fichiers et dossiers récupérés
|
||||||
},
|
root_path: getRootPath(),
|
||||||
data() {
|
current_dir: '/',
|
||||||
return {
|
breadcrumbParts: [],
|
||||||
files: [], // Liste des fichiers et dossiers récupérés
|
isAddFilePopupVisible: false,
|
||||||
root_path: getRootPath(),
|
newFileName: '',
|
||||||
current_dir: '/',
|
isTransfering: false,
|
||||||
breadcrumbParts: [],
|
isDragging: false,
|
||||||
isAddFilePopupVisible: false,
|
editDialogDisabled: true,
|
||||||
newFileName: '',
|
initialFileName: '',
|
||||||
isTransfering: false,
|
};
|
||||||
editDialogDisabled: true,
|
},
|
||||||
initialFileName: '',
|
async mounted() {
|
||||||
};
|
await this.fetchFiles();
|
||||||
},
|
this.breadcrumbParts = this.getBreadcrumbParts();
|
||||||
async mounted() {
|
},
|
||||||
await this.fetchFiles();
|
methods: {
|
||||||
this.breadcrumbParts = this.getBreadcrumbParts();
|
async fetchFiles() {
|
||||||
},
|
try {
|
||||||
methods: {
|
const client = getClient();
|
||||||
async fetchFiles() {
|
const directoryItems = await client.getDirectoryContents(this.root_path + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
|
||||||
try {
|
|
||||||
const client = getClient();
|
this.files = directoryItems.map(file => ({
|
||||||
const directoryItems = await client.getDirectoryContents(this.root_path + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
|
basename: file.basename,
|
||||||
|
size: file.size,
|
||||||
this.files = directoryItems.map(file => ({
|
href: client.getFileDownloadLink(file.filename),
|
||||||
basename: file.basename,
|
type: file.type
|
||||||
size: file.size,
|
}));
|
||||||
href: client.getFileDownloadLink(file.filename),
|
} catch (error) {
|
||||||
type: file.type
|
console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
|
||||||
}));
|
}
|
||||||
} catch (error) {
|
},
|
||||||
console.error('Erreur lors de la récupération des fichiers et dossiers :', error);
|
formatFileSize(size) {
|
||||||
}
|
if (size < 1024) return `${size} B`;
|
||||||
},
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
|
||||||
formatFileSize(size) {
|
if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
|
||||||
if (size < 1024) return `${size} B`;
|
return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
||||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
|
},
|
||||||
if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
|
generateCrumbHref(index) {
|
||||||
return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
const parts = this.breadcrumbParts.slice(0, index + 1);
|
||||||
},
|
return '/' + parts.join('/');
|
||||||
generateCrumbHref(index) {
|
},
|
||||||
const parts = this.breadcrumbParts.slice(0, index + 1);
|
getBreadcrumbParts() {
|
||||||
return '/' + parts.join('/');
|
// Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide.
|
||||||
},
|
if (this.current_dir === '/') return [];
|
||||||
getBreadcrumbParts() {
|
return this.current_dir.split('/').filter(part => part);
|
||||||
// Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide.
|
},
|
||||||
if (this.current_dir === '/') return [];
|
async handleClickElem(file) {
|
||||||
return this.current_dir.split('/').filter(part => part);
|
if (this.isTransfering) return;
|
||||||
},
|
if (file.type === 'directory') {
|
||||||
async handleClickElem(file) {
|
this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
|
||||||
if (this.isTransfering) return;
|
this.breadcrumbParts = this.getBreadcrumbParts()
|
||||||
if (file.type === 'directory') {
|
await this.fetchFiles();
|
||||||
this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
|
} else {
|
||||||
this.breadcrumbParts = this.getBreadcrumbParts()
|
window.open(file.href, '_blank');
|
||||||
await this.fetchFiles();
|
}
|
||||||
} else {
|
},
|
||||||
window.open(file.href, '_blank');
|
async handleClickBreadcrumb(index) {
|
||||||
}
|
if (this.isTransfering) return;
|
||||||
},
|
let dir = '/';
|
||||||
async handleClickBreadcrumb(index) {
|
if (index >= -1) {
|
||||||
if (this.isTransfering) return;
|
dir = this.generateCrumbHref(index);
|
||||||
let dir = '/';
|
}
|
||||||
if (index >= -1) {
|
this.current_dir = dir;
|
||||||
dir = this.generateCrumbHref(index);
|
this.breadcrumbParts = this.getBreadcrumbParts();
|
||||||
}
|
await this.fetchFiles();
|
||||||
this.current_dir = dir;
|
},
|
||||||
this.breadcrumbParts = this.getBreadcrumbParts();
|
async createNewFile() {
|
||||||
await this.fetchFiles();
|
if (!this.newFileName) return;
|
||||||
},
|
try {
|
||||||
async createNewFile() {
|
const client = getClient();
|
||||||
if (!this.newFileName) return;
|
const filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
|
||||||
try {
|
await client.createDirectory(filePath, '');
|
||||||
const client = getClient();
|
this.newFileName = '';
|
||||||
const filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`;
|
this.isAddFilePopupVisible = false;
|
||||||
await client.createDirectory(filePath, '');
|
await this.fetchFiles();
|
||||||
this.newFileName = '';
|
} catch (error) {
|
||||||
this.isAddFilePopupVisible = false;
|
console.error('Erreur lors de la création du fichier :', error);
|
||||||
await this.fetchFiles();
|
}
|
||||||
} catch (error) {
|
},
|
||||||
console.error('Erreur lors de la création du fichier :', error);
|
toggleAddFilePopup() {
|
||||||
}
|
this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
|
||||||
},
|
if (!this.isAddFilePopupVisible) this.newFileName = '';
|
||||||
toggleAddFilePopup() {
|
},
|
||||||
this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
|
onDragOver(event) {
|
||||||
if (!this.isAddFilePopupVisible) this.newFileName = '';
|
event.preventDefault();
|
||||||
},
|
if (!this.isDragging) {
|
||||||
async onDrop(event) {
|
this.isDragging = true;
|
||||||
event.preventDefault();
|
} else {
|
||||||
|
return;
|
||||||
try {
|
}
|
||||||
this.isTransfering = true;
|
},
|
||||||
const file = this.file;
|
onDragLeave(event) {
|
||||||
if (!file) return;
|
event.preventDefault();
|
||||||
|
if (event.target === event.currentTarget) {
|
||||||
if (file.isDirectory) {
|
this.isDragging = false;
|
||||||
await this.moveFilesOfFolder(file,'');
|
}
|
||||||
} else {
|
},
|
||||||
if (file.content && typeof file.content.arrayBuffer === 'function') {
|
async onDrop(event) {
|
||||||
file.content = await file.content.arrayBuffer();
|
event.preventDefault();
|
||||||
}
|
try {
|
||||||
await this.moveFileToTarget(file, '');
|
this.isDragging = false;
|
||||||
}
|
this.isTransfering = true;
|
||||||
|
const file = this.file;
|
||||||
this.isTransfering = false;
|
if (!file) return;
|
||||||
|
|
||||||
} catch (error) {
|
if (file.isDirectory) {
|
||||||
console.error('Erreur lors du drop :', error);
|
await this.moveFilesOfFolder(file,'');
|
||||||
this.isTransfering = false;
|
} else {
|
||||||
}
|
if (file.content && typeof file.content.arrayBuffer === 'function') {
|
||||||
},
|
file.content = await file.content.arrayBuffer();
|
||||||
async moveFilesOfFolder(folder, parentPath) {
|
}
|
||||||
|
await this.moveFileToTarget(file, '');
|
||||||
await this.createFolder(folder, parentPath);
|
}
|
||||||
|
|
||||||
for (const child of folder.children) {
|
this.isTransfering = false;
|
||||||
if (child.isDirectory) {
|
|
||||||
await this.moveFilesOfFolder(child, parentPath + child.parentPath + '/');
|
} catch (error) {
|
||||||
} else {
|
console.error('Erreur lors du drop :', error);
|
||||||
if (child.content && typeof child.content.arrayBuffer === 'function') {
|
this.isTransfering = false;
|
||||||
child.content = await child.content.arrayBuffer();
|
}
|
||||||
}
|
},
|
||||||
await this.moveFileToTarget(child, parentPath + child.parentPath + '/');
|
async moveFilesOfFolder(folder, parentPath) {
|
||||||
}
|
|
||||||
}
|
await this.createFolder(folder, parentPath);
|
||||||
},
|
|
||||||
async moveFileToTarget(file, parentPath) {
|
for (const child of folder.children) {
|
||||||
try {
|
if (child.isDirectory) {
|
||||||
const client = getClient();
|
await this.moveFilesOfFolder(child, parentPath + child.parentPath + '/');
|
||||||
// Assurez-vous que le chemin parent est correctement formaté
|
} else {
|
||||||
|
if (child.content && typeof child.content.arrayBuffer === 'function') {
|
||||||
const fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
|
child.content = await child.content.arrayBuffer();
|
||||||
|
}
|
||||||
if (ArrayBuffer.isView(file.content)) {
|
await this.moveFileToTarget(child, parentPath + child.parentPath + '/');
|
||||||
file.content = Buffer.from(file.content);
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
// Évitez les chemins incorrects en utilisant `path.normalize` si disponible
|
async moveFileToTarget(file, parentPath) {
|
||||||
await client.putFileContents(fullPath, file.content);
|
try {
|
||||||
|
const client = getClient();
|
||||||
// Recharge les fichiers après l'opération
|
// Assurez-vous que le chemin parent est correctement formaté
|
||||||
await this.fetchFiles();
|
|
||||||
} catch (error) {
|
const fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
|
||||||
console.error('Erreur lors du déplacement du fichier:', error);
|
|
||||||
}
|
if (ArrayBuffer.isView(file.content)) {
|
||||||
},
|
file.content = Buffer.from(file.content);
|
||||||
async createFolder(folder, parentPath) {
|
}
|
||||||
try {
|
|
||||||
const client = getClient();
|
// Évitez les chemins incorrects en utilisant `path.normalize` si disponible
|
||||||
|
await client.putFileContents(fullPath, file.content);
|
||||||
const fullPath = `${this.root_path}${this.current_dir}${parentPath}/${folder.name}/`;
|
|
||||||
|
// Recharge les fichiers après l'opération
|
||||||
await client.createDirectory(fullPath);
|
await this.fetchFiles();
|
||||||
await this.fetchFiles();
|
} catch (error) {
|
||||||
} catch (error) {
|
console.error('Erreur lors du déplacement du fichier:', error);
|
||||||
console.error('Erreur lors de la création du dossier :', error);
|
}
|
||||||
}
|
},
|
||||||
},
|
async createFolder(folder, parentPath) {
|
||||||
async deleteElem(file){
|
try {
|
||||||
const client = getClient()
|
const client = getClient();
|
||||||
try{
|
|
||||||
let path = this.root_path + this.current_dir + file.basename;
|
const fullPath = `${this.root_path}${this.current_dir}${parentPath}/${folder.name}/`;
|
||||||
await client.deleteFile(path);
|
|
||||||
}
|
await client.createDirectory(fullPath);
|
||||||
catch(error){
|
await this.fetchFiles();
|
||||||
console.error('Erreur lors de la suppression d\'un element : ', error);
|
} catch (error) {
|
||||||
}
|
console.error('Erreur lors de la création du dossier :', error);
|
||||||
|
}
|
||||||
await this.fetchFiles();
|
},
|
||||||
},
|
async deleteElem(file){
|
||||||
async editElem(file) {
|
const client = getClient()
|
||||||
this.initialFileName = file.basename;
|
try{
|
||||||
this.editDialogDisabled = false;
|
let path = this.root_path + this.current_dir + file.basename;
|
||||||
},
|
await client.deleteFile(path);
|
||||||
closeEditDialog() {
|
}
|
||||||
this.editDialogDisabled = true;
|
catch(error){
|
||||||
},
|
console.error('Erreur lors de la suppression d\'un element : ', error);
|
||||||
async updateFileName(names){
|
}
|
||||||
if(names[0] !== names[1]){
|
|
||||||
const client = getClient()
|
await this.fetchFiles();
|
||||||
try{
|
},
|
||||||
const oldName = this.root_path + this.current_dir + names.initialFileName;
|
async editElem(file) {
|
||||||
const newName = this.root_path + this.current_dir + names.newFileName;
|
this.initialFileName = file.basename;
|
||||||
await client.moveFile(oldName,newName);
|
this.editDialogDisabled = false;
|
||||||
}
|
},
|
||||||
catch(error){
|
closeEditDialog() {
|
||||||
console.error('Erreur lors du renommage d\'un element : ', error);
|
this.editDialogDisabled = true;
|
||||||
}
|
},
|
||||||
|
async updateFileName(names){
|
||||||
await this.fetchFiles();
|
if(names[0] !== names[1]){
|
||||||
}
|
const client = getClient()
|
||||||
},
|
try{
|
||||||
}
|
const oldName = this.root_path + this.current_dir + names.initialFileName;
|
||||||
};
|
const newName = this.root_path + this.current_dir + names.newFileName;
|
||||||
</script>
|
await client.moveFile(oldName,newName);
|
||||||
|
}
|
||||||
<style scoped>
|
catch(error){
|
||||||
/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
|
console.error('Erreur lors du renommage d\'un element : ', error);
|
||||||
</style>
|
}
|
||||||
|
|
||||||
|
await this.fetchFiles();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
|
||||||
|
</style>
|
||||||
@ -67,7 +67,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="48" />
|
<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>
|
||||||
@ -255,4 +255,4 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Ajoutez ici des styles si nécessaire */
|
/* Ajoutez ici des styles si nécessaire */
|
||||||
</style>
|
</style>
|
||||||
@ -773,6 +773,10 @@ video {
|
|||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-4 {
|
||||||
|
border-width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
@ -781,11 +785,20 @@ video {
|
|||||||
border-right-width: 1px;
|
border-right-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-dashed {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
|
||||||
.border-gray-300 {
|
.border-gray-300 {
|
||||||
--tw-border-opacity: 1;
|
--tw-border-opacity: 1;
|
||||||
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-green-500 {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(34 197 94 / 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));
|
||||||
@ -901,6 +914,16 @@ video {
|
|||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transition-all {
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ease-in-out {
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
.last\:border-b-0:last-child {
|
.last\:border-b-0:last-child {
|
||||||
border-bottom-width: 0px;
|
border-bottom-width: 0px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user