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

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

@@ -1,6 +1,10 @@
import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined,} from "@ant-design/icons"; import {
BranchesOutlined,
ExclamationCircleFilled,
PauseCircleOutlined,
} from "@ant-design/icons";
import { Card, Space, Switch, Table, Tooltip, Typography } from "antd"; import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
import dayjs from "../../../utils/day"; import moment from "moment";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -9,7 +13,9 @@ import {onlyUnique} from "../../../utils/arrayHelper";
import { alphaSort, dateSort } from "../../../utils/sorters"; 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 }) {
@@ -21,6 +27,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
"isTvModeScheduledIn", "isTvModeScheduledIn",
false false
); );
if (!data) return null; if (!data) return null;
if (!data.scheduled_in_today) if (!data.scheduled_in_today)
return <DashboardRefreshRequired {...cardProps} />; return <DashboardRefreshRequired {...cardProps} />;
@@ -65,7 +72,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
} }
}); });
appt.sort(function (a, b) { appt.sort(function (a, b) {
return dayjs(a.start) - dayjs(b.start); return new moment(a.start) - new moment(b.start);
}); });
const tvFontSize = 16; const tvFontSize = 16;
@@ -234,6 +241,7 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
), ),
}, },
]; ];
const columns = [ const columns = [
{ {
title: t("appointments.fields.time"), title: t("appointments.fields.time"),
@@ -251,7 +259,8 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
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, render: (text, record) => ( state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
render: (text, record) => (
<Link <Link
to={"/manage/jobs/" + record.jobid} to={"/manage/jobs/" + record.jobid}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@@ -303,11 +312,12 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
key: "ownr_ph", key: "ownr_ph",
ellipsis: true, ellipsis: true,
responsive: ["md"], responsive: ["md"],
render: (text, record) => (<Space size="small" wrap> render: (text, record) => (
<Space size="small" wrap>
<ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} /> <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
<ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} /> <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
</Space>), </Space>
),
}, },
{ {
title: t("jobs.fields.ownr_ea"), 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 || ""}` `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
), ),
sortOrder: sortOrder:
state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, render: (text, record) => { state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
render: (text, record) => {
return record.vehicleid ? ( return record.vehicleid ? (
<Link <Link
to={"/manage/vehicles/" + record.vehicleid} to={"/manage/vehicles/" + record.vehicleid}
@@ -401,11 +412,10 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
const handleTableChange = (sorter) => { const handleTableChange = (sorter) => {
setState({ ...state, sortedInfo: sorter }); setState({ ...state, sortedInfo: sorter });
}; };
return ( return (
<Card <Card
title={t("dashboard.titles.scheduledindate", { title={t("dashboard.titles.scheduledindate", {
date: dayjs().startOf("day").format("MM/DD/YYYY"), date: moment().startOf("day").format("MM/DD/YYYY"),
})} })}
extra={ extra={
<Space> <Space>
@@ -415,7 +425,8 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
defaultChecked={isTvModeScheduledIn} defaultChecked={isTvModeScheduledIn}
/> />
</Space> </Space>
}{...cardProps} }
{...cardProps}
> >
<div style={{ height: "100%" }}> <div style={{ height: "100%" }}>
<Table <Table
@@ -425,7 +436,8 @@ export default function DashboardScheduledInToday({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={appt} size={isTvModeScheduledIn ? "small" : "middle"} dataSource={appt}
size={isTvModeScheduledIn ? "small" : "middle"}
/> />
</div> </div>
</Card> </Card>
@@ -433,9 +445,9 @@ export default function DashboardScheduledInToday({data, ...cardProps}) {
} }
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

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>