Skip to content

Commit

Permalink
fix: consistency in dashboard queue section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gobot1234
Gobot1234 committed Jun 30, 2024
1 parent 7bd1616 commit ea0f08b
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 70 deletions.
70 changes: 70 additions & 0 deletions apps/forge/src/routes/_authenticated/_reponly/signin/dashboard/-components/QueuedDraw.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import type { QueueEntry } from "@ignis/types/sign_in.ts";
import { InfoCircledIcon } from "@radix-ui/react-icons";
import { Alert, AlertDescription, AlertTitle } from "@ui/components/ui/alert.tsx";
import { Button } from "@ui/components/ui/button.tsx";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ui/components/ui/collapsible.tsx";
import { ArrowDownIcon, ArrowRightIcon, Ban } from "lucide-react";
import { FC, useState } from "react";
import { QueuedUserCard } from "./QueuedUserCard";

// QueuedDrawer Props
interface QueueDrawerProps {
entries: QueueEntry[];
onDequeue: (user_id: string) => void;
startExpanded?: boolean;
}

export const QueueDrawer: FC<QueueDrawerProps> = ({ entries, startExpanded, onDequeue }) => {
const [isOpen, setIsOpen] = useState(startExpanded);

const toggleOpen = () => setIsOpen(!isOpen);

return (
<Collapsible className="space-y-2 mt-2 mb-2">
<CollapsibleTrigger asChild>
<Button
className="flex items-center justify-between space-x-4 py-7 w-full"
style={{ paddingLeft: "18px", paddingRight: "18px" }}
size="sm"
variant="outline"
onClick={toggleOpen}
disabled={entries.length === 0}
>
<div className="flex items-center gap-2">
<span className="inline-flex items-center justify-center h-6 w-6 rounded-sm bg-primary text-sm font-semibold text-primary-foreground">
{entries.length}
</span>
<h4 className="text-lg font-bold">Queued</h4>
</div>
<div className="flex items-center gap-2">
{entries.length === 0 ? (
<Ban className="h-4 w-4" />
) : (
<>
{isOpen ? "Hide" : "Show"}
{isOpen ? <ArrowRightIcon className="h-4 w-4" /> : <ArrowDownIcon className="h-4 w-4" />}
<span className="sr-only">{isOpen ? "Hide" : "Show"}</span>
</>
)}
</div>
</Button>
</CollapsibleTrigger>
<CollapsibleContent asChild>
<div className="rounded-md border border-gray-100 px-4 py-4 font-mono text-sm dark:border-black dark:border-opacity-15 shadow-md">
<div className="flex flex-wrap gap-4 mr-4">
{entries.length === 0 && (
<Alert variant="default">
<InfoCircledIcon className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>There are no users currently queued.</AlertDescription>
</Alert>
)}
{entries.map((entry) => (
<QueuedUserCard place={entry} key={entry.user.id} onDequeue={onDequeue} />
))}
</div>
</div>
</CollapsibleContent>
</Collapsible>
);
};
110 changes: 54 additions & 56 deletions apps/forge/src/routes/_authenticated/_reponly/signin/dashboard/-components/SignInDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,62 +31,60 @@ export const SignInDrawer: FC<SignInDrawerProps> = ({
const toggleOpen = () => setIsOpen(!isOpen);

return (
<>
<Collapsible key="1" className="space-y-2 mt-2 mb-2" defaultOpen={startExpanded}>
<CollapsibleTrigger asChild>
<Button
className="flex items-center justify-between space-x-4 py-7 w-full"
style={{ paddingLeft: "18px", paddingRight: "18px" }}
size="sm"
variant="outline"
onClick={toggleOpen}
disabled={entries.length === 0}
>
<div className="flex items-center gap-2">
<span className="inline-flex items-center justify-center h-6 w-6 rounded-sm bg-primary text-sm font-semibold text-primary-foreground">
{entries.length}
</span>
<h4 className="text-lg font-bold">{title}</h4>
</div>
<div className="flex items-center gap-2">
{entries.length === 0 ? (
<Ban className="h-4 w-4" />
) : (
<>
{isOpen ? "Hide" : "Show"}
{isOpen ? <ArrowRightIcon className="h-4 w-4" /> : <ArrowDownIcon className="h-4 w-4" />}
<span className="sr-only">{isOpen ? "Hide" : "Show"}</span>
</>
)}
</div>
</Button>
</CollapsibleTrigger>
<CollapsibleContent asChild>
<div className="rounded-md border border-gray-100 px-4 py-4 font-mono text-sm dark:border-black dark:border-opacity-15 shadow-md">
<div className="flex flex-wrap gap-4 mr-4">
{entries.length === 0 && (
<Alert variant="default">
<InfoCircledIcon className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>There are no users currently signed in.</AlertDescription>
</Alert>
)}
{entries.map((entry) => (
<SignedInUserCard
key={entry.user.id}
user={entry.user as PartialUserWithTeams}
tools={entry.tools}
reason={entry.reason}
timeIn={entry.created_at}
onSignOut={() => onSignOut(entry.user.id)}
onShiftReps={onShiftReps}
isAdmin={isAdmin}
/>
))}
</div>
<Collapsible className="space-y-2 mt-2 mb-2" defaultOpen={startExpanded}>
<CollapsibleTrigger asChild>
<Button
className="flex items-center justify-between space-x-4 py-7 w-full"
style={{ paddingLeft: "18px", paddingRight: "18px" }}
size="sm"
variant="outline"
onClick={toggleOpen}
disabled={entries.length === 0}
>
<div className="flex items-center gap-2">
<span className="inline-flex items-center justify-center h-6 w-6 rounded-sm bg-primary text-sm font-semibold text-primary-foreground">
{entries.length}
</span>
<h4 className="text-lg font-bold">{title}</h4>
</div>
</CollapsibleContent>
</Collapsible>
</>
<div className="flex items-center gap-2">
{entries.length === 0 ? (
<Ban className="h-4 w-4" />
) : (
<>
{isOpen ? "Hide" : "Show"}
{isOpen ? <ArrowRightIcon className="h-4 w-4" /> : <ArrowDownIcon className="h-4 w-4" />}
<span className="sr-only">{isOpen ? "Hide" : "Show"}</span>
</>
)}
</div>
</Button>
</CollapsibleTrigger>
<CollapsibleContent asChild>
<div className="rounded-md border border-gray-100 px-4 py-4 font-mono text-sm dark:border-black dark:border-opacity-15 shadow-md">
<div className="flex flex-wrap gap-4 mr-4">
{entries.length === 0 && (
<Alert variant="default">
<InfoCircledIcon className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>There are no users currently signed in.</AlertDescription>
</Alert>
)}
{entries.map((entry) => (
<SignedInUserCard
key={entry.user.id}
user={entry.user as PartialUserWithTeams}
tools={entry.tools}
reason={entry.reason}
timeIn={entry.created_at}
onSignOut={() => onSignOut(entry.user.id)}
onShiftReps={onShiftReps}
isAdmin={isAdmin}
/>
))}
</div>
</div>
</CollapsibleContent>
</Collapsible>
);
};
16 changes: 2 additions & 14 deletions apps/forge/src/routes/_authenticated/_reponly/signin/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Alert, AlertDescription, AlertTitle } from "@ui/components/ui/alert.tsx
import { Loader } from "@ui/components/ui/loader.tsx";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { QueueDrawer } from "./-components/QueuedDraw";

export default function SignInDashboard() {
const queryClient = useQueryClient();
Expand Down Expand Up @@ -125,20 +126,7 @@ export default function SignInDashboard() {
/>
</div>
<div id="queue-shelf" className="mt-4 flex-1">
<h4 className="text-xl font-bold mb-4">Queued</h4>
<div className="flex flex-wrap gap-4 mb-4">
{queuedUsers.length === 0 && (
<Alert variant="default">
<InfoCircledIcon className="h-4 w-4" />
<AlertTitle>Info</AlertTitle>
<AlertDescription>There are no users currently queued.</AlertDescription>
</Alert>
)}
{queuedUsers.length > 0 &&
queuedUsers.map((entry) => (
<QueuedUserCard place={entry} key={entry.user.id} onDequeue={handleDequeue} />
))}
</div>
<QueueDrawer entries={queuedUsers} onDequeue={handleDequeue} />
</div>
</div>
)}
Expand Down

0 comments on commit ea0f08b

Please sign in to comment.