Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(web): reuse project combobox in timeline popovers

Browse Source
This commit is contained in:
Hartmut Nörenberg
2026-03-30 13:34:59 +02:00
parent 9268a38df4
commit f0bea6235d
13 changed files with 525 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/comments/CommentThread.tsx
+15 -20
View File
@@ -31,10 +31,7 @@ interface CommentItem {
replies: CommentReply[];
}
type CommentEntityType = "estimate";
interface CommentThreadProps {
entityType: CommentEntityType;
entityId: string;
}
@@ -113,37 +110,36 @@ function CommentBody({ body }: { body: string }) {
function SingleComment({
comment,
entityType,
entityId,
isReply = false,
}: {
comment: CommentItem | CommentReply;
entityType: CommentEntityType;
entityId: string;
isReply?: boolean;
}) {
const [showReplyInput, setShowReplyInput] = useState(false);
const [confirmDelete, setConfirmDelete] = useState(false);
const utils = trpc.useUtils();
const commentTarget = { entityType: "estimate" as const, entityId };
const createMutation = trpc.comment.create.useMutation({
onSuccess: () => {
setShowReplyInput(false);
void utils.comment.list.invalidate({ entityType, entityId });
void utils.comment.count.invalidate({ entityType, entityId });
void utils.comment.list.invalidate(commentTarget);
void utils.comment.count.invalidate(commentTarget);
},
});
const resolveMutation = trpc.comment.resolve.useMutation({
onSuccess: () => {
void utils.comment.list.invalidate({ entityType, entityId });
void utils.comment.list.invalidate(commentTarget);
},
});
const deleteMutation = trpc.comment.delete.useMutation({
onSuccess: () => {
void utils.comment.list.invalidate({ entityType, entityId });
void utils.comment.count.invalidate({ entityType, entityId });
void utils.comment.list.invalidate(commentTarget);
void utils.comment.count.invalidate(commentTarget);
},
});
@@ -217,12 +213,12 @@ function SingleComment({
{showReplyInput && (
<div className="mt-3">
<CommentInput
entityType={entityType}
entityType={commentTarget.entityType}
entityId={entityId}
parentId={comment.id}
onSubmit={(replyBody) => {
createMutation.mutate({
entityType,
entityType: commentTarget.entityType,
entityId,
parentId: comment.id,
body: replyBody,
@@ -259,7 +255,6 @@ function SingleComment({
<SingleComment
key={reply.id}
comment={reply}
entityType={entityType}
entityId={entityId}
isReply
/>
@@ -270,18 +265,19 @@ function SingleComment({
);
}
export function CommentThread({ entityType, entityId }: CommentThreadProps) {
export function CommentThread({ entityId }: CommentThreadProps) {
const utils = trpc.useUtils();
const commentTarget = { entityType: "estimate" as const, entityId };
const commentsQuery = trpc.comment.list.useQuery(
{ entityType, entityId },
commentTarget,
{ staleTime: 10_000 },
);
const createMutation = trpc.comment.create.useMutation({
onSuccess: () => {
void utils.comment.list.invalidate({ entityType, entityId });
void utils.comment.count.invalidate({ entityType, entityId });
void utils.comment.list.invalidate(commentTarget);
void utils.comment.count.invalidate(commentTarget);
},
});
@@ -312,7 +308,6 @@ export function CommentThread({ entityType, entityId }: CommentThreadProps) {
<SingleComment
key={comment.id}
comment={comment}
entityType={entityType}
entityId={entityId}
/>
))}
@@ -322,11 +317,11 @@ export function CommentThread({ entityType, entityId }: CommentThreadProps) {
{/* New comment input */}
<div className="border-t border-gray-200 dark:border-gray-700 pt-4">
<CommentInput
entityType={entityType}
entityType={commentTarget.entityType}
entityId={entityId}
onSubmit={(body) => {
createMutation.mutate({
entityType,
entityType: commentTarget.entityType,
entityId,
body,
});
apps/web/src/components/estimates/EstimateWorkspaceClient.tsx
+2 -2
View File
@@ -135,7 +135,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
const commentCountQuery = trpc.comment.count.useQuery(
{ entityType: "estimate", entityId: estimateId },
{ staleTime: 30_000 },
{ enabled: canViewCosts, staleTime: 30_000 },
);
const commentCount = commentCountQuery.data ?? 0;
@@ -364,7 +364,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
<h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-50">
Comments
</h2>
<CommentThread entityType="estimate" entityId={estimate.id} />
<CommentThread entityId={estimate.id} />
</div>
)}
</>
apps/web/src/components/timeline/BatchAssignPopover.tsx
+7 -61
View File
@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
import { AllocationStatus } from "@capakraken/shared";
import { trpc } from "~/lib/trpc/client.js";
import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
interface BatchAssignPopoverProps {
resourceIds: string[];
@@ -33,23 +34,10 @@ export function BatchAssignPopover({
const ref = useRef<HTMLDivElement>(null);
const invalidateTimeline = useInvalidateTimeline();
const [search, setSearch] = useState("");
const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
null,
);
const [hoursPerDay, setHoursPerDay] = useState(8);
const [dropdownOpen, setDropdownOpen] = useState(true);
const { data: projectsData } = trpc.project.list.useQuery(
{ search, limit: 20 },
{ staleTime: 30_000 },
);
const projects = (projectsData?.projects ?? []) as Array<{
id: string;
name: string;
}>;
const selectedProject = projects.find((p) => p.id === selectedProjectId);
const batchMutation = trpc.timeline.batchQuickAssign.useMutation({
onSuccess: () => {
@@ -136,54 +124,12 @@ export function BatchAssignPopover({
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
Project
</label>
{selectedProject && !dropdownOpen ? (
<div
className="flex items-center gap-2 border border-sky-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-sky-50 dark:bg-sky-950/30"
onClick={() => {
setDropdownOpen(true);
setSearch("");
}}
>
<span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">
{selectedProject.name}
</span>
<span className="text-xs text-gray-400 dark:text-gray-500">
&#9662;
</span>
</div>
) : (
<div className="relative">
<input
autoFocus
type="text"
placeholder="Search projects\u2026"
value={search}
onChange={(e) => setSearch(e.target.value)}
onFocus={() => setDropdownOpen(true)}
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-sky-400 dark:focus:ring-sky-500"
/>
{dropdownOpen && projects.length > 0 && (
<div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
{projects.map((p) => (
<button
key={p.id}
type="button"
onClick={() => {
setSelectedProjectId(p.id);
setDropdownOpen(false);
setSearch("");
}}
className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
>
<span className="text-sm text-gray-800 dark:text-gray-200 truncate">
{p.name}
</span>
</button>
))}
</div>
)}
</div>
)}
<ProjectCombobox
value={selectedProjectId}
onChange={setSelectedProjectId}
placeholder="Search project…"
className="w-full"
/>
</div>
{/* Hours per day */}
apps/web/src/components/timeline/NewAllocationPopover.tsx
+8 -48
View File
@@ -1,13 +1,14 @@
"use client";
import { clsx } from "clsx";
import { useEffect, useRef, useState } from "react";
import { useState } from "react";
import { createPortal } from "react-dom";
import { AllocationStatus } from "@capakraken/shared";
import { trpc } from "~/lib/trpc/client.js";
import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
import { useViewportPopover } from "~/hooks/useViewportPopover.js";
import { DateInput } from "~/components/ui/DateInput.js";
import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
interface NewAllocationPopoverProps {
resourceId: string;
@@ -46,7 +47,6 @@ export function NewAllocationPopover({
});
const invalidateTimeline = useInvalidateTimeline();
const [search, setSearch] = useState("");
const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
suggestedProjectId ?? null,
);
@@ -54,17 +54,6 @@ export function NewAllocationPopover({
const [hoursPerDay, setHoursPerDay] = useState(8);
const [start, setStart] = useState(toDateInput(startDate));
const [end, setEnd] = useState(toDateInput(endDate));
const [dropdownOpen, setDropdownOpen] = useState(!suggestedProjectId);
const { data: projectsData } = trpc.project.list.useQuery(
{ search, limit: 20 },
{ staleTime: 30_000 },
);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const projects = (projectsData?.projects ?? []) as Array<{ id: string; name: string; orderType?: string }>;
const selectedProject = projects.find((p) => p.id === selectedProjectId)
?? (suggestedProjectId ? projects.find((p) => p.id === suggestedProjectId) : null);
const createMutation = trpc.timeline.quickAssign.useMutation({
onSuccess: () => {
@@ -126,41 +115,12 @@ export function NewAllocationPopover({
{/* Project picker */}
<div>
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Project</label>
{selectedProject && !dropdownOpen ? (
<div
className="flex items-center gap-2 border border-brand-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-brand-50 dark:bg-sky-950/30"
onClick={() => { setDropdownOpen(true); setSearch(""); }}
>
<span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">{selectedProject.name}</span>
<span className="text-xs text-gray-400 dark:text-gray-500">▾</span>
</div>
) : (
<div className="relative">
<input
autoFocus={dropdownOpen}
type="text"
placeholder="Search projects…"
value={search}
onChange={(e) => setSearch(e.target.value)}
onFocus={() => setDropdownOpen(true)}
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
/>
{dropdownOpen && projects.length > 0 && (
<div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
{projects.map((p) => (
<button
key={p.id}
type="button"
onClick={() => { setSelectedProjectId(p.id); setDropdownOpen(false); setSearch(""); }}
className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
>
<span className="text-sm text-gray-800 dark:text-gray-200 truncate">{p.name}</span>
</button>
))}
</div>
)}
</div>
)}
<ProjectCombobox
value={selectedProjectId}
onChange={setSelectedProjectId}
placeholder="Search project…"
className="w-full"
/>
</div>
{/* Role */}