- Merge and update

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-30 19:37:52 -05:00
43 changed files with 3336 additions and 1306 deletions

View File

@@ -1,11 +1,14 @@
import {Button, Col, Collapse, Result, Row, Space} from "antd";
import React from "react";
import {withTranslation} from "react-i18next";
import {logImEXEvent} from "../../firebase/firebase.utils";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
import { withTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils";
import * as Sentry from "@sentry/react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
selectBodyshop,
selectCurrentUser,
} from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
@@ -135,7 +138,6 @@ class ErrorBoundary extends React.Component {
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withTranslation()(ErrorBoundary));
export default Sentry.withErrorBoundary(
connect(mapStateToProps, mapDispatchToProps)(withTranslation()(ErrorBoundary))
);

View File

@@ -0,0 +1,250 @@
import React, {useCallback, useEffect, useRef, useState} from "react";
import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row} from "antd";
import Markdown from "react-markdown";
import {createStructuredSelector} from "reselect";
import {selectCurrentEula, selectCurrentUser} from "../../redux/user/user.selectors";
import {connect} from "react-redux";
import {FormDatePicker} from "../form-date-picker/form-date-picker.component";
import {INSERT_EULA_ACCEPTANCE} from "../../graphql/user.queries";
import {useMutation} from "@apollo/client";
import {acceptEula} from "../../redux/user/user.actions";
import {useTranslation} from "react-i18next";
import day from '../../utils/day';
import './eula.styles.scss';
const Eula = ({currentEula, currentUser, acceptEula}) => {
const [formReady, setFormReady] = useState(false);
const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false);
const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE);
const [form] = Form.useForm();
const markdownCardRef = useRef(null);
const {t} = useTranslation();
const [api, contextHolder] = notification.useNotification();
const handleScroll = useCallback((e) => {
const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
if (bottom && !hasEverScrolledToBottom) {
setHasEverScrolledToBottom(true);
} else if (e.target.scrollHeight <= e.target.clientHeight && !hasEverScrolledToBottom) {
setHasEverScrolledToBottom(true);
}
}, [hasEverScrolledToBottom, setHasEverScrolledToBottom]);
useEffect(() => {
handleScroll({target: markdownCardRef.current});
}, [handleScroll]);
const handleChange = useCallback(() => {
form.validateFields({validateOnly: true})
.then(() => setFormReady(hasEverScrolledToBottom))
.catch(() => setFormReady(false));
}, [form, hasEverScrolledToBottom]);
useEffect(() => {
handleChange();
}, [handleChange, hasEverScrolledToBottom, form]);
const onFinish = async ({acceptTerms, ...formValues}) => {
const eulaId = currentEula.id;
const useremail = currentUser.email;
try {
const {accepted_terms, ...otherFormValues} = formValues;
// Trim the values of the fields before submitting
const trimmedFormValues = Object.entries(otherFormValues).reduce((acc, [key, value]) => {
acc[key] = typeof value === 'string' ? value.trim() : value;
return acc;
}, {});
await insertEulaAcceptance({
variables: {
eulaAcceptance: {
eulaid: eulaId,
useremail,
...otherFormValues,
...trimmedFormValues,
date_accepted: new Date(),
}
}
});
acceptEula();
} catch (err) {
api.error({
message: t('eula.errors.acceptance.message'),
description: t('eula.errors.acceptance.description'),
placement: 'bottomRight',
duration: 5000,
});
console.log(`${t('eula.errors.acceptance.message')}`);
console.dir({
message: err.message,
stack: err.stack,
});
}
};
return (
<>
{contextHolder}
<Modal
title={t('eula.titles.modal')}
className='eula-modal'
width={'100vh'}
open={currentEula}
footer={() => (
<Button
className='eula-accept-button'
form='tosForm'
type="primary"
size='large'
htmlType="submit"
disabled={!formReady}
children={t('eula.buttons.accept')}
/>
)}
closable={false}
>
<Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
<div id='markdowndiv' className='eula-markdown-div'>
<Markdown children={currentEula?.content?.replace(/\\n|\\r|\\n\\r|\\r\\n/g, '\n')}/>
</div>
</Card>
<EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t}/>
{!hasEverScrolledToBottom && (
<Card className='eula-never-scrolled' type='inner'>
<h3>{t('eula.content.never_scrolled')}</h3>
</Card>
)}
</Modal>
</>
)
}
const EulaFormComponent = ({form, handleChange, onFinish, t}) => (
<Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
<Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
<Row gutter={24}>
<Col span={12}>
<Form.Item
label={t('eula.labels.first_name')}
name="first_name"
rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.first_name'))),
},]}
>
<Input placeholder={t('eula.labels.first_name')}
aria-label={t('eula.labels.first_name')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t('eula.labels.last_name')}
name="last_name"
rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.last_name'))),
}]}
>
<Input placeholder={t('eula.labels.last_name')}
aria-label={t('eula.labels.last_name')}/>
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item
label={t('eula.labels.business_name')}
name="business_name"
rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.business_name'))),
}]}
>
<Input placeholder={t('eula.labels.business_name')} aria-label={t('eula.labels.business_name')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t('eula.labels.phone_number')}
name="phone_number"
rules={[
{
pattern: /^(\+\d{1,2}\s?)?1?-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
message: t('eula.messages.phone_number'),
}
]}
>
<Input placeholder={t('eula.labels.phone_number')}
aria-label={t('eula.labels.phone_number')}/>
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={12}>
<Form.Item
label={t('eula.labels.address')}
name="address"
>
<Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t('eula.labels.date_accepted')}
name="date_accepted"
rules={[
{
required: true,
validator: (_, value) => {
if (day(value).isSame(day(), 'day')) {
return Promise.resolve();
}
return Promise.reject(new Error(t('eula.messages.date_accepted')));
}
},
]}
>
<FormDatePicker onChange={handleChange} onlyToday aria-label={t('eula.labels.date_accepted')}/>
</Form.Item>
</Col>
</Row>
<Row gutter={24}>
<Col span={24}>
<Form.Item
name="accepted_terms"
valuePropName="checked"
rules={[
{
required: true,
validator: (_, value) =>
value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))),
},
]}
>
<Checkbox aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
</Form.Item>
</Col>
</Row>
</Form>
</Card>
);
const mapStateToProps = createStructuredSelector({
currentEula: selectCurrentEula,
currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
acceptEula: () => dispatch(acceptEula()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Eula);

View File

@@ -0,0 +1,21 @@
.eula-modal {
top: 20px;
}
.eula-markdown-card {
max-height: 50vh;
overflow-y: auto;
background-color: lightgray;
}
.eula-markdown-div {
padding: 0 10px 0 10px;
}
.eula-never-scrolled {
text-align: center;
}
.eula-accept-button {
width: 100%;
}

View File

@@ -16,7 +16,16 @@ export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
const dateFormat = "MM/DD/YYYY";
export function FormDatePicker({bodyshop, value, onChange, onBlur, onlyFuture, isDateOnly = true, ...restProps}) {
export function FormDatePicker({
bodyshop,
value,
onChange,
onBlur,
onlyFuture,
onlyToday,
isDateOnly = true,
...restProps
}) {
const ref = useRef();
const handleChange = (newDate) => {
@@ -87,9 +96,13 @@ export function FormDatePicker({bodyshop, value, onChange, onBlur, onlyFuture, i
onBlur={onBlur || handleBlur}
showToday={false}
disabledTime
{...(onlyFuture && {
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
})}
disabledDate={(d) => {
if (onlyToday) {
return !dayjs().isSame(d, 'day');
} else if (onlyFuture) {
return dayjs().subtract(1, "day").isAfter(d);
}
}}
{...restProps}
/>
</div>

View File

@@ -1,5 +1,5 @@
import React, {useCallback, useEffect, useState} from 'react';
import moment from "moment";
import day from '../../utils/day';
import axios from 'axios';
import {Badge, Card, Space, Table, Tag} from 'antd';
import {gql, useQuery} from "@apollo/client";
@@ -69,7 +69,7 @@ export function JobLifecycleComponent({job, statuses, ...rest}) {
dataIndex: 'start',
key: 'start',
render: (text) => DateTimeFormatterFunction(text),
sorter: (a, b) => moment(a.start).unix() - moment(b.start).unix(),
sorter: (a, b) => day(a.start).unix() - day(b.start).unix(),
},
{
title: t('job_lifecycle.columns.relative_start'),
@@ -87,7 +87,7 @@ export function JobLifecycleComponent({job, statuses, ...rest}) {
}
return isEmpty(a.end) ? 1 : -1;
}
return moment(a.end).unix() - moment(b.end).unix();
return day(a.end).unix() - day(b.end).unix();
},
render: (text) => isEmpty(text) ? t('job_lifecycle.content.not_available') : DateTimeFormatterFunction(text)
},
@@ -179,7 +179,7 @@ export function JobLifecycleComponent({job, statuses, ...rest}) {
style={{marginTop: '10px'}}>
<div>
{lifecycleData.durations.summations.map((key) => (
<Tag color={key.color} style={{width: '13vh', padding: '4px', margin: '4px'}}>
<Tag key={key.status} color={key.color} style={{width: '13vh', padding: '4px', margin: '4px'}}>
<div
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}

View File

@@ -1,54 +1,54 @@
import {DownCircleFilled} from "@ant-design/icons";
import {useMutation} from "@apollo/client";
import {Button, Dropdown, notification} from "antd";
import { DownCircleFilled } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Button, Dropdown, notification } from "antd";
import React from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {UPDATE_JOB_STATUS} from "../../graphql/jobs.queries";
import {insertAuditTrail} from "../../redux/application/application.actions";
import {selectBodyshop} from "../../redux/user/user.selectors";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
insertAuditTrail: ({jobid, operation}) =>
dispatch(insertAuditTrail({jobid, operation})),
insertAuditTrail: ({ jobid, operation }) =>
dispatch(insertAuditTrail({ jobid, operation })),
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminStatus);
export function JobsAdminStatus({insertAuditTrail, bodyshop, job}) {
const {t} = useTranslation();
export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
const { t } = useTranslation();
const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
const updateJobStatus = (status) => {
mutationUpdateJobstatus({
variables: {jobId: job.id, status: status},
})
.then((r) => {
notification["success"]({message: t("jobs.successes.save")});
insertAuditTrail({
jobid: job.id,
operation: AuditTrailMapping.admin_jobstatuschange(status),
});
// refetch();
})
.catch((error) => {
notification["error"]({message: t("jobs.errors.saving")});
});
};
const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
const updateJobStatus = (status) => {
mutationUpdateJobstatus({
variables: { jobId: job.id, status: status },
})
.then((r) => {
notification["success"]({ message: t("jobs.successes.save") });
insertAuditTrail({
jobid: job.id,
operation: AuditTrailMapping.admin_jobstatuschange(status),
});
// refetch();
})
.catch((error) => {
notification["error"]({ message: t("jobs.errors.saving") });
});
};
const statusMenu = {
items: bodyshop.md_ro_statuses.statuses.map((item) => ({
key: item,
label: item,
})),
onClick: (e) => {
updateJobStatus(e.key);
},
}
const statusMenu = {
items: bodyshop.md_ro_statuses.statuses.map((item) => ({
key: item,
label: item,
})),
onClick: (e) => {
updateJobStatus(e.key);
},
}
return (
<>
@@ -56,7 +56,7 @@ export function JobsAdminStatus({insertAuditTrail, bodyshop, job}) {
<Button shape="round">
<span>{job.status}</span>
<DownCircleFilled/>
<DownCircleFilled />
</Button>
</Dropdown>
</>

View File

@@ -76,7 +76,7 @@ export function JobAdminMarkReexport({
const result = await markJobExported({
variables: {
jobId: job.id,
date_exported: moment(),
date_exported: dayjs(),
default_exported: bodyshop.md_ro_statuses.default_exported,
},
});

View File

@@ -732,12 +732,7 @@ export function JobsDetailHeaderActions({
menuItems.push({
key: 'cccontract',
disabled: jobRO || !job.converted,
label: <Link
to={{
pathname: "/manage/courtesycars/contracts/new",
state: {jobId: job.id},
}}
>
label: <Link state={{jobId: job.id}} to='/manage/courtesycars/contracts/new'>
{t("menus.jobsactions.newcccontract")}
</Link>
});

View File

@@ -42,8 +42,13 @@ export function JobsDetailRatesTaxes({
})
);
}
formItems.push(Space({children: section, wrap: true}));
formItems.push(<Divider/>);
formItems.push(<>
<Space wrap>
{section}
</Space>
<Divider/>
</>)
}
return (
<Collapse defaultActiveKey={expanded && "rates"}>

View File

@@ -220,12 +220,12 @@ export function PayableExportAll({
setLoading(false);
};
if (bodyshop.pbs_serialnumber)
return (
<Link to={{state: {billids}, pathname: `/manage/dmsap`}}>
<Button>{t("jobs.actions.export")}</Button>
</Link>
);
if (bodyshop.pbs_serialnumber)
return (
<Link to='/manage/dmsap' state={{ billids }}>
<Button>{t("jobs.actions.export")}</Button>
</Link>
);
return (
<Button onClick={handleQbxml} loading={loading} disabled={disabled}>

View File

@@ -213,12 +213,12 @@ export function PayableExportButton({
setLoading(false);
};
if (bodyshop.pbs_serialnumber)
return (
<Link to={{state: {billids: [billId]}, pathname: `/manage/dmsap`}}>
<Button>{t("jobs.actions.export")}</Button>
</Link>
);
if (bodyshop.pbs_serialnumber)
return (
<Link to='/manage/dmsap' state={{billids: [billId]}}>
<Button>{t("jobs.actions.export")}</Button>
</Link>
);
return (
<Button onClick={handleQbxml} loading={loading} disabled={disabled}>

View File

@@ -106,36 +106,36 @@ export function ProductionBoardKanbanComponent({
const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
let movedCardNewKanbanParent;
if (movedCardWillBeFirst) {
//console.log("==> New Card is first.");
movedCardNewKanbanParent = "-1";
} else if (movedCardWillBeLast) {
// console.log("==> New Card is last.");
movedCardNewKanbanParent = lastCardInDestinationColumn.id;
} else if (!!newChildCard) {
// console.log("==> New Card is somewhere in the middle");
movedCardNewKanbanParent = newChildCard.kanbanparent;
} else {
throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
}
const newChildCardNewParent = newChildCard ? card.id : null;
const update = await client.mutate({
mutation: generate_UPDATE_JOB_KANBAN(
oldChildCard ? oldChildCard.id : null,
oldChildCardNewParent,
card.id,
movedCardNewKanbanParent,
destination.toColumnId,
newChildCard ? newChildCard.id : null,
newChildCardNewParent
),
// TODO: optimisticResponse
});
insertAuditTrail({
jobid: card.id,
operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
});
let movedCardNewKanbanParent;
if (movedCardWillBeFirst) {
//console.log("==> New Card is first.");
movedCardNewKanbanParent = "-1";
} else if (movedCardWillBeLast) {
// console.log("==> New Card is last.");
movedCardNewKanbanParent = lastCardInDestinationColumn.id;
} else if (!!newChildCard) {
// console.log("==> New Card is somewhere in the middle");
movedCardNewKanbanParent = newChildCard.kanbanparent;
} else {
console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
}
const newChildCardNewParent = newChildCard ? card.id : null;
const update = await client.mutate({
mutation: generate_UPDATE_JOB_KANBAN(
oldChildCard ? oldChildCard.id : null,
oldChildCardNewParent,
card.id,
movedCardNewKanbanParent,
destination.toColumnId,
newChildCard ? newChildCard.id : null,
newChildCardNewParent
),
// TODO: optimisticResponse
});
insertAuditTrail({
jobid: card.id,
operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
});
if (update.errors) {
notification["error"]({
@@ -146,30 +146,30 @@ export function ProductionBoardKanbanComponent({
}
};
const totalHrs = data
.reduce(
(acc, val) =>
acc +
(val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) +
(val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const totalLAB = data
.reduce(
(acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const totalLAR = data
.reduce(
(acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const totalHrs = data
.reduce(
(acc, val) =>
acc +
(val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) +
(val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const totalLAB = data
.reduce(
(acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const totalLAR = data
.reduce(
(acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
0
)
.toFixed(1);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const standardSizes = {
xs: "250",

View File

@@ -344,15 +344,16 @@ export function ScoreboardTimeTicketsStats({bodyshop}) {
const jobData = {};
data.jobs.forEach((job) => {
job.tthrs = job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0);
});
const dataJobs = data.jobs.map((job) => ({
...job,
tthrs: job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0)
}));
jobData.tthrs = data.jobs
jobData.tthrs = dataJobs
.reduce((acc, val) => acc + val.tthrs, 0)
.toFixed(1);
jobData.count = data.jobs.length.toFixed(0);
jobData.count = dataJobs.length.toFixed(0);
return {
fixed: ret,