mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 08:03:13 +00:00
feat(work-orders): comment @mentions autocomplete (SH-217) (#91)
* docs(work-orders): add pending BE contract checklist for design parity gaps * feat(work-orders): add mentions in work-order comments composer * docs(work-orders): align pr description with jira and qa residuals * refactor(workorders): split work order view page into view components * fix(work-orders): export comment assignment vendor input types for view hook * fix(work-orders): drop preferredContact from vendor update payload Align with WorkOrderVendorUpdatePayload on current dev so the mentions branch typechecks. * fix(work-orders): remove Preferred Contact from WO vendor editor (SH-180) EOF * fix(work-orders): harden comment mentions and clear draft on success * fix(work-orders): harden mention highlight boundary and submit catch [SH-217] * fix(work-orders): keep mention cursor sync on current value [SH-217] * fix(work-orders): keep mention menu open after typing @ Pass live text into syncCursor instead of a render-time valueRef. Add a composer interaction regression for @ autocomplete visibility. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
This commit is contained in:
Arthur Bassi
GitHub
parent
a30ac73d29
commit
f35fce9bd5
27 changed files with 1563 additions and 86 deletions
|
|
@ -1,39 +1,21 @@
|
|||
import { useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { useParams } from "react-router";
|
||||
import { Alert, Box, CircularProgress } from "@mui/material";
|
||||
import { DispatchCreateModal } from "./_components/dispatch-create-modal";
|
||||
import { DispatchDetailModal } from "./_components/dispatch-detail-modal";
|
||||
import { VendorEditorDialog } from "./_components/vendor-editor-dialog";
|
||||
import { useVendorEditor } from "./_components/use-vendor-editor";
|
||||
import { WorkOrderActivity } from "./_components/work-order-activity";
|
||||
import {
|
||||
DispatchAccordion,
|
||||
WorkOrderDetailsSection,
|
||||
WorkOrderHeader,
|
||||
WorkOrderSummaryAccordions,
|
||||
} from "./_components/work-order-view-sections";
|
||||
import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
|
||||
import {
|
||||
useChangeWorkOrderAssignment,
|
||||
useChangeWorkOrderStatus,
|
||||
} from "@/domain/work-orders/use-cases/use-work-order-mutations";
|
||||
import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
|
||||
import { WorkOrderActivityPanel } from "./_components/view/work-order-activity-panel";
|
||||
import { WorkOrderDispatchesAccordion } from "./_components/view/work-order-dispatches-accordion";
|
||||
import { WorkOrderVendorEditorDialog } from "./_components/view/work-order-vendor-editor-dialog";
|
||||
import { WorkOrderViewAccordions } from "./_components/view/work-order-view-accordions";
|
||||
import { WorkOrderViewDetails } from "./_components/view/work-order-view-details";
|
||||
import { WorkOrderViewHeader } from "./_components/view/work-order-view-header";
|
||||
import { useWorkOrderViewPage } from "./_hooks/use-work-order-view-page";
|
||||
|
||||
export default function WorkOrderViewPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const workOrderId = id ?? "";
|
||||
const view = useWorkOrderViewPage(workOrderId);
|
||||
|
||||
const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
|
||||
const { data: users = [] } = useWorkOrderUsers();
|
||||
const statusMutation = useChangeWorkOrderStatus(workOrderId);
|
||||
const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
|
||||
const vendorEditor = useVendorEditor({ workOrderId, onSaved: () => void refetch() });
|
||||
|
||||
const [dispatchOpen, setDispatchOpen] = useState(false);
|
||||
const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
|
||||
|
||||
if (isLoading) {
|
||||
if (view.isLoading) {
|
||||
return (
|
||||
<Box className="flex justify-center p-12">
|
||||
<CircularProgress />
|
||||
|
|
@ -41,11 +23,11 @@ export default function WorkOrderViewPage() {
|
|||
);
|
||||
}
|
||||
|
||||
if (error || !wo) {
|
||||
if (view.error || !view.wo) {
|
||||
return (
|
||||
<Box className="p-4">
|
||||
<Alert severity="error">
|
||||
{error instanceof Error ? error.message : "Work order not found."}
|
||||
{view.error instanceof Error ? view.error.message : "Work order not found."}
|
||||
</Alert>
|
||||
</Box>
|
||||
);
|
||||
|
|
@ -53,56 +35,67 @@ export default function WorkOrderViewPage() {
|
|||
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<WorkOrderHeader
|
||||
wo={wo}
|
||||
onSelectStatus={(status) => statusMutation.mutate(status)}
|
||||
onDispatch={() => setDispatchOpen(true)}
|
||||
onEdit={() => navigate(`/workorders/edit/${id}`)}
|
||||
onBack={() => navigate("/workorders")}
|
||||
/>
|
||||
<WorkOrderDetailsSection
|
||||
wo={wo}
|
||||
users={users}
|
||||
onAssign={(payload) => assignmentMutation.mutate(payload)}
|
||||
/>
|
||||
<WorkOrderSummaryAccordions wo={wo} />
|
||||
<DispatchAccordion
|
||||
wo={wo}
|
||||
onEditVendor={(event, vendorId, vendorName) =>
|
||||
void vendorEditor.open(event, vendorId, vendorName)
|
||||
}
|
||||
onViewDispatch={setDispatchDetailId}
|
||||
/>
|
||||
<WorkOrderActivity
|
||||
<WorkOrderViewHeader
|
||||
wo={view.wo}
|
||||
workOrderId={workOrderId}
|
||||
comments={wo.comments ?? []}
|
||||
auditLog={wo.auditLog ?? []}
|
||||
statusAnchor={view.statusAnchor}
|
||||
onStatusAnchorChange={view.setStatusAnchor}
|
||||
onStatusChange={(status) => view.statusMutation.mutate(status)}
|
||||
onOpenDispatch={() => view.setDispatchOpen(true)}
|
||||
/>
|
||||
{dispatchOpen && (
|
||||
|
||||
<WorkOrderViewDetails
|
||||
wo={view.wo}
|
||||
users={view.users}
|
||||
assignAnchor={view.assignAnchor}
|
||||
onAssignAnchorChange={view.setAssignAnchor}
|
||||
onAssign={(userId, userName) => view.assignmentMutation.mutate({ userId, userName })}
|
||||
onUnassign={() => view.assignmentMutation.mutate({ userId: "", userName: "" })}
|
||||
/>
|
||||
|
||||
<WorkOrderViewAccordions wo={view.wo} />
|
||||
|
||||
<WorkOrderDispatchesAccordion
|
||||
wo={view.wo}
|
||||
onOpenDispatchDetail={view.setDispatchDetailId}
|
||||
onOpenVendorEditor={view.openVendorEditor}
|
||||
/>
|
||||
|
||||
<WorkOrderActivityPanel
|
||||
customerComments={view.customerComments}
|
||||
internalComments={view.internalComments}
|
||||
auditLog={view.auditLog}
|
||||
mentionUsers={view.mentionUsers}
|
||||
isSubmitting={view.commentMutation.isPending}
|
||||
onSubmitComment={view.submitComment}
|
||||
/>
|
||||
|
||||
{view.dispatchOpen && (
|
||||
<DispatchCreateModal
|
||||
workOrder={wo}
|
||||
onClose={() => setDispatchOpen(false)}
|
||||
onDispatched={() => void refetch()}
|
||||
workOrder={view.wo}
|
||||
onClose={() => view.setDispatchOpen(false)}
|
||||
onDispatched={() => void view.refetch()}
|
||||
/>
|
||||
)}
|
||||
{dispatchDetailId != null && (
|
||||
{view.dispatchDetailId != null && (
|
||||
<DispatchDetailModal
|
||||
dispatchId={dispatchDetailId}
|
||||
dispatchId={view.dispatchDetailId}
|
||||
workOrderId={workOrderId}
|
||||
onClose={() => setDispatchDetailId(null)}
|
||||
onUpdated={() => void refetch()}
|
||||
onClose={() => view.setDispatchDetailId(null)}
|
||||
onUpdated={() => void view.refetch()}
|
||||
/>
|
||||
)}
|
||||
<VendorEditorDialog
|
||||
editor={vendorEditor.editor}
|
||||
loading={vendorEditor.loading}
|
||||
error={vendorEditor.error}
|
||||
isPending={vendorEditor.isPending}
|
||||
phoneInvalid={vendorEditor.phoneInvalid}
|
||||
isValid={vendorEditor.isValid}
|
||||
onClose={vendorEditor.close}
|
||||
onSave={vendorEditor.save}
|
||||
onFieldChange={vendorEditor.updateField}
|
||||
|
||||
<WorkOrderVendorEditorDialog
|
||||
editor={view.vendorEditor}
|
||||
loading={view.vendorEditorLoading}
|
||||
error={view.vendorEditorError}
|
||||
isSaving={view.vendorMutation.isPending}
|
||||
onClose={() => {
|
||||
if (!view.vendorMutation.isPending) view.setVendorEditor(null);
|
||||
}}
|
||||
onSave={view.saveVendorEditor}
|
||||
onEditorChange={view.setVendorEditor}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { Box, Button, Paper, Tab, Tabs } from "@mui/material";
|
||||
import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
|
||||
import { CommentTimeline } from "@/components/common/comment-timeline";
|
||||
import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
|
||||
import type {
|
||||
WorkOrderAuditEntry,
|
||||
WorkOrderComment,
|
||||
} from "@/domain/work-orders/types/work-order-detail";
|
||||
import { WorkOrderAuditTimeline } from "@/app/(protected)/workorders/_components/view/work-order-audit-timeline";
|
||||
import { Text } from "@/components/ui/text";
|
||||
|
||||
export type WorkOrderActivityTab = "customer" | "internal" | "audit";
|
||||
|
||||
type MentionUser = { id: string | number; name: string };
|
||||
|
||||
type WorkOrderActivityPanelProps = {
|
||||
customerComments: WorkOrderComment[];
|
||||
internalComments: WorkOrderComment[];
|
||||
auditLog: WorkOrderAuditEntry[];
|
||||
mentionUsers: MentionUser[];
|
||||
isSubmitting: boolean;
|
||||
onSubmitComment: (text: string) => void | Promise<void>;
|
||||
};
|
||||
|
||||
export function WorkOrderActivityPanel({
|
||||
customerComments,
|
||||
internalComments,
|
||||
auditLog,
|
||||
mentionUsers,
|
||||
isSubmitting,
|
||||
onSubmitComment,
|
||||
}: WorkOrderActivityPanelProps) {
|
||||
const [activeTab, setActiveTab] = useState<WorkOrderActivityTab>("customer");
|
||||
const [commentText, setCommentText] = useState("");
|
||||
|
||||
const customerTimelineItems = useMemo(
|
||||
() => mapWorkOrderCommentsToTimeline(customerComments),
|
||||
[customerComments],
|
||||
);
|
||||
const internalTimelineItems = useMemo(
|
||||
() => mapWorkOrderCommentsToTimeline(internalComments),
|
||||
[internalComments],
|
||||
);
|
||||
|
||||
return (
|
||||
<Paper variant="outlined" className="p-4">
|
||||
<Text as="p" variant="heading" className="mb-3 font-semibold">
|
||||
Activity
|
||||
</Text>
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={(_event, value: WorkOrderActivityTab) => setActiveTab(value)}
|
||||
className="mb-3"
|
||||
>
|
||||
<Tab value="customer" label={`Customer (${customerComments.length})`} />
|
||||
<Tab value="internal" label={`Internal (${internalComments.length})`} />
|
||||
<Tab value="audit" label={`Audit Log (${auditLog.length})`} />
|
||||
</Tabs>
|
||||
|
||||
{activeTab === "customer" && (
|
||||
<CommentTimeline items={customerTimelineItems} mentionUsers={mentionUsers} />
|
||||
)}
|
||||
{activeTab === "internal" && (
|
||||
<CommentTimeline items={internalTimelineItems} mentionUsers={mentionUsers} />
|
||||
)}
|
||||
{activeTab === "audit" && <WorkOrderAuditTimeline entries={auditLog} />}
|
||||
|
||||
{activeTab === "internal" && (
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
const trimmed = commentText.trim();
|
||||
if (!trimmed) {
|
||||
return;
|
||||
}
|
||||
void (async () => {
|
||||
try {
|
||||
await onSubmitComment(trimmed);
|
||||
setCommentText("");
|
||||
} catch {
|
||||
// Mutation toast handles failure; keep the draft for retry.
|
||||
}
|
||||
})();
|
||||
}}
|
||||
className="mt-4 flex flex-col gap-2"
|
||||
>
|
||||
<CommentMentionComposer
|
||||
value={commentText}
|
||||
onChange={setCommentText}
|
||||
candidates={mentionUsers}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
className="self-end"
|
||||
disabled={isSubmitting || !commentText.trim()}
|
||||
>
|
||||
{isSubmitting ? "Sending..." : "Send"}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { useMemo } from "react";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
|
||||
import { formatDateTime } from "@/lib/time-utils";
|
||||
|
||||
export function WorkOrderAuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
|
||||
const sorted = useMemo(
|
||||
() =>
|
||||
[...entries].sort(
|
||||
(a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
|
||||
),
|
||||
[entries],
|
||||
);
|
||||
|
||||
if (!sorted.length) {
|
||||
return <Typography sx={{ color: "text.secondary" }}>No changes recorded.</Typography>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack spacing={2} className="max-h-72 overflow-y-auto">
|
||||
{sorted.map((entry) => (
|
||||
<Box key={String(entry.id)} className="rounded border border-border p-3">
|
||||
<Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
|
||||
<Typography variant="caption" className="font-semibold">
|
||||
{entry.userName || "System"}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary" }}>
|
||||
{entry.createdAt ? formatDateTime(entry.createdAt) : ""}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="body2">
|
||||
<strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
export function WorkOrderDetailField({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="body2">{value}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
|
||||
import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
|
||||
|
||||
type WorkOrderDispatchesAccordionProps = {
|
||||
wo: WorkOrderDetail;
|
||||
onOpenDispatchDetail: (dispatchId: string | number) => void;
|
||||
onOpenVendorEditor: (
|
||||
event: React.MouseEvent,
|
||||
vendorId: string | number,
|
||||
vendorName: string,
|
||||
) => void;
|
||||
};
|
||||
|
||||
export function WorkOrderDispatchesAccordion({
|
||||
wo,
|
||||
onOpenDispatchDetail,
|
||||
onOpenVendorEditor,
|
||||
}: WorkOrderDispatchesAccordionProps) {
|
||||
return (
|
||||
<Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{wo.dispatches.length ? (
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Dispatch #</TableCell>
|
||||
<TableCell>Vendor</TableCell>
|
||||
<TableCell>NTE</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Date</TableCell>
|
||||
<TableCell>Wait</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{wo.dispatches.map((dispatch) => {
|
||||
const waitColor = waitTimeColor(dispatch.dispatchedAt);
|
||||
return (
|
||||
<TableRow
|
||||
key={String(dispatch.id)}
|
||||
hover
|
||||
className="cursor-pointer"
|
||||
onClick={() => onOpenDispatchDetail(dispatch.id)}
|
||||
>
|
||||
<TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
|
||||
<TableCell>{dispatch.vendorName}</TableCell>
|
||||
<TableCell>
|
||||
{dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
|
||||
</TableCell>
|
||||
<TableCell>{dispatch.status}</TableCell>
|
||||
<TableCell>
|
||||
{dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{dispatch.status === "Sent" ? (
|
||||
<Typography
|
||||
variant="caption"
|
||||
className={
|
||||
waitColor === "green"
|
||||
? "text-green-600"
|
||||
: waitColor === "yellow"
|
||||
? "text-yellow-600"
|
||||
: "text-red-600"
|
||||
}
|
||||
>
|
||||
{timeSince(dispatch.dispatchedAt)}
|
||||
</Typography>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Button
|
||||
size="small"
|
||||
onClick={(event) =>
|
||||
void onOpenVendorEditor(event, dispatch.vendorId, dispatch.vendorName)
|
||||
}
|
||||
disabled={dispatch.vendorId === ""}
|
||||
>
|
||||
Edit vendor
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
) : (
|
||||
<Typography sx={{ color: "text.secondary" }}>No dispatches yet.</Typography>
|
||||
)}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
CircularProgress,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import type { VendorEditorState } from "./work-order-vendor-editor-types";
|
||||
import { formatPhoneMask, isVendorEditorValid } from "./work-order-vendor-editor-utils";
|
||||
|
||||
type WorkOrderVendorEditorDialogProps = {
|
||||
editor: VendorEditorState | null;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
isSaving: boolean;
|
||||
onClose: () => void;
|
||||
onSave: () => void;
|
||||
onEditorChange: (
|
||||
updater: (current: VendorEditorState | null) => VendorEditorState | null,
|
||||
) => void;
|
||||
};
|
||||
|
||||
export function WorkOrderVendorEditorDialog({
|
||||
editor,
|
||||
loading,
|
||||
error,
|
||||
isSaving,
|
||||
onClose,
|
||||
onSave,
|
||||
onEditorChange,
|
||||
}: WorkOrderVendorEditorDialogProps) {
|
||||
return (
|
||||
<Dialog open={editor !== null} onClose={onClose} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Edit assigned vendor</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} className="pt-2">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{editor?.vendorName}
|
||||
</Typography>
|
||||
{Boolean(error) && <Alert severity="error">{error}</Alert>}
|
||||
{loading ? (
|
||||
<Box className="flex justify-center p-6">
|
||||
<CircularProgress size={28} />
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<TextField
|
||||
label="Technician name"
|
||||
value={editor?.contactName ?? ""}
|
||||
onChange={(event) =>
|
||||
onEditorChange((current) =>
|
||||
current ? { ...current, contactName: event.target.value } : current,
|
||||
)
|
||||
}
|
||||
slotProps={{ htmlInput: { maxLength: 200 } }}
|
||||
/>
|
||||
<TextField
|
||||
label="Phone"
|
||||
value={editor?.phone ?? ""}
|
||||
onChange={(event) =>
|
||||
onEditorChange((current) =>
|
||||
current ? { ...current, phone: formatPhoneMask(event.target.value) } : current,
|
||||
)
|
||||
}
|
||||
error={Boolean(editor?.phone && !/^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone))}
|
||||
helperText="Use (XXX) XXX-XXXX"
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
type="email"
|
||||
value={editor?.email ?? ""}
|
||||
onChange={(event) =>
|
||||
onEditorChange((current) =>
|
||||
current ? { ...current, email: event.target.value } : current,
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
label="Notes"
|
||||
multiline
|
||||
minRows={3}
|
||||
value={editor?.notes ?? ""}
|
||||
onChange={(event) =>
|
||||
onEditorChange((current) =>
|
||||
current ? { ...current, notes: event.target.value } : current,
|
||||
)
|
||||
}
|
||||
slotProps={{ htmlInput: { maxLength: 2000 } }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} disabled={isSaving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onSave}
|
||||
disabled={!editor || loading || isSaving || !isVendorEditorValid(editor)}
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export interface VendorEditorState {
|
||||
vendorId: string | number;
|
||||
vendorName: string;
|
||||
contactName: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
notes: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import type { VendorEditorState } from "./work-order-vendor-editor-types";
|
||||
|
||||
export function formatPhoneMask(input: string): string {
|
||||
const digits = input.replace(/\D/g, "").slice(0, 10);
|
||||
if (digits.length <= 3) return digits;
|
||||
if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
|
||||
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
|
||||
}
|
||||
|
||||
export function isVendorEditorValid(editor: VendorEditorState): boolean {
|
||||
const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
|
||||
const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
|
||||
return (
|
||||
phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
|
||||
import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
|
||||
import { formatDateTime } from "@/lib/time-utils";
|
||||
|
||||
export function WorkOrderViewAccordions({ wo }: { wo: WorkOrderDetail }) {
|
||||
return (
|
||||
<>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography sx={{ fontWeight: 600 }}>Classification</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<WorkOrderDetailField label="Problem" value={wo.problem || "—"} />
|
||||
<WorkOrderDetailField label="Trade" value={wo.trade || "—"} />
|
||||
<WorkOrderDetailField label="Sub-Trade" value={wo.subTrade || "—"} />
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<WorkOrderDetailField
|
||||
label="Created"
|
||||
value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
|
||||
/>
|
||||
<WorkOrderDetailField label="Due Date" value={wo.dueDate || "—"} />
|
||||
<WorkOrderDetailField label="Scheduled" value={wo.scheduledDate || "—"} />
|
||||
<WorkOrderDetailField label="Completed" value={wo.completedDate || "—"} />
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography sx={{ fontWeight: 600 }}>Financial</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<WorkOrderDetailField
|
||||
label="Vendor NTE"
|
||||
value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
|
||||
/>
|
||||
<WorkOrderDetailField label="Customer PO" value={wo.po || "—"} />
|
||||
<WorkOrderDetailField label="Customer NTE" value="Not connected" />
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography sx={{ fontWeight: 600 }}>Description</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>{wo.description || "No description provided."}</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { Box, Button, Menu, MenuItem, Paper, Typography } from "@mui/material";
|
||||
import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
|
||||
import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
|
||||
import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
|
||||
import { Text } from "@/components/ui/text";
|
||||
|
||||
type WorkOrderViewDetailsProps = {
|
||||
wo: WorkOrderDetail;
|
||||
users: WorkOrderUser[];
|
||||
assignAnchor: HTMLElement | null;
|
||||
onAssignAnchorChange: (anchor: HTMLElement | null) => void;
|
||||
onAssign: (userId: string | number, userName: string) => void;
|
||||
onUnassign: () => void;
|
||||
};
|
||||
|
||||
export function WorkOrderViewDetails({
|
||||
wo,
|
||||
users,
|
||||
assignAnchor,
|
||||
onAssignAnchorChange,
|
||||
onAssign,
|
||||
onUnassign,
|
||||
}: WorkOrderViewDetailsProps) {
|
||||
return (
|
||||
<Paper variant="outlined" className="p-4">
|
||||
<Text as="p" variant="heading" className="mb-3 font-semibold">
|
||||
Details
|
||||
</Text>
|
||||
<Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<WorkOrderDetailField label="Internal WO" value={wo.internalWONumber} />
|
||||
<WorkOrderDetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
|
||||
<WorkOrderDetailField label="Priority" value={wo.priority || "—"} />
|
||||
<WorkOrderDetailField label="Location" value={wo.location || "—"} />
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
|
||||
Assigned To
|
||||
</Typography>
|
||||
<Button size="small" onClick={(event) => onAssignAnchorChange(event.currentTarget)}>
|
||||
{wo.assignedTo || "Unassigned"}
|
||||
</Button>
|
||||
<Menu
|
||||
anchorEl={assignAnchor}
|
||||
open={Boolean(assignAnchor)}
|
||||
onClose={() => onAssignAnchorChange(null)}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
onAssignAnchorChange(null);
|
||||
onUnassign();
|
||||
}}
|
||||
>
|
||||
Unassigned
|
||||
</MenuItem>
|
||||
{users.map((user) => (
|
||||
<MenuItem
|
||||
key={String(user.id)}
|
||||
selected={wo.assignedTo === user.name}
|
||||
onClick={() => {
|
||||
onAssignAnchorChange(null);
|
||||
onAssign(user.id, user.name);
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
<WorkOrderDetailField label="Source" value={wo.source || "—"} />
|
||||
<WorkOrderDetailField label="TT" value={wo.tt || "—"} />
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { Link as RouterLink, useNavigate } from "react-router";
|
||||
import { Breadcrumbs, Button, Chip, Link, Menu, MenuItem, Stack, Typography } from "@mui/material";
|
||||
import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
|
||||
import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
|
||||
|
||||
const STATUS_COLORS: Record<
|
||||
string,
|
||||
"default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
|
||||
> = {
|
||||
Open: "primary",
|
||||
"In Progress": "info",
|
||||
"On Hold": "warning",
|
||||
Done: "success",
|
||||
Cancelled: "default",
|
||||
};
|
||||
|
||||
type WorkOrderViewHeaderProps = {
|
||||
wo: WorkOrderDetail;
|
||||
workOrderId: string;
|
||||
statusAnchor: HTMLElement | null;
|
||||
onStatusAnchorChange: (anchor: HTMLElement | null) => void;
|
||||
onStatusChange: (status: string) => void;
|
||||
onOpenDispatch: () => void;
|
||||
};
|
||||
|
||||
export function WorkOrderViewHeader({
|
||||
wo,
|
||||
workOrderId,
|
||||
statusAnchor,
|
||||
onStatusAnchorChange,
|
||||
onStatusChange,
|
||||
onOpenDispatch,
|
||||
}: WorkOrderViewHeaderProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumbs>
|
||||
<Link component={RouterLink} to="/workorders" underline="hover">
|
||||
Work Orders
|
||||
</Link>
|
||||
<Typography sx={{ color: "text.primary" }}>{wo.internalWONumber}</Typography>
|
||||
</Breadcrumbs>
|
||||
<Stack
|
||||
direction={{ xs: "column", md: "row" }}
|
||||
spacing={2}
|
||||
sx={{ justifyContent: "space-between", alignItems: { xs: "stretch", md: "flex-start" } }}
|
||||
>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h5" component="h1">
|
||||
{wo.title}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={wo.status}
|
||||
color={STATUS_COLORS[wo.status] ?? "default"}
|
||||
onClick={(event) => onStatusAnchorChange(event.currentTarget)}
|
||||
className="w-fit cursor-pointer"
|
||||
/>
|
||||
<Menu
|
||||
anchorEl={statusAnchor}
|
||||
open={Boolean(statusAnchor)}
|
||||
onClose={() => onStatusAnchorChange(null)}
|
||||
>
|
||||
{WORK_ORDER_STATUS_OPTIONS.map((status) => (
|
||||
<MenuItem
|
||||
key={status}
|
||||
selected={status === wo.status}
|
||||
onClick={() => {
|
||||
onStatusAnchorChange(null);
|
||||
if (status !== wo.status) {
|
||||
onStatusChange(status);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{status}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
|
||||
<Button variant="contained" color="success" onClick={onOpenDispatch}>
|
||||
Dispatch
|
||||
</Button>
|
||||
<Button variant="contained" onClick={() => navigate(`/workorders/edit/${workOrderId}`)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => navigate("/workorders")}>
|
||||
Back to List
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import type { VendorEditorState } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-types";
|
||||
import { isVendorEditorValid } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils";
|
||||
import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
|
||||
import {
|
||||
useAddWorkOrderComment,
|
||||
useChangeWorkOrderAssignment,
|
||||
useChangeWorkOrderStatus,
|
||||
useUpdateWorkOrderVendor,
|
||||
} from "@/domain/work-orders/use-cases/use-work-order-mutations";
|
||||
import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
|
||||
import { vendorsApi } from "@/domain/vendors/api/vendors-api";
|
||||
import { extractMentionIds } from "@/domain/work-orders/utils/comment-mentions";
|
||||
|
||||
export function useWorkOrderViewPage(workOrderId: string) {
|
||||
const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
|
||||
const { data: users = [] } = useWorkOrderUsers();
|
||||
const statusMutation = useChangeWorkOrderStatus(workOrderId);
|
||||
const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
|
||||
const commentMutation = useAddWorkOrderComment(workOrderId);
|
||||
const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
|
||||
|
||||
const [dispatchOpen, setDispatchOpen] = useState(false);
|
||||
const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
|
||||
const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
|
||||
const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
|
||||
const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
|
||||
const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
|
||||
const [vendorEditorError, setVendorEditorError] = useState("");
|
||||
|
||||
const customerComments = useMemo(
|
||||
() => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
|
||||
[wo?.comments],
|
||||
);
|
||||
const internalComments = useMemo(
|
||||
() => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
|
||||
[wo?.comments],
|
||||
);
|
||||
const auditLog = wo?.auditLog ?? [];
|
||||
const mentionUsers = useMemo(
|
||||
() => users.map((user) => ({ id: user.id, name: user.name })),
|
||||
[users],
|
||||
);
|
||||
|
||||
const submitComment = async (text: string) => {
|
||||
const mentions = extractMentionIds(text);
|
||||
await commentMutation.mutateAsync({
|
||||
text,
|
||||
mentions: mentions.length > 0 ? mentions : undefined,
|
||||
commentType: "internal",
|
||||
});
|
||||
};
|
||||
|
||||
const openVendorEditor = async (
|
||||
event: React.MouseEvent,
|
||||
vendorId: string | number,
|
||||
vendorName: string,
|
||||
) => {
|
||||
event.stopPropagation();
|
||||
setVendorEditorError("");
|
||||
setVendorEditorLoading(true);
|
||||
setVendorEditor({
|
||||
vendorId,
|
||||
vendorName,
|
||||
contactName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
try {
|
||||
const vendor = await vendorsApi.getById(vendorId);
|
||||
setVendorEditor({
|
||||
vendorId,
|
||||
vendorName: vendor.companyName || vendorName,
|
||||
contactName: vendor.contactName,
|
||||
phone: vendor.phone,
|
||||
email: vendor.email,
|
||||
notes: vendor.notes,
|
||||
});
|
||||
} catch (vendorError) {
|
||||
setVendorEditorError(
|
||||
vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
|
||||
);
|
||||
} finally {
|
||||
setVendorEditorLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const saveVendorEditor = () => {
|
||||
if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
|
||||
const numericWorkOrderId = Number(workOrderId);
|
||||
if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
|
||||
setVendorEditorError("A valid work order is required");
|
||||
return;
|
||||
}
|
||||
|
||||
vendorMutation.mutate(
|
||||
{
|
||||
vendorId: vendorEditor.vendorId,
|
||||
payload: {
|
||||
workOrderId: numericWorkOrderId,
|
||||
contactName: vendorEditor.contactName.trim(),
|
||||
phone: vendorEditor.phone,
|
||||
email: vendorEditor.email.trim(),
|
||||
notes: vendorEditor.notes.trim(),
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setVendorEditor(null);
|
||||
void refetch();
|
||||
},
|
||||
onError: (vendorError) => setVendorEditorError(vendorError.message),
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
wo,
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
users,
|
||||
customerComments,
|
||||
internalComments,
|
||||
auditLog,
|
||||
mentionUsers,
|
||||
submitComment,
|
||||
dispatchOpen,
|
||||
setDispatchOpen,
|
||||
dispatchDetailId,
|
||||
setDispatchDetailId,
|
||||
statusAnchor,
|
||||
setStatusAnchor,
|
||||
assignAnchor,
|
||||
setAssignAnchor,
|
||||
vendorEditor,
|
||||
setVendorEditor,
|
||||
vendorEditorLoading,
|
||||
vendorEditorError,
|
||||
openVendorEditor,
|
||||
saveVendorEditor,
|
||||
statusMutation,
|
||||
assignmentMutation,
|
||||
commentMutation,
|
||||
vendorMutation,
|
||||
};
|
||||
}
|
||||
44
src/components/common/comment-body-with-mentions.tsx
Normal file
44
src/components/common/comment-body-with-mentions.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { useMemo } from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import {
|
||||
buildCommentBodySegments,
|
||||
type MentionLookup,
|
||||
} from "@/domain/work-orders/utils/comment-mentions";
|
||||
|
||||
type CommentBodyWithMentionsProps = {
|
||||
text: string;
|
||||
mentions?: string[];
|
||||
users?: MentionLookup[];
|
||||
};
|
||||
|
||||
export function CommentBodyWithMentions({ text, mentions, users }: CommentBodyWithMentionsProps) {
|
||||
const segments = useMemo(
|
||||
() => buildCommentBodySegments(text, mentions, users),
|
||||
[text, mentions, users],
|
||||
);
|
||||
|
||||
if (segments.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Text variant="description" as="span">
|
||||
{segments.map((segment, index) => {
|
||||
if (segment.type === "text") {
|
||||
return <span key={`text-${index}`}>{segment.value}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="span"
|
||||
key={`mention-${segment.userId}-${index}`}
|
||||
className="font-semibold text-primary"
|
||||
>
|
||||
@{segment.label}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
205
src/components/common/comment-mention-composer.tsx
Normal file
205
src/components/common/comment-mention-composer.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
ClickAwayListener,
|
||||
List,
|
||||
ListItemButton,
|
||||
Paper,
|
||||
Popper,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
filterMentionCandidates,
|
||||
findActiveMentionQuery,
|
||||
insertMentionToken,
|
||||
type MentionLookup,
|
||||
} from "@/domain/work-orders/utils/comment-mentions";
|
||||
|
||||
type CommentMentionComposerProps = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
candidates: MentionLookup[];
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
rows?: number;
|
||||
onSubmit?: () => void;
|
||||
};
|
||||
|
||||
type MentionCandidateMenuProps = {
|
||||
open: boolean;
|
||||
anchorEl: HTMLElement | null;
|
||||
candidates: MentionLookup[];
|
||||
highlightIndex: number;
|
||||
onSelect: (user: MentionLookup) => void;
|
||||
};
|
||||
|
||||
function MentionCandidateMenu({
|
||||
open,
|
||||
anchorEl,
|
||||
candidates,
|
||||
highlightIndex,
|
||||
onSelect,
|
||||
}: MentionCandidateMenuProps) {
|
||||
return (
|
||||
<Popper open={open} anchorEl={anchorEl} placement="bottom-start" className="z-50">
|
||||
<Paper elevation={4} className="mt-1 max-h-48 overflow-y-auto">
|
||||
<List dense disablePadding>
|
||||
{candidates.map((candidate, index) => (
|
||||
<ListItemButton
|
||||
key={String(candidate.id)}
|
||||
selected={index === highlightIndex}
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
onClick={() => onSelect(candidate)}
|
||||
>
|
||||
@{candidate.name}
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
</Popper>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommentMentionComposer({
|
||||
value,
|
||||
onChange,
|
||||
candidates,
|
||||
placeholder = "Type a comment...",
|
||||
disabled = false,
|
||||
rows = 2,
|
||||
onSubmit,
|
||||
}: CommentMentionComposerProps) {
|
||||
const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
|
||||
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
|
||||
const [cursor, setCursor] = useState(0);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [highlightIndex, setHighlightIndex] = useState(0);
|
||||
|
||||
const activeQuery = useMemo(() => findActiveMentionQuery(value, cursor), [value, cursor]);
|
||||
|
||||
const filteredCandidates = useMemo(
|
||||
() => filterMentionCandidates(candidates, activeQuery?.query ?? ""),
|
||||
[activeQuery?.query, candidates],
|
||||
);
|
||||
|
||||
const showMenu = Boolean(menuOpen && activeQuery && filteredCandidates.length > 0);
|
||||
|
||||
useEffect(() => {
|
||||
setHighlightIndex(0);
|
||||
}, [activeQuery?.query, activeQuery?.start]);
|
||||
|
||||
const syncCursor = useCallback((textOverride?: string) => {
|
||||
const element = inputRef.current;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const text = textOverride ?? element.value;
|
||||
const nextCursor = element.selectionStart ?? text.length;
|
||||
setCursor(nextCursor);
|
||||
setMenuOpen(Boolean(findActiveMentionQuery(text, nextCursor)));
|
||||
}, []);
|
||||
|
||||
const handleChange = (nextValue: string) => {
|
||||
onChange(nextValue);
|
||||
requestAnimationFrame(() => {
|
||||
syncCursor(nextValue);
|
||||
});
|
||||
};
|
||||
|
||||
const applyMention = useCallback(
|
||||
(user: MentionLookup) => {
|
||||
if (!activeQuery) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { nextText, nextCursor } = insertMentionToken(value, activeQuery.start, cursor, user);
|
||||
onChange(nextText);
|
||||
setMenuOpen(false);
|
||||
setHighlightIndex(0);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const element = inputRef.current;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.focus();
|
||||
element.setSelectionRange(nextCursor, nextCursor);
|
||||
setCursor(nextCursor);
|
||||
});
|
||||
},
|
||||
[activeQuery, cursor, onChange, value],
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (showMenu) {
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
setHighlightIndex((current) => (current + 1) % filteredCandidates.length);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
setHighlightIndex(
|
||||
(current) => (current - 1 + filteredCandidates.length) % filteredCandidates.length,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
const selected = filteredCandidates[highlightIndex];
|
||||
if (selected) {
|
||||
applyMention(selected);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
setMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onSubmit) {
|
||||
event.preventDefault();
|
||||
onSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ClickAwayListener onClickAway={() => setMenuOpen(false)}>
|
||||
<Box
|
||||
className="relative"
|
||||
ref={(node: HTMLDivElement | null) => {
|
||||
setAnchorEl(node);
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
inputRef={inputRef}
|
||||
multiline
|
||||
rows={rows}
|
||||
fullWidth
|
||||
value={value}
|
||||
onChange={(event) => handleChange(event.target.value)}
|
||||
onClick={() => syncCursor()}
|
||||
onKeyUp={() => syncCursor()}
|
||||
onSelect={() => syncCursor()}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<MentionCandidateMenu
|
||||
open={showMenu}
|
||||
anchorEl={anchorEl}
|
||||
candidates={filteredCandidates}
|
||||
highlightIndex={highlightIndex}
|
||||
onSelect={applyMention}
|
||||
/>
|
||||
</Box>
|
||||
</ClickAwayListener>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ type CommentSource = {
|
|||
commenter?: string | null;
|
||||
createdDate?: string;
|
||||
commenttext: string;
|
||||
mentions?: string[];
|
||||
};
|
||||
|
||||
export function mapWorkOrderCommentsToTimeline(comments: CommentSource[]): CommentTimelineItem[] {
|
||||
|
|
@ -14,6 +15,7 @@ export function mapWorkOrderCommentsToTimeline(comments: CommentSource[]): Comme
|
|||
author: comment.userName || comment.commenter || "System",
|
||||
createdAt: comment.createdDate,
|
||||
body: comment.commenttext,
|
||||
mentions: comment.mentions,
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { useMemo } from "react";
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import { CommentBodyWithMentions } from "@/components/common/comment-body-with-mentions";
|
||||
import { Text } from "@/components/ui/text";
|
||||
import type { MentionLookup } from "@/domain/work-orders/utils/comment-mentions";
|
||||
import { formatDateTime } from "@/lib/time-utils";
|
||||
|
||||
export type CommentTimelineItem = {
|
||||
|
|
@ -7,18 +10,20 @@ export type CommentTimelineItem = {
|
|||
author: string;
|
||||
createdAt?: string;
|
||||
body: string;
|
||||
mentions?: string[];
|
||||
};
|
||||
|
||||
type CommentTimelineProps = {
|
||||
items: CommentTimelineItem[];
|
||||
emptyMessage?: string;
|
||||
maxHeightClass?: string;
|
||||
mentionUsers?: MentionLookup[];
|
||||
};
|
||||
|
||||
export function CommentTimeline({
|
||||
items,
|
||||
emptyMessage = "No comments yet.",
|
||||
maxHeightClass = "max-h-72",
|
||||
mentionUsers,
|
||||
}: CommentTimelineProps) {
|
||||
const sorted = useMemo(
|
||||
() =>
|
||||
|
|
@ -31,7 +36,7 @@ export function CommentTimeline({
|
|||
);
|
||||
|
||||
if (!sorted.length) {
|
||||
return <Typography color="text.secondary">{emptyMessage}</Typography>;
|
||||
return <Text tone="muted">{emptyMessage}</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -39,14 +44,14 @@ export function CommentTimeline({
|
|||
{sorted.map((item) => (
|
||||
<Box key={String(item.id)} className="rounded border border-border p-3">
|
||||
<Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
|
||||
<Typography variant="caption" className="font-semibold">
|
||||
<Text variant="caption" className="font-semibold">
|
||||
{item.author}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
</Text>
|
||||
<Text variant="caption" tone="muted">
|
||||
{item.createdAt ? formatDateTime(item.createdAt) : ""}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Stack>
|
||||
<Typography variant="body2">{item.body}</Typography>
|
||||
<CommentBodyWithMentions text={item.body} mentions={item.mentions} users={mentionUsers} />
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@ import type {
|
|||
} from "@/domain/work-orders/types/work-order-board-detail";
|
||||
import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
|
||||
|
||||
export interface CreateWorkOrderCommentPayload {
|
||||
text: string;
|
||||
mentions?: string[];
|
||||
}
|
||||
|
||||
async function readResponseJson(response: Response): Promise<unknown> {
|
||||
try {
|
||||
return await response.json();
|
||||
|
|
@ -57,8 +62,17 @@ export const workOrderBoardDocumentsApi = {
|
|||
return Array.isArray(items) ? items.map(mapBoardDetailComment) : [];
|
||||
},
|
||||
|
||||
createComment: async (workOrderId: string | number, text: string): Promise<WorkOrderComment> => {
|
||||
const data = await apiPost<unknown>(API_PATHS.workOrder.comments(workOrderId), { text });
|
||||
createComment: async (
|
||||
workOrderId: string | number,
|
||||
text: string,
|
||||
mentions?: string[],
|
||||
): Promise<WorkOrderComment> => {
|
||||
const payload: CreateWorkOrderCommentPayload = { text };
|
||||
if (mentions && mentions.length > 0) {
|
||||
payload.mentions = mentions.map(String);
|
||||
}
|
||||
|
||||
const data = await apiPost<unknown>(API_PATHS.workOrder.comments(workOrderId), payload);
|
||||
return mapBoardDetailComment(handleApiResponse(data));
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,33 @@ function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolea
|
|||
return false;
|
||||
}
|
||||
|
||||
function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
|
||||
for (const key of keys) {
|
||||
const value = record[key];
|
||||
if (!Array.isArray(value)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const mapped = value
|
||||
.map((entry) => {
|
||||
if (typeof entry === "string") {
|
||||
return entry;
|
||||
}
|
||||
if (typeof entry === "number" || typeof entry === "boolean") {
|
||||
return String(entry);
|
||||
}
|
||||
return "";
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (mapped.length > 0) {
|
||||
return mapped;
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
function mapDocStatus(raw: unknown): CompletionDocStatus {
|
||||
const numeric = typeof raw === "number" ? raw : Number(raw);
|
||||
if (numeric === DOC_STATUS_API.Yes) return "Yes";
|
||||
|
|
@ -93,6 +120,7 @@ export function mapBoardDetailComment(raw: unknown): WorkOrderComment {
|
|||
authorId,
|
||||
commenter: readString(item, "commenter", "Commenter") || null,
|
||||
recordType: readString(item, "recordType", "RecordType") || null,
|
||||
mentions: readStringArray(item, "mentions", "Mentions"),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -215,6 +215,12 @@ export { mapWorkOrderTableRow, mapWorkOrderTableRows } from "./work-order-table-
|
|||
|
||||
export function mapWorkOrderComment(raw: unknown): WorkOrderComment {
|
||||
const item = asRecord(raw);
|
||||
const mentionsRaw = item.mentions ?? item.Mentions;
|
||||
const mentions = Array.isArray(mentionsRaw)
|
||||
? mentionsRaw
|
||||
.map((entry) => (typeof entry === "string" ? entry : String(entry)))
|
||||
.filter(Boolean)
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
id: readId(item),
|
||||
|
|
@ -224,6 +230,7 @@ export function mapWorkOrderComment(raw: unknown): WorkOrderComment {
|
|||
userName: readString(item, "userName", "UserName"),
|
||||
commenter: readString(item, "commenter", "Commenter") || null,
|
||||
recordType: readString(item, "recordType", "RecordType") || null,
|
||||
mentions,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ export interface WorkOrderBoardDetailCommentApi {
|
|||
text?: string | null;
|
||||
time?: string | null;
|
||||
documents?: unknown;
|
||||
mentions?: string[] | null;
|
||||
}
|
||||
|
||||
export interface WorkOrderBoardDetailAuditApi {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ export interface WorkOrderComment {
|
|||
authorId?: string | null;
|
||||
commenter: string | null;
|
||||
recordType: string | null;
|
||||
/** Mentioned user ids when returned by board comments API. */
|
||||
mentions?: string[];
|
||||
}
|
||||
|
||||
export interface WorkOrderAuditEntry {
|
||||
|
|
|
|||
|
|
@ -38,8 +38,9 @@ function invalidateBoardDetail(
|
|||
void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
|
||||
}
|
||||
|
||||
interface AddWorkOrderCommentInput {
|
||||
export interface AddWorkOrderCommentInput {
|
||||
text: string;
|
||||
mentions?: string[];
|
||||
commentType?: "customer" | "internal";
|
||||
}
|
||||
|
||||
|
|
@ -78,12 +79,12 @@ export interface AddDispatchSignoffInput {
|
|||
signatureMethod: string;
|
||||
}
|
||||
|
||||
interface ChangeWorkOrderAssignmentInput {
|
||||
export interface ChangeWorkOrderAssignmentInput {
|
||||
userId: string | number;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
interface UpdateWorkOrderVendorInput {
|
||||
export interface UpdateWorkOrderVendorInput {
|
||||
vendorId: string | number;
|
||||
payload: WorkOrderVendorUpdatePayload;
|
||||
}
|
||||
|
|
@ -157,8 +158,8 @@ export function useAddWorkOrderComment(
|
|||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ text }: AddWorkOrderCommentInput) =>
|
||||
workOrdersApi.createComment(workOrderId, text),
|
||||
mutationFn: ({ text, mentions }: AddWorkOrderCommentInput) =>
|
||||
workOrdersApi.createComment(workOrderId, text, mentions),
|
||||
onSuccess: () => {
|
||||
invalidateBoardDetail(queryClient, workOrderId);
|
||||
},
|
||||
|
|
|
|||
188
src/domain/work-orders/utils/comment-mentions.ts
Normal file
188
src/domain/work-orders/utils/comment-mentions.ts
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
/** Encoded mention token stored in comment text: `@[userId:Display Name]`. */
|
||||
export const MENTION_TOKEN_PATTERN = /@\[([^:\]]+):([^\]]+)\]/g;
|
||||
|
||||
export type CommentBodySegment =
|
||||
{ type: "text"; value: string } | { type: "mention"; userId: string; label: string };
|
||||
|
||||
export type MentionLookup = {
|
||||
id: string | number;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function encodeMentionToken(userId: string | number, userName: string): string {
|
||||
const trimmedName = userName.trim();
|
||||
return `@[${String(userId)}:${trimmedName}]`;
|
||||
}
|
||||
|
||||
export function extractMentionIds(text: string): string[] {
|
||||
const ids: string[] = [];
|
||||
const pattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
|
||||
|
||||
for (const match of text.matchAll(pattern)) {
|
||||
const userId = match[1];
|
||||
if (userId && !ids.includes(userId)) {
|
||||
ids.push(userId);
|
||||
}
|
||||
}
|
||||
|
||||
return ids;
|
||||
}
|
||||
|
||||
export function toDisplayText(text: string): string {
|
||||
return text.replace(MENTION_TOKEN_PATTERN, (_full, _userId: string, userName: string) => {
|
||||
return `@${userName}`;
|
||||
});
|
||||
}
|
||||
|
||||
function escapeRegExp(value: string): string {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
function pushTextSegment(segments: CommentBodySegment[], value: string): void {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const last = segments.length > 0 ? segments[segments.length - 1] : undefined;
|
||||
if (last?.type === "text") {
|
||||
last.value += value;
|
||||
return;
|
||||
}
|
||||
|
||||
segments.push({ type: "text", value });
|
||||
}
|
||||
|
||||
function resolveMentionNames(
|
||||
mentionIds: string[] | undefined,
|
||||
users: MentionLookup[] | undefined,
|
||||
): Map<string, string> {
|
||||
const byId = new Map<string, string>();
|
||||
const usersById = new Map((users ?? []).map((user) => [String(user.id), user.name] as const));
|
||||
|
||||
// Only ids that were actually mentioned — never seed the full dispatcher roster.
|
||||
for (const mentionId of mentionIds ?? []) {
|
||||
const id = String(mentionId);
|
||||
byId.set(id, usersById.get(id) ?? id);
|
||||
}
|
||||
|
||||
return byId;
|
||||
}
|
||||
|
||||
function appendPlainMentionMatches(
|
||||
segments: CommentBodySegment[],
|
||||
plainText: string,
|
||||
mentionNames: string[],
|
||||
): void {
|
||||
if (!plainText || mentionNames.length === 0) {
|
||||
pushTextSegment(segments, plainText);
|
||||
return;
|
||||
}
|
||||
|
||||
const sortedNames = [...mentionNames].sort((a, b) => b.length - a.length);
|
||||
const namePattern = sortedNames.map((name) => escapeRegExp(name)).join("|");
|
||||
// Require a non-word boundary after the name so "@Ann" does not match inside "@Annual".
|
||||
const mentionRegex = new RegExp(`@(${namePattern})(?![\\w])`, "g");
|
||||
|
||||
let cursor = 0;
|
||||
for (const match of plainText.matchAll(mentionRegex)) {
|
||||
const index = match.index ?? 0;
|
||||
pushTextSegment(segments, plainText.slice(cursor, index));
|
||||
|
||||
const label = match[1] ?? "";
|
||||
segments.push({ type: "mention", userId: label, label });
|
||||
cursor = index + match[0].length;
|
||||
}
|
||||
|
||||
pushTextSegment(segments, plainText.slice(cursor));
|
||||
}
|
||||
|
||||
export function buildCommentBodySegments(
|
||||
text: string,
|
||||
mentionIds?: string[],
|
||||
users?: MentionLookup[],
|
||||
): CommentBodySegment[] {
|
||||
if (!text) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const segments: CommentBodySegment[] = [];
|
||||
const encodedPattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
|
||||
const mentionNameById = resolveMentionNames(mentionIds, users);
|
||||
const encodedLabels: string[] = [];
|
||||
for (const match of text.matchAll(new RegExp(MENTION_TOKEN_PATTERN.source, "g"))) {
|
||||
const label = match[2]?.trim();
|
||||
if (label) encodedLabels.push(label);
|
||||
}
|
||||
const mentionNames = [...new Set([...mentionNameById.values(), ...encodedLabels])].filter(
|
||||
Boolean,
|
||||
);
|
||||
let cursor = 0;
|
||||
|
||||
for (const match of text.matchAll(encodedPattern)) {
|
||||
const index = match.index ?? 0;
|
||||
const plainBetween = text.slice(cursor, index);
|
||||
appendPlainMentionMatches(segments, plainBetween, mentionNames);
|
||||
|
||||
const userId = match[1] ?? "";
|
||||
const label = match[2] ?? userId;
|
||||
segments.push({ type: "mention", userId, label });
|
||||
cursor = index + match[0].length;
|
||||
}
|
||||
|
||||
const trailingPlain = text.slice(cursor);
|
||||
appendPlainMentionMatches(segments, trailingPlain, mentionNames);
|
||||
|
||||
return segments.length > 0 ? segments : [{ type: "text", value: text }];
|
||||
}
|
||||
|
||||
export type ActiveMentionQuery = {
|
||||
start: number;
|
||||
query: string;
|
||||
};
|
||||
|
||||
export function findActiveMentionQuery(text: string, cursor: number): ActiveMentionQuery | null {
|
||||
const beforeCursor = text.slice(0, cursor);
|
||||
const atIndex = beforeCursor.lastIndexOf("@");
|
||||
|
||||
if (atIndex < 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const prefix = beforeCursor.slice(0, atIndex);
|
||||
const lastPrefixChar = prefix.length > 0 ? prefix[prefix.length - 1] : "";
|
||||
if (prefix.length > 0 && !/\s/.test(lastPrefixChar)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const query = beforeCursor.slice(atIndex + 1);
|
||||
if (/[\n\r\t[\]]/.test(query)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return { start: atIndex, query };
|
||||
}
|
||||
|
||||
export function filterMentionCandidates(
|
||||
candidates: MentionLookup[],
|
||||
query: string,
|
||||
): MentionLookup[] {
|
||||
const normalized = query.trim().toLowerCase();
|
||||
const filtered = normalized
|
||||
? candidates.filter((candidate) => candidate.name.toLowerCase().includes(normalized))
|
||||
: candidates;
|
||||
|
||||
return filtered.slice(0, 8);
|
||||
}
|
||||
|
||||
export function insertMentionToken(
|
||||
text: string,
|
||||
queryStart: number,
|
||||
cursor: number,
|
||||
user: MentionLookup,
|
||||
): { nextText: string; nextCursor: number } {
|
||||
const token = `${encodeMentionToken(user.id, user.name)} `;
|
||||
const nextText = `${text.slice(0, queryStart)}${token}${text.slice(cursor)}`;
|
||||
const nextCursor = queryStart + token.length;
|
||||
|
||||
return { nextText, nextCursor };
|
||||
}
|
||||
28
src/test/components/common/comment-mention-composer.test.tsx
Normal file
28
src/test/components/common/comment-mention-composer.test.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { useState } from "react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
|
||||
import { renderWithProviders } from "@/test/test-utils";
|
||||
|
||||
const candidates = [{ id: "1", name: "Alice Dispatcher" }];
|
||||
|
||||
function MentionComposerHarness() {
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
return <CommentMentionComposer value={value} onChange={setValue} candidates={candidates} />;
|
||||
}
|
||||
|
||||
describe("CommentMentionComposer", () => {
|
||||
it("keeps the suggestion menu visible after typing @", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithProviders(<MentionComposerHarness />, { withAuth: false });
|
||||
|
||||
await user.type(screen.getByRole("textbox"), "@");
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("button", { name: "@Alice Dispatcher" })).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -380,6 +380,15 @@ describe("workOrdersApi.createComment", () => {
|
|||
expect(comment.authorId).toBe("guid");
|
||||
expect(comment.createdDate).toBe("2026-06-01T12:00:00.0000000Z");
|
||||
});
|
||||
|
||||
it("POSTs mentions when provided", async () => {
|
||||
await workOrdersApi.createComment(55, "Ping @[u1:Jane]", ["u1"]);
|
||||
|
||||
expect(apiPost).toHaveBeenCalledWith(API_PATHS.workOrder.comments(55), {
|
||||
text: "Ping @[u1:Jane]",
|
||||
mentions: ["u1"],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("workOrdersApi.updateComment", () => {
|
||||
|
|
|
|||
118
src/test/domain/work-orders/utils/comment-mentions.test.ts
Normal file
118
src/test/domain/work-orders/utils/comment-mentions.test.ts
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
buildCommentBodySegments,
|
||||
encodeMentionToken,
|
||||
extractMentionIds,
|
||||
filterMentionCandidates,
|
||||
findActiveMentionQuery,
|
||||
insertMentionToken,
|
||||
toDisplayText,
|
||||
} from "@/domain/work-orders/utils/comment-mentions";
|
||||
|
||||
describe("comment-mentions", () => {
|
||||
it("encodes and extracts mention ids from tokens", () => {
|
||||
const token = encodeMentionToken("user-1", "Jane Doe");
|
||||
const text = `Please review ${token} today`;
|
||||
|
||||
expect(text).toBe("Please review @[user-1:Jane Doe] today");
|
||||
expect(extractMentionIds(text)).toEqual(["user-1"]);
|
||||
expect(toDisplayText(text)).toBe("Please review @Jane Doe today");
|
||||
});
|
||||
|
||||
it("builds highlight segments from encoded tokens", () => {
|
||||
const text = `Hi ${encodeMentionToken("42", "Alex Smith")}!`;
|
||||
|
||||
expect(buildCommentBodySegments(text)).toEqual([
|
||||
{ type: "text", value: "Hi " },
|
||||
{ type: "mention", userId: "42", label: "Alex Smith" },
|
||||
{ type: "text", value: "!" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("highlights plain @names when response mentions are provided", () => {
|
||||
const text = "Ping @Jane Doe about this";
|
||||
|
||||
expect(
|
||||
buildCommentBodySegments(text, ["user-1"], [{ id: "user-1", name: "Jane Doe" }]),
|
||||
).toEqual([
|
||||
{ type: "text", value: "Ping " },
|
||||
{ type: "mention", userId: "Jane Doe", label: "Jane Doe" },
|
||||
{ type: "text", value: " about this" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("does not highlight casual @names from the full user roster without mentions", () => {
|
||||
const text = "See @Jane Doe later";
|
||||
|
||||
expect(buildCommentBodySegments(text, undefined, [{ id: "user-1", name: "Jane Doe" }])).toEqual(
|
||||
[{ type: "text", value: "See @Jane Doe later" }],
|
||||
);
|
||||
});
|
||||
|
||||
it("highlights plain @names before encoded tokens when mentioned", () => {
|
||||
const encoded = encodeMentionToken("2", "Bob");
|
||||
const text = `Hi @Jane Doe and ${encoded}`;
|
||||
|
||||
expect(
|
||||
buildCommentBodySegments(
|
||||
text,
|
||||
["user-1", "2"],
|
||||
[
|
||||
{ id: "user-1", name: "Jane Doe" },
|
||||
{ id: "2", name: "Bob" },
|
||||
],
|
||||
),
|
||||
).toEqual([
|
||||
{ type: "text", value: "Hi " },
|
||||
{ type: "mention", userId: "Jane Doe", label: "Jane Doe" },
|
||||
{ type: "text", value: " and " },
|
||||
{ type: "mention", userId: "2", label: "Bob" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("does not highlight shorter mention names as prefixes of longer @words", () => {
|
||||
const text = "Check @Annual maintenance with @Ann";
|
||||
|
||||
expect(buildCommentBodySegments(text, ["user-ann"], [{ id: "user-ann", name: "Ann" }])).toEqual(
|
||||
[
|
||||
{ type: "text", value: "Check @Annual maintenance with " },
|
||||
{ type: "mention", userId: "Ann", label: "Ann" },
|
||||
],
|
||||
);
|
||||
});
|
||||
|
||||
it("finds active mention query at cursor", () => {
|
||||
const text = "Hello @ja";
|
||||
const query = findActiveMentionQuery(text, text.length);
|
||||
|
||||
expect(query).toEqual({ start: 6, query: "ja" });
|
||||
expect(findActiveMentionQuery("email@test.com", 13)).toBeNull();
|
||||
});
|
||||
|
||||
it("filters mention candidates by query", () => {
|
||||
const candidates = [
|
||||
{ id: "1", name: "Jane Doe" },
|
||||
{ id: "2", name: "John Smith" },
|
||||
];
|
||||
|
||||
expect(filterMentionCandidates(candidates, "jo")).toEqual([{ id: "2", name: "John Smith" }]);
|
||||
});
|
||||
|
||||
it("inserts encoded mention token replacing active query", () => {
|
||||
const text = "Hello @ja";
|
||||
const activeQuery = findActiveMentionQuery(text, text.length);
|
||||
|
||||
expect(activeQuery).not.toBeNull();
|
||||
if (!activeQuery) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { nextText, nextCursor } = insertMentionToken(text, activeQuery.start, text.length, {
|
||||
id: "1",
|
||||
name: "Jane Doe",
|
||||
});
|
||||
|
||||
expect(nextText).toBe("Hello @[1:Jane Doe] ");
|
||||
expect(nextCursor).toBe(nextText.length);
|
||||
});
|
||||
});
|
||||
41
tmp/pr-descriptions/pr9-comment-mentions.md
Normal file
41
tmp/pr-descriptions/pr9-comment-mentions.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# PR9 — Work order comment @mentions
|
||||
|
||||
## Jira
|
||||
|
||||
- [SH-217](https://luby-us.atlassian.net/browse/SH-217) — FE @mention autocomplete / chips
|
||||
- Related BE: [SH-75](https://luby-us.atlassian.net/browse/SH-75)
|
||||
|
||||
## QA residual
|
||||
|
||||
- Parcial / Blocked-BE for notification + structured `mentions[]` confirm; token chip polish = P1.
|
||||
|
||||
## Summary
|
||||
|
||||
- Adds `@` autocomplete to the internal comments composer on work order detail (`/workorders/:id`).
|
||||
- Encodes selected users as `@[userId:Display Name]` tokens in comment text so mentions stay readable when the backend ignores the optional payload field.
|
||||
- Sends `mentions: string[]` on `POST workorders/{id}/comments` when the composer contains encoded tokens.
|
||||
- Highlights mentions in the comment thread using encoded tokens and/or `mentions` returned by the API.
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Notification Center deep-linking for mention events.
|
||||
- Backend notification triggers beyond the FE payload.
|
||||
|
||||
## BE contract
|
||||
|
||||
See `docs/work-orders/pending-be-contract.md` (Comments section):
|
||||
|
||||
| Field | Status |
|
||||
| ---------------------------------------- | -------- |
|
||||
| POST `{ text, mentions?: string[] }` | FE ready |
|
||||
| Response includes mentions for highlight | FE ready |
|
||||
|
||||
Until BE confirms, encoded tokens in `text` preserve highlight behavior client-side.
|
||||
|
||||
## Test plan
|
||||
|
||||
- [ ] Open a work order detail → Internal tab → type `@` and pick a dispatcher from the list.
|
||||
- [ ] Submit comment; verify POST body includes `text` with encoded token and `mentions` array.
|
||||
- [ ] Reload detail; verify mention is highlighted in the thread (token and/or API `mentions`).
|
||||
- [ ] Type `@` mid-word (e.g. email) — autocomplete should not open.
|
||||
- [ ] Run `npm run verify`.
|
||||
Loading…
Add table
Reference in a new issue