Skip to content

951-View dataroom folder tree list and documnet list ui fix #952

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mfts merged 2 commits into from
Oct 19, 2024
Merged

951-View dataroom folder tree list and documnet list ui fix #952

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
907b560
dataroom view ui fix
AshishViradiya153 Oct 14, 2024
c90653b
Fix scroll issue
AshishViradiya153 Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 91 additions & 82 deletions components/view/DataroomViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { useRouter } from "next/router";

import { useEffect, useMemo, useState } from "react";
import { useMemo, useState } from "react";
import React from "react";

import { DataroomBrand, DataroomFolder } from "@prisma/client";
Expand All @@ -16,7 +14,7 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import {
Sheet,
SheetOverlay,
Expand Down Expand Up @@ -153,89 +151,100 @@ export default function DataroomViewer({
>
<div className="relative mx-auto flex h-full w-full items-start justify-center">
{/* Tree view */}
<div className="mb-10 mt-4 hidden h-full w-1/4 space-y-8 overflow-auto py-3 md:mx-5 md:mt-5 md:flex lg:mx-7 lg:mt-8 xl:mx-10">
<ViewFolderTree
folders={folders}
documents={documents}
setFolderId={setFolderId}
folderId={folderId}
/>
<div className="hidden h-full w-1/4 space-y-8 overflow-auto px-3 pb-4 pt-4 md:flex md:px-6 md:pt-6 lg:px-8 lg:pt-9 xl:px-14">
<ScrollArea showScrollbar>
<ViewFolderTree
folders={folders}
documents={documents}
setFolderId={setFolderId}
folderId={folderId}
/>
<ScrollBar orientation="horizontal" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>

{/* Detail view */}
<div className="h-full flex-grow">
<div className="mb-10 mt-4 space-y-8 p-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
<div className="flex items-center gap-x-2">
{/* sidebar for mobile */}
<div className="flex md:hidden">
<Sheet>
<SheetTrigger asChild>
<button className="text-muted-foreground hover:text-black lg:hidden">
<PanelLeftIcon className="h-5 w-5" aria-hidden="true" />
</button>
</SheetTrigger>
<SheetPortal>
<SheetOverlay className="fixed top-[35dvh] z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<SheetPrimitive.Content
className={cn(
"fixed top-[35dvh] z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
"left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-lg",
"m-0 w-[280px] p-0 sm:w-[300px] lg:hidden",
)}
>
<div className="mt-8 h-full space-y-8 overflow-auto px-2 py-3">
<ViewFolderTree
folders={folders}
documents={documents}
setFolderId={setFolderId}
folderId={folderId}
<div className="h-full flex-grow overflow-hidden">
<div className="h-full space-y-8 overflow-auto px-3 pb-4 pt-4 md:px-6 md:pt-6 lg:px-8 lg:pt-9 xl:px-14">
<ScrollArea showScrollbar>
<div className="flex items-center gap-x-2">
{/* sidebar for mobile */}
<div className="flex md:hidden">
<Sheet>
<SheetTrigger asChild>
<button className="text-muted-foreground hover:text-white lg:hidden">
<PanelLeftIcon
className="h-5 w-5"
aria-hidden="true"
/>
</div>
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<XIcon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
</Sheet>
</div>

<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem key={"root"}>
<BreadcrumbLink
onClick={() => setFolderId(null)}
className="cursor-pointer"
>
Home
</BreadcrumbLink>
</BreadcrumbItem>

{breadcrumbFolders.map((folder, index) => (
<React.Fragment key={folder.id}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{index === breadcrumbFolders.length - 1 ? (
<BreadcrumbPage className="capitalize">
{folder.name}
</BreadcrumbPage>
) : (
<BreadcrumbLink
onClick={() => setFolderId(folder.id)}
className="cursor-pointer capitalize"
>
{folder.name}
</BreadcrumbLink>
</button>
</SheetTrigger>
<SheetPortal>
<SheetOverlay className="fixed top-[35dvh] z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<SheetPrimitive.Content
className={cn(
"fixed top-[35dvh] z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
"left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-lg",
"m-0 w-[280px] p-0 sm:w-[300px] lg:hidden",
)}
</BreadcrumbItem>
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
</div>
<ul role="list" className="space-y-4">
{mixedItems.map(renderItem)}
</ul>
>
<div className="mt-8 h-full space-y-8 overflow-auto px-2 py-3">
<ViewFolderTree
folders={folders}
documents={documents}
setFolderId={setFolderId}
folderId={folderId}
/>
</div>
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<XIcon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
</Sheet>
</div>

<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem key={"root"}>
<BreadcrumbLink
onClick={() => setFolderId(null)}
className="cursor-pointer"
>
Home
</BreadcrumbLink>
</BreadcrumbItem>

{breadcrumbFolders.map((folder, index) => (
<React.Fragment key={folder.id}>
<BreadcrumbSeparator />
<BreadcrumbItem>
{index === breadcrumbFolders.length - 1 ? (
<BreadcrumbPage className="capitalize">
{folder.name}
</BreadcrumbPage>
) : (
<BreadcrumbLink
onClick={() => setFolderId(folder.id)}
className="cursor-pointer capitalize"
>
{folder.name}
</BreadcrumbLink>
)}
</BreadcrumbItem>
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
</div>
<ul role="list" className="space-y-4 overflow-auto p-4">
{mixedItems.map(renderItem)}
</ul>
<ScrollBar orientation="horizontal" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
</div>
</div>
Expand Down