From bd22d21e948cd0e084e09d2d708c0d08526dc1f6 Mon Sep 17 00:00:00 2001
From: Jacopo Gasparetto <jacopo.gasparetto@cnaf.infn.it>
Date: Wed, 26 Apr 2023 14:49:05 +0200
Subject: [PATCH] Add BucketInspector
---
frontend/src/components/BucketInspector.tsx | 22 +++++++++
frontend/src/components/Inspector.tsx | 26 ++++++++++
frontend/src/routes/BucketBrowser/index.tsx | 53 +++++++++++++--------
3 files changed, 80 insertions(+), 21 deletions(-)
create mode 100644 frontend/src/components/BucketInspector.tsx
create mode 100644 frontend/src/components/Inspector.tsx
diff --git a/frontend/src/components/BucketInspector.tsx b/frontend/src/components/BucketInspector.tsx
new file mode 100644
index 0000000..1fdf530
--- /dev/null
+++ b/frontend/src/components/BucketInspector.tsx
@@ -0,0 +1,22 @@
+import { BucketObject } from "../models/bucket";
+import { Inspector, InspectorProps } from "./Inspector";
+
+interface BucketInspectorProps extends InspectorProps {
+ buckets: BucketObject[]
+}
+
+export const BucketInspector = (props: BucketInspectorProps) => {
+
+ const { buckets } = props;
+ const title = buckets.length === 1 ? buckets[0].Key : "Multiple objects";
+
+ return (
+ <Inspector
+ isOpen={props.isOpen}>
+ {props.children}
+ <div className="p-8 text-lg font-semibold">
+ {title}
+ </div>
+ </Inspector>
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inspector.tsx b/frontend/src/components/Inspector.tsx
new file mode 100644
index 0000000..6af80e6
--- /dev/null
+++ b/frontend/src/components/Inspector.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react"
+import { Transition } from '@headlessui/react';
+
+export interface InspectorProps {
+ children?: ReactNode;
+ isOpen: boolean;
+}
+export const Inspector = ({ isOpen, children }: InspectorProps) => {
+ return (
+ <Transition
+ show={isOpen}
+ enter="transition-transform duration-200"
+ enterFrom="translate-x-64"
+ enterTo="translate-x-0"
+ leave="transition-transform duration-200"
+ leaveFrom='translate-x-0'
+ leaveTo="translate-x-64"
+ >
+ <div className="w-64 right-0 top-0 h-screen fixed z-1 overflow-auto">
+ <div className='h-full bg-gray-100 dark:bg-gray-800'>
+ {children}
+ </div>
+ </div>
+ </Transition>
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/routes/BucketBrowser/index.tsx b/frontend/src/routes/BucketBrowser/index.tsx
index ec510b7..3c552a0 100644
--- a/frontend/src/routes/BucketBrowser/index.tsx
+++ b/frontend/src/routes/BucketBrowser/index.tsx
@@ -4,6 +4,7 @@ import { BucketObject } from '../../models/bucket';
import { Column, Table } from '../../components/Table';
import { getHumanSize } from '../../commons/utils';
import { Button } from '../../components/Button';
+import { BucketInspector } from '../../components/BucketInspector';
import {
DocumentIcon,
PhotoIcon,
@@ -194,31 +195,41 @@ export const BucketBrowser = ({ bucketName }: PropsType) => {
icon={<ArrowLeftIcon />}
onClick={() => navigate(-1)}
/>
- <div className='container w-2/3'>
- <div className="flex mt-8 place-content-between">
- <div className='flex space-x-4'>
- <InputFile
- icon={<ArrowUpOnSquareIcon />}
- onChange={handleFileChange}
+
+ <div className='top-0 fixed z-10 right-0 w-64 bg-slate-300'>
+ <BucketInspector
+ isOpen={selectedRows.size > 0}
+ buckets={Array.from(selectedRows).map(index => bucketObjects[index])}
+ />
+ </div>
+ <div className={`transition-all ease-in-out duration-200 ${selectedRows.size > 0 ? "mr-64" : "mr-0"}`}>
+ <div className='container w-2/3'>
+ <div className="flex mt-8 place-content-between">
+ <div className='flex space-x-4'>
+ <InputFile
+ icon={<ArrowUpOnSquareIcon />}
+ onChange={handleFileChange}
+ />
+ </div>
+ <Button
+ title="Delete file(s)"
+ icon={<TrashIcon />}
+ onClick={deleteSelectedObjects}
+ disabled={selectedRows.size === 0}
+ />
+ </div>
+ <div className="flex place-content-center mt-4">
+ <Table
+ selectable={true}
+ columns={columns}
+ data={tableData}
+ onSelect={onSelect}
+ selectedRows={selectedRows}
/>
</div>
- <Button
- title="Delete file(s)"
- icon={<TrashIcon />}
- onClick={deleteSelectedObjects}
- disabled={selectedRows.size === 0}
- />
- </div>
- <div className="flex place-content-center mt-4">
- <Table
- selectable={true}
- columns={columns}
- data={tableData}
- onSelect={onSelect}
- selectedRows={selectedRows}
- />
</div>
</div>
+
</Page>
)
}
\ No newline at end of file
--
GitLab