Style : responsive component and style progressqueue

src/content/ContentRoot.tsx

@@ -1,19 +1,35 @@
 import React, { useMemo, useState } from "react";
-import { getLabels, findTools, useConfirm, deletePatient } from "../services";
-import { QueryPayload, useCustomMutation, useCustomQuery, useCustomToast, Study as StudyType } from "../utils";
+import {
+    getLabels,
+    findTools,
+    useConfirm,
+    deletePatient,
+} from "../services";
+import {
+    QueryPayload,
+    useCustomMutation,
+    useCustomQuery,
+    useCustomToast,
+    Study as StudyType,
+} from "../utils";
 import Model from "../model/Model";
 import Patient from "../model/Patient";
 import { FormCard, Spinner, Button } from "../ui";
 import SearchForm from "../query/SearchForm";
 import AccordionPatient from "./patients/AccordionPatient";
 import EditPatient from "./patients/EditPatient";
 import { Label } from "../utils/types";
-import { addStudyIdToDeleteList, addSeriesOfStudyIdToExportList, addStudyIdToAnonymizeList } from '../utils/actionsUtils';
-import { Colors } from '../utils';
-import AnonIcon from './../assets/Anon.svg?react';
+import {
+    addStudyIdToDeleteList,
+    addSeriesOfStudyIdToExportList,
+    addStudyIdToAnonymizeList,
+} from "../utils/actionsUtils";
+import { Colors } from "../utils";
+import AnonIcon from "../assets/Anon.svg?react";
 import { BsTrashFill as DeleteIcon } from "react-icons/bs";
 import { FaFileExport as ExportIcon } from "react-icons/fa";
 import SelectLabels from "../datasets/SelectLabels";
