breadcrumb ajoute

src/components/FileTable.vue

@@ -1,5 +1,19 @@
 <template>
 <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>
+
 <!-- 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>
@@ -12,7 +26,7 @@
     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)"
+    @click="handleClickElem(file)"
 >
     <!-- Nom -->
     <div class="cursor-pointer w-4/6 flex items-center px-4 py-2 border-r border-gray-300">
@@ -56,17 +70,25 @@
 
 <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: '/'
+    current_dir: '/',
+    breadcrumbParts : []
     };
 },
 async mounted() {
     await this.fetchFiles();
+    this.breadcrumbParts = this.getBreadcrumbParts();
 },
 methods: {
     async fetchFiles() {
@@ -90,13 +112,32 @@
         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;
+            this.breadcrumbParts = this.getBreadcrumbParts()
             await this.fetchFiles();
         } else {
             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();
     }
 }
 };
@@ -105,4 +146,3 @@
 <style scoped>
 /* Vous pouvez ajouter des styles personnalisés ici si nécessaire */
 </style>
-  

src/output.css

@@ -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 {
+.max-h-8 {
-  height: 2.5rem;
+  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 {
+.w-2\/3 {
-  flex: 1 1 0%;
+  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 {
+.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 {
   --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));
-}