admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3499-React-19: Production Note + Comment edit in job details header / card

Browse Source
This commit is contained in:
Dave
2026-01-19 14:18:51 -05:00
parent 8bd7e5cc6d
commit 7a0187afbe
2 changed files with 76 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/components/production-list-columns/production-list-columns.comment.component.jsx
View File

@@ -18,6 +18,7 @@ export default function ProductionListColumnComment({ record }) {
const handleSaveNote = (e) => {
e.stopPropagation();
e.preventDefault();
setOpen(false);
updateAlert({
variables: {
@@ -33,7 +34,6 @@ export default function ProductionListColumnComment({ record }) {
};
const handleChange = (e) => {
e.stopPropagation();
setNote(e.target.value);
};
@@ -42,26 +42,38 @@ export default function ProductionListColumnComment({ record }) {
if (flag) setNote(record.comment || "");
};
const content = (
<div
style={{ width: "30em" }}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
<Input.TextArea
rows={5}
value={note}
onChange={handleChange}
autoFocus
allowClear
style={{ marginBottom: "1em" }}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
/>
<div>
<Button onClick={handleSaveNote} type="primary">
{t("general.actions.save")}
</Button>
</div>
</div>
);
return (
<Popover
onOpenChange={handleOpenChange}
open={open}
content={
<div style={{ width: "30em" }}>
<Input.TextArea
rows={5}
value={note}
onChange={handleChange}
// onPressEnter={handleSaveNote}
autoFocus
allowClear
/>
<div>
<Button onClick={handleSaveNote}>{t("general.actions.save")}</Button>
</div>
</div>
}
trigger={["click"]}
<Popover
onOpenChange={handleOpenChange}
open={open}
content={content}
trigger="click"
fresh
getPopupContainer={(trigger) => trigger.parentElement}
>
<div
style={{
@@ -69,9 +81,9 @@ export default function ProductionListColumnComment({ record }) {
height: "19px",
cursor: "pointer",
overflow: "hidden",
textOverflow: "ellipsis",
display: "inline-block"
textOverflow: "ellipsis"
}}
onClick={(e) => e.stopPropagation()}
>
<Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
<Tooltip title={record.comment}>{record.comment || " "}</Tooltip>

77
client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
View File

@@ -1,7 +1,7 @@
import Icon from "@ant-design/icons";
import { useMutation } from "@apollo/client/react";
import { Button, Input, Popover, Space } from "antd";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { FaRegStickyNote } from "react-icons/fa";
import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -27,6 +27,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
(e) => {
logImEXEvent("production_add_note");
e.stopPropagation();
e.preventDefault();
setOpen(false);
updateAlert({
variables: {
@@ -46,7 +47,6 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
);
const handleChange = useCallback((e) => {
e.stopPropagation();
setNote(e.target.value);
}, []);
@@ -58,42 +58,48 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
[record]
);
const popoverContent = useMemo(
() => (
<div style={{ width: "30em" }}>
<Input.TextArea
rows={5}
value={note}
onChange={handleChange}
autoFocus
allowClear
style={{ marginBottom: "1em" }}
/>
<Space>
<Button onClick={handleSaveNote} type="primary">
{t("general.actions.save")}
</Button>
<Button
onClick={() => {
setOpen(false);
setNoteUpsertContext({
context: {
jobId: record.id,
text: note
}
});
}}
>
{t("notes.actions.savetojobnotes")}
</Button>
</Space>
</div>
),
[note, handleSaveNote, handleChange, record, setNoteUpsertContext, t]
const content = (
<div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
<Input.TextArea
rows={5}
value={note}
onChange={handleChange}
autoFocus
allowClear
style={{ marginBottom: "1em" }}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
/>
<Space>
<Button onClick={handleSaveNote} type="primary">
{t("general.actions.save")}
</Button>
<Button
onClick={() => {
setOpen(false);
setNoteUpsertContext({
context: {
jobId: record.id,
text: note
}
});
}}
>
{t("notes.actions.savetojobnotes")}
</Button>
</Space>
</div>
);
return (
<Popover onOpenChange={handleOpenChange} open={open} content={popoverContent} trigger={["click"]}>
<Popover
onOpenChange={handleOpenChange}
open={open}
content={content}
trigger="click"
fresh
getPopupContainer={(trigger) => trigger.parentElement}
>
<div
style={{
width: "100%",
@@ -102,6 +108,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
overflow: "hidden",
textOverflow: "ellipsis"
}}
onClick={(e) => e.stopPropagation()}
>
<Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
{record.production_vars?.note || " "}