mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-07 03:32:06 +00:00
fix(work-orders): scope keyword search to the week and keep filters global
Show the Searching within [week] indicator while a keyword is typed and stop sending the week-scoped keyword to Advanced Filters search. Refs SH-194.
This commit is contained in:
parent
fc3e7591dc
commit
aa583858ba
5 changed files with 146 additions and 9 deletions
|
|
@ -5,6 +5,8 @@ import { ToolbarButton } from "@/components/ui/toolbar-button";
|
||||||
|
|
||||||
type WorkOrdersListHeaderProps = {
|
type WorkOrdersListHeaderProps = {
|
||||||
search: string;
|
search: string;
|
||||||
|
/** Compact label of the active board week (e.g. "5/4–5/8"). */
|
||||||
|
weekLabel: string;
|
||||||
onSearchChange: (value: string) => void;
|
onSearchChange: (value: string) => void;
|
||||||
/** Omit until Advanced Search slice mounts the sheet. */
|
/** Omit until Advanced Search slice mounts the sheet. */
|
||||||
onOpenAdvancedFilters?: () => void;
|
onOpenAdvancedFilters?: () => void;
|
||||||
|
|
@ -16,6 +18,7 @@ type WorkOrdersListHeaderProps = {
|
||||||
|
|
||||||
export function WorkOrdersListHeader({
|
export function WorkOrdersListHeader({
|
||||||
search,
|
search,
|
||||||
|
weekLabel,
|
||||||
onSearchChange,
|
onSearchChange,
|
||||||
onOpenAdvancedFilters,
|
onOpenAdvancedFilters,
|
||||||
onNewWorkOrder,
|
onNewWorkOrder,
|
||||||
|
|
@ -24,12 +27,24 @@ export function WorkOrdersListHeader({
|
||||||
}: WorkOrdersListHeaderProps) {
|
}: WorkOrdersListHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SearchInput
|
<div className="relative">
|
||||||
value={search}
|
<SearchInput
|
||||||
onChange={onSearchChange}
|
value={search}
|
||||||
placeholder="Search this week…"
|
onChange={onSearchChange}
|
||||||
aria-label="Search work orders"
|
placeholder="Search this week…"
|
||||||
/>
|
aria-label="Search work orders"
|
||||||
|
/>
|
||||||
|
{/* SH-194: keyword search is scoped to the active week; make that scope visible. */}
|
||||||
|
{search.trim() !== "" && Boolean(weekLabel) && (
|
||||||
|
<span
|
||||||
|
role="status"
|
||||||
|
className="absolute left-0 whitespace-nowrap"
|
||||||
|
style={{ top: "calc(100% + 4px)", fontSize: 11, color: "var(--muted-foreground)" }}
|
||||||
|
>
|
||||||
|
Searching within {weekLabel}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{Boolean(onOpenAdvancedFilters) && (
|
{Boolean(onOpenAdvancedFilters) && (
|
||||||
<ToolbarButton
|
<ToolbarButton
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@ export function useWorkOrdersBoardSource(filters: FiltersReturn): WorkOrdersBoar
|
||||||
() =>
|
() =>
|
||||||
buildResolvedBoardSearchParams({
|
buildResolvedBoardSearchParams({
|
||||||
advApplied: filters.advApplied,
|
advApplied: filters.advApplied,
|
||||||
search: filters.search,
|
// SH-194: Advanced Filters are global by design; the week-scoped keyword box has no effect.
|
||||||
|
search: "",
|
||||||
page: filters.page,
|
page: filters.page,
|
||||||
pageSize: filters.pageSize,
|
pageSize: filters.pageSize,
|
||||||
sortBy: filters.sortBy,
|
sortBy: filters.sortBy,
|
||||||
|
|
@ -43,7 +44,6 @@ export function useWorkOrdersBoardSource(filters: FiltersReturn): WorkOrdersBoar
|
||||||
}),
|
}),
|
||||||
[
|
[
|
||||||
filters.advApplied,
|
filters.advApplied,
|
||||||
filters.search,
|
|
||||||
filters.page,
|
filters.page,
|
||||||
filters.pageSize,
|
filters.pageSize,
|
||||||
filters.sortBy,
|
filters.sortBy,
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@ export default function WorkOrdersListPage() {
|
||||||
actions={
|
actions={
|
||||||
<WorkOrdersListHeader
|
<WorkOrdersListHeader
|
||||||
search={filters.search}
|
search={filters.search}
|
||||||
|
weekLabel={filters.weekLabel}
|
||||||
onSearchChange={filters.handleSearchChange}
|
onSearchChange={filters.handleSearchChange}
|
||||||
onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
|
onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
|
||||||
onNewWorkOrder={() => page.setWizardOpen(true)}
|
onNewWorkOrder={() => page.setWizardOpen(true)}
|
||||||
|
|
|
||||||
|
|
@ -189,7 +189,12 @@ vi.mock("@/app/(protected)/workorders/_components/list/table/wo-table", () => ({
|
||||||
describe("WorkOrdersListHeader slice affordances", () => {
|
describe("WorkOrdersListHeader slice affordances", () => {
|
||||||
it("hides New WO and Advanced Filters when callbacks are omitted", () => {
|
it("hides New WO and Advanced Filters when callbacks are omitted", () => {
|
||||||
renderWithProviders(
|
renderWithProviders(
|
||||||
<WorkOrdersListHeader search="" onSearchChange={vi.fn()} activeFilterCount={0} />,
|
<WorkOrdersListHeader
|
||||||
|
search=""
|
||||||
|
weekLabel="5/4–5/8"
|
||||||
|
onSearchChange={vi.fn()}
|
||||||
|
activeFilterCount={0}
|
||||||
|
/>,
|
||||||
{ withAuth: false },
|
{ withAuth: false },
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -202,6 +207,7 @@ describe("WorkOrdersListHeader slice affordances", () => {
|
||||||
renderWithProviders(
|
renderWithProviders(
|
||||||
<WorkOrdersListHeader
|
<WorkOrdersListHeader
|
||||||
search=""
|
search=""
|
||||||
|
weekLabel="5/4–5/8"
|
||||||
onSearchChange={vi.fn()}
|
onSearchChange={vi.fn()}
|
||||||
onNewWorkOrder={vi.fn()}
|
onNewWorkOrder={vi.fn()}
|
||||||
onOpenAdvancedFilters={vi.fn()}
|
onOpenAdvancedFilters={vi.fn()}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
import { act, renderHook, screen, waitFor } from "@testing-library/react";
|
||||||
|
import { QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
|
import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
|
||||||
|
import { createTestQueryClient, renderWithProviders } from "@/test/test-utils";
|
||||||
|
|
||||||
|
const { searchBoard, getBoard, emptyList } = vi.hoisted(() => ({
|
||||||
|
searchBoard: vi.fn(),
|
||||||
|
getBoard: vi.fn(),
|
||||||
|
emptyList: [] as const,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@/hooks/use-debounce", () => ({
|
||||||
|
useDebounce: <T,>(value: T) => value,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
|
||||||
|
workOrdersApi: {
|
||||||
|
searchBoard: (...args: unknown[]) => searchBoard(...args),
|
||||||
|
getBoard: (...args: unknown[]) => getBoard(...args),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
|
||||||
|
useWorkOrderLocations: () => ({ data: emptyList }),
|
||||||
|
useWorkOrderVendors: () => ({ data: emptyList }),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
|
||||||
|
import { useWorkOrdersBoardSource } from "@/app/(protected)/workorders/_hooks/use-work-orders-board-source";
|
||||||
|
import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
|
||||||
|
|
||||||
|
const EMPTY_RESULT = { items: [], totalCount: 0, page: 0, pageSize: 25 };
|
||||||
|
|
||||||
|
function useBoardWithFilters() {
|
||||||
|
const filters = useWorkOrdersListFilters();
|
||||||
|
useWorkOrdersBoardSource(filters);
|
||||||
|
return filters;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderBoardSource() {
|
||||||
|
const client = createTestQueryClient();
|
||||||
|
const wrapper = ({ children }: { children: ReactNode }) => (
|
||||||
|
<QueryClientProvider client={client}>{children}</QueryClientProvider>
|
||||||
|
);
|
||||||
|
return renderHook(() => useBoardWithFilters(), { wrapper });
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("SH-194 keyword search scope indicator", () => {
|
||||||
|
it("shows no scope badge while the search box is empty", () => {
|
||||||
|
renderWithProviders(
|
||||||
|
<WorkOrdersListHeader
|
||||||
|
search=""
|
||||||
|
weekLabel="5/4–5/8"
|
||||||
|
onSearchChange={vi.fn()}
|
||||||
|
activeFilterCount={0}
|
||||||
|
/>,
|
||||||
|
{ withAuth: false },
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.queryByText(/searching within/i)).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("names the active week while a keyword is typed", () => {
|
||||||
|
renderWithProviders(
|
||||||
|
<WorkOrdersListHeader
|
||||||
|
search="hvac"
|
||||||
|
weekLabel="5/4–5/8"
|
||||||
|
onSearchChange={vi.fn()}
|
||||||
|
activeFilterCount={0}
|
||||||
|
/>,
|
||||||
|
{ withAuth: false },
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText("Searching within 5/4–5/8")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("SH-194 keyword search vs Advanced Filters scope", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
searchBoard.mockReset().mockResolvedValue(EMPTY_RESULT);
|
||||||
|
getBoard.mockReset().mockResolvedValue(EMPTY_RESULT);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("scopes keyword search to the active week", async () => {
|
||||||
|
const { result } = renderBoardSource();
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.setWeekMonday("2026-05-04");
|
||||||
|
result.current.handleSearchChange("hvac");
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(getBoard).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({ weekStart: "2026-05-04", weekEnd: "2026-05-08", search: "hvac" }),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
expect(searchBoard).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("keeps Advanced Filters global and ignores the week-scoped keyword", async () => {
|
||||||
|
const { result } = renderBoardSource();
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.handleSearchChange("hvac");
|
||||||
|
result.current.applyAdvancedFilters({ ...EMPTY_ADVANCED_FILTERS, rescheduled: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => expect(searchBoard).toHaveBeenCalled());
|
||||||
|
const params = searchBoard.mock.lastCall?.[0] as Record<string, unknown>;
|
||||||
|
expect(params.search).toBeUndefined();
|
||||||
|
expect(params).not.toHaveProperty("weekStart");
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue