breadcrumb ajoute
This commit is contained in:
parent
b34e3f256a
commit
9864a3c7c1
25343
js/main.js
25343
js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,108 +1,148 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full w-full border">
|
||||
<!-- En-tête -->
|
||||
<div class="flex h-12 items-center border-b border-gray-300">
|
||||
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||
</div>
|
||||
<div class="flex flex-col h-full w-full border">
|
||||
<!-- Breadcrumb -->
|
||||
<NcBreadcrumbs class="max-h-8 mr-4">
|
||||
<NcBreadcrumb name="Home"
|
||||
title="Title of the Home folder"
|
||||
@click="handleClickBreadcrumb(-1)">
|
||||
</NcBreadcrumb>
|
||||
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0"
|
||||
v-for="(part, index) in breadcrumbParts"
|
||||
:key="index"
|
||||
:name="part"
|
||||
@click="handleClickBreadcrumb(index)">
|
||||
</NcBreadcrumb>
|
||||
</NcBreadcrumbs>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div
|
||||
v-for="file in files"
|
||||
:key="file.filename"
|
||||
class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
|
||||
@click="handleClick(file)"
|
||||
>
|
||||
<!-- Nom -->
|
||||
<div class="cursor-pointer w-4/6 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"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
class="text-NcBlue"
|
||||
>
|
||||
<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-else>
|
||||
<div class="flex items-center justify-center">
|
||||
<img alt="" loading="lazy" src="http://nextcloud.local/index.php/core/preview?fileId=161&x=32&y=32&mimeFallback=true&v=030b13&a=0" class="files-list__row-icon-preview files-list__row-icon-preview--loaded w-10 h-10 ">
|
||||
</div>
|
||||
</template>
|
||||
<!-- En-tête -->
|
||||
<div class="flex h-12 items-center border-b border-gray-300">
|
||||
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div
|
||||
v-for="file in files"
|
||||
:key="file.filename"
|
||||
class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
|
||||
@click="handleClickElem(file)"
|
||||
>
|
||||
<!-- Nom -->
|
||||
<div class="cursor-pointer w-4/6 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"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
class="text-NcBlue"
|
||||
>
|
||||
<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-else>
|
||||
<div class="flex items-center justify-center">
|
||||
<img alt="" loading="lazy" src="http://nextcloud.local/index.php/core/preview?fileId=161&x=32&y=32&mimeFallback=true&v=030b13&a=0" class="files-list__row-icon-preview files-list__row-icon-preview--loaded w-10 h-10 ">
|
||||
</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>
|
||||
</template>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { getClient } from '@nextcloud/files/dav';
|
||||
|
||||
export default {
|
||||
name: 'FileTable',
|
||||
data() {
|
||||
return {
|
||||
files: [], // Liste des fichiers et dossiers récupérés
|
||||
current_dir: '/'
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.fetchFiles();
|
||||
},
|
||||
methods: {
|
||||
async fetchFiles() {
|
||||
|
||||
|
||||
<script>
|
||||
import { getClient } from '@nextcloud/files/dav';
|
||||
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
|
||||
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
|
||||
|
||||
export default {
|
||||
name: 'FileTable',
|
||||
components: {
|
||||
NcBreadcrumbs,
|
||||
NcBreadcrumb
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: [], // Liste des fichiers et dossiers récupérés
|
||||
current_dir: '/',
|
||||
breadcrumbParts : []
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.fetchFiles();
|
||||
this.breadcrumbParts = this.getBreadcrumbParts();
|
||||
},
|
||||
methods: {
|
||||
async fetchFiles() {
|
||||
try {
|
||||
const client = getClient();
|
||||
const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
|
||||
|
||||
this.files = directoryItems.map(file => ({
|
||||
const client = getClient();
|
||||
const directoryItems = await client.getDirectoryContents('/files/admin' + this.current_dir); // Remplacez "admin" par le nom de l'utilisateur courant
|
||||
|
||||
this.files = directoryItems.map(file => ({
|
||||
basename: file.basename,
|
||||
size: file.size,
|
||||
href: client.getFileDownloadLink(file.filename),
|
||||
type: file.type
|
||||
}));
|
||||
}));
|
||||
} 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 * 1024) return `${(size / 1024).toFixed(2)} KB`;
|
||||
if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
|
||||
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') {
|
||||
this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
|
||||
await this.fetchFiles();
|
||||
this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
|
||||
this.breadcrumbParts = this.getBreadcrumbParts()
|
||||
await this.fetchFiles();
|
||||
} 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>
|
||||
|
||||
<style scoped>
|
||||
/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
|
||||
</style>
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
|
||||
</style>
|
||||
|
||||
@ -553,18 +553,26 @@ video {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
@ -581,48 +589,36 @@ video {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
.max-h-8 {
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.w-2\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-1\/6 {
|
||||
width: 16.666667%;
|
||||
}
|
||||
|
||||
.w-5\/6 {
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-4\/6 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
.w-2\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-4\/6 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
@ -645,14 +641,14 @@ video {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
@ -665,20 +661,11 @@ video {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
--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 {
|
||||
--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);
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@ -715,14 +693,6 @@ video {
|
||||
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 {
|
||||
--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));
|
||||
}
|
||||
|
||||
.last\:border-b-0:last-child {
|
||||
border-bottom-width: 0px;
|
||||
.filter {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
.last\:border-b-0:last-child {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
.hover\:bg-NcGray:hover {
|
||||
--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));
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user