Skip to content

Commit

Permalink
change fullscreen impl
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon Huang authored and Simon Huang committed Oct 11, 2024
1 parent d85deeb commit 69151f7
Showing 1 changed file with 144 additions and 120 deletions.
264 changes: 144 additions & 120 deletions app/opportunities/[opportunity_id]/applications/_components/applicationOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
LoaderCircle,
Maximize,
MessageSquareText,
Minimize,
Search,
} from "lucide-react";
import { type OpportunityPhase } from "../page";
Expand Down Expand Up @@ -54,6 +55,10 @@ export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
.find((questionnaire) => questionnaire.id === questionnaireId);
}, [phases, questionnaireId]);

const selectedPhase = useMemo(() => {
return phases.find((phase) => phase.id === selectedQuestionnaire?.phaseId);
}, [phases, selectedQuestionnaire?.phaseId]);

const applicationQuery = api.application.getById.useQuery(
applicationId ?? -1,
);
Expand All @@ -70,124 +75,139 @@ export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
});
}, [searchValue, selectedQuestionnaire]);

const [isApplicationMaximized, setIsApplicationMaximized] = useState(false);

return (
<Card className="flex h-full min-h-0">
<ResizablePanelGroup
direction={"horizontal"}
autoSaveId="opportunities-overview"
>
<ResizablePanel defaultSize={25} className="space-y-4">
<h3 className="scroll-m-20 p-4 pb-0 text-2xl font-semibold tracking-tight">
Phases
</h3>
<Separator />
{!isApplicationMaximized && (
<>
<ResizablePanel defaultSize={25} className="space-y-4" order={1}>
<h3 className="scroll-m-20 p-4 pb-0 text-2xl font-semibold tracking-tight">
Phases
</h3>
<Separator />

<ScrollArea className="h-full overflow-y-auto">
<div className="flex h-full flex-col gap-2 p-4 pt-0">
{phases.map((phase) => (
<div key={`phase-${phase.id}`} className="space-y-2">
{isAdmin && phase.isInterview ? (
<Button
variant="link"
className="h-min p-0 text-sm font-semibold"
asChild
>
<Link
href={`./interview/${phase.id}`}
className="flex items-center"
>
<Handshake className="mr-2 h-4 w-4" />
{phase.name}
</Link>
</Button>
) : (
<span className="flex items-center text-sm font-semibold">
{phase.isInterview && (
<Handshake className="mr-2 h-4 w-4" />
<ScrollArea className="h-full overflow-y-auto">
<div className="flex h-full flex-col gap-2 p-4 pt-0">
{phases.map((phase) => (
<div key={`phase-${phase.id}`} className="space-y-2">
{isAdmin && phase.isInterview ? (
<Button
variant="link"
className="h-min p-0 text-sm font-semibold"
asChild
>
<Link
href={`./interview/${phase.id}`}
className="flex items-center truncate"
>
<Handshake className="mr-2 h-4 w-4" />
{phase.name}
</Link>
</Button>
) : (
<span className="flex items-center truncate text-sm font-semibold">
{phase.isInterview && (
<Handshake className="mr-2 h-4 w-4" />
)}
{phase.name}
</span>
)}
{phase.name}
</span>
)}
<div className="flex flex-col gap-2">
{phase.questionnaires.map((questionnaire) => (
<Card
key={`questionnaire-${questionnaire.id}`}
onClick={() =>
setSelectionState({
questionnaire: questionnaire.id,
application: undefined,
})
}
className={cn(
"flex cursor-pointer flex-row items-center justify-between p-2 transition-colors",
questionnaire.id === questionnaireId && "bg-muted",
)}
>
<p className="text-sm">{questionnaire.name}</p>
<div className="flex flex-col gap-2">
{phase.questionnaires.map((questionnaire) => (
<Card
key={`questionnaire-${questionnaire.id}`}
onClick={() =>
setSelectionState({
questionnaire: questionnaire.id,
application: undefined,
})
}
className={cn(
"flex cursor-pointer flex-row items-center justify-between p-2 transition-colors",
questionnaire.id === questionnaireId &&
"bg-muted",
)}
>
<p className="truncate text-sm">
{questionnaire.name}
</p>
<AvatarStack
users={questionnaire.reviewers}
size="sm"
maxVisible={4}
/>
</Card>
))}
</div>
</div>
))}
</div>
</ScrollArea>
</ResizablePanel>

<ResizableHandle withHandle />

<ResizablePanel
defaultSize={25}
className="flex flex-col gap-4"
order={2}
>
<h3 className="scroll-m-20 p-4 pb-0 text-2xl font-semibold tracking-tight">
Applications
</h3>
<Separator />
<div className="relative m-4 mt-0">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search"
className="pl-8"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</div>
<ScrollArea className="h-full overflow-y-auto">
<div className="m-4 mt-0 flex flex-col gap-2">
{filteredApplications?.map((application) => (
<Card
onClick={() =>
setSelectionState((prev) => ({
...prev,
application: application.id,
}))
}
key={`application-${application.id}`}
className={cn(
"flex cursor-pointer flex-row items-center justify-between p-2 transition-colors",
application.id === applicationId && "bg-muted",
)}
>
<p className="truncate text-sm">{application.name}</p>
{application.reviews && (
<AvatarStack
users={questionnaire.reviewers}
users={application.reviews.map(
(review) => review.user,
)}
size="sm"
maxVisible={4}
/>
</Card>
))}
</div>
)}
</Card>
))}
</div>
))}
</div>
</ScrollArea>
</ResizablePanel>

<ResizableHandle withHandle />
<ScrollBar orientation="vertical" />
</ScrollArea>
</ResizablePanel>

<ResizablePanel defaultSize={25} className="flex flex-col gap-4">
<h3 className="scroll-m-20 p-4 pb-0 text-2xl font-semibold tracking-tight">
Applications
</h3>
<Separator />
<div className="relative m-4 mt-0">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search"
className="pl-8"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</div>
<ScrollArea className="h-full overflow-y-auto">
<div className="m-4 mt-0 flex flex-col gap-2">
{filteredApplications?.map((application) => (
<Card
onClick={() =>
setSelectionState((prev) => ({
...prev,
application: application.id,
}))
}
key={`application-${application.id}`}
className={cn(
"flex cursor-pointer flex-row items-center justify-between p-2 transition-colors",
application.id === applicationId && "bg-muted",
)}
>
<p className="text-sm">{application.name}</p>
{application.reviews && (
<AvatarStack
users={application.reviews.map((review) => review.user)}
size="sm"
maxVisible={4}
/>
)}
</Card>
))}
</div>
<ScrollBar orientation="vertical" />
</ScrollArea>
</ResizablePanel>

<ResizableHandle withHandle />
<ResizableHandle withHandle />
</>
)}

<ResizablePanel defaultSize={50}>
<ResizablePanel defaultSize={50} order={3}>
<div className="flex h-16 items-center justify-between">
{applicationQuery.isLoading && (
<LoaderCircle className="mx-4 animate-spin" />
Expand All @@ -201,29 +221,33 @@ export const ApplicationOverview = ({ phases, isAdmin }: Props) => {
<div className="mx-4 flex items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="outline" asChild>
<Link
href={`./applications/${applicationQuery.data?.id}`}
>
<Maximize />
</Link>
<Button
size="icon"
variant="outline"
onClick={() => {
setIsApplicationMaximized((prev) => !prev);
}}
>
{isApplicationMaximized ? <Minimize /> : <Maximize />}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Maximize</p>
<p>{isApplicationMaximized ? "Minimize" : "Maximize"}</p>
</TooltipContent>
</Tooltip>

<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="outline" disabled>
<MessageSquareText />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Start review</p>
</TooltipContent>
</Tooltip>
{selectedPhase?.isInterview && (
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon" variant="outline" disabled>
<MessageSquareText />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Start review</p>
</TooltipContent>
</Tooltip>
)}
</div>
</>
)}
Expand Down

0 comments on commit 69151f7

Please sign in to comment.