From c79122c69629cfc27450efa367e695bf625cd926 Mon Sep 17 00:00:00 2001
From: Sophie Labyt <labytsophie@gmail.com>
Date: Tue, 22 Oct 2024 09:38:43 +0200
Subject: [PATCH] correction progress circle

---
 src/admin/modalities/ModalitiesTable.tsx |   8 +-
 src/delete/DeleteRoot.tsx                |   1 +
 src/queue/ProgressQueueCircle.tsx        |  17 ++--
 src/root/Dashboard/CardAnon.tsx          |  54 ++++++++++--
 src/ui/ProgressCircle.tsx                | 104 ++++++++++++-----------
 5 files changed, 121 insertions(+), 63 deletions(-)

diff --git a/src/admin/modalities/ModalitiesTable.tsx b/src/admin/modalities/ModalitiesTable.tsx
index bc58b40..6756b85 100644
--- a/src/admin/modalities/ModalitiesTable.tsx
+++ b/src/admin/modalities/ModalitiesTable.tsx
@@ -18,7 +18,7 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
   onDeleteAet,
   onEchoAet,
 }) => {
-  
+
   const columns: ColumnDef<Modality>[] = [
     {
       accessorKey: "name",
@@ -41,7 +41,7 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
       header: "Actions",
       id: "actions",
       cell: ({ row }) => (
-        <div className="flex justify-center items-center gap-2.5">
+        <div className="sticky right-0 z-10 bg-white">
           <Button
             onClick={() => onEchoAet(row.original.name)}
             color={Colors.secondary}
@@ -63,8 +63,8 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
     <Table
       columns={columns}
       data={aetData}
-      headerColor={Colors.white} 
-      headerTextSize="xs"  
+      headerColor={Colors.white}
+      headerTextSize="xs"
       className="bg-gray-100"
       enableColumnFilters
       enableSorting
diff --git a/src/delete/DeleteRoot.tsx b/src/delete/DeleteRoot.tsx
index 8e7d4f7..ed5e675 100644
--- a/src/delete/DeleteRoot.tsx
+++ b/src/delete/DeleteRoot.tsx
@@ -24,6 +24,7 @@ const DeleteRoot = () => {
         [[]],
         {
             onSuccess: (uuid) => {
+                console.log("Queue created with UUID:", uuid); // Log pour vérifier l'UUID
                 setQueueUuid(uuid);
             },
         }
diff --git a/src/queue/ProgressQueueCircle.tsx b/src/queue/ProgressQueueCircle.tsx
index 676488e..90ac0ad 100644
--- a/src/queue/ProgressQueueCircle.tsx
+++ b/src/queue/ProgressQueueCircle.tsx
@@ -3,18 +3,23 @@ import { Cancel } from "../icons";
 import { Queue } from "../utils/types";
 
 type ProgressQueueProps = {
-    queueData: Queue,
-    onDelete: (event: React.MouseEvent) => void
+    queueData: Queue;
+    onDelete: (event: React.MouseEvent) => void;
+    colors: { background: string; progress: string }; // Ajout des couleurs
 };
 
-const ProgressQueueCircle = ({ queueData, onDelete }: ProgressQueueProps) => {
-
+const ProgressQueueCircle = ({ queueData, onDelete, colors }: ProgressQueueProps) => {
     return (
         <div className="flex-col items-center justify-center">
-            <ProgressCircle text={queueData?.state} progress={queueData?.progress || 0} size={150}>
+            <ProgressCircle
+                text={queueData?.state}
+                progress={queueData?.progress || 0}
+                size={150}
+                className={colors.background} // Utiliser la couleur de fond
+            >
                 <div className="flex justify-center">
                     <Cancel
-                        className={`text-sm text-danger cursor-pointer hover:text-danger-hover `}
+                        className={`text-sm ${colors.progress} cursor-pointer hover:text-danger-hover`} // Utiliser la couleur de progression
                         onClick={onDelete}
                     />
                 </div>
diff --git a/src/root/Dashboard/CardAnon.tsx b/src/root/Dashboard/CardAnon.tsx
index 62fe9c5..205524d 100644
--- a/src/root/Dashboard/CardAnon.tsx
+++ b/src/root/Dashboard/CardAnon.tsx
@@ -1,19 +1,63 @@
 import Button from "../../ui/Button";
 import Card, { CardHeader, CardBody, CardFooter } from "../../ui/Card";
-import AnonQueues from "../../anonymize/AnonQueues";
-import { Colors } from "../../utils/enums";
+import { Colors } from "../../utils/enums"; // Assurez-vous que `Colors.primary` est défini ici
+import { useSelector } from "react-redux";
+import { getExistingAnonymizeQueues, getAnonymizeQueue } from "../../services/queues";
+import { useCustomQuery } from "../../utils";
+import { useMemo } from "react";
+import ProgressQueueCircle from "../../queue/ProgressQueueCircle";
+import { Spinner } from "../../ui";
+import { AnonQueue } from "../../utils/types";
 
 const CardAnon = () => {
+    const currentUserId = useSelector((state) => state.user.currentUserId);
+
+    const { data: existingAnonymizeQueues } = useCustomQuery<string[]>(
+        ['queue', 'anonymize', currentUserId?.toString() || ''],
+        () => getExistingAnonymizeQueues(currentUserId)
+    );
+
+    const firstQueue = existingAnonymizeQueues?.[0];
+
+    const { data, isPending, isFetching } = useCustomQuery<AnonQueue[]>(
+        ['queue', 'anonymize', firstQueue],
+        () => getAnonymizeQueue(firstQueue),
+        {
+            refetchInterval: 2000,
+            enabled: firstQueue != null,
+        }
+    );
+
+    const globalProgress = useMemo(() => {
+        if (!data || data.length === 0) return 0;
+        const totalJobs = data.length;
+        const completedJobs = data.filter(job => job.state === 'completed' || job.state === 'in progress').length;
+
+        return totalJobs === 0 ? 0 : (completedJobs / totalJobs) * 100;
+    }, [data]);
+
+    if (!firstQueue) return null;
+    if (isPending || isFetching) return <Spinner />;
+    
     return (
         <Card className="flex-1">
             <CardHeader centerTitle title="Anonymisation" color={Colors.blueCustom} />
-            <CardBody color={Colors.light}>
-                <AnonQueues circle={true} showResults={false}
+            <CardBody className="flex items-center justify-center" color={Colors.light}>
+                <ProgressQueueCircle
+                    onDelete={() => { }}
+                    queueData={{
+                        progress: globalProgress,
+                        state: "",
+                        id: "",
+                        results: undefined,
+                        userId: 0
+                    }}
+                    colors={{ background: 'text-gray-300', progress: Colors.primary }}
                 />
             </CardBody>
             <CardFooter color={Colors.light}>
                 <Button className="self-center" color={Colors.blueCustom}>
-                    Empty List
+                    Vider la liste
                 </Button>
             </CardFooter>
         </Card>
diff --git a/src/ui/ProgressCircle.tsx b/src/ui/ProgressCircle.tsx
index 2ecb3b6..76d2048 100644
--- a/src/ui/ProgressCircle.tsx
+++ b/src/ui/ProgressCircle.tsx
@@ -1,57 +1,65 @@
 type ProgressCircleProps = {
-    progress: number;
-    text?: string;
-    size?: number; // This defines the size of the circle
-    children?: React.ReactNode;
+  progress: number;
+  text?: string;
+  size?: number; // This defines the size of the circle
+  children?: React.ReactNode;
+  className?: string; // Prop for custom CSS class
+  progressColor?: string; // Ajout pour la couleur de progression
 };
 
-const ProgressCircle = ({ progress, text = '%', size = 100, children }: ProgressCircleProps) => { // Reduced default size
-    const radius = 12; // Reduced radius for a smaller circle
-    const circumference = 2 * Math.PI * radius;
-    const progressValue = (progress / 100) * circumference;
+const ProgressCircle = ({
+  progress,
+  text = 'Average',
+  size = 120,
+  children,
+  className = '', // Default to an empty string if no class is provided
+  progressColor = 'text-orange-600', // Couleur de progression par défaut
+}: ProgressCircleProps) => {
+  const radius = 15; // Increased radius for a larger circle
+  const circumference = 2 * Math.PI * radius;
+  const progressValue = (progress / 100) * circumference;
 
-    return (
-        <div className="relative" style={{ width: size, height: size }}>
-            <svg
-                className="rotate-[135deg] w-full h-full"
-                viewBox="0 0 36 36"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                {/* Background circle */}
-                <circle
-                    cx="18"
-                    cy="18"
-                    r={radius}
-                    fill="none"
-                    className="stroke-current text-primary dark:text-neutral-700"
-                    strokeWidth="2"
-                    strokeDasharray="75 100"
-                />
+  return (
+    <div className={`relative flex items-center justify-center ${className}`} style={{ width: size, height: size }}>
+      <svg
+        className="rotate-[135deg] w-full h-full"
+        viewBox="0 0 36 36"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {/* Background circle */}
+        <circle
+          cx="18"
+          cy="18"
+          r={radius}
+          fill="none"
+          className={`stroke-current text-neutral-300 dark:text-neutral-700`}
+          strokeWidth="3" // Increased stroke width for better visibility
+        />
 
-                {/* Progress circle */}
-                <circle
-                    cx="18"
-                    cy="18"
-                    r={radius}
-                    fill="none"
-                    className="stroke-current text-primary dark:text-primary"
-                    strokeWidth="2"
-                    strokeDasharray={`${progressValue} ${circumference}`}
-                />
-            </svg>
+        {/* Progress circle */}
+        <circle
+          cx="18"
+          cy="18"
+          r={radius}
+          fill="none"
+          className={`stroke-current ${progressColor}`} // Utilisation de la couleur de progression
+          strokeWidth="3" // Increased stroke width for better visibility
+          strokeDasharray={`${progressValue} ${circumference}`}
+        />
+      </svg>
 
-            {/* Centered text */}
-            <div className="absolute text-center transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
-                <span className="text-xl font-bold text-primary dark:text-primary"> {/* Reduced text size */}
-                    {progress}
-                </span>
-                <span className="block text-sm text-darj dark:text-primary">{text}</span>
-                <span>
-                    {children}
-                </span>
-            </div>
-        </div>
-    );
+      {/* Centered text in black color */}
+      <div className="absolute text-center transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
+        <span className="text-3xl font-bold text-black">
+          {progress}
+        </span>
+        <span className="block text-sm text-black">
+          {text}
+        </span>
+        {children}
+      </div>
+    </div>
+  );
 };
 
 export default ProgressCircle;