Update
This commit is contained in:
michael committed
1 parent
3ebcea0b3d
commit
312dd3b3ad
3 files changed
+65
-55
No files matched your search
+61
-52
@@ -30,7 +30,7 @@ import {
|
||||
UserCircle,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { toast } from "sonner";
|
||||
|
||||
@@ -781,6 +781,7 @@ export function App() {
|
||||
const [ticketReturnPaths, setTicketReturnPaths] = useState<Record<string, string>>({});
|
||||
const [draggedOpenTicketKey, setDraggedOpenTicketKey] = useState<string | null>(null);
|
||||
const [sidebarTodos, setSidebarTodos] = useState<TicketTodo[]>([]);
|
||||
const openTicketsListRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const navigate = useCallback(
|
||||
(to: string) => {
|
||||
@@ -875,6 +876,11 @@ export function App() {
|
||||
);
|
||||
}, [currentUser, openTickets]);
|
||||
|
||||
useEffect(() => {
|
||||
const activeTicket = openTicketsListRef.current?.querySelector<HTMLElement>("[data-open-ticket-active='true']");
|
||||
activeTicket?.scrollIntoView({ block: "nearest" });
|
||||
}, [path, openTickets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser || currentUser.role === "admin" || !timersLoaded || timerOwnerId !== currentUser.id) {
|
||||
return;
|
||||
@@ -1301,62 +1307,65 @@ export function App() {
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarGroup>
|
||||
|
||||
{!isAdmin ? <SidebarTodayTodos todos={sidebarTodos} onNavigate={navigate} /> : null}
|
||||
{!isAdmin ? <SidebarTodayTodos todos={sidebarTodos} onNavigate={navigate} /> : null}
|
||||
|
||||
{!isAdmin && openTickets.length > 0 ? (
|
||||
<SidebarGroup className="pt-0 group-data-[collapsible=icon]:hidden">
|
||||
{!isAdmin && openTickets.length > 0 ? (
|
||||
<SidebarGroup className="min-h-0 flex-1 pt-0 group-data-[collapsible=icon]:hidden">
|
||||
<SidebarGroupLabel className="h-6 px-2 text-xs">Geöffnete Tickets</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{openTickets.map((ticket) => {
|
||||
const isActive = pathWithoutSearch(path) === pathWithoutSearch(ticket.path);
|
||||
<SidebarGroupContent className="min-h-0 flex-1 overflow-hidden">
|
||||
<div ref={openTicketsListRef} className="max-h-[clamp(8rem,calc(100svh-31rem),24rem)] overflow-y-auto overscroll-contain pr-1 [scrollbar-gutter:stable] [scrollbar-width:thin]">
|
||||
<SidebarMenu>
|
||||
{openTickets.map((ticket) => {
|
||||
const isActive = pathWithoutSearch(path) === pathWithoutSearch(ticket.path);
|
||||
|
||||
return (
|
||||
<SidebarMenuItem key={ticket.key}>
|
||||
<div
|
||||
draggable
|
||||
onDragStart={(event) => startOpenTicketDrag(event, ticket)}
|
||||
onDragOver={(event) => overOpenTicket(event, ticket)}
|
||||
onDrop={(event) => dropOpenTicket(event, ticket)}
|
||||
onDragEnd={() => setDraggedOpenTicketKey(null)}
|
||||
className={cn(
|
||||
"mx-2 flex cursor-grab items-center gap-1 rounded-md px-2 py-1.5 active:cursor-grabbing",
|
||||
isActive ? "bg-primary text-primary-foreground" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
draggedOpenTicketKey === ticket.key && "opacity-60",
|
||||
)}
|
||||
>
|
||||
<GripVertical className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
<a
|
||||
href={ticket.path}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 text-sm"
|
||||
title={
|
||||
ticket.periodType === "all"
|
||||
? `${ticket.ticketNumber} (alle Sessions)`
|
||||
: `${ticket.ticketNumber} (${ticket.periodType === "month" ? "Monat" : "Tag"} ${ticket.period})`
|
||||
}
|
||||
onClick={navHandler(ticket.path)}
|
||||
return (
|
||||
<SidebarMenuItem key={ticket.key}>
|
||||
<div
|
||||
data-open-ticket-active={isActive ? "true" : undefined}
|
||||
draggable
|
||||
onDragStart={(event) => startOpenTicketDrag(event, ticket)}
|
||||
onDragOver={(event) => overOpenTicket(event, ticket)}
|
||||
onDrop={(event) => dropOpenTicket(event, ticket)}
|
||||
onDragEnd={() => setDraggedOpenTicketKey(null)}
|
||||
className={cn(
|
||||
"mx-2 flex cursor-grab items-center gap-1 rounded-md px-2 py-1.5 active:cursor-grabbing",
|
||||
isActive ? "bg-primary text-primary-foreground" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
draggedOpenTicketKey === ticket.key && "opacity-60",
|
||||
)}
|
||||
>
|
||||
<span className={cn("size-2 shrink-0 rounded-full", ticket.dirty ? "bg-amber-400" : isActive ? "bg-primary-foreground" : "bg-muted-foreground/70")} />
|
||||
<FileText className="size-4 shrink-0" />
|
||||
<span className="truncate">{ticket.ticketNumber}</span>
|
||||
</a>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className={cn("size-6 shrink-0", isActive ? "hover:bg-primary-foreground/15 hover:text-primary-foreground" : "")}
|
||||
onClick={() => closeOpenTicket(ticket)}
|
||||
aria-label={`${ticket.ticketNumber} schließen`}
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
<GripVertical className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
<a
|
||||
href={ticket.path}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 text-sm"
|
||||
title={
|
||||
ticket.periodType === "all"
|
||||
? `${ticket.ticketNumber} (alle Sessions)`
|
||||
: `${ticket.ticketNumber} (${ticket.periodType === "month" ? "Monat" : "Tag"} ${ticket.period})`
|
||||
}
|
||||
onClick={navHandler(ticket.path)}
|
||||
>
|
||||
<span className={cn("size-2 shrink-0 rounded-full", ticket.dirty ? "bg-amber-400" : isActive ? "bg-primary-foreground" : "bg-muted-foreground/70")} />
|
||||
<FileText className="size-4 shrink-0" />
|
||||
<span className="truncate">{ticket.ticketNumber}</span>
|
||||
</a>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className={cn("size-6 shrink-0", isActive ? "hover:bg-primary-foreground/15 hover:text-primary-foreground" : "")}
|
||||
onClick={() => closeOpenTicket(ticket)}
|
||||
aria-label={`${ticket.ticketNumber} schließen`}
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</div>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
) : null}
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: var(--font-sans);
|
||||
--breakpoint-xxl: 108.125rem;
|
||||
--breakpoint-details: 85rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1242,7 +1242,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
<div className={cn("grid gap-4", isGlobalTicket && "xxl:grid-cols-2")}>
|
||||
<div className={cn("grid gap-4", isGlobalTicket && "details:grid-cols-2")}>
|
||||
{isGlobalTicket ? (
|
||||
<Card>
|
||||
<CardHeader className="p-4">
|
||||
@@ -1300,7 +1300,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<form className="grid gap-3 md:grid-cols-2" onSubmit={saveTicketData}>
|
||||
<form className="grid grid-cols-2 gap-3 [@media_(min-width:85rem)_and_(max-width:108.124rem)]:grid-cols-1 xxl:grid-cols-2" onSubmit={saveTicketData}>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium" htmlFor="edit-ticket-number">Ticketnummer</label>
|
||||
<Input id="edit-ticket-number" value={editTicketNumber} disabled={!canEditTicketData} onChange={(event) => setEditTicketNumber(event.currentTarget.value)} required />
|
||||
@@ -1338,7 +1338,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="md:col-span-2 md:justify-self-end" disabled={!canEditTicketData || savingTicket}>
|
||||
<Button type="submit" className="col-span-2 justify-self-end [@media_(min-width:85rem)_and_(max-width:108.124rem)]:col-span-1 xxl:col-span-2" disabled={!canEditTicketData || savingTicket}>
|
||||
<Save className="size-4" />
|
||||
{savingTicket ? "Speichert..." : "Speichern"}
|
||||
</Button>
|
||||
|
||||
Reference in new issue
Block a user