mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-07 16:19:01 +00:00
Compare commits
No commits in common. "632e00a0ce52bc873ca0d52eb7af1f6d2ff14f07" and "fce8520f33c4c0c010628f8580f58dce2a0d0c53" have entirely different histories.
632e00a0ce
...
fce8520f33
36 changed files with 176 additions and 1981 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 116 KiB |
127
e2e/vendors/vendors.spec.ts
vendored
127
e2e/vendors/vendors.spec.ts
vendored
|
|
@ -65,10 +65,7 @@ interface MockState {
|
|||
listUrls: string[];
|
||||
createdBody?: Record<string, unknown>;
|
||||
updatedBody?: Record<string, unknown>;
|
||||
patchedBody?: Record<string, unknown>;
|
||||
patchedCompanyId?: string;
|
||||
deletedId?: string;
|
||||
deleteConfirmedOpenWorkOrders?: boolean;
|
||||
}
|
||||
|
||||
async function fulfillJson(route: Route, body: unknown, status = 200) {
|
||||
|
|
@ -178,52 +175,6 @@ async function mockVendorApi(
|
|||
return;
|
||||
}
|
||||
|
||||
if (request.method() === "PATCH" && pathCompanyId) {
|
||||
state.patchedBody = request.postDataJSON();
|
||||
state.patchedCompanyId = pathCompanyId;
|
||||
const anchor = vendorRecords.find((vendor) => String(vendor.CompanyId) === pathCompanyId);
|
||||
if (!anchor) {
|
||||
await fulfillJson(route, { message: "Vendor roster not found" }, 404);
|
||||
return;
|
||||
}
|
||||
const added = Array.isArray(state.patchedBody.addTechnicians)
|
||||
? (state.patchedBody.addTechnicians as Array<Record<string, unknown>>)
|
||||
: [];
|
||||
await fulfillJson(route, {
|
||||
companyId: anchor.CompanyId,
|
||||
rowVersion: "rv-patched",
|
||||
name: anchor.CompanyName,
|
||||
companyPhone: anchor.CompanyPhone,
|
||||
email: anchor.Email,
|
||||
address: anchor.Address,
|
||||
city: anchor.City,
|
||||
state: anchor.State,
|
||||
zip: anchor.Zip,
|
||||
googleMapsUrl: anchor.GoogleMapsUrl,
|
||||
notes: anchor.Notes,
|
||||
technicians: [
|
||||
...vendorRecords
|
||||
.filter((vendor) => vendor.CompanyId === anchor.CompanyId)
|
||||
.map((vendor) => ({
|
||||
id: vendor.Id,
|
||||
contactName: vendor.ContactName,
|
||||
phone: vendor.Phone,
|
||||
email: vendor.Email,
|
||||
preferredContact: vendor.PreferredContact ?? "Phone",
|
||||
tradeSpecialties: vendor.TradeSpecialties,
|
||||
isActive: vendor.IsActive,
|
||||
totalJobs: vendor.TotalJobs,
|
||||
})),
|
||||
...added.map((technician, index) => ({
|
||||
id: 900 + index,
|
||||
totalJobs: 0,
|
||||
...technician,
|
||||
})),
|
||||
],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (request.method() === "PUT" && pathCompanyId) {
|
||||
state.updatedBody = request.postDataJSON();
|
||||
const technicians = Array.isArray(state.updatedBody.technicians)
|
||||
|
|
@ -308,9 +259,8 @@ async function mockVendorApi(
|
|||
},
|
||||
}),
|
||||
);
|
||||
await page.route(/\/api\/vendors\/\d+(\?.*)?$/, async (route) => {
|
||||
const requestUrl = new URL(route.request().url());
|
||||
const id = requestUrl.pathname.split("/").pop() ?? "";
|
||||
await page.route(/\/api\/vendors\/\d+$/, async (route) => {
|
||||
const id = route.request().url().split("/").pop() ?? "";
|
||||
if (route.request().method() === "PUT") {
|
||||
state.updatedBody = route.request().postDataJSON();
|
||||
const vendor = vendorRecords.find((item) => String(item.Id) === id);
|
||||
|
|
@ -323,8 +273,6 @@ async function mockVendorApi(
|
|||
return;
|
||||
}
|
||||
if (route.request().method() === "DELETE") {
|
||||
state.deleteConfirmedOpenWorkOrders =
|
||||
requestUrl.searchParams.get("confirmOpenWorkOrders") === "true";
|
||||
if (options.deleteConflict) {
|
||||
await fulfillJson(
|
||||
route,
|
||||
|
|
@ -461,11 +409,6 @@ test.describe("Vendor directory prototype parity", () => {
|
|||
"https://maps.google.com/gateway",
|
||||
);
|
||||
await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
|
||||
await expect(page.getByLabel("Technician name (optional)")).toHaveCount(1);
|
||||
await expect(page.getByLabel("Technician name (optional)")).toHaveValue("");
|
||||
await expect(
|
||||
page.getByRole("dialog", { name: /Add Vendor/ }).getByText("Adam Whyte"),
|
||||
).toHaveCount(0);
|
||||
await page.getByRole("button", { name: "Add technician" }).click();
|
||||
await page.getByLabel("Technician name (optional)").last().fill("New Technician");
|
||||
const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
|
||||
|
|
@ -477,33 +420,27 @@ test.describe("Vendor directory prototype parity", () => {
|
|||
await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
|
||||
await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
|
||||
await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
|
||||
expect(state.patchedCompanyId).toBe("101");
|
||||
expect(state.patchedBody).toMatchObject({ rowVersion: "rv-1" });
|
||||
// Only the field the user actually typed into is transmitted. Address/phone/email were
|
||||
// populated by selecting the company and never edited, so they must not be sent — otherwise a
|
||||
// concurrent edit by another user to any of them would be silently reverted on resubmit.
|
||||
expect(state.patchedBody?.companyFields).toEqual({ notes: "Created in browser E2E" });
|
||||
expect(state.patchedBody?.companyFields).not.toHaveProperty("companyPhone");
|
||||
expect(state.patchedBody?.companyFields).not.toHaveProperty("address");
|
||||
expect(state.patchedBody?.companyFields).not.toHaveProperty("email");
|
||||
expect(state.patchedBody?.companyFields).not.toHaveProperty("name");
|
||||
expect(state.patchedBody?.addTechnicians).toEqual([
|
||||
expect.objectContaining({
|
||||
contactName: "New Technician",
|
||||
tradeSpecialties: "Plumbing, HVAC",
|
||||
}),
|
||||
]);
|
||||
const patchedTechnicians = Array.isArray(state.patchedBody?.addTechnicians)
|
||||
? (state.patchedBody.addTechnicians as Array<Record<string, unknown>>)
|
||||
expect(state.updatedBody).toMatchObject({
|
||||
name: "Gateway Plumbing",
|
||||
companyPhone: "(314) 555-0100",
|
||||
notes: "Created in browser E2E",
|
||||
rowVersion: "rv-1",
|
||||
});
|
||||
expect(state.updatedBody?.technicians).toEqual(
|
||||
expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
contactName: "New Technician",
|
||||
tradeSpecialties: "Plumbing, HVAC",
|
||||
}),
|
||||
]),
|
||||
);
|
||||
const submittedTechnicians = Array.isArray(state.updatedBody?.technicians)
|
||||
? (state.updatedBody.technicians as Array<Record<string, unknown>>)
|
||||
: [];
|
||||
const newTechnician = patchedTechnicians.find(
|
||||
const newTechnician = submittedTechnicians.find(
|
||||
(technician) => technician.contactName === "New Technician",
|
||||
);
|
||||
expect(newTechnician?.preferredContact).toBeUndefined();
|
||||
expect(patchedTechnicians.some((technician) => technician.contactName === "Adam Whyte")).toBe(
|
||||
false,
|
||||
);
|
||||
expect(state.updatedBody).toBeUndefined();
|
||||
|
||||
await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
|
||||
const detailDrawer = page.locator(".MuiDrawer-paper").last();
|
||||
|
|
@ -580,28 +517,20 @@ test.describe("Vendor directory prototype parity", () => {
|
|||
await expect(page.getByRole("button", { name: "Close drawer" })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("confirms deactivation past linked work orders and preserves the vendor on a raced 409", async ({
|
||||
test("blocks deactivation for linked work orders and preserves the vendor on a raced 409", async ({
|
||||
page,
|
||||
}) => {
|
||||
const confirmState = await mockVendorApi(page, { deactivationBlocked: true });
|
||||
const blockedState = await mockVendorApi(page, { deactivationBlocked: true });
|
||||
await page.goto("/vendors");
|
||||
|
||||
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
|
||||
await page.getByRole("switch", { name: "Active status" }).click();
|
||||
const dialog = page.getByRole("dialog", { name: "Deactivate this vendor?" });
|
||||
await expect(dialog).toContainText("It still has 1 open work order");
|
||||
await expect(
|
||||
dialog.getByRole("link", { name: /WO-501 — Emergency boiler repair/ }),
|
||||
).toHaveAttribute("href", "/workorders/501");
|
||||
|
||||
// SH-254: the open work orders inform the decision, they no longer block it.
|
||||
const confirm = dialog.getByRole("button", { name: "Deactivate anyway" });
|
||||
await expect(confirm).toBeEnabled();
|
||||
await confirm.click();
|
||||
|
||||
await expect.poll(() => confirmState.deletedId).toBe("1");
|
||||
expect(confirmState.deleteConfirmedOpenWorkOrders).toBe(true);
|
||||
const blockedDialog = page.getByRole("dialog", { name: "Deactivate Vendor" });
|
||||
await expect(blockedDialog).toContainText("WO-501 — Emergency boiler repair");
|
||||
await expect(blockedDialog.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
|
||||
expect(blockedState.deletedId).toBeUndefined();
|
||||
|
||||
await blockedDialog.getByRole("button", { name: "Cancel" }).click();
|
||||
await page.unrouteAll({ behavior: "wait" });
|
||||
|
||||
const racedState = await mockVendorApi(page, { deleteConflict: true });
|
||||
|
|
@ -609,13 +538,13 @@ test.describe("Vendor directory prototype parity", () => {
|
|||
await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
|
||||
await page.getByRole("switch", { name: "Active status" }).click();
|
||||
await page
|
||||
.getByRole("dialog", { name: "Deactivate this vendor?" })
|
||||
.getByRole("dialog", { name: "Deactivate Vendor" })
|
||||
.getByRole("button", {
|
||||
name: /^Deactivate$/,
|
||||
})
|
||||
.click();
|
||||
|
||||
await expect(page.getByRole("dialog", { name: "Deactivate this vendor?" })).toContainText(
|
||||
await expect(page.getByRole("dialog", { name: "Deactivate Vendor" })).toContainText(
|
||||
/open work orders|conflict/i,
|
||||
);
|
||||
expect(racedState.deletedId).toBeUndefined();
|
||||
|
|
|
|||
|
|
@ -1,124 +0,0 @@
|
|||
import { expect, test, type Page, type Route } from "@playwright/test";
|
||||
|
||||
const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
|
||||
|
||||
const TEST_USER = {
|
||||
token: "wo-day-pagination-e2e-token",
|
||||
expiration: "2030-01-01T00:00:00.000Z",
|
||||
email: "admin@seahavenind.com",
|
||||
userRoles: "Admin",
|
||||
phoneNumber: "5551234567",
|
||||
fullname: "Work Order E2E Admin",
|
||||
id: "1",
|
||||
};
|
||||
|
||||
async function fulfillJson(route: Route, body: unknown, status = 200) {
|
||||
await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
|
||||
}
|
||||
|
||||
function boardRow(id: number, woNumber: string, scheduledDate: string) {
|
||||
return {
|
||||
id,
|
||||
woNumber,
|
||||
workOrderType: 2,
|
||||
siteCode: woNumber,
|
||||
lifecycleStatusLabel: "Scheduled",
|
||||
scheduledDate,
|
||||
dispatcherId: "1",
|
||||
dispatcherName: "Pat Dispatcher",
|
||||
pm: "HVAC",
|
||||
};
|
||||
}
|
||||
|
||||
async function mockWorkOrderBoard(page: Page) {
|
||||
const wednesday = Array.from({ length: 60 }, (_, index) =>
|
||||
boardRow(1000 + index, `WO-${1000 + index}`, "2026-08-19"),
|
||||
);
|
||||
const monday = Array.from({ length: 5 }, (_, index) =>
|
||||
boardRow(2000 + index, `MON-${2000 + index}`, "2026-08-17"),
|
||||
);
|
||||
|
||||
await page.route(
|
||||
(url) => url.pathname.startsWith("/api/"),
|
||||
async (route) => {
|
||||
const url = route.request().url();
|
||||
if (url.includes("workorders/board/search")) {
|
||||
await fulfillJson(route, { items: [], totalCount: 0, page: 1, pageSize: 100 });
|
||||
return;
|
||||
}
|
||||
if (url.includes("workorders/board") && route.request().method() === "GET") {
|
||||
const weekStart = new URL(url).searchParams.get("weekStart") ?? "2026-08-17";
|
||||
const scheduled =
|
||||
weekStart === "2026-08-17" ? [...wednesday, ...monday] : monday.slice(0, 1);
|
||||
await fulfillJson(route, {
|
||||
weekStart,
|
||||
weekEnd: weekStart === "2026-08-17" ? "2026-08-21" : "2026-08-14",
|
||||
counts: { returned: scheduled.length, total: scheduled.length },
|
||||
unscheduled: [],
|
||||
scheduled,
|
||||
});
|
||||
return;
|
||||
}
|
||||
await fulfillJson(route, { data: [], items: [] });
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
test.describe("work order per-day pagination (SH-241)", () => {
|
||||
test.setTimeout(60_000);
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.clock.install({ time: new Date(FROZEN_NOW) });
|
||||
await page.clock.resume();
|
||||
await page.addInitScript((user) => {
|
||||
localStorage.setItem("auth", JSON.stringify(user));
|
||||
const style = document.createElement("style");
|
||||
style.textContent = ".tsqd-parent-container { display: none !important; }";
|
||||
document.documentElement.appendChild(style);
|
||||
}, TEST_USER);
|
||||
await mockWorkOrderBoard(page);
|
||||
});
|
||||
|
||||
test("changes rows-per-page, hides on global filter, and resets on day or week change", async ({
|
||||
page,
|
||||
}) => {
|
||||
const pager = page.getByTestId("wo-day-pagination");
|
||||
await page.goto("/workorders");
|
||||
await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
|
||||
timeout: 20_000,
|
||||
});
|
||||
await expect(pager).toBeVisible();
|
||||
await expect(page.getByText("Page 1 of 2")).toBeVisible();
|
||||
await expect(page.getByText("WO-1000").first()).toBeVisible();
|
||||
await expect(page.getByText("WO-1050")).toHaveCount(0);
|
||||
|
||||
await page.getByLabel("Rows per page").selectOption("25");
|
||||
await expect(page.getByText("Page 1 of 3")).toBeVisible();
|
||||
await expect(page.getByText("WO-1025")).toHaveCount(0);
|
||||
|
||||
await page.getByTestId("wo-day-pagination-next").evaluate((node) => {
|
||||
(node as HTMLButtonElement).click();
|
||||
});
|
||||
await expect(page.getByText("Page 2 of 3")).toBeVisible();
|
||||
await expect(page.getByText("WO-1025").first()).toBeVisible();
|
||||
await expect(page.getByText("WO-1000")).toHaveCount(0);
|
||||
|
||||
await page.getByRole("tab", { name: "Mon · 08/17" }).click({ force: true });
|
||||
await expect(page.getByText("Page 1 of 1")).toBeVisible();
|
||||
await expect(page.getByText("MON-2000").first()).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Week 8/17–8/21" }).click({ force: true });
|
||||
await page.getByRole("button", { name: /Aug 10/ }).click({ force: true });
|
||||
await expect(page.getByTestId("wo-day-pagination")).toBeVisible();
|
||||
await expect(page.getByText("Page 1 of")).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Advanced Filters" }).click();
|
||||
await page.getByRole("button", { name: /Indicators/i }).click();
|
||||
await page.getByRole("button", { name: "Rescheduled ≥ 2" }).click();
|
||||
await page.getByRole("button", { name: "Apply filters" }).click();
|
||||
await expect(pager).toHaveCount(0);
|
||||
|
||||
await page.getByRole("button", { name: "Clear all" }).click();
|
||||
await expect(page.getByTestId("wo-day-pagination")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
@ -38,18 +38,13 @@ export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivatio
|
|||
const confirm = () => {
|
||||
if (!target || target.id == null) return;
|
||||
setError(null);
|
||||
// The dialog has shown whatever open work orders exist, so confirming here is
|
||||
// the explicit confirmation the API requires to deactivate past them (SH-254).
|
||||
deleteVendor.mutate(
|
||||
{ id: target.id, confirmOpenWorkOrders: (impact?.openWorkOrders.length ?? 0) > 0 },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setTarget(null);
|
||||
onSuccess?.();
|
||||
},
|
||||
onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
|
||||
deleteVendor.mutate(target.id, {
|
||||
onSuccess: () => {
|
||||
setTarget(null);
|
||||
onSuccess?.();
|
||||
},
|
||||
);
|
||||
onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useCallback, useMemo, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { useForm, useWatch, type FieldErrors } from "react-hook-form";
|
||||
import {
|
||||
emptyVendorCompanyRosterForm,
|
||||
|
|
@ -9,38 +8,10 @@ import {
|
|||
} from "@/domain/vendors/schemas/vendor-roster-schema";
|
||||
import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
|
||||
import {
|
||||
buildAdditiveRosterPatch,
|
||||
getSingleStatusOnlyChange,
|
||||
useSaveVendorCompanyRoster,
|
||||
type EditedCompanyFields,
|
||||
} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
|
||||
import { useVendorRosterResolver } from "./use-vendor-roster-resolver";
|
||||
|
||||
const EDITABLE_COMPANY_FIELDS = [
|
||||
"name",
|
||||
"companyPhone",
|
||||
"email",
|
||||
"address",
|
||||
"city",
|
||||
"state",
|
||||
"zip",
|
||||
"googleMapsUrl",
|
||||
"notes",
|
||||
] as const;
|
||||
|
||||
/**
|
||||
* Company fields the user actually typed into, taken from react-hook-form dirty state.
|
||||
* Selecting a company calls reset(), so loaded values are not dirty; only genuine edits are.
|
||||
* The additive PATCH must send these rather than a form-vs-roster diff, which would resend
|
||||
* stale values for fields another user changed while a conflict was being resolved.
|
||||
*/
|
||||
function pickEditedCompanyFields(dirtyFields: Record<string, unknown>): EditedCompanyFields {
|
||||
const edited: EditedCompanyFields = {};
|
||||
for (const field of EDITABLE_COMPANY_FIELDS) {
|
||||
if (dirtyFields[field] === true) edited[field] = true;
|
||||
}
|
||||
return edited;
|
||||
}
|
||||
import { toFormValues, useVendorRosterSelection } from "./use-vendor-roster-selection";
|
||||
import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
|
||||
import { isVendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
|
||||
|
|
@ -133,10 +104,6 @@ export function useVendorRosterForm({
|
|||
mode: "onChange",
|
||||
});
|
||||
const { control, handleSubmit, reset, formState } = form;
|
||||
// react-hook-form exposes formState through a Proxy that only tracks properties read during
|
||||
// render. Reading dirtyFields inside the submit callback would not subscribe and would come
|
||||
// back empty, so it is resolved here on every render.
|
||||
const editedCompanyFields = pickEditedCompanyFields(formState.dirtyFields);
|
||||
const watched = useWatch({ control });
|
||||
|
||||
const clearConflict = useCallback(() => setConflict(null), []);
|
||||
|
|
@ -162,39 +129,17 @@ export function useVendorRosterForm({
|
|||
clearConflict();
|
||||
}, [clearConflict, createDefaults, reset, resetSelection]);
|
||||
|
||||
const committedRoster = mode === "update" ? routeRoster : selection.selectedRoster;
|
||||
const isUpdate = mode === "update" || selection.selectedRoster != null;
|
||||
|
||||
const submit = (formValues: VendorCompanyRosterFormValues) => {
|
||||
setConflict(null);
|
||||
const values = withoutBlankNewTechnicians(formValues);
|
||||
if (mode === "create" && selection.selectedRoster != null) {
|
||||
const selected = selection.selectedRoster;
|
||||
if (!buildAdditiveRosterPatch(selected, values, selected.rowVersion, editedCompanyFields)) {
|
||||
toast.error("Enter at least one technician to add to this vendor.");
|
||||
return;
|
||||
}
|
||||
save.mutate(
|
||||
{
|
||||
mode: "add",
|
||||
values,
|
||||
companyId: selected.companyId,
|
||||
rowVersion: selected.rowVersion,
|
||||
originalRoster: selected,
|
||||
editedCompanyFields,
|
||||
},
|
||||
{
|
||||
onSuccess: (data) => onSuccess?.(data),
|
||||
onError: (error) => {
|
||||
if (isVendorRosterConflictError(error)) setConflict(error.conflict);
|
||||
},
|
||||
},
|
||||
);
|
||||
return;
|
||||
}
|
||||
save.mutate(
|
||||
{
|
||||
mode: mode === "update" ? "update" : "create",
|
||||
values,
|
||||
companyId: mode === "update" ? (routeRoster?.companyId ?? companyId) : undefined,
|
||||
rowVersion: mode === "update" ? routeRoster?.rowVersion : undefined,
|
||||
mode: isUpdate ? "update" : "create",
|
||||
values: withoutBlankNewTechnicians(formValues),
|
||||
companyId: isUpdate ? (committedRoster?.companyId ?? companyId) : undefined,
|
||||
rowVersion: isUpdate ? committedRoster?.rowVersion : undefined,
|
||||
originalRoster: mode === "update" ? routeRoster : undefined,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { useCallback, useRef, useState } from "react";
|
||||
import { useQueryClient, type UseQueryResult } from "@tanstack/react-query";
|
||||
import {
|
||||
emptyRosterTechnician,
|
||||
emptyVendorCompanyRosterForm,
|
||||
type VendorCompanyRosterFormValues,
|
||||
} from "@/domain/vendors/schemas/vendor-roster-schema";
|
||||
|
|
@ -54,20 +53,6 @@ export function toFormValues(roster: VendorCompanyRoster): VendorCompanyRosterFo
|
|||
};
|
||||
}
|
||||
|
||||
export function toCompanyFormValues(roster: VendorCompanyRoster): VendorCompanyRosterFormValues {
|
||||
return { ...toFormValues(roster), technicians: [] };
|
||||
}
|
||||
|
||||
function withCompanyFieldsOnly(
|
||||
roster: VendorCompanyRoster,
|
||||
): (current: VendorCompanyRosterFormValues) => VendorCompanyRosterFormValues {
|
||||
return (current) => ({
|
||||
...toCompanyFormValues(roster),
|
||||
technicians:
|
||||
current.technicians.length > 0 ? current.technicians : [{ ...emptyRosterTechnician }],
|
||||
});
|
||||
}
|
||||
|
||||
export function useVendorRosterSelection({
|
||||
mode,
|
||||
reset,
|
||||
|
|
@ -87,13 +72,6 @@ export function useVendorRosterSelection({
|
|||
queryClient.fetchQuery({
|
||||
queryKey: queryKeys.vendors.roster("companyId", id),
|
||||
queryFn: () => vendorCompanyRosterApi.get({ companyId: id }),
|
||||
// SH-250: this fetch exists to obtain the freshest rowVersion, so it must not
|
||||
// serve the global 5-minute staleTime cache. A conflict never invalidates this
|
||||
// key (useSaveVendorCompanyRoster invalidates only on success, and its onError
|
||||
// returns early for conflicts), and the Add flow has no mounted observer on it.
|
||||
// Without staleTime: 0 the Reload button re-seeds the same stale rowVersion and
|
||||
// the retry 409s again indefinitely.
|
||||
staleTime: 0,
|
||||
}),
|
||||
[queryClient],
|
||||
);
|
||||
|
|
@ -113,7 +91,7 @@ export function useVendorRosterSelection({
|
|||
try {
|
||||
const roster = await fetchRosterByCompany(company.companyId);
|
||||
if (requestIdRef.current !== requestId) return;
|
||||
reset(withCompanyFieldsOnly(roster));
|
||||
reset(toFormValues(roster));
|
||||
setSelectedRoster(roster);
|
||||
clearConflict();
|
||||
retryTargetRef.current = null;
|
||||
|
|
@ -129,11 +107,7 @@ export function useVendorRosterSelection({
|
|||
(nextName = "") => {
|
||||
requestIdRef.current += 1;
|
||||
if (selectedRoster) {
|
||||
reset((current) => ({
|
||||
...emptyVendorCompanyRosterForm,
|
||||
name: nextName,
|
||||
technicians: current.technicians,
|
||||
}));
|
||||
reset({ ...emptyVendorCompanyRosterForm, name: nextName });
|
||||
}
|
||||
setSelectedRoster(null);
|
||||
clearConflict();
|
||||
|
|
@ -160,11 +134,7 @@ export function useVendorRosterSelection({
|
|||
void fetchRosterByCompany(selectedRoster.companyId)
|
||||
.then((roster) => {
|
||||
if (requestIdRef.current !== requestId) return;
|
||||
// SH-250: refresh the visible company fields alongside rowVersion.
|
||||
// Refreshing only selectedRoster left the form on pre-conflict values,
|
||||
// so a retry diffed stale fields against the reloaded roster and could
|
||||
// overwrite the concurrent company update that caused the 409.
|
||||
reset(withCompanyFieldsOnly(roster));
|
||||
reset(toFormValues(roster));
|
||||
setSelectedRoster(roster);
|
||||
retryTargetRef.current = null;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,13 +8,11 @@ import {
|
|||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
Link,
|
||||
List,
|
||||
ListItem,
|
||||
Stack,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { Link as RouterLink } from "react-router";
|
||||
import type { VendorDeactivationImpact, VendorListItem } from "@/domain/vendors/types/vendor";
|
||||
|
||||
interface VendorDeactivationDialogProps {
|
||||
|
|
@ -28,15 +26,6 @@ interface VendorDeactivationDialogProps {
|
|||
onConfirm: () => void;
|
||||
}
|
||||
|
||||
function deactivationMessage(companyName: string | undefined, openCount: number): string {
|
||||
const name = companyName ? `"${companyName}"` : "This vendor";
|
||||
if (openCount === 0) {
|
||||
return `${name} will no longer be selectable for new work orders.`;
|
||||
}
|
||||
const plural = openCount === 1 ? "work order" : "work orders";
|
||||
return `${name} will no longer be selectable for new work orders. It still has ${openCount} open ${plural} — they'll keep it as-is unless you reassign them.`;
|
||||
}
|
||||
|
||||
export function VendorDeactivationDialog({
|
||||
target,
|
||||
isLoading,
|
||||
|
|
@ -47,16 +36,16 @@ export function VendorDeactivationDialog({
|
|||
onClose,
|
||||
onConfirm,
|
||||
}: VendorDeactivationDialogProps) {
|
||||
const openWorkOrders = impact?.openWorkOrders ?? [];
|
||||
const hasOpenWorkOrders = openWorkOrders.length > 0;
|
||||
const hasBlockingImpact = Boolean(impact && !impact.canDeactivate);
|
||||
|
||||
return (
|
||||
<Dialog open={Boolean(target)} onClose={isSaving ? undefined : onClose}>
|
||||
<DialogTitle>Deactivate this vendor?</DialogTitle>
|
||||
<DialogTitle>Deactivate Vendor</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2}>
|
||||
<DialogContentText>
|
||||
{deactivationMessage(target?.companyName, openWorkOrders.length)}
|
||||
Deactivate "{target?.companyName}"? Existing work-order and audit history will
|
||||
be preserved.
|
||||
</DialogContentText>
|
||||
|
||||
{isLoading && (
|
||||
|
|
@ -74,13 +63,19 @@ export function VendorDeactivationDialog({
|
|||
</Alert>
|
||||
)}
|
||||
|
||||
{hasOpenWorkOrders && (
|
||||
{impact != null && !isLoading && !impact.canDeactivate && (
|
||||
<Alert severity="error">
|
||||
This vendor cannot be deactivated because it still has open work orders.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{impact != null && impact.openWorkOrders.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" className="font-semibold uppercase">
|
||||
Open work orders ({openWorkOrders.length})
|
||||
Open work orders ({impact.openWorkOrders.length})
|
||||
</Typography>
|
||||
<List dense sx={{ mt: 0.5 }}>
|
||||
{openWorkOrders.map((wo) => (
|
||||
{impact.openWorkOrders.map((wo) => (
|
||||
<ListItem
|
||||
key={String(wo.workOrderId)}
|
||||
sx={{ px: 0, py: 0.25 }}
|
||||
|
|
@ -93,11 +88,11 @@ export function VendorDeactivationDialog({
|
|||
}
|
||||
>
|
||||
<Stack>
|
||||
<Link component={RouterLink} to={`/workorders/${wo.workOrderId}`}>
|
||||
<Typography variant="body2">
|
||||
{wo.workOrderNumber
|
||||
? `${wo.workOrderNumber} — ${wo.workOrderTitle || "Untitled"}`
|
||||
: wo.workOrderTitle || `Work order ${wo.workOrderId}`}
|
||||
</Link>
|
||||
</Typography>
|
||||
{Boolean(wo.status) && (
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>
|
||||
{wo.status}
|
||||
|
|
@ -118,12 +113,12 @@ export function VendorDeactivationDialog({
|
|||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
color={hasOpenWorkOrders ? "warning" : "error"}
|
||||
color="error"
|
||||
variant="contained"
|
||||
onClick={onConfirm}
|
||||
disabled={isSaving || isLoading || Boolean(impactError)}
|
||||
disabled={isSaving || isLoading || hasBlockingImpact || Boolean(impactError)}
|
||||
>
|
||||
{isSaving ? "Deactivating..." : hasOpenWorkOrders ? "Deactivate anyway" : "Deactivate"}
|
||||
{isSaving ? "Deactivating..." : "Deactivate"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import {
|
|||
Switch,
|
||||
} from "@mui/material";
|
||||
import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
|
||||
import { VendorStatusBadge } from "./vendor-status-badge";
|
||||
import { VendorRosterFormFields } from "./vendor-roster-form-fields";
|
||||
import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
|
||||
import { useVendorRosterForm } from "./use-vendor-roster-form";
|
||||
|
|
@ -82,13 +81,6 @@ function DrawerHeader({
|
|||
technician?: VendorRosterTechnician;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const title = technician?.contactName || vendor?.contactName || roster?.name || "Vendor company";
|
||||
const company = roster?.name || vendor?.companyName || "Vendor details";
|
||||
// The company is a subtitle under the technician's name. When there is no
|
||||
// technician the title already falls back to the company, and repeating it
|
||||
// would render the same line twice.
|
||||
const subtitle = company === title ? null : company;
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
|
|
@ -102,13 +94,11 @@ function DrawerHeader({
|
|||
>
|
||||
<Box>
|
||||
<Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
|
||||
{title}
|
||||
{technician?.contactName || vendor?.contactName || roster?.name || "Vendor company"}
|
||||
</Text>
|
||||
<Text variant="description" tone="muted">
|
||||
{roster?.name || vendor?.companyName || "Vendor details"}
|
||||
</Text>
|
||||
{subtitle !== null && (
|
||||
<Text variant="description" tone="muted">
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<IconButton aria-label="Close drawer" onClick={onClose} size="small">
|
||||
<CloseIcon fontSize="small" />
|
||||
|
|
@ -128,24 +118,17 @@ function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
|
|||
<Field label="Company Phone" value={roster.companyPhone} />
|
||||
<Field label="Company Email" value={roster.email} />
|
||||
<Field label="Address" value={address} />
|
||||
<Box>
|
||||
<Text variant="caption" tone="muted" sx={{ display: "block" }}>
|
||||
Google Maps
|
||||
</Text>
|
||||
{roster.googleMapsUrl ? (
|
||||
<Link
|
||||
href={roster.googleMapsUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
<LaunchIcon fontSize="small" />
|
||||
Open in Google Maps
|
||||
</Link>
|
||||
) : (
|
||||
<Text variant="description">—</Text>
|
||||
)}
|
||||
</Box>
|
||||
{Boolean(roster.googleMapsUrl) && (
|
||||
<Link
|
||||
href={roster.googleMapsUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
<LaunchIcon fontSize="small" />
|
||||
Open in Google Maps
|
||||
</Link>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
@ -171,14 +154,23 @@ function TechnicianSection({ technician }: { technician: VendorRosterTechnician
|
|||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
<Stack direction="row" sx={{ alignItems: "flex-end", justifyContent: "space-between" }}>
|
||||
<Stack direction="row" spacing={4} sx={{ alignItems: "flex-end" }}>
|
||||
<Box>
|
||||
<Text variant="title">{technician.totalJobs ?? 0}</Text>
|
||||
<Text variant="caption" tone="muted" sx={{ display: "block" }}>
|
||||
Total Jobs
|
||||
</Text>
|
||||
</Box>
|
||||
<VendorStatusBadge isActive={technician.isActive} />
|
||||
<Box>
|
||||
<Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.5 }}>
|
||||
Status
|
||||
</Text>
|
||||
<Chip
|
||||
size="small"
|
||||
label={technician.isActive ? "Active" : "Inactive"}
|
||||
color={technician.isActive ? "success" : "default"}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
|
@ -262,13 +254,10 @@ function DrawerEditor({
|
|||
const selectedIndex = technicians.findIndex(
|
||||
(technician) => technician.id != null && String(technician.id) === String(vendor.id),
|
||||
);
|
||||
const persistedTechnician = roster?.technicians.find(
|
||||
(technician) => technician.id != null && String(technician.id) === String(vendor.id),
|
||||
);
|
||||
const selectedTotalJobs = persistedTechnician?.totalJobs ?? vendor.totalJobs;
|
||||
// Deactivation is a property of the saved vendor, not of the toggle: flipping an
|
||||
// inactive vendor on and back off without saving must not ask to deactivate it.
|
||||
const persistedIsActive = persistedTechnician?.isActive ?? vendor.isActive;
|
||||
const selectedTotalJobs =
|
||||
roster?.technicians.find(
|
||||
(technician) => technician.id != null && String(technician.id) === String(vendor.id),
|
||||
)?.totalJobs ?? vendor.totalJobs;
|
||||
|
||||
if (form.isLoading) {
|
||||
return <CircularProgress size={28} sx={{ m: "auto" }} />;
|
||||
|
|
@ -321,7 +310,7 @@ function DrawerEditor({
|
|||
checked={Boolean(field.value)}
|
||||
slotProps={{ input: { "aria-label": "Active status" } }}
|
||||
onChange={(_event, checked) => {
|
||||
if (persistedIsActive && !checked) onRequestDeactivation(vendor);
|
||||
if (field.value && !checked) onRequestDeactivation(vendor);
|
||||
else field.onChange(checked);
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
import { Box, Stack } from "@mui/material";
|
||||
import { Text } from "@/components/ui/text";
|
||||
|
||||
/** Dot plus text, so the status never reads by colour alone. */
|
||||
export function VendorStatusBadge({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "9999px",
|
||||
backgroundColor: isActive ? "success.main" : "text.secondary",
|
||||
}}
|
||||
/>
|
||||
<Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,7 +18,6 @@ import {
|
|||
TableRow,
|
||||
Tooltip,
|
||||
} from "@mui/material";
|
||||
import { VendorStatusBadge } from "./vendor-status-badge";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import type { VendorListItem } from "@/domain/vendors/types/vendor";
|
||||
|
||||
|
|
@ -51,6 +50,23 @@ function stopPropagation(event: MouseEvent): void {
|
|||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function VendorStatus({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "9999px",
|
||||
backgroundColor: isActive ? "success.main" : "text.secondary",
|
||||
}}
|
||||
/>
|
||||
<Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
interface VendorTableRowProps {
|
||||
row: VendorListItem;
|
||||
onOpenDetail: (row: VendorListItem) => void;
|
||||
|
|
@ -161,9 +177,7 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
|
|||
</TableCell>
|
||||
<TableCell align="center">{row.totalJobs ?? 0}</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ pl: 1 }}>
|
||||
<VendorStatusBadge isActive={row.isActive} />
|
||||
</Box>
|
||||
<VendorStatus isActive={row.isActive} />
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Stack
|
||||
|
|
|
|||
|
|
@ -36,13 +36,7 @@ export function useWoTableRowHandlers({
|
|||
onScheduleHighlight,
|
||||
onDuplicateFound,
|
||||
}: UseWoTableRowHandlersOptions): WoTableRowHandlers {
|
||||
const {
|
||||
dragState: dragStateRef,
|
||||
setDragViz,
|
||||
reorderRows,
|
||||
endDrag,
|
||||
revealScheduledRow,
|
||||
} = tableData;
|
||||
const { dragState: dragStateRef, setDragViz, reorderRows, endDrag, triggerFlash } = tableData;
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
|
|
@ -83,13 +77,13 @@ export function useWoTableRowHandlers({
|
|||
rescheduleNotify(date, {
|
||||
onNavigate: () => {
|
||||
onNavigateToDay(date);
|
||||
revealScheduledRow(id);
|
||||
setTimeout(() => triggerFlash(id), 180);
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
onNavigateToDay(date);
|
||||
revealScheduledRow(id);
|
||||
triggerFlash(id);
|
||||
},
|
||||
onScheduleWeek: (id: string | number, week: string) => {
|
||||
onPatch(id, {
|
||||
|
|
@ -138,7 +132,7 @@ export function useWoTableRowHandlers({
|
|||
setDragViz,
|
||||
reorderRows,
|
||||
endDrag,
|
||||
revealScheduledRow,
|
||||
triggerFlash,
|
||||
weekMonday,
|
||||
onNavigateToDay,
|
||||
onOpenAdvancedFilters,
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { NavArrowButton } from "@/components/ui/nav-arrow-button";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import {
|
||||
DAY_PAGE_SIZE_OPTIONS,
|
||||
formatDayPaginationSummary,
|
||||
type DayPageSize,
|
||||
} from "@/domain/work-orders/utils/day-pagination";
|
||||
|
||||
type WoDayPaginationFooterProps = {
|
||||
dayLabel: string;
|
||||
itemCount: number;
|
||||
pageSize: DayPageSize;
|
||||
pageIndex: number;
|
||||
pageCount: number;
|
||||
onPageSizeChange: (pageSize: DayPageSize) => void;
|
||||
onPrev: () => void;
|
||||
onNext: () => void;
|
||||
};
|
||||
|
||||
export function WoDayPaginationFooter({
|
||||
dayLabel,
|
||||
itemCount,
|
||||
pageSize,
|
||||
pageIndex,
|
||||
pageCount,
|
||||
onPageSizeChange,
|
||||
onPrev,
|
||||
onNext,
|
||||
}: WoDayPaginationFooterProps) {
|
||||
const canPrev = pageIndex > 0;
|
||||
const canNext = pageIndex < pageCount - 1;
|
||||
const pageLabel = `Page ${pageIndex + 1} of ${pageCount}`;
|
||||
const summary = formatDayPaginationSummary(dayLabel, itemCount);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="flex shrink-0 items-center justify-between gap-3"
|
||||
aria-label="Day pagination"
|
||||
data-testid="wo-day-pagination"
|
||||
>
|
||||
<Text variant="caption" tone="muted">
|
||||
{summary}
|
||||
</Text>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-2">
|
||||
<Text variant="caption" tone="muted">
|
||||
Rows per page
|
||||
</Text>
|
||||
<select
|
||||
aria-label="Rows per page"
|
||||
className="rounded-md border border-border bg-card px-2 py-1 text-xs"
|
||||
value={pageSize}
|
||||
onChange={(event) => onPageSizeChange(Number(event.target.value) as DayPageSize)}
|
||||
>
|
||||
{DAY_PAGE_SIZE_OPTIONS.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<NavArrowButton aria-label="Previous page" disabled={!canPrev} onClick={onPrev}>
|
||||
<ChevronLeft size={15} />
|
||||
</NavArrowButton>
|
||||
<Text variant="caption">{pageLabel}</Text>
|
||||
<NavArrowButton
|
||||
aria-label="Next page"
|
||||
data-testid="wo-day-pagination-next"
|
||||
disabled={!canNext}
|
||||
onClick={onNext}
|
||||
>
|
||||
<ChevronRight size={15} />
|
||||
</NavArrowButton>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ export function WoTableBody({ tableData, renderRow, renderInlineRow }: WoTableBo
|
|||
<WoTableSectionHeader
|
||||
variant="day"
|
||||
label={group.label}
|
||||
count={group.totalCount ?? group.items.length}
|
||||
count={group.items.length}
|
||||
isToday={group.key === tableData.todayKey}
|
||||
onAddWo={() => tableData.startDayDraft(group.key, group.date)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,11 @@ const CARD_STYLE: React.CSSProperties = {
|
|||
boxShadow: "0 1px 3px rgba(38,34,98,.05)",
|
||||
};
|
||||
|
||||
export function WoTableShell({
|
||||
children,
|
||||
footer,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
}) {
|
||||
export function WoTableShell({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden px-2 py-4">
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden" style={CARD_STYLE}>
|
||||
<div className="min-h-0 flex-1 overflow-auto">{children}</div>
|
||||
{Boolean(footer) && (
|
||||
<div className="shrink-0 border-t border-border px-3 py-2">{footer}</div>
|
||||
)}
|
||||
<div className="min-h-0 flex-1 overflow-hidden px-2 py-4">
|
||||
<div className="relative h-full overflow-auto" style={CARD_STYLE}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import type {
|
|||
import { isUnassignedQueueReady } from "@/domain/work-orders/utils/week-day-nav-utils";
|
||||
import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
|
||||
import { WoTableSkeleton } from "@/app/(protected)/workorders/_components/loading/wo-table-skeleton";
|
||||
import { WoDayPaginationFooter } from "./wo-day-pagination-footer";
|
||||
import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
|
||||
import { buildSitePlaceLookups, resolveSitePlace } from "./site-place-lookup";
|
||||
import { useWoTableInlineCreate } from "./use-wo-table-inline-create";
|
||||
|
|
@ -70,24 +69,6 @@ function WoTableEmptyShell({ message, actionLabel, onAction }: WoTableEmptyShell
|
|||
);
|
||||
}
|
||||
|
||||
function WoTableDayFooter({ tableData }: { tableData: ReturnTypeOfUseWorkOrdersTableData }) {
|
||||
if (!tableData.showDayPagination) {
|
||||
return undefined;
|
||||
}
|
||||
return (
|
||||
<WoDayPaginationFooter
|
||||
dayLabel={tableData.dayFooterLabel}
|
||||
itemCount={tableData.dayItemCount}
|
||||
pageSize={tableData.dayPageSize}
|
||||
pageIndex={tableData.dayPageIndex}
|
||||
pageCount={tableData.dayPageCount}
|
||||
onPageSizeChange={tableData.setDayPageSize}
|
||||
onPrev={tableData.goToPrevDayPage}
|
||||
onNext={tableData.goToNextDayPage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function WoTable({
|
||||
tableData,
|
||||
users,
|
||||
|
|
@ -207,7 +188,7 @@ export function WoTable({
|
|||
|
||||
return (
|
||||
<>
|
||||
<WoTableShell footer={WoTableDayFooter({ tableData })}>
|
||||
<WoTableShell>
|
||||
<table
|
||||
style={{
|
||||
width: "100%",
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
DEFAULT_DAY_PAGE_SIZE,
|
||||
findItemPageIndex,
|
||||
type DayPageSize,
|
||||
} from "@/domain/work-orders/utils/day-pagination";
|
||||
|
||||
type DayPageItem = { id: string | number };
|
||||
|
||||
type UseWorkOrdersDayPaginationInput = {
|
||||
weekMonday: string;
|
||||
selectedDayIso: string;
|
||||
advActive: boolean;
|
||||
dayItems: readonly DayPageItem[];
|
||||
onRevealed: (id: string | number) => void;
|
||||
};
|
||||
|
||||
export function useWorkOrdersDayPagination({
|
||||
weekMonday,
|
||||
selectedDayIso,
|
||||
advActive,
|
||||
dayItems,
|
||||
onRevealed,
|
||||
}: UseWorkOrdersDayPaginationInput) {
|
||||
const [pageSize, setPageSizeState] = useState<DayPageSize>(DEFAULT_DAY_PAGE_SIZE);
|
||||
const [page, setPage] = useState(0);
|
||||
const [pendingRevealId, setPendingRevealId] = useState<string | number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setPage(0);
|
||||
}, [weekMonday, selectedDayIso, advActive]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingRevealId == null) {
|
||||
return;
|
||||
}
|
||||
const nextPage = findItemPageIndex(dayItems, pendingRevealId, pageSize);
|
||||
if (nextPage == null) {
|
||||
return;
|
||||
}
|
||||
setPage(nextPage);
|
||||
const revealedId = pendingRevealId;
|
||||
setPendingRevealId(null);
|
||||
onRevealed(revealedId);
|
||||
}, [pendingRevealId, dayItems, pageSize, onRevealed]);
|
||||
|
||||
const setPageSize = useCallback((next: DayPageSize) => {
|
||||
setPageSizeState(next);
|
||||
setPage(0);
|
||||
}, []);
|
||||
|
||||
const goToPrevPage = useCallback(() => {
|
||||
setPage((current) => Math.max(0, current - 1));
|
||||
}, []);
|
||||
|
||||
const goToNextPage = useCallback(() => {
|
||||
setPage((current) => current + 1);
|
||||
}, []);
|
||||
|
||||
const revealRow = useCallback((id: string | number) => {
|
||||
setPendingRevealId(id);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
pageSize,
|
||||
page,
|
||||
setPageSize,
|
||||
goToPrevPage,
|
||||
goToNextPage,
|
||||
revealRow,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,15 +1,10 @@
|
|||
import { useMemo } from "react";
|
||||
import type { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
|
||||
import { useWorkOrdersBoardSource } from "@/app/(protected)/workorders/_hooks/use-work-orders-board-source";
|
||||
import { useWorkOrdersDayPagination } from "@/app/(protected)/workorders/_hooks/use-work-orders-day-pagination";
|
||||
import { useWorkOrdersTableLocalState } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-local-state";
|
||||
import { currentWeekMonday } from "@/domain/work-orders/utils/list-week-utils";
|
||||
import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
|
||||
import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
|
||||
import {
|
||||
pageSelectedDayGroups,
|
||||
shouldShowDayPagination,
|
||||
} from "@/domain/work-orders/utils/day-pagination";
|
||||
import {
|
||||
buildSelectedDayGroup,
|
||||
isDayScopedSearchEmpty,
|
||||
|
|
@ -56,7 +51,7 @@ export function useWorkOrdersTableData(filters: FiltersReturn) {
|
|||
advActive,
|
||||
isFetching,
|
||||
});
|
||||
const { displayRows, ...localUi } = local;
|
||||
const { displayRows } = local;
|
||||
|
||||
const advResults = useMemo(() => (advActive ? displayRows : []), [advActive, displayRows]);
|
||||
|
||||
|
|
@ -90,27 +85,16 @@ export function useWorkOrdersTableData(filters: FiltersReturn) {
|
|||
: [buildSelectedDayGroup(filters.weekMonday, filters.selectedDayIso, scheduled)],
|
||||
[advActive, filters.selectedDayIso, filters.weekMonday, scheduled],
|
||||
);
|
||||
const pagination = useWorkOrdersDayPagination({
|
||||
weekMonday: filters.weekMonday,
|
||||
selectedDayIso: filters.selectedDayIso,
|
||||
advActive,
|
||||
dayItems: dayGroups[0]?.items ?? EMPTY_WEEKLY_ITEMS,
|
||||
onRevealed: local.triggerFlash,
|
||||
});
|
||||
const pagedDay = useMemo(
|
||||
() => pageSelectedDayGroups(dayGroups, pagination.page, pagination.pageSize),
|
||||
[dayGroups, pagination.page, pagination.pageSize],
|
||||
);
|
||||
|
||||
const searchActive = filters.search.trim() !== "";
|
||||
const displayGroups = pagedDay.groups;
|
||||
const dayTotalCount = pagedDay.totalCount;
|
||||
const displayGroups = dayGroups;
|
||||
const dayVisibleCount = displayGroups[0]?.items.length ?? 0;
|
||||
const noSearchResults =
|
||||
!advActive &&
|
||||
isDayScopedSearchEmpty({
|
||||
searchActive,
|
||||
unassignedCount: unassigned.length,
|
||||
dayItemCount: dayTotalCount,
|
||||
dayItemCount: dayVisibleCount,
|
||||
unassignedQueueReady: isUnassignedQueueReady(unassignedLoading, unassignedError),
|
||||
});
|
||||
const isEmptyWeek =
|
||||
|
|
@ -143,24 +127,30 @@ export function useWorkOrdersTableData(filters: FiltersReturn) {
|
|||
noSearchResults,
|
||||
isEmptyWeek,
|
||||
todayKey,
|
||||
...localUi,
|
||||
draftDayKey: local.draftDayKey,
|
||||
draft: local.draft,
|
||||
setDraft: local.setDraft,
|
||||
unassignedOpen: local.unassignedOpen,
|
||||
setUnassignedOpen: local.setUnassignedOpen,
|
||||
unschedOpen: local.unschedOpen,
|
||||
setUnschedOpen: local.setUnschedOpen,
|
||||
selectedId: local.selectedId,
|
||||
setSelectedId: local.setSelectedId,
|
||||
selectedRow,
|
||||
flashId: local.flashId,
|
||||
triggerFlash: local.triggerFlash,
|
||||
dragViz: local.dragViz,
|
||||
setDragViz: local.setDragViz,
|
||||
dragState: local.dragState,
|
||||
patchRow: local.patchRow,
|
||||
clearRowPatch: local.clearRowPatch,
|
||||
reorderRows: local.reorderRows,
|
||||
endDrag: local.endDrag,
|
||||
startDayDraft: local.startDayDraft,
|
||||
cancelDraft: local.cancelDraft,
|
||||
addRow: local.addRow,
|
||||
scopeTotalCount: data?.totalCount ?? 0,
|
||||
totalCount: advActive ? (data?.totalCount ?? advResults.length) : dayTotalCount,
|
||||
totalCount: advActive ? (data?.totalCount ?? advResults.length) : dayVisibleCount,
|
||||
search: filters.search,
|
||||
showDayPagination: shouldShowDayPagination({
|
||||
flatListMode: advActive,
|
||||
isLoading,
|
||||
noSearchResults,
|
||||
}),
|
||||
dayPageSize: pagination.pageSize,
|
||||
dayPageIndex: pagedDay.pageIndex,
|
||||
dayPageCount: pagedDay.pageCount,
|
||||
dayItemCount: pagedDay.totalCount,
|
||||
dayFooterLabel: displayGroups[0]?.label ?? "",
|
||||
setDayPageSize: pagination.setPageSize,
|
||||
goToPrevDayPage: pagination.goToPrevPage,
|
||||
goToNextDayPage: pagination.goToNextPage,
|
||||
revealScheduledRow: pagination.revealRow,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
import { isHTTPError } from "ky";
|
||||
import { API_PATHS } from "@/api/api-paths";
|
||||
import { apiGet, apiPatch, apiPost, apiPut } from "@/api/api";
|
||||
import { apiGet, apiPost, apiPut } from "@/api/api";
|
||||
import { handleApiResponse } from "@/api/handle-api-response";
|
||||
import {
|
||||
mapRosterConflict,
|
||||
mapVendorCompanyRoster,
|
||||
mapVendorRosterAdditivePatchToBackend,
|
||||
mapVendorRosterToBackend,
|
||||
} from "@/domain/vendors/mappers/vendor-roster-mapper";
|
||||
import { VendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
|
||||
import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
|
||||
import type { VendorRosterAdditivePatch } from "@/domain/vendors/mappers/vendor-roster-mapper";
|
||||
|
||||
const STALE_MESSAGE =
|
||||
"This company was changed by another session. Reload the latest version and try again.";
|
||||
|
|
@ -99,22 +97,4 @@ export const vendorCompanyRosterApi = {
|
|||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
addTechnicians: async (
|
||||
companyId: string | number,
|
||||
patch: VendorRosterAdditivePatch,
|
||||
): Promise<VendorCompanyRoster> => {
|
||||
try {
|
||||
const data = await apiPatch<unknown>(
|
||||
API_PATHS.vendorCompanyRoster.byCompany(companyId),
|
||||
mapVendorRosterAdditivePatchToBackend(patch),
|
||||
);
|
||||
return mapVendorCompanyRoster(handleApiResponse(data));
|
||||
} catch (error) {
|
||||
if (isHTTPError(error) && error.response.status === 409) {
|
||||
await throwRosterConflict(error);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
7
src/domain/vendors/api/vendors-api.ts
vendored
7
src/domain/vendors/api/vendors-api.ts
vendored
|
|
@ -101,11 +101,8 @@ export const vendorsApi = {
|
|||
return mapVendor(handleApiResponse(data));
|
||||
},
|
||||
|
||||
// SH-254: confirmOpenWorkOrders tells the API the caller has been shown the
|
||||
// vendor's open work orders and chose to proceed. Without it the API still blocks.
|
||||
delete: async (id: string | number, confirmOpenWorkOrders = false): Promise<void> => {
|
||||
const suffix = confirmOpenWorkOrders ? "?confirmOpenWorkOrders=true" : "";
|
||||
await apiDelete(`${API_PATHS.rest.vendors}/${id}${suffix}`);
|
||||
delete: async (id: string | number): Promise<void> => {
|
||||
await apiDelete(`${API_PATHS.rest.vendors}/${id}`);
|
||||
},
|
||||
|
||||
getDeactivationImpact: async (id: string | number): Promise<VendorDeactivationImpact> => {
|
||||
|
|
|
|||
|
|
@ -134,36 +134,6 @@ export function mapVendorRosterToBackend(values: unknown): Record<string, unknow
|
|||
return payload;
|
||||
}
|
||||
|
||||
export interface VendorRosterAdditivePatch {
|
||||
rowVersion: string;
|
||||
addTechnicians: unknown[];
|
||||
companyFields?: Record<string, string>;
|
||||
}
|
||||
|
||||
export function mapVendorRosterAdditivePatchToBackend(
|
||||
patch: VendorRosterAdditivePatch,
|
||||
): Record<string, unknown> {
|
||||
const item = asRecord(patch);
|
||||
const payload: Record<string, unknown> = {
|
||||
rowVersion: readString(item, "rowVersion", "RowVersion"),
|
||||
addTechnicians: patch.addTechnicians.map((technician) => {
|
||||
const mapped = mapRosterTechnicianToBackend(technician);
|
||||
delete mapped.id;
|
||||
return mapped;
|
||||
}),
|
||||
};
|
||||
if (patch.companyFields) {
|
||||
// SH-250: match the reconcile write path, which canonicalizes companyPhone.
|
||||
// Copying companyFields verbatim let additive patches send a different phone
|
||||
// shape than PUT for the same user input.
|
||||
const companyFields = { ...patch.companyFields };
|
||||
if (companyFields.companyPhone !== undefined)
|
||||
companyFields.companyPhone = toCanonicalPhone(companyFields.companyPhone);
|
||||
payload.companyFields = companyFields;
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
function mapBlockedWorkOrder(raw: unknown): VendorRosterBlockedWorkOrder {
|
||||
const item = asRecord(raw);
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -83,14 +83,11 @@ export const vendorCompanyRosterUpdateSchema = vendorCompanyRosterSchema.and(
|
|||
|
||||
export type VendorCompanyRosterUpdateValues = z.infer<typeof vendorCompanyRosterUpdateSchema>;
|
||||
|
||||
// SH-250: the preferred-contact control was removed from the form, so seeding a
|
||||
// value here fabricated one on submit. `append` already omits it; the schema
|
||||
// keeps it optional, so both paths now agree and the backend receives it only
|
||||
// when a real value exists.
|
||||
export const emptyRosterTechnician: RosterTechnicianValues = {
|
||||
contactName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "",
|
||||
isActive: true,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,17 +3,11 @@ import { toast } from "react-toastify";
|
|||
import { vendorsApi } from "@/domain/vendors/api/vendors-api";
|
||||
import { queryKeys } from "@/infra/query-key/query-key";
|
||||
|
||||
export interface DeleteVendorInput {
|
||||
id: string | number;
|
||||
confirmOpenWorkOrders?: boolean;
|
||||
}
|
||||
|
||||
export function useDeleteVendor(): UseMutationResult<void, Error, DeleteVendorInput> {
|
||||
export function useDeleteVendor(): UseMutationResult<void, Error, string | number> {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ id, confirmOpenWorkOrders = false }: DeleteVendorInput) =>
|
||||
vendorsApi.delete(id, confirmOpenWorkOrders),
|
||||
mutationFn: (id: string | number) => vendorsApi.delete(id),
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
|
||||
toast.success("Vendor deactivated");
|
||||
|
|
|
|||
|
|
@ -11,17 +11,13 @@ import type {
|
|||
import { queryKeys } from "@/infra/query-key/query-key";
|
||||
|
||||
export interface SaveVendorCompanyRosterInput {
|
||||
mode: "create" | "update" | "add";
|
||||
mode: "create" | "update";
|
||||
values: VendorCompanyRosterFormValues;
|
||||
companyId?: string | number | null;
|
||||
rowVersion?: string;
|
||||
originalRoster?: VendorCompanyRoster;
|
||||
/** Company fields the user actually edited. See buildAdditiveRosterPatch. */
|
||||
editedCompanyFields?: EditedCompanyFields;
|
||||
}
|
||||
|
||||
export type EditedCompanyFields = Partial<Record<(typeof COMPANY_FIELDS)[number], boolean>>;
|
||||
|
||||
export interface SaveVendorCompanyRosterContext {
|
||||
conflict?: unknown;
|
||||
}
|
||||
|
|
@ -69,66 +65,6 @@ export function getSingleStatusOnlyChange(
|
|||
return changed.length === 1 ? changed[0] : null;
|
||||
}
|
||||
|
||||
export interface VendorRosterAdditivePatchInput {
|
||||
rowVersion: string;
|
||||
addTechnicians: Array<{
|
||||
contactName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
preferredContact?: string;
|
||||
tradeSpecialties: string;
|
||||
isActive: boolean;
|
||||
}>;
|
||||
companyFields?: Record<string, string>;
|
||||
}
|
||||
|
||||
function hasTechnicianContent(technician: {
|
||||
contactName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
tradeSpecialties: string;
|
||||
}): boolean {
|
||||
return Boolean(
|
||||
technician.contactName.trim() ||
|
||||
technician.phone.trim() ||
|
||||
technician.email.trim() ||
|
||||
technician.tradeSpecialties.trim(),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the additive PATCH body for the Add flow.
|
||||
*
|
||||
* `editedCompanyFields` must carry the fields the user actually touched. A plain
|
||||
* form-vs-roster diff is unsafe here: after a stale-409 the roster is refetched while the form
|
||||
* keeps the values loaded before the conflict, so a field another user changed in that window
|
||||
* would look "different" and be sent back with our stale value, silently reverting their edit.
|
||||
* Only fields the user edited are ever transmitted.
|
||||
*/
|
||||
export function buildAdditiveRosterPatch(
|
||||
roster: VendorCompanyRoster | null | undefined,
|
||||
values: VendorCompanyRosterFormValues,
|
||||
rowVersion: string,
|
||||
editedCompanyFields: EditedCompanyFields = {},
|
||||
): VendorRosterAdditivePatchInput | null {
|
||||
const addTechnicians = values.technicians.filter(
|
||||
(technician) => technician.id == null && hasTechnicianContent(technician),
|
||||
);
|
||||
const companyFields: Record<string, string> = {};
|
||||
if (roster) {
|
||||
for (const field of COMPANY_FIELDS) {
|
||||
if (editedCompanyFields[field] !== true) continue;
|
||||
if (values[field] !== roster[field]) companyFields[field] = values[field];
|
||||
}
|
||||
}
|
||||
if (addTechnicians.length === 0 && Object.keys(companyFields).length === 0) return null;
|
||||
return {
|
||||
rowVersion,
|
||||
addTechnicians,
|
||||
...(Object.keys(companyFields).length > 0 ? { companyFields } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
export function useSaveVendorCompanyRoster(): UseMutationResult<
|
||||
VendorCompanyRoster,
|
||||
unknown,
|
||||
|
|
@ -149,7 +85,6 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
|
|||
companyId,
|
||||
rowVersion,
|
||||
originalRoster,
|
||||
editedCompanyFields,
|
||||
}: SaveVendorCompanyRosterInput) => {
|
||||
if (mode === "update") {
|
||||
const statusChange = originalRoster
|
||||
|
|
@ -173,31 +108,17 @@ export function useSaveVendorCompanyRoster(): UseMutationResult<
|
|||
if (!rowVersion) throw new Error("Row version is required to update");
|
||||
return vendorCompanyRosterApi.update(companyId, values, rowVersion);
|
||||
}
|
||||
if (mode === "add") {
|
||||
if (companyId === undefined || companyId === null || companyId === "") {
|
||||
throw new Error("Company id is required to add technicians");
|
||||
}
|
||||
if (!rowVersion) throw new Error("Row version is required to add technicians");
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
originalRoster,
|
||||
values,
|
||||
rowVersion,
|
||||
editedCompanyFields,
|
||||
);
|
||||
if (!patch) throw new Error("Nothing to add to this vendor company");
|
||||
return vendorCompanyRosterApi.addTechnicians(companyId, patch);
|
||||
}
|
||||
return vendorCompanyRosterApi.create(values);
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
|
||||
if ((variables.mode === "update" || variables.mode === "add") && variables.companyId) {
|
||||
if (variables.mode === "update" && variables.companyId) {
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.vendors.roster("companyId", variables.companyId),
|
||||
});
|
||||
}
|
||||
toast.success(
|
||||
variables.mode === "create" ? "Vendor company created" : "Vendor company updated",
|
||||
variables.mode === "update" ? "Vendor company updated" : "Vendor company created",
|
||||
);
|
||||
},
|
||||
onError: (error) => {
|
||||
|
|
|
|||
|
|
@ -138,7 +138,6 @@ export type WorkOrderDayGroup = {
|
|||
label: string;
|
||||
date: string;
|
||||
items: WorkOrderTableRow[];
|
||||
totalCount?: number;
|
||||
};
|
||||
|
||||
export type WorkOrderTablePatch = Partial<WorkOrderTableRow>;
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
import type { WorkOrderDayGroup } from "@/domain/work-orders/types/work-order-table-row";
|
||||
|
||||
export const DAY_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;
|
||||
export const DEFAULT_DAY_PAGE_SIZE = 50;
|
||||
|
||||
export type DayPageSize = (typeof DAY_PAGE_SIZE_OPTIONS)[number];
|
||||
|
||||
export type PaginatedSlice<T> = {
|
||||
visible: T[];
|
||||
pageCount: number;
|
||||
pageIndex: number;
|
||||
};
|
||||
|
||||
export function pageIndexForItem(itemIndex: number, pageSize: number): number {
|
||||
if (itemIndex < 0) {
|
||||
return 0;
|
||||
}
|
||||
const size = pageSize > 0 ? pageSize : DEFAULT_DAY_PAGE_SIZE;
|
||||
return Math.floor(itemIndex / size);
|
||||
}
|
||||
|
||||
export function findItemPageIndex<T extends { id: string | number }>(
|
||||
items: readonly T[],
|
||||
id: string | number,
|
||||
pageSize: number,
|
||||
): number | null {
|
||||
const index = items.findIndex((item) => String(item.id) === String(id));
|
||||
if (index < 0) {
|
||||
return null;
|
||||
}
|
||||
return pageIndexForItem(index, pageSize);
|
||||
}
|
||||
|
||||
export function paginateItems<T>(
|
||||
items: readonly T[],
|
||||
pageIndex: number,
|
||||
pageSize: number,
|
||||
): PaginatedSlice<T> {
|
||||
const size = pageSize > 0 ? pageSize : DEFAULT_DAY_PAGE_SIZE;
|
||||
const pageCount = Math.max(1, Math.ceil(items.length / size) || 1);
|
||||
const page = Math.min(Math.max(0, pageIndex), pageCount - 1);
|
||||
const start = page * size;
|
||||
return {
|
||||
visible: items.slice(start, start + size),
|
||||
pageCount,
|
||||
pageIndex: page,
|
||||
};
|
||||
}
|
||||
|
||||
export function shouldShowDayPagination(input: {
|
||||
flatListMode: boolean;
|
||||
isLoading: boolean;
|
||||
noSearchResults: boolean;
|
||||
}): boolean {
|
||||
return !input.flatListMode && !input.isLoading && !input.noSearchResults;
|
||||
}
|
||||
|
||||
export function formatDayPaginationSummary(dayLabel: string, itemCount: number): string {
|
||||
const label = dayLabel.trim().toUpperCase();
|
||||
const noun = itemCount === 1 ? "item" : "items";
|
||||
return `${label} · ${itemCount} ${noun}`;
|
||||
}
|
||||
|
||||
export function pageSelectedDayGroups(
|
||||
dayGroups: WorkOrderDayGroup[],
|
||||
pageIndex: number,
|
||||
pageSize: number,
|
||||
): { groups: WorkOrderDayGroup[]; pageIndex: number; pageCount: number; totalCount: number } {
|
||||
const group = dayGroups[0];
|
||||
if (!group) {
|
||||
return { groups: dayGroups, pageIndex: 0, pageCount: 1, totalCount: 0 };
|
||||
}
|
||||
const slice = paginateItems(group.items, pageIndex, pageSize);
|
||||
return {
|
||||
groups: [{ ...group, items: slice.visible, totalCount: group.items.length }],
|
||||
pageIndex: slice.pageIndex,
|
||||
pageCount: slice.pageCount,
|
||||
totalCount: group.items.length,
|
||||
};
|
||||
}
|
||||
|
|
@ -12,19 +12,15 @@ vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
|
|||
}));
|
||||
|
||||
vi.mock("@/domain/vendors/use-cases/use-vendor-company-roster", () => ({
|
||||
useVendorCompanyRoster: () => rosterQueryResult,
|
||||
useVendorCompanyRoster: () => ({
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("react-toastify", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
|
||||
|
||||
let rosterQueryResult: {
|
||||
data: VendorCompanyRoster | undefined;
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
error: Error | null;
|
||||
refetch: ReturnType<typeof vi.fn>;
|
||||
} = { data: undefined, isLoading: false, isError: false, error: null, refetch: vi.fn() };
|
||||
|
||||
vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
|
||||
useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
|
||||
}));
|
||||
|
|
@ -40,7 +36,6 @@ vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () =>
|
|||
});
|
||||
|
||||
import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
|
||||
import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
|
||||
import type { VendorCompanyRoster, VendorFacetCompany } from "@/domain/vendors/types/vendor";
|
||||
|
||||
const company: VendorFacetCompany = {
|
||||
|
|
@ -86,87 +81,10 @@ const secondRoster: VendorCompanyRoster = {
|
|||
email: "dispatch@metro.test",
|
||||
};
|
||||
|
||||
const rosterWithTechnicians: VendorCompanyRoster = {
|
||||
...roster,
|
||||
technicians: [
|
||||
{
|
||||
id: 11,
|
||||
contactName: "Ray Holt",
|
||||
phone: "(314) 555-0122",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "Plumbing",
|
||||
isActive: true,
|
||||
totalJobs: 0,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
contactName: "Amy Santiago",
|
||||
phone: "(314) 555-0133",
|
||||
email: "",
|
||||
preferredContact: "Text",
|
||||
tradeSpecialties: "HVAC",
|
||||
isActive: true,
|
||||
totalJobs: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const newTechnician = {
|
||||
contactName: "Dana Kim",
|
||||
phone: "(314) 555-0144",
|
||||
email: "dana@test.test",
|
||||
preferredContact: "Text" as const,
|
||||
tradeSpecialties: "HVAC",
|
||||
isActive: true,
|
||||
};
|
||||
|
||||
function submitValues(
|
||||
technicians: VendorCompanyRosterFormValues["technicians"],
|
||||
): VendorCompanyRosterFormValues {
|
||||
return {
|
||||
name: "Gateway Plumbing",
|
||||
companyPhone: "(314) 555-0100",
|
||||
email: "dispatch@gateway.test",
|
||||
address: "1 Main St",
|
||||
city: "St. Louis",
|
||||
state: "MO",
|
||||
zip: "63101",
|
||||
googleMapsUrl: "",
|
||||
notes: "",
|
||||
technicians,
|
||||
};
|
||||
}
|
||||
|
||||
function resetRosterQuery(): void {
|
||||
rosterQueryResult = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
resetRosterQuery();
|
||||
});
|
||||
|
||||
function createClient(): QueryClient {
|
||||
return new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
}
|
||||
|
||||
/**
|
||||
* SH-250: mirrors the app's real staleTime (src/lib/query/query-client.ts). The default
|
||||
* test client uses staleTime 0, which silently masks cache-staleness defects on the
|
||||
* reload path — the conflict recovery must not depend on an empty cache.
|
||||
*/
|
||||
function createCachingClient(): QueryClient {
|
||||
return new QueryClient({
|
||||
defaultOptions: { queries: { retry: false, staleTime: 5 * 60 * 1000 } },
|
||||
});
|
||||
}
|
||||
|
||||
function makeWrapper(client: QueryClient) {
|
||||
return function Wrapper({ children }: { children: ReactNode }) {
|
||||
return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
|
||||
|
|
@ -398,288 +316,3 @@ describe("useVendorRosterForm stale-selection handling", () => {
|
|||
expect(result.current.name.field.value).toBe("Draft Vendor");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useVendorRosterForm additive add flow (SH-250)", () => {
|
||||
beforeEach(() => {
|
||||
rosterGet.mockReset();
|
||||
saveMutate.mockReset();
|
||||
});
|
||||
|
||||
it("issues an additive add — never update — when an existing company is selected", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
|
||||
const technician = useController({
|
||||
control: form.control,
|
||||
name: "technicians.0.contactName",
|
||||
});
|
||||
return { form, technician };
|
||||
},
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.form.selectCompany(company);
|
||||
});
|
||||
await act(async () => {
|
||||
result.current.technician.field.onChange("Dana Kim");
|
||||
});
|
||||
act(() => {
|
||||
result.current.form.submit(submitValues([newTechnician]));
|
||||
});
|
||||
|
||||
expect(saveMutate).toHaveBeenCalledTimes(1);
|
||||
const input = saveMutate.mock.calls[0]?.[0] as { mode: string };
|
||||
expect(input.mode).toBe("add");
|
||||
expect(saveMutate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
companyId: 5,
|
||||
rowVersion: "rv-1",
|
||||
originalRoster: roster,
|
||||
values: expect.objectContaining({ technicians: [newTechnician] }),
|
||||
}),
|
||||
expect.any(Object),
|
||||
);
|
||||
});
|
||||
|
||||
it("still creates via POST when no existing company is matched", () => {
|
||||
const { result } = renderHook(
|
||||
() => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
act(() => {
|
||||
result.current.submit(submitValues([newTechnician]));
|
||||
});
|
||||
|
||||
expect(saveMutate).toHaveBeenCalledTimes(1);
|
||||
expect(saveMutate.mock.calls[0]?.[0]).toEqual(
|
||||
expect.objectContaining({ mode: "create", companyId: undefined, rowVersion: undefined }),
|
||||
);
|
||||
});
|
||||
|
||||
it("blocks submit when the selected company has nothing to add", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
|
||||
wrapper: makeWrapper(createClient()),
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.selectCompany(company);
|
||||
});
|
||||
act(() => {
|
||||
result.current.submit(submitValues([]));
|
||||
});
|
||||
|
||||
expect(saveMutate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("keeps the entered technician and retries with the fresh rowVersion after reload", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
|
||||
const technician = useController({
|
||||
control: form.control,
|
||||
name: "technicians.0.contactName",
|
||||
});
|
||||
return { form, technician };
|
||||
},
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.form.selectCompany(company);
|
||||
});
|
||||
await act(async () => {
|
||||
result.current.technician.field.onChange("Dana Kim");
|
||||
});
|
||||
act(() => {
|
||||
result.current.form.submit(submitValues([newTechnician]));
|
||||
});
|
||||
expect(saveMutate.mock.calls[0]?.[0]).toEqual(expect.objectContaining({ rowVersion: "rv-1" }));
|
||||
|
||||
rosterGet.mockResolvedValueOnce({ ...roster, rowVersion: "rv-2" });
|
||||
await act(async () => {
|
||||
result.current.form.reload();
|
||||
});
|
||||
await waitFor(() => expect(result.current.form.selectedCompanyId).toBe(5));
|
||||
|
||||
act(() => {
|
||||
result.current.form.submit(submitValues([newTechnician]));
|
||||
});
|
||||
expect(saveMutate.mock.calls[1]?.[0]).toEqual(
|
||||
expect.objectContaining({ mode: "add", rowVersion: "rv-2" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("refreshes the visible company fields on reload, not just rowVersion", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
|
||||
const name = useController({ control: form.control, name: "name" });
|
||||
return { form, name };
|
||||
},
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.form.selectCompany(company);
|
||||
});
|
||||
expect(result.current.name.field.value).toBe("Gateway Plumbing");
|
||||
|
||||
// Someone else renamed the company, which is what caused the 409.
|
||||
rosterGet.mockResolvedValueOnce({
|
||||
...roster,
|
||||
rowVersion: "rv-2",
|
||||
name: "Gateway Plumbing & Drain",
|
||||
});
|
||||
await act(async () => {
|
||||
result.current.form.reload();
|
||||
});
|
||||
|
||||
// Reload must not leave the form on the pre-conflict name, or the retry
|
||||
// would diff stale fields and overwrite the concurrent update.
|
||||
await waitFor(() => expect(result.current.name.field.value).toBe("Gateway Plumbing & Drain"));
|
||||
});
|
||||
|
||||
it("reload bypasses the cache so the retry carries the fresh rowVersion", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(
|
||||
() => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
|
||||
{ wrapper: makeWrapper(createCachingClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.selectCompany(company);
|
||||
});
|
||||
expect(rosterGet).toHaveBeenCalledTimes(1);
|
||||
|
||||
act(() => {
|
||||
result.current.submit(submitValues([newTechnician]));
|
||||
});
|
||||
expect(saveMutate.mock.calls[0]?.[0]).toEqual(expect.objectContaining({ rowVersion: "rv-1" }));
|
||||
|
||||
// The 409 never invalidates this key, and in the Add flow nothing else observes it.
|
||||
// Without staleTime: 0 on the reload fetch, the cached rv-1 is served straight back
|
||||
// and every retry 409s again.
|
||||
rosterGet.mockResolvedValueOnce({ ...roster, rowVersion: "rv-2" });
|
||||
await act(async () => {
|
||||
result.current.reload();
|
||||
});
|
||||
|
||||
await waitFor(() => expect(rosterGet).toHaveBeenCalledTimes(2));
|
||||
|
||||
act(() => {
|
||||
result.current.submit(submitValues([newTechnician]));
|
||||
});
|
||||
expect(saveMutate.mock.calls[1]?.[0]).toEqual(
|
||||
expect.objectContaining({ mode: "add", rowVersion: "rv-2" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("does not regress the Edit Vendor reconcile path (mode update)", () => {
|
||||
rosterQueryResult = {
|
||||
data: rosterWithTechnicians,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
};
|
||||
const { result } = renderHook(() => useVendorRosterForm({ mode: "update", vendorId: 7 }), {
|
||||
wrapper: makeWrapper(createClient()),
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.submit(submitValues([...rosterWithTechnicians.technicians, newTechnician]));
|
||||
});
|
||||
|
||||
expect(saveMutate).toHaveBeenCalledTimes(1);
|
||||
expect(saveMutate.mock.calls[0]?.[0]).toEqual(
|
||||
expect.objectContaining({
|
||||
mode: "update",
|
||||
companyId: 5,
|
||||
rowVersion: "rv-1",
|
||||
originalRoster: rosterWithTechnicians,
|
||||
values: expect.objectContaining({
|
||||
technicians: [...rosterWithTechnicians.technicians, newTechnician],
|
||||
}),
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("useVendorRosterForm technician autopopulation (SH-246)", () => {
|
||||
beforeEach(() => {
|
||||
rosterGet.mockReset();
|
||||
saveMutate.mockReset();
|
||||
});
|
||||
|
||||
it("does not autopopulate technician fields when a company is selected", async () => {
|
||||
rosterGet.mockResolvedValueOnce(rosterWithTechnicians);
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const form = useVendorRosterForm({ mode: "create" });
|
||||
const technicians = useController({ control: form.control, name: "technicians" });
|
||||
const name = useController({ control: form.control, name: "name" });
|
||||
return { form, technicians, name };
|
||||
},
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.form.selectCompany(company);
|
||||
});
|
||||
|
||||
const technicians = result.current.technicians.field.value;
|
||||
expect(technicians).toEqual([
|
||||
{
|
||||
contactName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
tradeSpecialties: "",
|
||||
isActive: true,
|
||||
},
|
||||
]);
|
||||
// SH-250: the blank row must not carry a fabricated preferredContact, since
|
||||
// the control was removed from the form and `append` omits it too.
|
||||
expect(technicians[0]).not.toHaveProperty("preferredContact");
|
||||
expect(technicians).not.toContainEqual(expect.objectContaining({ contactName: "Ray Holt" }));
|
||||
expect(technicians).not.toContainEqual(
|
||||
expect.objectContaining({ contactName: "Amy Santiago" }),
|
||||
);
|
||||
expect(result.current.name.field.value).toBe("Gateway Plumbing");
|
||||
expect(result.current.form.selectedCompanyId).toBe(5);
|
||||
});
|
||||
|
||||
it("keeps a typed technician when the company selection is cleared to free text", async () => {
|
||||
rosterGet.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
|
||||
const technician = useController({
|
||||
control: form.control,
|
||||
name: "technicians.0.contactName",
|
||||
});
|
||||
return { form, technician };
|
||||
},
|
||||
{ wrapper: makeWrapper(createClient()) },
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.form.selectCompany(company);
|
||||
});
|
||||
await act(async () => {
|
||||
result.current.technician.field.onChange("Dana Kim");
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.form.clearSelectedCompany("Draft Vendor");
|
||||
});
|
||||
|
||||
expect(result.current.form.selectedCompanyId).toBeNull();
|
||||
expect(result.current.technician.field.value).toBe("Dana Kim");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { VendorDetailDrawer } from "@/app/(protected)/vendors/_components/vendor-detail-drawer";
|
||||
import { renderWithProviders } from "@/test/test-utils";
|
||||
|
|
@ -135,139 +134,3 @@ describe("VendorDetailDrawer selected-technician display", () => {
|
|||
expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("VendorDetailDrawer design parity", () => {
|
||||
it("renders the company once when there is no technician name to head the panel", () => {
|
||||
useVendorCompanyRoster.mockReturnValue(rosterWith([]));
|
||||
|
||||
renderWithProviders(
|
||||
<VendorDetailDrawer open={true} vendor={{ ...vendor, contactName: "" }} onClose={vi.fn()} />,
|
||||
{ route: "/vendors", withAuth: false },
|
||||
);
|
||||
|
||||
const heading = screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" });
|
||||
expect(heading).toBeInTheDocument();
|
||||
// The header block holds the title alone — no subtitle repeating the company.
|
||||
expect(heading.parentElement?.children).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("keeps the company subtitle under a technician name", () => {
|
||||
useVendorCompanyRoster.mockReturnValue(
|
||||
rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
|
||||
);
|
||||
|
||||
renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
|
||||
route: "/vendors",
|
||||
withAuth: false,
|
||||
});
|
||||
|
||||
expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
|
||||
expect(screen.getAllByText("Gateway Plumbing").length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("labels the Google Maps field below Address even when no URL is stored", () => {
|
||||
useVendorCompanyRoster.mockReturnValue(
|
||||
rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
|
||||
);
|
||||
|
||||
renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
|
||||
route: "/vendors",
|
||||
withAuth: false,
|
||||
});
|
||||
|
||||
expect(screen.getByText("Google Maps")).toBeInTheDocument();
|
||||
expect(screen.queryByRole("link", { name: /Open in Google Maps/ })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("links out to Google Maps when a URL is stored", () => {
|
||||
const roster = rosterWith([
|
||||
{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 },
|
||||
]);
|
||||
roster.data.googleMapsUrl = "https://maps.google.com/?q=1+Industrial+Pkwy";
|
||||
useVendorCompanyRoster.mockReturnValue(roster);
|
||||
|
||||
renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
|
||||
route: "/vendors",
|
||||
withAuth: false,
|
||||
});
|
||||
|
||||
expect(screen.getByRole("link", { name: /Open in Google Maps/ })).toHaveAttribute(
|
||||
"href",
|
||||
"https://maps.google.com/?q=1+Industrial+Pkwy",
|
||||
);
|
||||
});
|
||||
|
||||
it("puts the status opposite Total Jobs and drops the redundant Status label", () => {
|
||||
useVendorCompanyRoster.mockReturnValue(
|
||||
rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
|
||||
);
|
||||
|
||||
renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
|
||||
route: "/vendors",
|
||||
withAuth: false,
|
||||
});
|
||||
|
||||
const row = screen.getByText("Total Jobs").closest("div")?.parentElement;
|
||||
expect(row).not.toBeNull();
|
||||
expect(getComputedStyle(row as Element).justifyContent).toBe("space-between");
|
||||
expect(row).toHaveTextContent("Active");
|
||||
expect(screen.queryByText("Status")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("VendorDetailDrawer deactivation prompt", () => {
|
||||
const inactiveVendor: VendorListItem = { ...vendor, isActive: false };
|
||||
|
||||
it("does not prompt to deactivate a saved-inactive vendor toggled on and back off", async () => {
|
||||
useVendorCompanyRoster.mockReturnValue(
|
||||
rosterWith([
|
||||
{ id: 1, contactName: "Adam", phone: "314-555-0198", isActive: false, totalJobs: 5 },
|
||||
]),
|
||||
);
|
||||
const onRequestDeactivation = vi.fn();
|
||||
|
||||
renderWithProviders(
|
||||
<VendorDetailDrawer
|
||||
open={true}
|
||||
vendor={inactiveVendor}
|
||||
startInEdit={true}
|
||||
onRequestDeactivation={onRequestDeactivation}
|
||||
onClose={vi.fn()}
|
||||
/>,
|
||||
{ route: "/vendors", withAuth: false },
|
||||
);
|
||||
|
||||
const toggle = screen.getByRole("switch", { name: "Active status" });
|
||||
await userEvent.click(toggle);
|
||||
expect(toggle).toBeChecked();
|
||||
|
||||
await userEvent.click(toggle);
|
||||
|
||||
expect(toggle).not.toBeChecked();
|
||||
expect(onRequestDeactivation).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("prompts to deactivate a saved-active vendor when the toggle is switched off", async () => {
|
||||
useVendorCompanyRoster.mockReturnValue(
|
||||
rosterWith([
|
||||
{ id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
|
||||
]),
|
||||
);
|
||||
const onRequestDeactivation = vi.fn();
|
||||
|
||||
renderWithProviders(
|
||||
<VendorDetailDrawer
|
||||
open={true}
|
||||
vendor={vendor}
|
||||
startInEdit={true}
|
||||
onRequestDeactivation={onRequestDeactivation}
|
||||
onClose={vi.fn()}
|
||||
/>,
|
||||
{ route: "/vendors", withAuth: false },
|
||||
);
|
||||
|
||||
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
|
||||
|
||||
expect(onRequestDeactivation).toHaveBeenCalledWith(vendor);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ describe("VendorsListPage", () => {
|
|||
expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("offers deactivate-anyway when the preflight reports open work orders", async () => {
|
||||
it("blocks deactivation when the preflight reports open work orders", async () => {
|
||||
setupDefaults();
|
||||
useVendorCompanyRoster.mockReturnValue({
|
||||
data: activeRoster,
|
||||
|
|
@ -213,52 +213,13 @@ describe("VendorsListPage", () => {
|
|||
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
|
||||
|
||||
expect(
|
||||
screen.getByText(
|
||||
/will no longer be selectable for new work orders\. It still has 1 open work order —/,
|
||||
),
|
||||
screen.getByText(/cannot be deactivated because it still has open work orders/),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: /Boiler repair/ })).toHaveAttribute(
|
||||
"href",
|
||||
"/workorders/101",
|
||||
);
|
||||
|
||||
const confirm = screen.getByRole("button", { name: "Deactivate anyway" });
|
||||
expect(confirm).toBeEnabled();
|
||||
await userEvent.click(confirm);
|
||||
|
||||
expect(mutate).toHaveBeenCalledWith({ id: 1, confirmOpenWorkOrders: true }, expect.anything());
|
||||
expect(screen.getByText(/Boiler repair/)).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /^Deactivate$/ })).toBeDisabled();
|
||||
expect(mutate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("deactivates without the confirmation flag when nothing is linked", async () => {
|
||||
setupDefaults();
|
||||
useVendorCompanyRoster.mockReturnValue({
|
||||
data: activeRoster,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
});
|
||||
useVendorDeactivationImpact.mockReturnValue({
|
||||
data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
|
||||
if (params.pageSize === 1) return result([], 1);
|
||||
return params.isActive ? result([activeVendor], 1) : result([], 0);
|
||||
});
|
||||
|
||||
renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
|
||||
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
|
||||
|
||||
expect(screen.queryByText(/It still has/)).not.toBeInTheDocument();
|
||||
await userEvent.click(screen.getByRole("button", { name: /^Deactivate$/ }));
|
||||
|
||||
expect(mutate).toHaveBeenCalledWith({ id: 1, confirmOpenWorkOrders: false }, expect.anything());
|
||||
}, 10_000);
|
||||
|
||||
it("preserves inline edits when deactivation is cancelled", async () => {
|
||||
setupDefaults();
|
||||
useVendorCompanyRoster.mockReturnValue({
|
||||
|
|
@ -286,7 +247,7 @@ describe("VendorsListPage", () => {
|
|||
await userEvent.type(company, "Draft Company Name");
|
||||
await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
|
||||
await userEvent.click(
|
||||
within(screen.getByRole("dialog", { name: "Deactivate this vendor?" })).getByRole("button", {
|
||||
within(screen.getByRole("dialog", { name: "Deactivate Vendor" })).getByRole("button", {
|
||||
name: "Cancel",
|
||||
}),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ function buildTableData() {
|
|||
endDrag: vi.fn(),
|
||||
setUnschedOpen: vi.fn(),
|
||||
triggerFlash: vi.fn(),
|
||||
revealScheduledRow: vi.fn(),
|
||||
setSelectedId: vi.fn(),
|
||||
} as never;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@ vi.mock("@/app/(protected)/workorders/_components/list/table/reschedule-notify",
|
|||
weekMoveNotify,
|
||||
}));
|
||||
|
||||
function buildTableData(revealScheduledRow = vi.fn()) {
|
||||
function buildTableData(triggerFlash = vi.fn()) {
|
||||
return {
|
||||
dragState: { current: { dragId: null, overId: null } },
|
||||
setDragViz: vi.fn(),
|
||||
reorderRows: vi.fn(),
|
||||
endDrag: vi.fn(),
|
||||
revealScheduledRow,
|
||||
triggerFlash,
|
||||
setSelectedId: vi.fn(),
|
||||
} as never;
|
||||
}
|
||||
|
|
@ -28,11 +28,11 @@ describe("useWoTableRowHandlers schedule navigation (SH-240)", () => {
|
|||
it("selects the scheduled weekday in the same week so the row stays visible", () => {
|
||||
const onNavigateToDay = vi.fn();
|
||||
const onPatch = vi.fn();
|
||||
const revealScheduledRow = vi.fn();
|
||||
const triggerFlash = vi.fn();
|
||||
|
||||
const { result } = renderHook(() =>
|
||||
useWoTableRowHandlers({
|
||||
tableData: buildTableData(revealScheduledRow),
|
||||
tableData: buildTableData(triggerFlash),
|
||||
weekMonday: "2026-05-18",
|
||||
onNavigateToDay,
|
||||
onOpenSlideOver: vi.fn(),
|
||||
|
|
@ -46,17 +46,16 @@ describe("useWoTableRowHandlers schedule navigation (SH-240)", () => {
|
|||
|
||||
expect(onPatch).toHaveBeenCalledWith("wo-1", applySchedulePatch("2026-05-21", false));
|
||||
expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-21");
|
||||
expect(revealScheduledRow).toHaveBeenCalledWith("wo-1");
|
||||
expect(triggerFlash).toHaveBeenCalledWith("wo-1");
|
||||
expect(rescheduleNotify).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("sends cross-week view-it navigation to the target day, not Monday", () => {
|
||||
const onNavigateToDay = vi.fn();
|
||||
const revealScheduledRow = vi.fn();
|
||||
|
||||
const { result } = renderHook(() =>
|
||||
useWoTableRowHandlers({
|
||||
tableData: buildTableData(revealScheduledRow),
|
||||
tableData: buildTableData(),
|
||||
weekMonday: "2026-05-18",
|
||||
onNavigateToDay,
|
||||
onOpenSlideOver: vi.fn(),
|
||||
|
|
@ -77,7 +76,6 @@ describe("useWoTableRowHandlers schedule navigation (SH-240)", () => {
|
|||
const { onNavigate } = rescheduleNotify.mock.calls[0][1] as { onNavigate: () => void };
|
||||
onNavigate();
|
||||
expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-27");
|
||||
expect(revealScheduledRow).toHaveBeenCalledWith("wo-1");
|
||||
});
|
||||
|
||||
it("opens Advanced Filters for week-only moves instead of the removed Unscheduled section", () => {
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
import { act, renderHook } from "@testing-library/react";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { useWorkOrdersDayPagination } from "@/app/(protected)/workorders/_hooks/use-work-orders-day-pagination";
|
||||
import { DEFAULT_DAY_PAGE_SIZE } from "@/domain/work-orders/utils/day-pagination";
|
||||
|
||||
describe("useWorkOrdersDayPagination (SH-241)", () => {
|
||||
const onRevealed = vi.fn();
|
||||
const base = {
|
||||
weekMonday: "2026-08-17",
|
||||
selectedDayIso: "2026-08-17",
|
||||
advActive: false,
|
||||
dayItems: [] as { id: string }[],
|
||||
onRevealed,
|
||||
};
|
||||
|
||||
it("defaults to 50 rows per page", () => {
|
||||
const { result } = renderHook(() => useWorkOrdersDayPagination(base));
|
||||
expect(result.current.pageSize).toBe(DEFAULT_DAY_PAGE_SIZE);
|
||||
expect(result.current.page).toBe(0);
|
||||
});
|
||||
|
||||
it("resets to page 1 when switching days", () => {
|
||||
const { result, rerender } = renderHook(
|
||||
(props: typeof base) => useWorkOrdersDayPagination(props),
|
||||
{ initialProps: base },
|
||||
);
|
||||
act(() => result.current.goToNextPage());
|
||||
expect(result.current.page).toBe(1);
|
||||
rerender({ ...base, selectedDayIso: "2026-08-18" });
|
||||
expect(result.current.page).toBe(0);
|
||||
});
|
||||
|
||||
it("resets to page 1 when the week changes", () => {
|
||||
const { result, rerender } = renderHook(
|
||||
(props: typeof base) => useWorkOrdersDayPagination(props),
|
||||
{ initialProps: base },
|
||||
);
|
||||
act(() => result.current.goToNextPage());
|
||||
rerender({ ...base, weekMonday: "2026-08-10" });
|
||||
expect(result.current.page).toBe(0);
|
||||
});
|
||||
|
||||
it("resets to page 1 when rows-per-page changes", () => {
|
||||
const { result } = renderHook(() => useWorkOrdersDayPagination(base));
|
||||
act(() => result.current.goToNextPage());
|
||||
act(() => result.current.setPageSize(25));
|
||||
expect(result.current.page).toBe(0);
|
||||
expect(result.current.pageSize).toBe(25);
|
||||
});
|
||||
|
||||
it("resets to page 1 when a global filter is applied", () => {
|
||||
const { result, rerender } = renderHook(
|
||||
(props: typeof base) => useWorkOrdersDayPagination(props),
|
||||
{ initialProps: base },
|
||||
);
|
||||
act(() => result.current.goToNextPage());
|
||||
rerender({ ...base, advActive: true });
|
||||
expect(result.current.page).toBe(0);
|
||||
});
|
||||
|
||||
it("selects the page that contains a revealed row beyond the first page", () => {
|
||||
const dayItems = Array.from({ length: 60 }, (_, index) => ({ id: `wo-${index}` }));
|
||||
const revealed = vi.fn();
|
||||
const { result, rerender } = renderHook(
|
||||
(props: typeof base) => useWorkOrdersDayPagination(props),
|
||||
{ initialProps: { ...base, onRevealed: revealed } },
|
||||
);
|
||||
|
||||
act(() => result.current.revealRow("wo-55"));
|
||||
rerender({ ...base, dayItems, onRevealed: revealed, selectedDayIso: "2026-08-18" });
|
||||
|
||||
expect(result.current.page).toBe(1);
|
||||
expect(revealed).toHaveBeenCalledWith("wo-55");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { WoDayPaginationFooter } from "@/app/(protected)/workorders/_components/list/table/wo-day-pagination-footer";
|
||||
|
||||
describe("WoDayPaginationFooter (SH-241)", () => {
|
||||
it("changes rows-per-page and navigates pages", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onPageSizeChange = vi.fn();
|
||||
const onNext = vi.fn();
|
||||
render(
|
||||
<WoDayPaginationFooter
|
||||
dayLabel="Mon · 06/01"
|
||||
itemCount={60}
|
||||
pageSize={50}
|
||||
pageIndex={0}
|
||||
pageCount={2}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
onPrev={vi.fn()}
|
||||
onNext={onNext}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("MON · 06/01 · 60 items")).toBeInTheDocument();
|
||||
expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
|
||||
await user.selectOptions(screen.getByLabelText("Rows per page"), "25");
|
||||
expect(onPageSizeChange).toHaveBeenCalledWith(25);
|
||||
await user.click(screen.getByRole("button", { name: "Next page" }));
|
||||
expect(onNext).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -43,7 +43,6 @@ function tableData(
|
|||
selectedRow: null,
|
||||
flashId: null,
|
||||
triggerFlash: vi.fn(),
|
||||
revealScheduledRow: vi.fn(),
|
||||
dragViz: null,
|
||||
setDragViz: vi.fn(),
|
||||
dragState: { current: { dragId: null, overId: null } },
|
||||
|
|
@ -57,15 +56,6 @@ function tableData(
|
|||
scopeTotalCount: 0,
|
||||
totalCount: 0,
|
||||
search: "no-match",
|
||||
showDayPagination: false,
|
||||
dayPageSize: 50,
|
||||
dayPageIndex: 0,
|
||||
dayPageCount: 1,
|
||||
dayItemCount: 0,
|
||||
dayFooterLabel: "Mon · 05/18",
|
||||
setDayPageSize: vi.fn(),
|
||||
goToPrevDayPage: vi.fn(),
|
||||
goToNextDayPage: vi.fn(),
|
||||
...overrides,
|
||||
} as ReturnTypeOfUseWorkOrdersTableData;
|
||||
}
|
||||
|
|
@ -89,7 +79,7 @@ function renderTable(data: ReturnTypeOfUseWorkOrdersTableData) {
|
|||
);
|
||||
}
|
||||
|
||||
describe("WoTable search empty vs Unassigned queue (SH-165/SH-241)", () => {
|
||||
describe("WoTable search empty vs Unassigned queue (SH-165/SH-240)", () => {
|
||||
it("shows empty search only after the Unassigned queue has settled empty", () => {
|
||||
const { getByText, queryByText } = renderTable(tableData());
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@ import { API_PATHS } from "@/api/api-paths";
|
|||
const apiGet = vi.fn();
|
||||
const apiPost = vi.fn();
|
||||
const apiPut = vi.fn();
|
||||
const apiPatch = vi.fn();
|
||||
|
||||
vi.mock("@/api/api", () => ({
|
||||
apiGet: (...args: unknown[]) => apiGet(...args),
|
||||
apiPost: (...args: unknown[]) => apiPost(...args),
|
||||
apiPut: (...args: unknown[]) => apiPut(...args),
|
||||
apiPatch: (...args: unknown[]) => apiPatch(...args),
|
||||
}));
|
||||
|
||||
vi.mock("ky", () => ({
|
||||
|
|
@ -40,7 +38,6 @@ describe("vendorCompanyRosterApi", () => {
|
|||
apiGet.mockReset();
|
||||
apiPost.mockReset();
|
||||
apiPut.mockReset();
|
||||
apiPatch.mockReset();
|
||||
});
|
||||
|
||||
it("fetches by vendorId or companyId with the correct query params", async () => {
|
||||
|
|
@ -124,72 +121,4 @@ describe("vendorCompanyRosterApi", () => {
|
|||
|
||||
await expect(vendorCompanyRosterApi.create({ name: "Solo Co" })).rejects.toBe(generic);
|
||||
});
|
||||
|
||||
it("patches the additive payload without a technician id and without PUT", async () => {
|
||||
apiPatch.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
|
||||
|
||||
await vendorCompanyRosterApi.addTechnicians(5, {
|
||||
rowVersion: "rv-1",
|
||||
addTechnicians: [
|
||||
{
|
||||
id: 99,
|
||||
contactName: "Adam",
|
||||
phone: "3145550198",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "Plumbing",
|
||||
isActive: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
expect(apiPatch).toHaveBeenCalledWith(
|
||||
API_PATHS.vendorCompanyRoster.byCompany(5),
|
||||
expect.objectContaining({
|
||||
rowVersion: "rv-1",
|
||||
addTechnicians: [expect.objectContaining({ contactName: "Adam", phone: "(314) 555-0198" })],
|
||||
}),
|
||||
);
|
||||
const body = apiPatch.mock.calls[0]?.[1] as Record<string, unknown>;
|
||||
expect(body).not.toHaveProperty("companyFields");
|
||||
expect((body.addTechnicians as Array<Record<string, unknown>>)[0]).not.toHaveProperty("id");
|
||||
expect(apiPut).not.toHaveBeenCalled();
|
||||
expect(apiPost).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("includes companyFields on the additive patch when provided", async () => {
|
||||
apiPatch.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
|
||||
|
||||
await vendorCompanyRosterApi.addTechnicians(5, {
|
||||
rowVersion: "rv-2",
|
||||
addTechnicians: [
|
||||
{ contactName: "Adam", phone: "", email: "", tradeSpecialties: "", isActive: true },
|
||||
],
|
||||
companyFields: { notes: "Updated notes" },
|
||||
});
|
||||
|
||||
expect(apiPatch).toHaveBeenCalledWith(
|
||||
API_PATHS.vendorCompanyRoster.byCompany(5),
|
||||
expect.objectContaining({
|
||||
rowVersion: "rv-2",
|
||||
companyFields: { notes: "Updated notes" },
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("throws a stale conflict on a 409 from the additive patch", async () => {
|
||||
apiPatch.mockRejectedValueOnce(httpError(409, { message: "rowversion mismatch" }));
|
||||
|
||||
await expect(
|
||||
vendorCompanyRosterApi.addTechnicians(5, {
|
||||
rowVersion: "rv-1",
|
||||
addTechnicians: [
|
||||
{ contactName: "Adam", phone: "", email: "", tradeSpecialties: "", isActive: true },
|
||||
],
|
||||
}),
|
||||
).rejects.toSatisfy((error: unknown) => {
|
||||
if (!isVendorRosterConflictError(error)) return false;
|
||||
return error.conflict.kind === "stale";
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,263 +0,0 @@
|
|||
import { act, renderHook, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { ReactNode } from "react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
const rosterAdd = vi.fn();
|
||||
const rosterUpdate = vi.fn();
|
||||
const rosterCreate = vi.fn();
|
||||
|
||||
vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
|
||||
vendorCompanyRosterApi: {
|
||||
addTechnicians: (...args: unknown[]) => rosterAdd(...args),
|
||||
update: (...args: unknown[]) => rosterUpdate(...args),
|
||||
create: (...args: unknown[]) => rosterCreate(...args),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/domain/vendors/api/vendors-api", () => ({
|
||||
vendorsApi: { update: vi.fn() },
|
||||
}));
|
||||
|
||||
vi.mock("react-toastify", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
|
||||
|
||||
import {
|
||||
buildAdditiveRosterPatch,
|
||||
useSaveVendorCompanyRoster,
|
||||
} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
|
||||
import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
|
||||
import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
|
||||
|
||||
const roster: VendorCompanyRoster = {
|
||||
companyId: 5,
|
||||
rowVersion: "rv-1",
|
||||
name: "Gateway Plumbing",
|
||||
companyPhone: "(314) 555-0100",
|
||||
email: "dispatch@gateway.test",
|
||||
address: "1 Main St",
|
||||
city: "St. Louis",
|
||||
state: "MO",
|
||||
zip: "63101",
|
||||
googleMapsUrl: "",
|
||||
notes: "Preferred vendor",
|
||||
technicians: [
|
||||
{
|
||||
id: 11,
|
||||
contactName: "Ray Holt",
|
||||
phone: "(314) 555-0122",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "Plumbing",
|
||||
isActive: true,
|
||||
totalJobs: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const newTechnician = {
|
||||
contactName: "Dana Kim",
|
||||
phone: "(314) 555-0144",
|
||||
email: "dana@test.test",
|
||||
preferredContact: "Text" as const,
|
||||
tradeSpecialties: "HVAC",
|
||||
isActive: true,
|
||||
};
|
||||
|
||||
function formValues(
|
||||
overrides: Partial<VendorCompanyRosterFormValues> = {},
|
||||
): VendorCompanyRosterFormValues {
|
||||
return {
|
||||
name: roster.name,
|
||||
companyPhone: roster.companyPhone,
|
||||
email: roster.email,
|
||||
address: roster.address,
|
||||
city: roster.city,
|
||||
state: roster.state,
|
||||
zip: roster.zip,
|
||||
googleMapsUrl: roster.googleMapsUrl,
|
||||
notes: roster.notes,
|
||||
technicians: [newTechnician],
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("buildAdditiveRosterPatch", () => {
|
||||
it("carries only the newly entered technician, never a full roster snapshot", () => {
|
||||
const patch = buildAdditiveRosterPatch(roster, formValues(), "rv-1");
|
||||
|
||||
expect(patch).not.toBeNull();
|
||||
expect(patch?.addTechnicians).toEqual([newTechnician]);
|
||||
expect(patch?.addTechnicians[0]).not.toHaveProperty("id");
|
||||
});
|
||||
|
||||
it("ignores blank technician rows", () => {
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
roster,
|
||||
formValues({
|
||||
technicians: [
|
||||
{
|
||||
contactName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "",
|
||||
isActive: true,
|
||||
},
|
||||
newTechnician,
|
||||
],
|
||||
}),
|
||||
"rv-1",
|
||||
);
|
||||
|
||||
expect(patch?.addTechnicians).toEqual([newTechnician]);
|
||||
});
|
||||
|
||||
it("sends only company fields the user edited", () => {
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
roster,
|
||||
formValues({ notes: "New notes", address: "2 Oak Ave" }),
|
||||
"rv-1",
|
||||
{ notes: true, address: true },
|
||||
);
|
||||
|
||||
expect(patch?.companyFields).toEqual({ notes: "New notes", address: "2 Oak Ave" });
|
||||
});
|
||||
|
||||
it("never sends a company field the user did not edit, even when it differs from the roster", () => {
|
||||
// Regression: after a stale-409 the roster is refetched while the form keeps pre-conflict
|
||||
// values. A form-vs-roster diff would resend our stale value for a field another user changed
|
||||
// in that window, silently reverting their edit. Only edited fields may be transmitted.
|
||||
const rosterAfterOtherUserEditedPhone = { ...roster, companyPhone: "314-555-9999" };
|
||||
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
rosterAfterOtherUserEditedPhone,
|
||||
formValues({ companyPhone: roster.companyPhone, notes: "New notes" }),
|
||||
"rv-2",
|
||||
{ notes: true },
|
||||
);
|
||||
|
||||
expect(patch?.companyFields).toEqual({ notes: "New notes" });
|
||||
expect(patch?.companyFields).not.toHaveProperty("companyPhone");
|
||||
});
|
||||
|
||||
it("omits companyFields when values differ but nothing was edited", () => {
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
roster,
|
||||
formValues({ notes: "Drifted under us" }),
|
||||
"rv-1",
|
||||
{},
|
||||
);
|
||||
|
||||
expect(patch).not.toHaveProperty("companyFields");
|
||||
});
|
||||
|
||||
it("omits companyFields entirely when nothing changed", () => {
|
||||
const patch = buildAdditiveRosterPatch(roster, formValues(), "rv-1");
|
||||
|
||||
expect(patch).not.toHaveProperty("companyFields");
|
||||
});
|
||||
|
||||
it("returns null when there is nothing to add or change", () => {
|
||||
const patch = buildAdditiveRosterPatch(
|
||||
roster,
|
||||
formValues({
|
||||
technicians: [
|
||||
{
|
||||
contactName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
preferredContact: "Phone",
|
||||
tradeSpecialties: "",
|
||||
isActive: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
"rv-1",
|
||||
);
|
||||
|
||||
expect(patch).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
function createWrapper() {
|
||||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
return function Wrapper({ children }: { children: ReactNode }) {
|
||||
return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
|
||||
};
|
||||
}
|
||||
|
||||
describe("useSaveVendorCompanyRoster routing", () => {
|
||||
beforeEach(() => {
|
||||
rosterAdd.mockReset();
|
||||
rosterUpdate.mockReset();
|
||||
rosterCreate.mockReset();
|
||||
});
|
||||
|
||||
it("add mode issues the additive patch and never the reconcile PUT", async () => {
|
||||
rosterAdd.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.mutate({
|
||||
mode: "add",
|
||||
values: formValues(),
|
||||
companyId: 5,
|
||||
rowVersion: "rv-1",
|
||||
originalRoster: roster,
|
||||
});
|
||||
});
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
|
||||
expect(rosterAdd).toHaveBeenCalledTimes(1);
|
||||
expect(rosterAdd).toHaveBeenCalledWith(
|
||||
5,
|
||||
expect.objectContaining({
|
||||
rowVersion: "rv-1",
|
||||
addTechnicians: [newTechnician],
|
||||
}),
|
||||
);
|
||||
expect(rosterUpdate).not.toHaveBeenCalled();
|
||||
expect(rosterCreate).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("update mode still issues the full reconcile PUT", async () => {
|
||||
rosterUpdate.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.mutate({
|
||||
mode: "update",
|
||||
values: formValues({
|
||||
technicians: [{ id: 11, ...newTechnician }, newTechnician],
|
||||
}),
|
||||
companyId: 5,
|
||||
rowVersion: "rv-1",
|
||||
originalRoster: roster,
|
||||
});
|
||||
});
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
|
||||
expect(rosterUpdate).toHaveBeenCalledWith(5, expect.anything(), "rv-1");
|
||||
expect(rosterAdd).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("create mode still issues the POST", async () => {
|
||||
rosterCreate.mockResolvedValueOnce(roster);
|
||||
const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.mutate({ mode: "create", values: formValues() });
|
||||
});
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||
|
||||
expect(rosterCreate).toHaveBeenCalledTimes(1);
|
||||
expect(rosterAdd).not.toHaveBeenCalled();
|
||||
expect(rosterUpdate).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
DAY_PAGE_SIZE_OPTIONS,
|
||||
DEFAULT_DAY_PAGE_SIZE,
|
||||
findItemPageIndex,
|
||||
formatDayPaginationSummary,
|
||||
pageIndexForItem,
|
||||
paginateItems,
|
||||
shouldShowDayPagination,
|
||||
} from "@/domain/work-orders/utils/day-pagination";
|
||||
|
||||
describe("day pagination utils (SH-241)", () => {
|
||||
it("defaults to 50 and exposes 25/50/100/200", () => {
|
||||
expect(DEFAULT_DAY_PAGE_SIZE).toBe(50);
|
||||
expect(DAY_PAGE_SIZE_OPTIONS).toEqual([25, 50, 100, 200]);
|
||||
});
|
||||
|
||||
it("paginates 60 items at 50 per page", () => {
|
||||
const items = Array.from({ length: 60 }, (_, index) => index);
|
||||
const first = paginateItems(items, 0, 50);
|
||||
expect(first.visible).toHaveLength(50);
|
||||
expect(first.pageCount).toBe(2);
|
||||
const second = paginateItems(items, 1, 50);
|
||||
expect(second.visible).toEqual(items.slice(50));
|
||||
});
|
||||
|
||||
it("re-paginates immediately when page size changes", () => {
|
||||
const items = Array.from({ length: 60 }, (_, index) => index);
|
||||
expect(paginateItems(items, 0, 25).visible).toHaveLength(25);
|
||||
expect(paginateItems(items, 0, 25).pageCount).toBe(3);
|
||||
});
|
||||
|
||||
it("clamps an out-of-range page to the last page", () => {
|
||||
const paged = paginateItems([1, 2, 3], 9, 2);
|
||||
expect(paged.pageIndex).toBe(1);
|
||||
expect(paged.visible).toEqual([3]);
|
||||
});
|
||||
|
||||
it("shows pagination in day view even when the page is not full", () => {
|
||||
expect(
|
||||
shouldShowDayPagination({
|
||||
flatListMode: false,
|
||||
isLoading: false,
|
||||
noSearchResults: false,
|
||||
}),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("hides pagination in flat-list / loading / empty search", () => {
|
||||
expect(
|
||||
shouldShowDayPagination({
|
||||
flatListMode: true,
|
||||
isLoading: false,
|
||||
noSearchResults: false,
|
||||
}),
|
||||
).toBe(false);
|
||||
expect(
|
||||
shouldShowDayPagination({
|
||||
flatListMode: false,
|
||||
isLoading: true,
|
||||
noSearchResults: false,
|
||||
}),
|
||||
).toBe(false);
|
||||
expect(
|
||||
shouldShowDayPagination({
|
||||
flatListMode: false,
|
||||
isLoading: false,
|
||||
noSearchResults: true,
|
||||
}),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it("maps a row past the first page onto page 2 at the default size", () => {
|
||||
const items = Array.from({ length: 60 }, (_, index) => ({ id: `wo-${index}` }));
|
||||
expect(pageIndexForItem(50, 50)).toBe(1);
|
||||
expect(findItemPageIndex(items, "wo-55", 50)).toBe(1);
|
||||
expect(findItemPageIndex(items, "missing", 50)).toBeNull();
|
||||
});
|
||||
|
||||
it("formats the AAP footer summary", () => {
|
||||
expect(formatDayPaginationSummary("Mon · 06/01", 9)).toBe("MON · 06/01 · 9 items");
|
||||
expect(formatDayPaginationSummary("Tue · 06/02", 1)).toBe("TUE · 06/02 · 1 item");
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue