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

Merge branch 'feature/IO-1828-Front-End-Package-Updates' into test-beta

Browse Source
This commit is contained in:
Dave Richer
2024-02-23 16:36:55 -05:00
parent 7fba6cb5e6 5f98c2286b
commit dc09e47bf5
2 changed files with 444 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

836
client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
View File

@@ -1,443 +1,455 @@
import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined,} from "@ant-design/icons"; import {
import {Card, Space, Switch, Table, Tooltip, Typography} from "antd"; BranchesOutlined,
import dayjs from "../../../utils/day"; ExclamationCircleFilled,
import React, {useState} from "react"; PauseCircleOutlined,
import {useTranslation} from "react-i18next"; } from "@ant-design/icons";
import {Link} from "react-router-dom"; import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import {TimeFormatter} from "../../../utils/DateFormatter"; import moment from "moment";
import {onlyUnique} from "../../../utils/arrayHelper"; import React, { useState } from "react";
import {alphaSort, dateSort} from "../../../utils/sorters"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TimeFormatter } from "../../../utils/DateFormatter";
import { onlyUnique } from "../../../utils/arrayHelper";
import { alphaSort, dateSort } from "../../../utils/sorters";
import useLocalStorage from "../../../utils/useLocalStorage"; import useLocalStorage from "../../../utils/useLocalStorage";
import ChatOpenButton from "../../chat-open-button/chat-open-button.component"; import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
import OwnerNameDisplay, {OwnerNameDisplayFunction,} from "../../owner-name-display/owner-name-display.component"; import OwnerNameDisplay, {
OwnerNameDisplayFunction,
} from "../../owner-name-display/owner-name-display.component";
import DashboardRefreshRequired from "../refresh-required.component"; import DashboardRefreshRequired from "../refresh-required.component";
export default function DashboardScheduledInToday({data, ...cardProps}) { export default function DashboardScheduledInToday({ data, ...cardProps }) {
const {t} = useTranslation(); const { t } = useTranslation();
const [state, setState] = useState({ const [state, setState] = useState({
sortedInfo: {}, sortedInfo: {},
}); });
const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage( const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage(
"isTvModeScheduledIn", "isTvModeScheduledIn",
false false
); );
if (!data) return null;
if (!data.scheduled_in_today)
return <DashboardRefreshRequired {...cardProps} />;
const appt = []; // Flatten Data if (!data) return null;
data.scheduled_in_today.forEach((item) => { if (!data.scheduled_in_today)
if (item.job) { return <DashboardRefreshRequired {...cardProps} />;
var i = {
canceled: item.canceled,
id: item.id,
alt_transport: item.job.alt_transport,
clm_no: item.job.clm_no,
jobid: item.job.jobid,
joblines_body: item.job.joblines
.filter((l) => l.mod_lbr_ty !== "LAR")
.reduce((acc, val) => acc + val.mod_lb_hrs, 0),
joblines_ref: item.job.joblines
.filter((l) => l.mod_lbr_ty === "LAR")
.reduce((acc, val) => acc + val.mod_lb_hrs, 0),
ins_co_nm: item.job.ins_co_nm,
iouparent: item.job.iouparent,
ownerid: item.job.ownerid,
ownr_co_nm: item.job.ownr_co_nm,
ownr_ea: item.job.ownr_ea,
ownr_fn: item.job.ownr_fn,
ownr_ln: item.job.ownr_ln,
ownr_ph1: item.job.ownr_ph1,
ownr_ph2: item.job.ownr_ph2,
production_vars: item.job.production_vars,
ro_number: item.job.ro_number,
suspended: item.job.suspended,
v_make_desc: item.job.v_make_desc,
v_model_desc: item.job.v_model_desc,
v_model_yr: item.job.v_model_yr,
v_vin: item.job.v_vin,
vehicleid: item.job.vehicleid,
note: item.note,
start: item.start,
title: item.title,
};
appt.push(i);
}
});
appt.sort(function (a, b) {
return dayjs(a.start) - dayjs(b.start);
});
const tvFontSize = 16; const appt = []; // Flatten Data
const tvFontWeight = "bold"; data.scheduled_in_today.forEach((item) => {
if (item.job) {
var i = {
canceled: item.canceled,
id: item.id,
alt_transport: item.job.alt_transport,
clm_no: item.job.clm_no,
jobid: item.job.jobid,
joblines_body: item.job.joblines
.filter((l) => l.mod_lbr_ty !== "LAR")
.reduce((acc, val) => acc + val.mod_lb_hrs, 0),
joblines_ref: item.job.joblines
.filter((l) => l.mod_lbr_ty === "LAR")
.reduce((acc, val) => acc + val.mod_lb_hrs, 0),
ins_co_nm: item.job.ins_co_nm,
iouparent: item.job.iouparent,
ownerid: item.job.ownerid,
ownr_co_nm: item.job.ownr_co_nm,
ownr_ea: item.job.ownr_ea,
ownr_fn: item.job.ownr_fn,
ownr_ln: item.job.ownr_ln,
ownr_ph1: item.job.ownr_ph1,
ownr_ph2: item.job.ownr_ph2,
production_vars: item.job.production_vars,
ro_number: item.job.ro_number,
suspended: item.job.suspended,
v_make_desc: item.job.v_make_desc,
v_model_desc: item.job.v_model_desc,
v_model_yr: item.job.v_model_yr,
v_vin: item.job.v_vin,
vehicleid: item.job.vehicleid,
note: item.note,
start: item.start,
title: item.title,
};
appt.push(i);
}
});
appt.sort(function (a, b) {
return new moment(a.start) - new moment(b.start);
});
const tvColumns = [ const tvFontSize = 16;
{ const tvFontWeight = "bold";
title: t("appointments.fields.time"),
dataIndex: "start", const tvColumns = [
key: "start", {
ellipsis: true, title: t("appointments.fields.time"),
sorter: (a, b) => dateSort(a.start, b.start), dataIndex: "start",
sortOrder: key: "start",
state.sortedInfo.columnKey === "start" && state.sortedInfo.order, ellipsis: true,
render: (text, record) => ( sorter: (a, b) => dateSort(a.start, b.start),
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> sortOrder:
state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
render: (text, record) => (
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<TimeFormatter>{record.start}</TimeFormatter> <TimeFormatter>{record.start}</TimeFormatter>
</span> </span>
), ),
}, },
{ {
title: t("jobs.fields.ro_number"), title: t("jobs.fields.ro_number"),
dataIndex: "ro_number", dataIndex: "ro_number",
key: "ro_number", key: "ro_number",
sorter: (a, b) => alphaSort(a.ro_number, b.ro_number), sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
render: (text, record) => ( render: (text, record) => (
<Link <Link
to={"/manage/jobs/" + record.jobid} to={"/manage/jobs/" + record.jobid}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<Space> <Space>
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.ro_number || t("general.labels.na")} {record.ro_number || t("general.labels.na")}
{record.production_vars && record.production_vars.alert ? ( {record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert"/> <ExclamationCircleFilled className="production-alert" />
) : null} ) : null}
{record.suspended && ( {record.suspended && (
<PauseCircleOutlined style={{color: "orangered"}}/> <PauseCircleOutlined style={{ color: "orangered" }} />
)} )}
{record.iouparent && ( {record.iouparent && (
<Tooltip title={t("jobs.labels.iou")}> <Tooltip title={t("jobs.labels.iou")}>
<BranchesOutlined style={{color: "orangered"}}/> <BranchesOutlined style={{ color: "orangered" }} />
</Tooltip> </Tooltip>
)} )}
</span> </span>
</Space> </Space>
</Link> </Link>
), ),
}, },
{ {
title: t("jobs.fields.owner"), title: t("jobs.fields.owner"),
dataIndex: "owner", dataIndex: "owner",
key: "owner", key: "owner",
ellipsis: true, ellipsis: true,
sorter: (a, b) => sorter: (a, b) =>
alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)), alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "owner" && state.sortedInfo.order, state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => { render: (text, record) => {
return record.ownerid ? ( return record.ownerid ? (
<Link <Link
to={"/manage/owners/" + record.ownerid} to={"/manage/owners/" + record.ownerid}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<OwnerNameDisplay ownerObject={record}/> <OwnerNameDisplay ownerObject={record} />
</span> </span>
</Link> </Link>
) : ( ) : (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<OwnerNameDisplay ownerObject={record}/> <OwnerNameDisplay ownerObject={record} />
</span> </span>
); );
}, },
}, },
{ {
title: t("jobs.fields.vehicle"), title: t("jobs.fields.vehicle"),
dataIndex: "vehicle", dataIndex: "vehicle",
key: "vehicle", key: "vehicle",
ellipsis: true, ellipsis: true,
sorter: (a, b) => sorter: (a, b) =>
alphaSort( alphaSort(
`${a.v_model_yr || ""} ${a.v_make_desc || ""} ${ `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
a.v_model_desc || "" a.v_model_desc || ""
}`, }`,
`${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}` `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
), ),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
render: (text, record) => { render: (text, record) => {
return record.vehicleid ? ( return record.vehicleid ? (
<Link <Link
to={"/manage/vehicles/" + record.vehicleid} to={"/manage/vehicles/" + record.vehicleid}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${ {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || "" record.v_model_desc || ""
}`} }`}
</span> </span>
</Link> </Link>
) : ( ) : (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>{`${ <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
record.v_model_yr || "" record.v_model_yr || ""
} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span> } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
); );
}, },
}, },
{ {
title: t("appointments.fields.alt_transport"), title: t("appointments.fields.alt_transport"),
dataIndex: "alt_transport", dataIndex: "alt_transport",
key: "alt_transport", key: "alt_transport",
ellipsis: true, ellipsis: true,
sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport), sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.columnKey === "alt_transport" &&
state.sortedInfo.order, state.sortedInfo.order,
filters: filters:
(appt && (appt &&
appt appt
.map((j) => j.alt_transport) .map((j) => j.alt_transport)
.filter(onlyUnique) .filter(onlyUnique)
.map((s) => { .map((s) => {
return { return {
text: s || "No Alt. Transport", text: s || "No Alt. Transport",
value: [s], value: [s],
}; };
}) })
.sort((a, b) => alphaSort(a.text, b.text))) || .sort((a, b) => alphaSort(a.text, b.text))) ||
[], [],
render: (text, record) => ( render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.alt_transport} {record.alt_transport}
</span> </span>
), ),
}, },
{ {
title: t("jobs.fields.lab"), title: t("jobs.fields.lab"),
dataIndex: "joblines_body", dataIndex: "joblines_body",
key: "joblines_body", key: "joblines_body",
sorter: (a, b) => a.joblines_body - b.joblines_body, sorter: (a, b) => a.joblines_body - b.joblines_body,
sortOrder: sortOrder:
state.sortedInfo.columnKey === "joblines_body" && state.sortedInfo.columnKey === "joblines_body" &&
state.sortedInfo.order, state.sortedInfo.order,
align: "right", align: "right",
render: (text, record) => ( render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.joblines_body.toFixed(1)} {record.joblines_body.toFixed(1)}
</span> </span>
), ),
}, },
{ {
title: t("jobs.fields.lar"), title: t("jobs.fields.lar"),
dataIndex: "joblines_ref", dataIndex: "joblines_ref",
key: "joblines_ref", key: "joblines_ref",
sorter: (a, b) => a.joblines_ref - b.joblines_ref, sorter: (a, b) => a.joblines_ref - b.joblines_ref,
sortOrder: sortOrder:
state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order, state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
align: "right", align: "right",
render: (text, record) => ( render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.joblines_ref.toFixed(1)} {record.joblines_ref.toFixed(1)}
</span> </span>
), ),
}, },
]; ];
const columns = [
{
title: t("appointments.fields.time"),
dataIndex: "start",
key: "start",
ellipsis: true,
sorter: (a, b) => dateSort(a.start, b.start),
sortOrder:
state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
render: (text, record) => <TimeFormatter>{record.start}</TimeFormatter>,
},
{
title: t("jobs.fields.ro_number"),
dataIndex: "ro_number",
key: "ro_number",
sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
sortOrder:
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, render: (text, record) => (
<Link
to={"/manage/jobs/" + record.jobid}
onClick={(e) => e.stopPropagation()}
>
<Space>
{record.ro_number || t("general.labels.na")}
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert"/>
) : null}
{record.suspended && (
<PauseCircleOutlined style={{color: "orangered"}}/>
)}
{record.iouparent && (
<Tooltip title={t("jobs.labels.iou")}>
<BranchesOutlined style={{color: "orangered"}}/>
</Tooltip>
)}
</Space>
</Link>
),
},
{
title: t("jobs.fields.owner"),
dataIndex: "owner",
key: "owner",
ellipsis: true,
sorter: (a, b) =>
alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
sortOrder:
state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => {
return record.ownerid ? (
<Link
to={"/manage/owners/" + record.ownerid}
onClick={(e) => e.stopPropagation()}
>
<OwnerNameDisplay ownerObject={record}/>
</Link>
) : (
<span>
<OwnerNameDisplay ownerObject={record}/>
</span>
);
},
},
{
title: t("dashboard.labels.phone"),
dataIndex: "ownr_ph",
key: "ownr_ph",
ellipsis: true,
responsive: ["md"],
render: (text, record) => (<Space size="small" wrap>
<ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid}/>
<ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid}/> const columns = [
</Space>), {
}, title: t("appointments.fields.time"),
{ dataIndex: "start",
title: t("jobs.fields.ownr_ea"), key: "start",
dataIndex: "ownr_ea", ellipsis: true,
key: "ownr_ea", sorter: (a, b) => dateSort(a.start, b.start),
ellipsis: true, sortOrder:
responsive: ["md"], state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
render: (text, record) => ( render: (text, record) => <TimeFormatter>{record.start}</TimeFormatter>,
<a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a> },
), {
}, title: t("jobs.fields.ro_number"),
{ dataIndex: "ro_number",
title: t("jobs.fields.vehicle"), key: "ro_number",
dataIndex: "vehicle", sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
key: "vehicle", sortOrder:
ellipsis: true, state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
sorter: (a, b) => render: (text, record) => (
alphaSort( <Link
`${a.v_model_yr || ""} ${a.v_make_desc || ""} ${ to={"/manage/jobs/" + record.jobid}
a.v_model_desc || "" onClick={(e) => e.stopPropagation()}
}`,
`${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
),
sortOrder:
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, render: (text, record) => {
return record.vehicleid ? (
<Link
to={"/manage/vehicles/" + record.vehicleid}
onClick={(e) => e.stopPropagation()}
>
{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || ""
}`}
</Link>
) : (
<span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || ""
}`}</span>
);
},
},
{
title: t("jobs.fields.ins_co_nm"),
dataIndex: "ins_co_nm",
key: "ins_co_nm",
ellipsis: true,
responsive: ["md"],
sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
sortOrder:
state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
filters:
(appt &&
appt
.map((j) => j.ins_co_nm)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Ins. Co.*",
value: [s],
};
})
.sort((a, b) => alphaSort(a.text, b.text))) ||
[],
onFilter: (value, record) => value.includes(record.ins_co_nm),
},
{
title: t("appointments.fields.alt_transport"),
dataIndex: "alt_transport",
key: "alt_transport",
ellipsis: true,
sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
sortOrder:
state.sortedInfo.columnKey === "alt_transport" &&
state.sortedInfo.order,
filters:
(appt &&
appt
.map((j) => j.alt_transport)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Alt. Transport",
value: [s],
};
})
.sort((a, b) => alphaSort(a.text, b.text))) ||
[],
},
];
const handleTableChange = (sorter) => {
setState({...state, sortedInfo: sorter});
};
return (
<Card
title={t("dashboard.titles.scheduledindate", {
date: dayjs().startOf("day").format("MM/DD/YYYY"),
})}
extra={
<Space>
<Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
<Switch
onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
defaultChecked={isTvModeScheduledIn}
/>
</Space>
}{...cardProps}
> >
<div style={{height: "100%"}}> <Space>
<Table {record.ro_number || t("general.labels.na")}
onChange={handleTableChange} {record.production_vars && record.production_vars.alert ? (
pagination={false} <ExclamationCircleFilled className="production-alert" />
columns={isTvModeScheduledIn ? tvColumns : columns} ) : null}
scroll={{x: true, y: "calc(100% - 2em)"}} {record.suspended && (
rowKey="id" <PauseCircleOutlined style={{ color: "orangered" }} />
style={{height: "85%"}} )}
dataSource={appt} size={isTvModeScheduledIn ? "small" : "middle"} {record.iouparent && (
/> <Tooltip title={t("jobs.labels.iou")}>
</div> <BranchesOutlined style={{ color: "orangered" }} />
</Card> </Tooltip>
); )}
</Space>
</Link>
),
},
{
title: t("jobs.fields.owner"),
dataIndex: "owner",
key: "owner",
ellipsis: true,
sorter: (a, b) =>
alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
sortOrder:
state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => {
return record.ownerid ? (
<Link
to={"/manage/owners/" + record.ownerid}
onClick={(e) => e.stopPropagation()}
>
<OwnerNameDisplay ownerObject={record} />
</Link>
) : (
<span>
<OwnerNameDisplay ownerObject={record} />
</span>
);
},
},
{
title: t("dashboard.labels.phone"),
dataIndex: "ownr_ph",
key: "ownr_ph",
ellipsis: true,
responsive: ["md"],
render: (text, record) => (
<Space size="small" wrap>
<ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
<ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
</Space>
),
},
{
title: t("jobs.fields.ownr_ea"),
dataIndex: "ownr_ea",
key: "ownr_ea",
ellipsis: true,
responsive: ["md"],
render: (text, record) => (
<a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
),
},
{
title: t("jobs.fields.vehicle"),
dataIndex: "vehicle",
key: "vehicle",
ellipsis: true,
sorter: (a, b) =>
alphaSort(
`${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
a.v_model_desc || ""
}`,
`${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
),
sortOrder:
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
render: (text, record) => {
return record.vehicleid ? (
<Link
to={"/manage/vehicles/" + record.vehicleid}
onClick={(e) => e.stopPropagation()}
>
{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || ""
}`}
</Link>
) : (
<span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || ""
}`}</span>
);
},
},
{
title: t("jobs.fields.ins_co_nm"),
dataIndex: "ins_co_nm",
key: "ins_co_nm",
ellipsis: true,
responsive: ["md"],
sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
sortOrder:
state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
filters:
(appt &&
appt
.map((j) => j.ins_co_nm)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Ins. Co.*",
value: [s],
};
})
.sort((a, b) => alphaSort(a.text, b.text))) ||
[],
onFilter: (value, record) => value.includes(record.ins_co_nm),
},
{
title: t("appointments.fields.alt_transport"),
dataIndex: "alt_transport",
key: "alt_transport",
ellipsis: true,
sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
sortOrder:
state.sortedInfo.columnKey === "alt_transport" &&
state.sortedInfo.order,
filters:
(appt &&
appt
.map((j) => j.alt_transport)
.filter(onlyUnique)
.map((s) => {
return {
text: s || "No Alt. Transport",
value: [s],
};
})
.sort((a, b) => alphaSort(a.text, b.text))) ||
[],
},
];
const handleTableChange = (sorter) => {
setState({ ...state, sortedInfo: sorter });
};
return (
<Card
title={t("dashboard.titles.scheduledindate", {
date: moment().startOf("day").format("MM/DD/YYYY"),
})}
extra={
<Space>
<Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
<Switch
onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
defaultChecked={isTvModeScheduledIn}
/>
</Space>
}
{...cardProps}
>
<div style={{ height: "100%" }}>
<Table
onChange={handleTableChange}
pagination={false}
columns={isTvModeScheduledIn ? tvColumns : columns}
scroll={{ x: true, y: "calc(100% - 2em)" }}
rowKey="id"
style={{ height: "85%" }}
dataSource={appt}
size={isTvModeScheduledIn ? "small" : "middle"}
/>
</div>
</Card>
);
} }
export const DashboardScheduledInTodayGql = ` export const DashboardScheduledInTodayGql = `
scheduled_in_today: appointments(where: {start: {_gte: "${dayjs() scheduled_in_today: appointments(where: {start: {_gte: "${moment()
.startOf("day") .startOf("day")
.toISOString()}", _lte: "${dayjs() .toISOString()}", _lte: "${moment()
.endOf("day") .endOf("day")
.toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) { .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
canceled canceled
id id
job { job {

37
client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
View File

@@ -16,7 +16,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
const {t} = useTranslation(); const {t} = useTranslation();
const [state, setState] = useState({ const [state, setState] = useState({
sortedInfo: {}, sortedInfo: {},
}); filteredInfo: {},});
const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage( const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage(
"isTvModeScheduledOut", "isTvModeScheduledOut",
false false
@@ -41,10 +41,11 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
joblines_body, joblines_body,
joblines_ref, joblines_ref,
}; };
}).sort(function (a, b) {
return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
}); });
console.log('Scheduled Out Today')
console.dir(scheduledOutToday);
const tvFontSize = 18; const tvFontSize = 18;
const tvFontWeight = "bold"; const tvFontWeight = "bold";
@@ -106,6 +107,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
sortOrder: sortOrder:
state.sortedInfo.columnKey === "owner" && state.sortedInfo.order, state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => { render: (text, record) => {
console.log('Render record out today');
console.dir(record);
return record.ownerid ? ( return record.ownerid ? (
<Link <Link
to={"/manage/owners/" + record.ownerid} to={"/manage/owners/" + record.ownerid}
@@ -150,8 +153,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
</Link> </Link>
) : ( ) : (
<span <span
style={{fontSize: tvFontSize, fontWeight: tvFontWeight}} style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>{`${
>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${ record.v_model_yr || ""} ${record.v_make_desc || ""} ${
record.v_model_desc || "" record.v_model_desc || ""
}`}</span> }`}</span>
); );
@@ -178,7 +181,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
}; };
}) })
.sort((a, b) => alphaSort(a.text, b.text))) || .sort((a, b) => alphaSort(a.text, b.text))) ||
[], [],onFilter: (value, record) => value.includes(record.alt_transport),
render: (text, record) => ( render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
{record.alt_transport} {record.alt_transport}
@@ -194,8 +197,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
sortOrder: sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order, state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
filters: filters:
(data.scheduled_out_today && (scheduledOutToday &&
data.scheduled_out_today scheduledOutToday
.map((j) => j.status) .map((j) => j.status)
.filter(onlyUnique) .filter(onlyUnique)
.map((s) => { .map((s) => {
@@ -206,7 +209,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
}) })
.sort((a, b) => alphaSort(a.text, b.text))) || .sort((a, b) => alphaSort(a.text, b.text))) ||
[], [],
render: (text, record) => ( onFilter: (value, record) => value.includes(record.status),render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}> <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
{record.status} {record.status}
</span> </span>
@@ -372,8 +375,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
sortOrder: sortOrder:
state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order, state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
filters: filters:
(data.scheduled_out_today && (scheduledOutToday &&
data.scheduled_out_today scheduledOutToday
.map((j) => j.ins_co_nm) .map((j) => j.ins_co_nm)
.filter(onlyUnique) .filter(onlyUnique)
.map((s) => { .map((s) => {
@@ -396,8 +399,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.columnKey === "alt_transport" &&
state.sortedInfo.order, state.sortedInfo.order,
filters: filters:
(data.scheduled_out_today && (scheduledOutToday &&
data.scheduled_out_today scheduledOutToday
.map((j) => j.alt_transport) .map((j) => j.alt_transport)
.filter(onlyUnique) .filter(onlyUnique)
.map((s) => { .map((s) => {
@@ -408,11 +411,11 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
}) })
.sort((a, b) => alphaSort(a.text, b.text))) || .sort((a, b) => alphaSort(a.text, b.text))) ||
[], [],
}, onFilter: (value, record) => value.includes(record.alt_transport),},
]; ];
const handleTableChange = (sorter) => { const handleTableChange = (pagination, filters, sorter) => {
setState({...state, sortedInfo: sorter}); setState({...state, filteredInfo: filters, sortedInfo: sorter});
}; };
return ( return (
@@ -438,7 +441,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
scroll={{x: true, y: "calc(100% - 2em)"}} scroll={{x: true, y: "calc(100% - 2em)"}}
rowKey="id" rowKey="id"
style={{height: "85%"}} style={{height: "85%"}}
dataSource={data.scheduled_out_today} dataSource={scheduledOutToday}
size={isTvModeScheduledOut ? "small" : "middle"} size={isTvModeScheduledOut ? "small" : "middle"}
/> />
</div> </div>