wraping react icons

src/admin/general/OrthancCard.tsx

@@ -1,13 +1,11 @@
 import { useMemo, useState } from 'react';
-import { VscDebugRestart as RestartIcon } from "react-icons/vsc";
-import { IoClose } from "react-icons/io5";
-import { BsQuestionLg } from "react-icons/bs";
 
 import { Table, Button, ToggleEye, Input, Modal, CardFooter, SelectInput } from '../../ui/';
 import { Colors } from '../../utils/enums';
 import { useCustomMutation, useCustomQuery } from '../../utils/reactQuery';
 import { getOrthancSystem, getVerbosity, orthancReset, orthancShutdown, updateVerbosity } from '../../services/orthanc';
 import { useConfirm } from '../../services';
+import { Close, Question, Restart } from '../../icons';
 
 type OrthancData = {
     username: string;
@@ -27,7 +25,7 @@ const selectOptions = [
 ];
 
 const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
-    const {confirm} = useConfirm()
+    const { confirm } = useConfirm()
 
     const [showModal, setShowModal] = useState(false);
 
@@ -59,7 +57,7 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
         [['log-level']],
     );
 
-    const currentVerbosityOption = useMemo(()=>{
+    const currentVerbosityOption = useMemo(() => {
         return selectOptions.find(option => option.value === orthancVerbosity)?.value ?? null
     }, [orthancVerbosity])
 
@@ -104,9 +102,9 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
     };
 
     const handleOrthancShutdown = async () => {
-        if(await confirm({ content: "Are you sure to shutdown Orthanc ?" })) {
+        if (await confirm({ content: "Are you sure to shutdown Orthanc ?" })) {
             shutdownOrthanc({});
-          }
+        }
     }
 
 
@@ -127,20 +125,22 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
                 <Button
                     color={Colors.warning}
                     onClick={reset}>
-                    <RestartIcon
+                    <Restart
                         size="20px"
-                        title="Restart" />
+                        title="Restart"
+                    />
                 </Button>
                 <Button
                     color={Colors.danger}
                     onClick={handleOrthancShutdown}
-                    >
-                    <IoClose
+                >
+                    <Close
                         size="20px"
-                        title="Shutdown" />
+                        title="Shutdown"
+                    />
                 </Button>
                 <Button color={Colors.primary} onClick={orthancInfoHandler}>
-                    <BsQuestionLg size="20px" title="Info" />
+                    <Question size="20px" title="Info" />
                 </Button>
                 <div className="w-1/4">
                     <SelectInput

src/admin/jobs/JobTable.tsx

@@ -1,4 +1,4 @@
-import { BsInfoCircle as Info } from "react-icons/bs";
+import { Info } from "../../icons";
 import { Table, Badge, Popover } from "../../ui";
 
 import { Colors } from "../../utils/enums";

src/admin/users/oauth/OauthForm.tsx

@@ -1,8 +1,8 @@
 import { ChangeEvent, useEffect, useState } from "react";
-import { BsPersonCheckFill as SubmitUser } from "react-icons/bs";
 
 import { Colors, Oauth2Config } from "../../../utils";
 import { Button, Input } from "../../../ui";
+import { SubmitUser } from "../../../icons";
 
 type OauthFormProps = {
   onSubmit: (payload: Oauth2Config) => void;
@@ -83,7 +83,7 @@ const OauthForm = ({ onSubmit, initialData, buttonText }: OauthFormProps) => {
           className="h-12 gap-3 justify-self-center w-36 md:justify-center"
           type="submit"
         >
-          <SubmitUser size={"1.3rem"} />
+          <SubmitUser size="1.3rem" />
           <div className="">{buttonText}</div>
         </Button>
       </div>

src/admin/users/roles/RoleForm.tsx

@@ -1,10 +1,10 @@
-import { ChangeEvent, useState, useEffect } from "react";
-import { BsPersonCheckFill as SubmitUser } from "react-icons/bs";
+import { ChangeEvent, useState } from "react";
 
 import { Role } from "../../../utils/types";
 import { Colors } from "../../../utils";
 
 import { Button, Input,Toggle } from "../../../ui";
+import { SubmitUser } from "../../../icons";
 
 type RoleFormProps = {
     onSubmit: (payload: Role) => void;
@@ -150,7 +150,7 @@ const RoleForm = ({ onSubmit, initialData, buttonText }: RoleFormProps) => {
             </div>
             <div className="flex justify-center">
                 <Button color={Colors.success} className="h-12 gap-3 justify-self-center w-36 md:justify-center" type="submit">
-                    <SubmitUser size={'1.3rem'} />
+                    <SubmitUser size='1.3rem' />
                     <div>{buttonText}</div>
                 </Button>
             </div>

src/admin/users/user/CreateUserForm.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, useState, FormEvent } from 'react';
-import { BsPersonCheckFill as SubmitUser } from 'react-icons/bs';
 import { getRoles, postUsers } from '../../../services';
 import {
   useCustomMutation,
@@ -18,6 +17,7 @@ import {
 } from '../../../ui';
 import { getErrorMessage } from '../../../utils/error';
 import InputPassword from '../../../ui/InputPassword';
+import { SubmitUser } from '../../../icons';
 
 type UserFormProps = {
   onClose : () => void;

src/admin/users/user/EditUserForm.tsx

@@ -1,8 +1,8 @@
 import { ChangeEvent, useEffect, useState } from "react";
-import { BsPersonCheckFill as SubmitUser } from "react-icons/bs";
 import { useCustomToast, Colors, useCustomMutation, useCustomQuery, UserUpdatePayload, User, Role, Option } from "../../../utils";
 import { getRoles, updateUser } from "../../../services";
 import { Button, Card, CardBody, CardHeader, CloseButton, Input, Label, SelectInput } from "../../../ui";
+import { SubmitUser } from "../../../icons";
 
 type UserFormProps = {
     title: string;

src/export/ExportRoot.tsx

@@ -15,6 +15,7 @@ import { storeToModality } from "../services/modalities";
 import ProgressJobs from "../query/ProgressJobs";
 import { sendResourcesToPeer } from "../services/peers";
 import { exportCsv } from "../utils/export";
+import SelectTransferSyntax from "./SelectTransferSyntax";
 
 const ExportRoot = () => {
     const { toastSuccess, updateExistingToast, toastWarning } = useCustomToast();
@@ -25,6 +26,7 @@ const ExportRoot = () => {
     const [currentStudyId, setCurrentStudyId] = useState(null);
     const [storeJobId, setStoreJobId] = useState(null);
     const [sendPeerJobId, setsendPeerJobId] = useState(null);
+    const [transferSyntax, setTrasferSyntax] = useState('None')
 
     const series = useMemo(() => {
         if (!currentStudyId) return [];
@@ -77,7 +79,7 @@ const ExportRoot = () => {
             (mb) => updateExistingToast(id, "Downloaded " + mb + " mb"),
             undefined,
             hierarchical,
-            undefined
+            transferSyntax != "None" ? transferSyntax  : undefined
         );
     };
 
@@ -163,6 +165,7 @@ const ExportRoot = () => {
             <CardFooter color={Colors.light} className="flex justify-center flex-grow gap-3">
                 <div className="flex justify-center w-4/5 gap-3">
                     <DropdownButton row={null} buttonText="Download" options={downloadOptions} />
+                    <SelectTransferSyntax value={transferSyntax} onChange={(value)=>setTrasferSyntax(value)} />
                     <DropdownButton row={null} buttonText="Send To Modality" options={modalitiesOptions} />
                     {storeJobId && <ProgressJobs size={50} jobId={storeJobId} />}
                     <DropdownButton row={null} buttonText="Send To Peer" options={peersOptions} />

src/export/SelectTransferSyntax.tsx

@@ -0,0 +1,46 @@
+import { Gear } from "../icons";
+import { Button, Popover, SelectInput } from "../ui";
+import { Colors } from "../utils";
+
+type SelectTransferSyntaxProps = {
+    value: string;
+    onChange: (value: string) => void
+}
+
+
+const TRANSCODING_OPTIONS = [
+    { value: 'None', label: 'None (use Original TS)' },
+    { value: '1.2.840.10008.1.2', label: 'Implicit VR Endian' },
+    { value: '1.2.840.10008.1.2.1', label: 'Explicit VR Little Endian' },
+    { value: '1.2.840.10008.1.2.1.99', label: 'Deflated Explicit VR Little Endian' },
+    { value: '1.2.840.10008.1.2.2', label: 'Explicit VR Big Endian' },
+    { value: '1.2.840.10008.1.2.4.50', label: 'JPEG 8-bit' },
+    { value: '1.2.840.10008.1.2.4.51', label: 'JPEG 12-bit' },
+    { value: '1.2.840.10008.1.2.4.57', label: 'JPEG Lossless' },
+    { value: '1.2.840.10008.1.2.4.70', label: 'JPEG Lossless' },
+    { value: '1.2.840.10008.1.2.4.80', label: 'JPEG-LS Lossless' },
+    { value: '1.2.840.10008.1.2.4.81', label: 'JPEG-LS Lossy' },
+    { value: '1.2.840.10008.1.2.4.90', label: 'JPEG 2000 (90)' },
+    { value: '1.2.840.10008.1.2.4.91', label: 'JPEG 2000 (91)' },
+    { value: '1.2.840.10008.1.2.4.92', label: 'JPEG 2000 (92)' },
+    { value: '1.2.840.10008.1.2.4.93', label: 'JPEG 2000 (93)' }
+]
+
+const SelectTransferSyntax = ({ value, onChange }: SelectTransferSyntaxProps) => {
+
+    return (
+        <Popover
+            withOnClick
+            className="w-64"
+            popover={
+                <SelectInput options={TRANSCODING_OPTIONS} value={value} onChange={(option) => onChange(option?.value)} />}
+        >
+            <div className="flex justify-center items-center w-5 h-full">
+                <Gear className='text-warning w-full h-full' />
+            </div>
+        </Popover>
+    )
+
+}
+
+export default SelectTransferSyntax

src/icons/Close.tsx

@@ -0,0 +1,9 @@
+import { IoClose } from "react-icons/io5";
+
+const Close = (props) => {
+    return (
+        <IoClose {...props} />
+    )
+}
+
+export default Close

src/icons/Gear.tsx

@@ -0,0 +1,9 @@
+import { FaGear } from "react-icons/fa6";
+
+const Gear = (props) => {
+    return (
+        <FaGear {...props} />
+    )
+}
+
+export default Gear

src/icons/Info.tsx

@@ -0,0 +1,9 @@
+import { BsInfoCircle } from "react-icons/bs";
+
+const Info = (props) => {
+    return (
+        <BsInfoCircle {...props} />
+    )
+}
+
+export default Info

src/icons/Question.tsx

@@ -0,0 +1,9 @@
+import { BsQuestionLg } from "react-icons/bs";
+
+const Question = (props) => {
+    return (
+        <BsQuestionLg {...props} />
+    )
+}
+
+export default Question

src/icons/Restart.tsx

@@ -0,0 +1,9 @@
+import { VscDebugRestart } from "react-icons/vsc";
+
+const Restart = (props) => {
+    return (
+        <VscDebugRestart {...props} />
+    )
+}
+
+export default Restart

src/icons/SubmitUser.tsx

@@ -0,0 +1,9 @@
+import { BsPersonCheckFill } from "react-icons/bs";
+
+const SubmitUser = (props) => {
+    return (
+        <BsPersonCheckFill {...props} />
+    )
+}
+
+export default SubmitUser

src/icons/index.ts

@@ -0,0 +1,15 @@
+import Close from './Close'
+import Gear from './Gear'
+import Info from './Info'
+import Question from './Question'
+import Restart from './Restart'
+import SubmitUser from './SubmitUser'
+
+export {
+    Close,
+    Gear,
+    Info,
+    Question,
+    Restart,
+    SubmitUser
+}