ajout app

Voltaserve/ui/src/components/top-bar/top-bar-upload-drawer.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef } from 'react'
+import {
+  Circle,
+  Drawer as ChakraDrawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerFooter,
+  IconButton,
+  useDisclosure,
+  Button,
+} from '@chakra-ui/react'
+import cx from 'classnames'
+import UploadList from '@/components/file/upload/upload-list'
+import { IconClearAll, IconUpload } from '@/lib'
+import { completedUploadsCleared } from '@/store/entities/uploads'
+import { useAppDispatch, useAppSelector } from '@/store/hook'
+import { uploadsDrawerClosed } from '@/store/ui/uploads-drawer'
+
+const TopBarUploadDrawer = () => {
+  const dispatch = useAppDispatch()
+  const hasPendingUploads = useAppSelector(
+    (state) =>
+      state.entities.uploads.items.filter((e) => !e.completed).length > 0,
+  )
+  const openDrawer = useAppSelector((state) => state.ui.uploadsDrawer.open)
+  const hasCompleted = useAppSelector(
+    (state) =>
+      state.entities.uploads.items.filter((e) => e.completed).length > 0,
+  )
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (openDrawer) {
+      onOpen()
+    } else {
+      onClose()
+    }
+  }, [openDrawer, onOpen, onClose])
+
+  const handleClearCompleted = useCallback(() => {
+    dispatch(completedUploadsCleared())
+  }, [dispatch])
+
+  return (
+    <>
+      <div className={cx('flex', 'items-center', 'justify-center', 'relative')}>
+        <IconButton
+          ref={buttonRef}
+          icon={<IconUpload size="14px" />}
+          aria-label=""
+          onClick={onOpen}
+        />
+        {hasPendingUploads && (
+          <Circle size="15px" bg="red" position="absolute" top={0} right={0} />
+        )}
+      </div>
+      <ChakraDrawer
+        isOpen={isOpen}
+        placement="right"
+        onClose={() => {
+          onClose()
+          dispatch(uploadsDrawerClosed())
+        }}
+        finalFocusRef={buttonRef}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader>Uploads</DrawerHeader>
+          <DrawerBody>
+            <UploadList />
+          </DrawerBody>
+          <DrawerFooter>
+            {hasCompleted && (
+              <Button
+                className={cx('w-full')}
+                leftIcon={<IconClearAll size="22px" />}
+                onClick={handleClearCompleted}
+              >
+                Clear Completed Items
+              </Button>
+            )}
+          </DrawerFooter>
+        </DrawerContent>
+      </ChakraDrawer>
+    </>
+  )
+}
+
+export default TopBarUploadDrawer