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

Merge remote-tracking branch 'origin/master-AIO' into feature/IO-2776-cdk-fortellis

Browse Source
This commit is contained in:
Patrick Fic
2025-11-13 14:27:43 -08:00
parent a16c680d04 6b41d6f2a2
commit a8dcc542cc
69 changed files with 2816 additions and 2163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/bill-form/bill-form.lines.component.jsx
View File

@@ -45,7 +45,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.jobline"),
dataIndex: "joblineid",
editable: true,
width: "20rem",
minWidth: "10rem",
formItemProps: (field) => {
return {
key: `${field.index}joblinename`,
@@ -71,9 +71,9 @@ export function BillEnterModalLinesComponent({
disabled={disabled}
options={lineData}
style={{
width: "20rem",
maxWidth: "20rem",
minWidth: "10rem",
//width: "10rem",
// maxWidth: "20rem",
minWidth: "20rem",
whiteSpace: "normal",
height: "auto",
minHeight: "32px" // default height of Ant Design inputs
@@ -110,7 +110,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.line_desc"),
dataIndex: "line_desc",
editable: true,
width: "20rem",
minWidth: "10rem",
formItemProps: (field) => {
return {
key: `${field.index}line_desc`,
@@ -232,7 +232,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.actual_cost"),
dataIndex: "actual_cost",
editable: true,
width: "8rem",
width: "10rem",
formItemProps: (field) => {
return {
@@ -357,6 +357,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.labels.deductedfromlbr"),
dataIndex: "deductedfromlbr",
editable: true,
width: "40px",
formItemProps: (field) => {
return {
valuePropName: "checked",
@@ -464,7 +465,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.federal_tax_applicable"),
dataIndex: "applicable_taxes.federal",
editable: true,
width: "40px",
formItemProps: (field) => {
return {
key: `${field.index}fedtax`,
@@ -485,7 +486,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.state_tax_applicable"),
dataIndex: "applicable_taxes.state",
editable: true,
width: "40px",
formItemProps: (field) => {
return {
key: `${field.index}statetax`,
@@ -503,7 +504,7 @@ export function BillEnterModalLinesComponent({
title: t("billlines.fields.local_tax_applicable"),
dataIndex: "applicable_taxes.local",
editable: true,
width: "40px",
formItemProps: (field) => {
return {
key: `${field.index}localtax`,

42
client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
View File

@@ -39,30 +39,32 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
style: {
...(item.removed ? { textDecoration: "line-through" } : {})
},
name: `${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
item.oem_partno ? ` - ${item.oem_partno}` : ""
}${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
label: (
<div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
<span>
{`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
item.oem_partno ? ` - ${item.oem_partno}` : ""
}${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
</span>
{InstanceRenderMgr({
rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
<span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
)
})}
<span style={{ float: "right", paddingleft: "1rem" }}>
{item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
</span>
</div>
)
name: generateLineName(item),
label: generateLineName(item)
}))
]}
{...restProps}
></Select>
);
};
function generateLineName(item) {
return (
<div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
<span>
{`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
item.oem_partno ? ` - ${item.oem_partno}` : ""
}${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
</span>
{InstanceRenderMgr({
rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
<span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
)
})}
<span style={{ float: "right", paddingleft: "1rem" }}>
{item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
</span>
</div>
);
}
export default forwardRef(BillLineSearchSelect);

12
client/src/components/chat-media-selector/chat-media-selector.component.jsx
View File

@@ -40,7 +40,11 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
variables: {
jobId: conversation.job_conversations[0]?.jobid
},
skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
skip:
!open ||
!conversation.job_conversations ||
conversation.job_conversations.length === 0 ||
bodyshop.uselocalmediaserver
});
const handleVisibleChange = (change) => {
@@ -48,7 +52,8 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
};
useEffect(() => {
setSelectedMedia([]);
// Instead of wiping the array (which holds media objects), just clear selection flags
setSelectedMedia((prev) => prev.map((m) => ({ ...m, isSelected: false })));
}, [setSelectedMedia, conversation]);
//Knowingly taking on the technical debt of poor implementation below. Done this way to avoid an edge case where no component may be displayed.
@@ -75,6 +80,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
<JobDocumentsLocalGalleryExternal
externalMediaState={[selectedMedia, setSelectedMedia]}
jobId={conversation.job_conversations[0]?.jobid}
context="chat"
/>
)}
</>
@@ -90,6 +96,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
<JobDocumentsLocalGalleryExternal
externalMediaState={[selectedMedia, setSelectedMedia]}
jobId={conversation.job_conversations[0]?.jobid}
context="chat"
/>
)}
</>
@@ -110,6 +117,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
trigger="click"
open={open}
onOpenChange={handleVisibleChange}
destroyOnHidden
classNames={{ root: "media-selector-popover" }}
>
<Badge count={selectedMedia.filter((s) => s.isSelected).length}>

224
client/src/components/dashboard-grid/dashboard-grid.component.jsx
View File

@@ -1,17 +1,17 @@
import Icon, { SyncOutlined } from "@ant-design/icons";
import { cloneDeep } from "lodash";
import { useMutation, useQuery } from "@apollo/client";
import { Button, Dropdown, Space } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { useMemo, useState } from "react";
import { useMemo, useState, useEffect } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import { useTranslation } from "react-i18next";
import { MdClose } from "react-icons/md";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { UPDATE_DASHBOARD_LAYOUT, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
import { QUERY_DASHBOARD_BODYSHOP } from "../../graphql/bodyshop.queries";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { GenerateDashboardData } from "./dashboard-grid.utils";
@@ -24,122 +24,173 @@ import "./dashboard-grid.styles.scss";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop
currentUser: selectCurrentUser
});
const mapDispatchToProps = () => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function DashboardGridComponent({ currentUser, bodyshop }) {
export function DashboardGridComponent({ currentUser }) {
const { t } = useTranslation();
const [state, setState] = useState(() => {
const persisted = bodyshop.associations[0].user.dashboardlayout;
// Normalize persisted structure to avoid malformed shapes that can cause recursive layout recalculations
if (persisted) {
return {
items: Array.isArray(persisted.items) ? persisted.items : [],
layout: Array.isArray(persisted.layout) ? persisted.layout : [],
layouts: typeof persisted.layouts === "object" && !Array.isArray(persisted.layouts) ? persisted.layouts : {},
cols: persisted.cols
};
}
return { items: [], layout: [], layouts: {}, cols: 12 };
});
const notification = useNotification();
// Memoize the query document so Apollo doesn't treat each render as a brand-new query causing continuous re-fetches
const dashboardQueryDoc = useMemo(() => createDashboardQuery(state.items), [state.items]);
// Constants for layout defaults
const DEFAULT_COLS = 12;
const DEFAULT_Y_POSITION = 1000;
const GRID_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
const GRID_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 };
const { loading, error, data, refetch } = useQuery(dashboardQueryDoc, {
// Fetch dashboard layout data
const { data: layoutData } = useQuery(QUERY_USER_DASHBOARD_LAYOUT, {
variables: { email: currentUser.email },
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
skip: !currentUser?.email
});
// Fetch minimal bodyshop data for components
const {
loading,
error,
data: bodyshopData
} = useQuery(QUERY_DASHBOARD_BODYSHOP, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
const handleLayoutChange = async (layout, layouts) => {
// Memoize layout state initialization
const initialState = useMemo(() => {
const persisted = layoutData?.users?.[0]?.dashboardlayout;
if (persisted) {
const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = persisted;
return {
items: Array.isArray(items) ? items : [],
layout: Array.isArray(layout) ? layout : [],
layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
cols
};
}
return { items: [], layout: [], layouts: {}, cols: DEFAULT_COLS };
}, [layoutData]);
const [state, setState] = useState(initialState);
// Update state when layout data changes
useEffect(() => {
if (layoutData?.users?.[0]?.dashboardlayout) {
const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = layoutData.users[0].dashboardlayout;
setState({
items: Array.isArray(items) ? items : [],
layout: Array.isArray(layout) ? layout : [],
layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
cols
});
}
}, [layoutData]);
// Get bodyshop data for components
const bodyshop = bodyshopData?.dashboard_bodyshops?.[0];
// DRY helper function to update layout in database and cache
const updateLayoutAndCache = async (updatedLayout, errorContext = "updating layout") => {
try {
logImEXEvent("dashboard_change_layout");
setState((prev) => ({ ...prev, layout, layouts }));
const result = await updateLayout({
variables: {
email: currentUser.email,
layout: { ...state, layout, layouts }
}
const { data: result } = await updateLayout({
variables: { email: currentUser.email, layout: updatedLayout }
});
if (result?.errors && result.errors.length) {
const errorMessages = result.errors.map((e) => e?.message || String(e));
const { errors = [] } = result?.update_users?.returning?.[0] || {};
if (errors.length) {
const errorMessages = errors.map(({ message }) => message || String(error));
notification.error({
message: t("dashboard.errors.updatinglayout", {
message: errorMessages.join("; ")
})
});
return false;
}
return true;
} catch (err) {
// Catch any unexpected errors (including potential cyclic JSON issues) so the promise never rejects unhandled
console.error("Dashboard layout update failed", err);
console.error(`Dashboard ${errorContext} failed`, err);
notification.error({
message: t("dashboard.errors.updatinglayout", {
message: err?.message || String(err)
})
});
return false;
}
};
const handleRemoveComponent = (key) => {
// Memoize the query document so Apollo doesn't treat each render as a brand-new query causing continuous re-fetches
const dashboardQueryDoc = useMemo(() => createDashboardQuery(state.items), [state.items]);
const {
loading: dashboardLoading,
error: dashboardError,
data: dashboardQueryData,
refetch
} = useQuery(dashboardQueryDoc, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
const dashboardData = useMemo(() => GenerateDashboardData(dashboardQueryData), [dashboardQueryData]);
// Memoize existing layout keys to prevent unnecessary recalculations
const existingLayoutKeys = useMemo(() => state.items.map(({ i }) => i), [state.items]);
// Memoize menu items to prevent unnecessary recalculations
const menuItems = useMemo(
() =>
Object.entries(componentList).map(([key, { label }]) => ({
key,
label,
value: key,
disabled: existingLayoutKeys.includes(key)
})),
[existingLayoutKeys]
);
if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
const handleLayoutChange = async (layout, layouts) => {
logImEXEvent("dashboard_change_layout");
setState((prev) => ({ ...prev, layout, layouts }));
await updateLayoutAndCache({ ...state, layout, layouts }, "layout change");
};
const handleRemoveComponent = async (key) => {
logImEXEvent("dashboard_remove_component", { name: key });
const idxToRemove = state.items.findIndex((i) => i.i === key);
const items = cloneDeep(state.items);
items.splice(idxToRemove, 1);
setState({ ...state, items });
const updatedState = { ...state, items: state.items.filter((item) => item.i !== key) };
setState(updatedState);
await updateLayoutAndCache(updatedState, "component removal");
};
const handleAddComponent = (e) => {
// Avoid passing the full AntD menu click event (contains circular refs) to analytics
logImEXEvent("dashboard_add_component", { key: e.key });
const compSpec = componentList[e.key] || {};
const minW = compSpec.minW || 1;
const minH = compSpec.minH || 1;
const baseW = compSpec.w || 2;
const baseH = compSpec.h || 2;
setState((prev) => {
const nextItems = [
...prev.items,
{
i: e.key,
// Position near bottom: use a large y so RGL places it last without triggering cascading relayout loops
x: (prev.items.length * 2) % (prev.cols || 12),
y: 1000,
w: Math.max(baseW, minW),
h: Math.max(baseH, minH)
}
];
return { ...prev, items: nextItems };
});
const handleAddComponent = async ({ key }) => {
logImEXEvent("dashboard_add_component", { key });
const { minW = 1, minH = 1, w: baseW = 2, h: baseH = 2 } = componentList[key] || {};
const nextItems = [
...state.items,
{
i: key,
x: (state.items.length * 2) % (state.cols || DEFAULT_COLS),
y: DEFAULT_Y_POSITION,
w: Math.max(baseW, minW),
h: Math.max(baseH, minH)
}
];
const updatedState = { ...state, items: nextItems };
setState(updatedState);
await updateLayoutAndCache(updatedState, "component addition");
};
const dashboardData = useMemo(() => GenerateDashboardData(data), [data]);
const existingLayoutKeys = state.items.map((i) => i.i);
const menuItems = Object.keys(componentList).map((key) => ({
key: key,
label: componentList[key].label,
value: key,
disabled: existingLayoutKeys.includes(key)
}));
const menu = { items: menuItems, onClick: handleAddComponent };
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<PageHeader
@@ -157,22 +208,19 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
<ResponsiveReactGridLayout
className="layout"
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
breakpoints={GRID_BREAKPOINTS}
cols={GRID_COLS}
layouts={state.layouts}
onLayoutChange={handleLayoutChange}
>
{state.items.map((item) => {
const spec = componentList[item.i] || {};
const TheComponent = spec.component;
const minW = spec.minW || 1;
const minH = spec.minH || 1;
// Ensure current width/height respect minimums to avoid react-grid-layout prop warnings
const { component: TheComponent, minW = 1, minH = 1, w: specW, h: specH } = componentList[item.i] || {};
const safeItem = {
...item,
w: Math.max(item.w || spec.w || minW, minW),
h: Math.max(item.h || spec.h || minH, minH)
w: Math.max(item.w || specW || minW, minW),
h: Math.max(item.h || specH || minH, minH)
};
return (
<div
key={safeItem.i}

2
client/src/components/email-documents/email-documents.component.jsx
View File

@@ -67,6 +67,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
<JobsDocumentsLocalGalleryExternalComponent
externalMediaState={[selectedMedia, setSelectedMedia]}
jobId={emailConfig.jobid}
context="email"
/>
)}
</>
@@ -82,6 +83,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
<JobsDocumentsLocalGalleryExternalComponent
externalMediaState={[selectedMedia, setSelectedMedia]}
jobId={emailConfig.jobid}
context="email"
/>
)}
</>

2
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -97,7 +97,7 @@ export function JobLinesComponent({
filteredInfo: {
...(isPartsEntry
? {
part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG", "PAO"]
part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"] //"PAO" Removed by request
}
: {})
}

12
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -77,6 +77,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
.reduce((acc, val) => acc + val.mod_lb_hrs, 0);
const ownerTitle = OwnerNameDisplayFunction(job).trim();
const employeeData = bodyshop.associations.find((a) => a.useremail === job.admin_clerk)?.user?.employee ?? null;
// Handle checkbox changes
const handleCheckboxChange = async (field, checked) => {
const value = checked ? dayjs().toISOString() : null;
@@ -162,7 +164,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
{job.cccontracts.map((c, index) => (
<Space key={c.id} wrap>
<Link to={`/manage/courtesycars/contracts/${c.id}`}>
{`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
{`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model} ${c.courtesycar.plate} - ${t(c.status)}`}
{index !== job.cccontracts.length - 1 ? "," : null}
</Link>
</Space>
@@ -355,6 +357,14 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
>
<div>
<JobEmployeeAssignments job={job} />
{job.admin_clerk && (
<>
<Divider style={{ margin: ".5rem" }} />
<DataLabel label={t("jobs.fields.admin_clerk")}>
{employeeData?.displayName ?? job.admin_clerk}
</DataLabel>
</>
)}
<Divider style={{ margin: ".5rem" }} />
<DataLabel label={t("jobs.labels.labor_hrs")}>
{bodyHrs.toFixed(1)} / {refinishHrs.toFixed(1)} / {(bodyHrs + refinishHrs).toFixed(1)}

145
client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
View File

@@ -1,11 +1,12 @@
import { useEffect } from "react";
import { Gallery } from "react-grid-gallery";
import { useEffect, useMemo, useState, useCallback } from "react";
import LocalMediaGrid from "./local-media-grid.component";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { getJobMedia } from "../../redux/media/media.actions";
import { selectAllMedia } from "../../redux/media/media.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -18,41 +19,127 @@ const mapDispatchToProps = (dispatch) => ({
export default connect(mapStateToProps, mapDispatchToProps)(JobDocumentsLocalGalleryExternal);
function JobDocumentsLocalGalleryExternal({ jobId, externalMediaState, getJobMedia, allMedia }) {
/**
* JobDocumentsLocalGalleryExternal
* Fetches and displays job-related image media using the custom LocalMediaGrid.
*
* Props:
* - jobId: string | number (required to fetch media)
* - externalMediaState: [imagesArray, setImagesFn] (state lifted to parent for shared selection)
* - getJobMedia: dispatching function to retrieve media for a job
* - allMedia: redux slice keyed by jobId containing raw media records
* - context: "chat" | "email" | other string used to drive grid behavior
*
* Notes:
* - The previous third-party gallery required a remount key (openVersion); custom grid no longer does.
* - Selection flags are preserved when media refreshes.
* - Loading state ends after transformation regardless of whether any images were found.
*/
function JobDocumentsLocalGalleryExternal({ jobId, externalMediaState, getJobMedia, allMedia, context = "chat" }) {
const [galleryImages, setgalleryImages] = externalMediaState;
const { t } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
const { t } = useTranslation(); // i18n hook retained if future translations are added
const DEBUG_LOCAL_GALLERY = false; // flip to true for verbose console logging
// Transform raw media record into a normalized image object consumed by the grid.
const transformMediaToImages = useCallback((raw) => {
return raw
.filter((m) => m.type?.mime?.startsWith("image"))
.map((m) => ({
...m,
src: m.thumbnail,
thumbnail: m.thumbnail,
fullsize: m.src,
width: 225,
height: 225,
thumbnailWidth: 225,
thumbnailHeight: 225,
caption: m.filename || m.key
}));
}, []);
// Fetch media when jobId changes (network request triggers Redux update -> documents memo recalculates).
useEffect(() => {
if (jobId) {
getJobMedia(jobId);
}
if (!jobId) return;
setIsLoading(true);
getJobMedia(jobId);
}, [jobId, getJobMedia]);
useEffect(() => {
let documents = allMedia?.[jobId]
? allMedia[jobId].reduce((acc, val) => {
if (val.type?.mime && val.type.mime.startsWith("image")) {
acc.push({ ...val, src: val.thumbnail, fullsize: val.src });
}
return acc;
}, [])
: [];
console.log(
"🚀 ~ file: jobs-documents-local-gallery.external.component.jsx:48 ~ useEffect ~ documents:",
documents
);
// Memo: transform raw redux media into gallery documents.
const documents = useMemo(
() => transformMediaToImages(allMedia?.[jobId] || []),
[allMedia, jobId, transformMediaToImages]
);
setgalleryImages(documents);
}, [allMedia, jobId, setgalleryImages, t]);
// Sync transformed documents into external state while preserving selection flags.
useEffect(() => {
const prevSelection = new Map(galleryImages.map((p) => [p.filename, p.isSelected]));
const nextImages = documents.map((d) => ({ ...d, isSelected: prevSelection.get(d.filename) || false }));
// Micro-optimization: if array length and each filename + selection flag match, skip creating a new array.
if (galleryImages.length === nextImages.length) {
let identical = true;
for (let i = 0; i < nextImages.length; i++) {
if (
galleryImages[i].filename !== nextImages[i].filename ||
galleryImages[i].isSelected !== nextImages[i].isSelected
) {
identical = false;
break;
}
}
if (identical) {
setIsLoading(false); // ensure loading stops even on no-change
if (DEBUG_LOCAL_GALLERY) {
console.log("[LocalGallery] documents unchanged", { jobId, count: documents.length });
}
return;
}
}
setgalleryImages(nextImages);
setIsLoading(false); // stop loading after transform regardless of emptiness
if (DEBUG_LOCAL_GALLERY) {
console.log("[LocalGallery] documents transformed", { jobId, count: documents.length });
}
}, [documents, setgalleryImages, galleryImages, jobId, DEBUG_LOCAL_GALLERY]);
// Toggle handler (stable reference)
const handleToggle = useCallback(
(idx) => {
setgalleryImages((imgs) => imgs.map((g, gIdx) => (gIdx === idx ? { ...g, isSelected: !g.isSelected } : g)));
},
[setgalleryImages]
);
const messageStyle = { textAlign: "center", padding: "1rem" }; // retained for potential future states
if (!jobId) {
return (
<div aria-label="media gallery unavailable" style={{ position: "relative", minHeight: 80 }}>
<div style={messageStyle}>No job selected.</div>
</div>
);
}
return (
<div className="clearfix">
<Gallery
images={galleryImages}
onSelect={(index) => {
setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
}}
/>
<div
className="clearfix"
style={{ position: "relative", minHeight: 80 }}
data-jobid={jobId}
aria-label={`media gallery for job ${jobId}`}
>
{isLoading && galleryImages.length === 0 && (
<div className="local-gallery-loading" style={messageStyle} role="status" aria-live="polite">
<LoadingSpinner />
</div>
)}
{galleryImages.length > 0 && (
<LocalMediaGrid images={galleryImages} minColumns={4} context={context} onToggle={handleToggle} />
)}
{galleryImages.length > 0 && (
<div style={{ fontSize: 10, color: "#888", marginTop: 4 }} aria-live="off">
{`${t("general.labels.media")}: ${galleryImages.length}`}
</div>
)}
</div>
);
}

207
client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx Normal file
View File

@@ -0,0 +1,207 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
/**
* LocalMediaGrid
* Lightweight replacement for react-grid-gallery inside the chat popover.
* Props:
* - images: Array<{ src, fullsize, filename?, isSelected? }>
* - onToggle(index)
*/
export function LocalMediaGrid({
images,
onToggle,
thumbSize = 100,
gap = 8,
minColumns = 3,
maxColumns = 12,
context = "default"
}) {
const containerRef = useRef(null);
const [cols, setCols] = useState(() => {
// Pre-calc initial columns to stabilize layout before images render
const count = images.length;
if (count === 0) return minColumns; // reserve minimal structure
if (count === 1 && context === "chat") return 1;
return Math.min(maxColumns, Math.max(minColumns, count));
});
const [justifyMode, setJustifyMode] = useState("start");
const [distributeExtra, setDistributeExtra] = useState(false);
const [loadedMap, setLoadedMap] = useState(() => new Map()); // filename -> boolean loaded
const handleImageLoad = useCallback((key) => {
setLoadedMap((prev) => {
if (prev.get(key)) return prev; // already loaded
const next = new Map(prev);
next.set(key, true);
return next;
});
}, []);
// Dynamically compute columns for all contexts to avoid auto-fit stretching gaps in email overlay
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const compute = () => {
// For non-chat (email / default) we rely on CSS auto-fill; only chat needs explicit column calc & distribution logic.
if (context !== "chat") {
setCols(images.length || 0); // retain count for ARIA semantics; not used for template when non-chat.
setDistributeExtra(false);
return;
}
const width = el.clientWidth;
if (!width) return;
const perCol = thumbSize + gap; // track + gap space
const fitCols = Math.max(1, Math.floor((width + gap) / perCol));
// base desired columns: up to how many images we have and how many fit
let finalCols = Math.min(images.length || 1, fitCols, maxColumns);
// enforce minimum columns to reserve layout skeleton (except when fewer images)
if (finalCols < minColumns && images.length >= minColumns) {
finalCols = Math.min(fitCols, minColumns);
}
// chat-specific clamp
if (context === "chat") {
finalCols = Math.min(finalCols, 4);
}
if (finalCols < 1) finalCols = 1;
setCols(finalCols);
setJustifyMode("start");
// Determine if there is leftover horizontal space that can't fit another column.
// Only distribute when we're at the maximum allowed columns for the context and images exceed or meet that count.
const contextMax = context === "chat" ? 4 : maxColumns;
const baseWidthNeeded = finalCols * thumbSize + (finalCols - 1) * gap;
const leftover = width - baseWidthNeeded;
const atMaxColumns = finalCols === contextMax && images.length >= finalCols;
// leftover must be positive but less than space needed for an additional column (perCol)
if (atMaxColumns && leftover > 0 && leftover < perCol) {
setDistributeExtra(true);
} else {
setDistributeExtra(false);
}
};
compute();
const ro = new ResizeObserver(() => compute());
ro.observe(el);
return () => ro.disconnect();
}, [images.length, thumbSize, gap, minColumns, maxColumns, context]);
const gridTemplateColumns = useMemo(() => {
if (context === "chat") {
if (distributeExtra) {
return `repeat(${cols}, minmax(${thumbSize}px, 1fr))`;
}
return `repeat(${cols}, ${thumbSize}px)`;
}
// Non-chat contexts: allow browser to auto-fill columns; fixed min (thumbSize) ensures squares; tracks expand to distribute remaining space.
return `repeat(auto-fill, minmax(${thumbSize}px, 1fr))`;
}, [cols, thumbSize, distributeExtra, context]);
const stableWidth = undefined; // no fixed width
const handleKeyDown = useCallback(
(e, idx) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onToggle(idx);
}
},
[onToggle]
);
return (
<div
className="local-media-grid"
style={{
display: "grid",
gridTemplateColumns,
gap,
maxHeight: 420,
overflowY: "auto",
overflowX: "hidden",
padding: 4,
justifyContent: justifyMode,
width: stableWidth
}}
ref={containerRef}
role="list"
aria-label="media thumbnails"
>
{images.map((img, idx) => (
<div
key={img.filename || idx}
role="listitem"
tabIndex={0}
aria-label={img.filename || `image ${idx + 1}`}
onClick={() => onToggle(idx)}
onKeyDown={(e) => handleKeyDown(e, idx)}
style={{
position: "relative",
border: img.isSelected ? "2px solid #1890ff" : "1px solid #ccc",
outline: "none",
borderRadius: 4,
cursor: "pointer",
background: "#fafafa",
width: thumbSize,
height: thumbSize,
overflow: "hidden",
boxSizing: "border-box"
}}
>
{(() => {
const key = img.filename || idx;
const loaded = loadedMap.get(key) === true;
return (
<>
{!loaded && (
<div
aria-hidden="true"
style={{
position: "absolute",
inset: 0,
background: "#f0f0f0",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 10,
color: "#bbb"
}}
>
{/* simple skeleton; no shimmer to reduce cost */}…
</div>
)}
<img
src={img.src}
alt={img.filename || img.caption || "thumbnail"}
loading="lazy"
onLoad={() => handleImageLoad(key)}
style={{
width: thumbSize,
height: thumbSize,
objectFit: "cover",
display: "block",
borderRadius: 4,
opacity: loaded ? 1 : 0,
transition: "opacity .25s ease"
}}
/>
</>
);
})()}
{img.isSelected && (
<div
aria-hidden="true"
style={{
position: "absolute",
inset: 0,
background: "rgba(24,144,255,0.45)",
borderRadius: 4
}}
/>
)}
</div>
))}
{/* No placeholders needed; layout uses auto-fit for non-chat or fixed columns for chat */}
</div>
);
}
export default LocalMediaGrid;