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

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

@@ -1,19 +1,25 @@
import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined,} from "@ant-design/icons";
import {Card, Space, Switch, Table, Tooltip, Typography} from "antd";
import dayjs from "../../../utils/day";
import React, {useState} from "react";
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 {
BranchesOutlined,
ExclamationCircleFilled,
PauseCircleOutlined,
} from "@ant-design/icons";
import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import moment from "moment";
import React, { useState } from "react";
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 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";
export default function DashboardScheduledInToday({data, ...cardProps}) {
const {t} = useTranslation();
export default function DashboardScheduledInToday({ data, ...cardProps }) {
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
});
@@ -21,6 +27,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
"isTvModeScheduledIn",
false
);
if (!data) return null;
if (!data.scheduled_in_today)
return <DashboardRefreshRequired {...cardProps} />;
@@ -65,7 +72,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
}
});
appt.sort(function (a, b) {
return dayjs(a.start) - dayjs(b.start);
return new moment(a.start) - new moment(b.start);
});
const tvFontSize = 16;
@@ -81,7 +88,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
sortOrder:
state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<TimeFormatter>{record.start}</TimeFormatter>
</span>
),
@@ -99,17 +106,17 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
onClick={(e) => e.stopPropagation()}
>
<Space>
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.ro_number || t("general.labels.na")}
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert"/>
<ExclamationCircleFilled className="production-alert" />
) : null}
{record.suspended && (
<PauseCircleOutlined style={{color: "orangered"}}/>
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
{record.iouparent && (
<Tooltip title={t("jobs.labels.iou")}>
<BranchesOutlined style={{color: "orangered"}}/>
<BranchesOutlined style={{ color: "orangered" }} />
</Tooltip>
)}
</span>
@@ -132,13 +139,13 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
to={"/manage/owners/" + record.ownerid}
onClick={(e) => e.stopPropagation()}
>
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<OwnerNameDisplay ownerObject={record}/>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<OwnerNameDisplay ownerObject={record} />
</span>
</Link>
) : (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<OwnerNameDisplay ownerObject={record}/>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
<OwnerNameDisplay ownerObject={record} />
</span>
);
},
@@ -163,14 +170,14 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
to={"/manage/vehicles/" + record.vehicleid}
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_desc || ""
}`}
</span>
</Link>
) : (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>{`${
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
record.v_model_yr || ""
} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
);
@@ -199,7 +206,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
.sort((a, b) => alphaSort(a.text, b.text))) ||
[],
render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.alt_transport}
</span>
),
@@ -214,7 +221,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
state.sortedInfo.order,
align: "right",
render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.joblines_body.toFixed(1)}
</span>
),
@@ -228,12 +235,13 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
align: "right",
render: (text, record) => (
<span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
{record.joblines_ref.toFixed(1)}
</span>
),
},
];
const columns = [
{
title: t("appointments.fields.time"),
@@ -251,7 +259,8 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
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) => (
state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
render: (text, record) => (
<Link
to={"/manage/jobs/" + record.jobid}
onClick={(e) => e.stopPropagation()}
@@ -259,14 +268,14 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
<Space>
{record.ro_number || t("general.labels.na")}
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert"/>
<ExclamationCircleFilled className="production-alert" />
) : null}
{record.suspended && (
<PauseCircleOutlined style={{color: "orangered"}}/>
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
{record.iouparent && (
<Tooltip title={t("jobs.labels.iou")}>
<BranchesOutlined style={{color: "orangered"}}/>
<BranchesOutlined style={{ color: "orangered" }} />
</Tooltip>
)}
</Space>
@@ -288,11 +297,11 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
to={"/manage/owners/" + record.ownerid}
onClick={(e) => e.stopPropagation()}
>
<OwnerNameDisplay ownerObject={record}/>
<OwnerNameDisplay ownerObject={record} />
</Link>
) : (
<span>
<OwnerNameDisplay ownerObject={record}/>
<OwnerNameDisplay ownerObject={record} />
</span>
);
},
@@ -303,11 +312,12 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
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>),
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"),
@@ -332,7 +342,8 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
`${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
),
sortOrder:
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, render: (text, record) => {
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
render: (text, record) => {
return record.vehicleid ? (
<Link
to={"/manage/vehicles/" + record.vehicleid}
@@ -399,13 +410,12 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
];
const handleTableChange = (sorter) => {
setState({...state, sortedInfo: sorter});
setState({ ...state, sortedInfo: sorter });
};
return (
<Card
title={t("dashboard.titles.scheduledindate", {
date: dayjs().startOf("day").format("MM/DD/YYYY"),
date: moment().startOf("day").format("MM/DD/YYYY"),
})}
extra={
<Space>
@@ -415,17 +425,19 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
defaultChecked={isTvModeScheduledIn}
/>
</Space>
}{...cardProps}
}
{...cardProps}
>
<div style={{height: "100%"}}>
<div style={{ height: "100%" }}>
<Table
onChange={handleTableChange}
pagination={false}
columns={isTvModeScheduledIn ? tvColumns : columns}
scroll={{x: true, y: "calc(100% - 2em)"}}
scroll={{ x: true, y: "calc(100% - 2em)" }}
rowKey="id"
style={{height: "85%"}}
dataSource={appt} size={isTvModeScheduledIn ? "small" : "middle"}
style={{ height: "85%" }}
dataSource={appt}
size={isTvModeScheduledIn ? "small" : "middle"}
/>
</div>
</Card>
@@ -433,9 +445,9 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
}
export const DashboardScheduledInTodayGql = `
scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
scheduled_in_today: appointments(where: {start: {_gte: "${moment()
.startOf("day")
.toISOString()}", _lte: "${dayjs()
.toISOString()}", _lte: "${moment()
.endOf("day")
.toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
canceled

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