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

breadcrumb ajoute

Browse Source
This commit is contained in:
Alexandre_BRAVO 2024-11-15 18:19:55 +01:00
parent b34e3f256a
commit 9864a3c7c1
4 changed files with 25401 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25343
js/main.js
View File

File diff suppressed because one or more lines are too long

2
js/main.js.map
View File

File diff suppressed because one or more lines are too long

214
src/components/FileTable.vue
View File

@ -1,108 +1,148 @@
<template> <template>
<div class="flex flex-col h-full w-full border"> <div class="flex flex-col h-full w-full border">
<!-- En-tête --> <!-- Breadcrumb -->
<div class="flex h-12 items-center border-b border-gray-300"> <NcBreadcrumbs class="max-h-8 mr-4">
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div> <NcBreadcrumb name="Home"
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div> title="Title of the Home folder"
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div> @click="handleClickBreadcrumb(-1)">
</div> </NcBreadcrumb>
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0"
v-for="(part, index) in breadcrumbParts"
:key="index"
:name="part"
@click="handleClickBreadcrumb(index)">
</NcBreadcrumb>
</NcBreadcrumbs>
<!-- Contenu --> <!-- En-tête -->
<div <div class="flex h-12 items-center border-b border-gray-300">
v-for="file in files" <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
:key="file.filename" <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
@click="handleClick(file)" </div>
>
<!-- Nom --> <!-- Contenu -->
<div class="cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300"> <div
<div class="w-12 h-12 flex items-center justify-center"> v-for="file in files"
<template v-if="file.type === 'directory'"> :key="file.filename"
<svg class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
fill="currentColor" @click="handleClickElem(file)"
width="40" >
height="40" <!-- Nom -->
viewBox="0 0 24 24" <div class="cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300">
class="text-NcBlue" <div class="w-12 h-12 flex items-center justify-center">
> <template v-if="file.type === 'directory'">
<path <svg
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" fill="currentColor"
></path> width="40"
</svg> height="40"
</template> viewBox="0 0 24 24"
<template v-else> class="text-NcBlue"
<div class="flex items-center justify-center"> >
<img alt="" loading="lazy" src="http://nextcloud.local/index.php/core/preview?fileId=161&amp;x=32&amp;y=32&amp;mimeFallback=true&amp;v=030b13&amp;a=0" class="files-list__row-icon-preview files-list__row-icon-preview--loaded w-10 h-10 "> <path
</div> 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"
</template> ></path>
</svg>
</template>
<template v-else>
<div class="flex items-center justify-center">
<img alt="" loading="lazy" src="http://nextcloud.local/index.php/core/preview?fileId=161&amp;x=32&amp;y=32&amp;mimeFallback=true&amp;v=030b13&amp;a=0" class="files-list__row-icon-preview files-list__row-icon-preview--loaded w-10 h-10 ">
</div> </div>
<div class="ml-4">{{ file.basename }}</div> </template>
</div>
<!-- Type -->
<div class="cursor-pointer w-1/6 px-4 py-2 border-r border-gray-300">
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
</div>
<!-- Taille -->
<div class="cursor-pointer w-1/6 px-4 py-2">
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
</div>
</div> </div>
</div> <div class="ml-4">{{ file.basename }}</div>
</div>
<!-- Type -->
<div class="cursor-pointer w-1/6 px-4 py-2 border-r border-gray-300">
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
</div>
<!-- Taille -->
<div class="cursor-pointer w-1/6 px-4 py-2">
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
</div>
</div>
</div>
</template> </template>
<script> <script>
import { getClient } from '@nextcloud/files/dav'; import { getClient } from '@nextcloud/files/dav';
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
export default { import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
name: 'FileTable',
data() { export default {
return { name: 'FileTable',
files: [], // Liste des fichiers et dossiers récupérés components: {
current_dir: '/' NcBreadcrumbs,
}; NcBreadcrumb
}, },
async mounted() { data() {
await this.fetchFiles(); return {
}, files: [], // Liste des fichiers et dossiers récupérés
methods: { current_dir: '/',
async fetchFiles() { breadcrumbParts : []
};
},
async mounted() {
await this.fetchFiles();
this.breadcrumbParts = this.getBreadcrumbParts();
},
methods: {
async fetchFiles() {
try { try {
const client = getClient(); const client = getClient();
const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
this.files = directoryItems.map(file => ({ this.files = directoryItems.map(file => ({
basename: file.basename, basename: file.basename,
size: file.size, size: file.size,
href: client.getFileDownloadLink(file.filename), href: client.getFileDownloadLink(file.filename),
type: file.type type: file.type
})); }));
} catch (error) { } catch (error) {
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);
} }
}, },
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`;
if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`; if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`; return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
}, },
async handleClick(file) { generateCrumbHref(index) {
const parts = this.breadcrumbParts.slice(0, index + 1);
return '/' + parts.join('/');
},
getBreadcrumbParts() {
// Si le current_dir est un simple '/', on le renvoie sous forme de tableau vide.
if (this.current_dir === '/') return [];
return this.current_dir.split('/').filter(part => part);
},
async handleClickElem(file) {
if (file.type === 'directory') { if (file.type === 'directory') {
this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename; this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
await this.fetchFiles(); this.breadcrumbParts = this.getBreadcrumbParts()
await this.fetchFiles();
} else { } else {
window.open(file.href, '_blank'); window.open(file.href, '_blank');
} }
} },
async handleClickBreadcrumb(index) {
let dir = '/';
if (index >= -1) {
dir = this.generateCrumbHref(index);
}
this.current_dir = dir;
this.breadcrumbParts = this.getBreadcrumbParts();
await this.fetchFiles();
} }
}; }
</script> };
</script>
<style scoped>
/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */ <style scoped>
</style> /* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
</style>

99
src/output.css
View File

@ -553,18 +553,26 @@ video {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.mr-2 {
margin-right: 0.5rem;
}
.ml-4 { .ml-4 {
margin-left: 1rem; margin-left: 1rem;
} }
.mr-2 {
margin-right: 0.5rem;
}
.mr-4 {
margin-right: 1rem;
}
.flex { .flex {
display: flex; display: flex;
} }
.h-10 {
height: 2.5rem;
}
.h-12 { .h-12 {
height: 3rem; height: 3rem;
} }
@ -581,48 +589,36 @@ video {
height: 2rem; height: 2rem;
} }
.h-10 { .max-h-8 {
height: 2.5rem; max-height: 2rem;
} }
.w-1\/3 { .w-1\/3 {
width: 33.333333%; width: 33.333333%;
} }
.w-2\/3 {
width: 66.666667%;
}
.w-full {
width: 100%;
}
.w-1\/6 { .w-1\/6 {
width: 16.666667%; width: 16.666667%;
} }
.w-5\/6 {
width: 83.333333%;
}
.w-8 {
width: 2rem;
}
.w-10 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }
.w-4\/6 {
width: 66.666667%;
}
.w-12 { .w-12 {
width: 3rem; width: 3rem;
} }
.flex-1 { .w-2\/3 {
flex: 1 1 0%; width: 66.666667%;
}
.w-4\/6 {
width: 66.666667%;
}
.w-full {
width: 100%;
} }
.cursor-pointer { .cursor-pointer {
@ -645,14 +641,14 @@ video {
justify-content: center; justify-content: center;
} }
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-lg { .rounded-lg {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.rounded-xl {
border-radius: 0.75rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
@ -665,20 +661,11 @@ video {
border-right-width: 1px; border-right-width: 1px;
} }
.border-b-2 {
border-bottom-width: 2px;
}
.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-NcGray {
--tw-border-opacity: 1;
border-color: rgb(33 33 33 / 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));
@ -688,19 +675,10 @@ video {
background-color: rgb(0 0 0 / 0.8); background-color: rgb(0 0 0 / 0.8);
} }
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
.p-2 {
padding: 0.5rem;
}
.px-4 { .px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -715,14 +693,6 @@ video {
font-weight: 600; font-weight: 600;
} }
.text-white\/20 {
color: rgb(255 255 255 / 0.2);
}
.text-white\/50 {
color: rgb(255 255 255 / 0.5);
}
.text-NcBlue { .text-NcBlue {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 114 195 / var(--tw-text-opacity, 1)); color: rgb(0 114 195 / var(--tw-text-opacity, 1));
@ -733,20 +703,15 @@ video {
color: rgb(107 114 128 / var(--tw-text-opacity, 1)); color: rgb(107 114 128 / var(--tw-text-opacity, 1));
} }
.last\:border-b-0:last-child { .filter {
border-bottom-width: 0px; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
.hover\:cursor-pointer:hover { .last\:border-b-0:last-child {
cursor: pointer; border-bottom-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));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
} }