From b4107232d8c527d020fcedc57e8265d553600e51 Mon Sep 17 00:00:00 2001
From: GMrrc <143954951+GMrrc@users.noreply.github.com>
Date: Fri, 22 Nov 2024 17:00:53 +0100
Subject: [PATCH] add custom progressBar

---
 src/components/FileTable.vue   | 11 +++++-----
 src/components/ProgressBar.vue | 37 ++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ProgressBar.vue

diff --git a/src/components/FileTable.vue b/src/components/FileTable.vue
index 3fb9e91..2ba3d45 100644
--- a/src/components/FileTable.vue
+++ b/src/components/FileTable.vue
@@ -16,7 +16,7 @@
                             <span>Nouveau</span>
                         </button>
                         <span v-else>
-                            <NcProgressBar :value="transferProgress" size="medium" :color="transferStatus" />
+                            <ProgressBar :value="transferProgress" :color="transferStatus" />
                         </span>
                     </div>
                 </template>
@@ -133,7 +133,8 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
 import Delete from 'vue-material-design-icons/Delete.vue';
 import Pencil from 'vue-material-design-icons/Pencil.vue'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+//import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+import ProgressBar from './ProgressBar.vue';
 import EditFileName from './EditFileName.vue';
 
 export default {
@@ -144,7 +145,7 @@ export default {
         Plus,
         NcActions,
         NcActionButton,
-        NcProgressBar,
+        ProgressBar,
         Delete,
         Pencil,
         EditFileName,
@@ -169,7 +170,7 @@ export default {
             initialFileName: '', // Nom originel du fichier/dossier edite
             isDirectory: false, // Si l'element edite est un dossier ou non
             transferProgress: 0,
-            transferStatus: 'green',
+            transferStatus: 'bg-blue-500',
         };
     },
     async mounted() {
@@ -297,7 +298,7 @@ export default {
 
             } catch (error) {
                 console.error('Erreur lors du drop :', error);
-                this.transferStatus = 'red';
+                this.transferStatus = 'bg-red-500';
                 this.isTransfering = false;
             }
         },
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..60ce9c4
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="flex items-center w-48 h-full">
+      <div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
+        <div
+          :style="{ width: value + '%' }"
+          class="h-full rounded-full"
+          :class="color"
+        ></div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "ProgressBar",
+    props: {
+      value: {
+        type: Number,
+        required: true,
+        validator: (v) => v >= 0 && v <= 100,
+      },
+      label: {
+        type: String,
+        default: "Progress",
+      },
+      color: {
+        type: String,
+        default: "bg-blue-500",
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
+  </style>
+  
\ No newline at end of file