+
 const ContentRoot: React.FC = () => {
     const { confirm } = useConfirm();
     const { toastSuccess, toastError } = useCustomToast();
@@ -22,23 +38,22 @@ const ContentRoot: React.FC = () => {
     const [model, setModel] = useState<Model | null>(null);
     const [queryPayload, setQueryPayload] = useState<QueryPayload | null>(null);
     const [editingPatient, setEditingPatient] = useState<Patient | null>(null);
+
     const patients = useMemo(() => model?.getPatients() || [], [model]);
 
     const handleDeletePatient = async (patient: Patient) => {
         const confirmContent = (
             <div className="italic">
                 Are you sure you want to delete this patient:
-                <span className="text-xl not-italic font-bold text-primary">{patient.patientId} {patient.patientName} ?</span>
+                <span className="text-xl not-italic font-bold text-primary">{`${patient.patientId} ${patient.patientName}`}?</span>
             </div>
         );
         if (await confirm({ content: confirmContent })) {
             mutateDeletePatient(patient.id);
         }
     };
 
-    const closeEditModal = () => {
-        setEditingPatient(null);
-    };
+    const closeEditModal = () => setEditingPatient(null);
 
     const handlePatientUpdate = () => {
         closeEditModal();
@@ -47,20 +62,18 @@ const ContentRoot: React.FC = () => {
 
     const { mutateAsync: mutateDeletePatient } = useCustomMutation<void, string>(
         (patientId) => deletePatient(patientId),
-        [['jobs']],
+        [["jobs"]],
         {
-            onSuccess: async () => {
+            onSuccess: () => {
                 toastSuccess("Patient deleted successfully");
                 refreshFind();
             },
-            onError: (error: any) => {
-                toastError(`Failed to delete patient ${error}`);
-            }
+            onError: (error) => toastError(`Failed to delete patient: ${error}`),
         }
     );
 
     const { data: labelsData } = useCustomQuery<Label[], string[]>(
-        ['labels'],
+        ["labels"],
         () => getLabels(),
         {
             select: (labels) => labels.map((label) => label.name),
@@ -73,12 +86,10 @@ const ContentRoot: React.FC = () => {
         {
             onSuccess: (data) => {
                 const newModel = new Model();
-                data.forEach(studyData => newModel.addStudy(studyData));
+                data.forEach((studyData) => newModel.addStudy(studyData));
                 setModel(newModel);
             },
-            onError: (error: any) => {
-                toastError("Failed to load data: " + error);
-            }
+            onError: (error) => toastError(`Failed to load data: ${error}`),
         }
     );
 
@@ -88,44 +99,37 @@ const ContentRoot: React.FC = () => {
     };
 
     const handlePatientSelectionChange = (selected: boolean, patient: Patient) => {
-        const studies = patient.getStudies().map(study => study.id);
-        const newSelectedStudies = { ...selectedStudies };
+        const studies = patient.getStudies().map((study) => study.id);
+        const updatedSelectedStudies = { ...selectedStudies };
+
         if (selected) {
             studies.forEach((studyId) => {
-                newSelectedStudies[studyId] = true;
+                updatedSelectedStudies[studyId] = true;
             });
-            setSelectedStudies(newSelectedStudies);
         } else {
             studies.forEach((studyId) => {
-                delete newSelectedStudies[studyId];
+                delete updatedSelectedStudies[studyId];
             });
-            setSelectedStudies(newSelectedStudies);
         }
+        setSelectedStudies(updatedSelectedStudies);
     };
 
-    const refreshFind = () => {
-        if (queryPayload) {
-            mutateToolsFind(queryPayload);
-        }
-    };
+    const refreshFind = () => queryPayload && mutateToolsFind(queryPayload);
 
     const handleSendAnonymizeList = async () => {
-        const studyIds = Object.keys(selectedStudies);
-        for (const studyId of studyIds) {
+        for (const studyId of Object.keys(selectedStudies)) {
             await addStudyIdToAnonymizeList(studyId);
         }
     };
 
     const handleSendExportList = async () => {
-        const studyIds = Object.keys(selectedStudies);
-        for (const studyId of studyIds) {
+        for (const studyId of Object.keys(selectedStudies)) {
             await addSeriesOfStudyIdToExportList(studyId);
         }
     };
 
     const handleSendDeleteList = async () => {
-        const studyIds = Object.keys(selectedStudies);
-        for (const studyId of studyIds) {
+        for (const studyId of Object.keys(selectedStudies)) {
             await addStudyIdToDeleteList(studyId);
         }
     };
@@ -139,27 +143,33 @@ const ContentRoot: React.FC = () => {
                 onClose={closeEditModal}
                 show={editingPatient != null}
             />
-            <FormCard
-                className="bg-white"
-                title="Search"
-                collapsible={true}
-            >
+            <FormCard className="bg-white" title="Search" collapsible>
                 <SearchForm onSubmit={handleSubmit} existingLabels={labelsData} withAets={false} />
             </FormCard>
-            <div className="flex flex-col items-center w-full gap-3">
-                <div className="flex justify-center w-full text-2xl font-bold text-primary">Results</div>
-                <div className="flex w-full p-4 bg-white shadow-md rounded-3xl">
+
+            <div className="flex flex-col w-full p-4 bg-white shadow-md rounded-3xl">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="text-2xl font-bold text-primary">Results</div>
+                    <div className="text-lg text-gray-600">
+                        {patients.length} {patients.length === 1 ? "result" : "results"} found
+                    </div>
+                </div>
+
+                <div className="w-full mb-3 border-t border-gray-200" />
+
+                <div className="flex flex-wrap gap-2 mb-4">
                     <Button
                         color={Colors.primary}
-                        className="flex items-center mx-2 text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
-                        onClick={handleSendAnonymizeList}>
+                        className="flex items-center text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
+                        onClick={handleSendAnonymizeList}
+                    >
                         <AnonIcon className="text-xl" />
                         <span className="ml-2">Send to Anonymize</span>
                     </Button>
 
                     <Button
                         color={Colors.secondary}
-                        className="flex items-center mx-2 text-sm transition-transform duration-200 hover:scale-105"
+                        className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
                         onClick={handleSendExportList}
                     >
                         <ExportIcon className="text-xl" />
@@ -168,37 +178,40 @@ const ContentRoot: React.FC = () => {
 
                     <Button
                         color={Colors.danger}
-                        className="flex items-center mx-2 text-sm transition-transform duration-200 hover:scale-105"
+                        className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
                         onClick={handleSendDeleteList}
                     >
                         <DeleteIcon className="text-xl" />
-                        <span className="ml-2">Send to delete</span>
+                        <span className="ml-2">Send to Delete</span>
                     </Button>
 
-                    <SelectLabels
-                        onChange={(labels) => console.log(labels)}
-                        closeMenuOnSelect={true}
-                    />
-                </div>
-                <div className="w-full">
-                    {isPending ? (
-                        <Spinner />
-                    ) : (
-                        patients.map((patient: Patient) => (
-                            <AccordionPatient
-                                key={patient.id}
-                                patient={patient}
-                                onPatientSelectionChange={handlePatientSelectionChange}
-                                onDeletePatient={handleDeletePatient}
-                                onEditPatient={(patient) => setEditingPatient(patient)}
-                                onStudyUpdated={() => refreshFind()}
-                                onSelectedStudyChange={(selectedState) => setSelectedStudies(selectedState)}
-                                selectedStudies={selectedStudies}
-                            />
-                        ))
-                    )}
+                    <div className="flex-grow w-full md:w-auto">
+                        <SelectLabels
+                            onChange={(labels) => console.log(labels)}
+                            closeMenuOnSelect
+                            className="w-full"
+                        />
+                    </div>
                 </div>
             </div>
+
+            <div className="w-full mt-4">
+                {isPending ? (
+                    <Spinner />
+                ) : (
+                    patients.map((patient: Patient) => (
+                        <AccordionPatient
+                            key={patient.id}
+                            patient={patient}
+                            onPatientSelectionChange={handlePatientSelectionChange}
+                            onDeletePatient={handleDeletePatient}
+                            onEditPatient={(patient) => setEditingPatient(patient)}
+                            onStudyUpdated={refreshFind}
+                            selectedStudies={selectedStudies}
+                        />
+                    ))
+                )}
+            </div>
         </div>
     );
 };

src/delete/DeleteQueues.tsx

@@ -1,29 +1,30 @@
-import { useSelector } from "react-redux"
-import { getExistingDeleteQueues } from "../services/queues"
-import { useCustomQuery } from "../utils"
-import { RootState } from "../store"
-import { Spinner } from "../ui"
-import ProgressQueue from "./ProgressQueue"
-
+import { useSelector } from "react-redux";
+import { getExistingDeleteQueues } from "../services/queues";
+import { useCustomQuery } from "../utils";
+import { RootState } from "../store";
+import { Spinner } from "../ui";
+import ProgressQueue from "./ProgressQueue";
 
 const DeleteQueues = () => {
-
     const currentUserId = useSelector((state: RootState) => state.user.currentUserId);
 
-    const {data : existingDeleteQueues, isPending } = useCustomQuery<string[]>(['queue', 'delete', currentUserId.toString()], () => getExistingDeleteQueues(currentUserId))
+    const { data: existingDeleteQueues, isPending } = useCustomQuery<string[]>(
+        ['queue', 'delete', currentUserId.toString()], 
+        () => getExistingDeleteQueues(currentUserId)
+    );
 
-    if(isPending) return <Spinner/>
+    if (isPending) return <Spinner />;
 
     return (
-        <div>
-            <p>Progress Queue</p>
-            {
-            existingDeleteQueues?.map((uuid)=>{
-                return <ProgressQueue uuid={uuid} />
-            })
-            }
+        <div className="flex flex-col w-full p-4">
+            <p className="text-lg font-semibold text-center">Progress Queue</p>
+            <div className="flex flex-col space-y-4">
+                {existingDeleteQueues?.map((uuid) => (
+                    <ProgressQueue key={uuid} uuid={uuid} />
+                ))}
+            </div>
         </div>
-    )
-}
+    );
+};
 
-export default DeleteQueues
+export default DeleteQueues;

src/delete/DeleteRoot.tsx

@@ -6,13 +6,11 @@ import { Button, Card, CardHeader, CardBody, CardFooter } from "../ui";
 import { Colors, useCustomMutation } from "../utils";
 import { createDeleteQueue } from "../services/queues";
 import { useState } from "react";
-import ProgressQueue from "./ProgressQueue";
 import DeleteQueues from "./DeleteQueues";
 
 const DeleteRoot = () => {
     const dispatch = useDispatch();
     const deleteList = useSelector((state: RootState) => state.delete.studies);
-
     const [queueUuid, setQueueUuid] = useState<string | null>(null);
 
     const handleClearList = () => {
@@ -37,8 +35,8 @@ const DeleteRoot = () => {
     };
 
     return (
-        <>
-            <Card>
+        <div className="flex flex-col md:flex-row md:space-x-4">
+            <Card className="w-full md:w-2/3">
                 <CardHeader
                     className="flex items-center justify-center rounded-t-lg text-bg-light"
                     color={Colors.primary}
@@ -57,15 +55,12 @@ const DeleteRoot = () => {
                 </CardFooter>
             </Card>
 
-            <Card className="mt-4">
-                <CardBody 
-                    color={Colors.white}
-                    className="flex items-center justify-center rounded-b-xl"
-                >
+            <Card className="flex items-center justify-center w-full bg-almond md:w-1/3">
+                <div className="flex flex-col items-center justify-center w-full p-4">
                     <DeleteQueues />
-                </CardBody>
+                </div>
             </Card>
-        </>
+        </div>
     );
 };