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

Merge branch 'master' into release/2022-01-14

Browse Source
This commit is contained in:
Patrick Fic
2022-01-11 12:01:03 -08:00
parent 9714371a36 7d4d97ce4e
commit 061212f915
45 changed files with 1327 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,7 +74,9 @@ export function BillEnterModalLinesComponent({
actual_price: opt.cost,
cost_center: opt.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? opt.part_type
? opt.part_type !== "PAE"
? opt.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[
opt.part_type

173
client/src/components/job-at-change/schedule-event.component.jsx
View File

@@ -27,6 +27,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
import DataLabel from "../data-label/data-label.component";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleAtChange from "./job-at-change.component";
import ScheduleEventColor from "./schedule-event.color.component";
import ScheduleEventNote from "./schedule-event.note.component";
@@ -66,7 +67,10 @@ export function ScheduleEventComponent({
const popoverContent = (
<div style={{ maxWidth: "40vw" }}>
{!event.isintake ? (
<strong>{event.title}</strong>
<Space>
<strong>{event.title}</strong>
<ScheduleEventColor event={event} />
</Space>
) : (
<Space>
<strong>{`${(event.job && event.job.ownr_fn) || ""} ${
@@ -118,7 +122,9 @@ export function ScheduleEventComponent({
</DataLabel>
<ScheduleEventNote event={event} />
</div>
) : null}
) : (
<div>{event.note || ""}</div>
)}
<Divider />
<Space wrap>
{event.job ? (
@@ -140,84 +146,89 @@ export function ScheduleEventComponent({
{t("appointments.actions.preview")}
</Button>
) : null}
<Dropdown
overlay={
<Menu>
<Menu.Item
onClick={() => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
);
}}
disabled={event.arrived}
>
{t("general.labels.email")}
</Menu.Item>
<Menu.Item
onClick={() => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: moment(event.start).format("MM/DD/YYYY"),
time: moment(event.start).format("HH:mm a"),
})
{event.job ? (
<Dropdown
overlay={
<Menu>
<Menu.Item
onClick={() => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
);
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
}}
disabled={event.arrived || !bodyshop.messagingservicesid}
>
{t("general.labels.sms")}
</Menu.Item>
</Menu>
}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>
}}
disabled={event.arrived}
>
{t("general.labels.email")}
</Menu.Item>
<Menu.Item
onClick={() => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: moment(event.start).format("MM/DD/YYYY"),
time: moment(event.start).format("HH:mm a"),
})
);
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
}}
disabled={event.arrived || !bodyshop.messagingservicesid}
>
{t("general.labels.sms")}
</Menu.Item>
</Menu>
}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>
) : null}
<Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
{t("appointments.actions.cancel")}
</Button>
<Button
disabled={event.arrived}
onClick={() => {
setVisible(false);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: event.job.id,
job: event.job,
previousEvent: event.id,
color: event.color,
alt_transport: event.job && event.job.alt_transport,
note: event.note,
},
});
}}
>
{t("appointments.actions.reschedule")}
</Button>
{event.isintake ? (
<Button
disabled={event.arrived}
onClick={() => {
setVisible(false);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: event.job.id,
job: event.job,
previousEvent: event.id,
color: event.color,
alt_transport: event.job && event.job.alt_transport,
note: event.note,
},
});
}}
>
{t("appointments.actions.reschedule")}
</Button>
) : (
<ScheduleManualEvent event={event} />
)}
{event.isintake ? (
<Link
to={{
@@ -235,7 +246,13 @@ export function ScheduleEventComponent({
);
const RegularEvent = event.isintake ? (
<div style={{ display: "flex", flexWrap: "wrap" }}>
<div
style={{
display: "flex",
flexWrap: "wrap",
height: "100%",
}}
>
<Space>
{event.note && <AlertFilled className="production-alert" />}
<strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
@@ -262,7 +279,7 @@ export function ScheduleEventComponent({
)}
</div>
) : (
<div>
<div style={{ height: "100%", width: "100%" }}>
<strong>{`${event.title || ""}`}</strong>
</div>
);
@@ -270,7 +287,7 @@ export function ScheduleEventComponent({
return (
<Popover
visible={visible}
onVisibleChange={(vis) => setVisible(vis)}
onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
trigger="click"
content={event.block ? blockContent : popoverContent}
style={{ height: "100%", width: "100%" }}

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

@@ -89,6 +89,19 @@ export function JobsDetailHeaderActions({
});
};
const handleSuspend = (e) => {
logImEXEvent("production_toggle_alert");
//e.stopPropagation();
updateJob({
variables: {
jobId: job.id,
job: {
suspended: !job.suspended,
},
},
});
};
const statusmenu = (
<Menu key="popovermenu">
<Menu.Item
@@ -199,7 +212,11 @@ export function JobsDetailHeaderActions({
{t("jobs.actions.addtoproduction")}
</Menu.Item>
)}
<Menu.Item key="togglesuspend" onClick={handleSuspend}>
{job.suspended
? t("production.actions.unsuspend")
: t("production.actions.suspend")}
</Menu.Item>
<Menu.Item key="toggleAlert" onClick={handleAlertToggle}>
{job.production_vars && job.production_vars.alert
? t("production.labels.alertoff")

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

@@ -1,5 +1,9 @@
import { Card, Col, Row, Space, Tag } from "antd";
import { WarningFilled, ExclamationCircleFilled } from "@ant-design/icons";
import {
WarningFilled,
ExclamationCircleFilled,
PauseCircleOutlined,
} from "@ant-design/icons";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -68,6 +72,9 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
{t("jobs.labels.inproduction")}
</Tag>
)}
{job.suspended && (
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
{job.production_vars && job.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert" />
) : null}

9
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -1,4 +1,8 @@
import { SyncOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import {
SyncOutlined,
ExclamationCircleFilled,
PauseCircleOutlined,
} from "@ant-design/icons";
import { useQuery } from "@apollo/client";
import { Button, Card, Grid, Input, Space, Table } from "antd";
import queryString from "query-string";
@@ -111,6 +115,9 @@ export function JobsList({ bodyshop }) {
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert" />
) : null}
{record.suspended && (
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
</Space>
</Link>
),

61
client/src/components/jobs-notes/jobs.notes.component.jsx
View File

@@ -5,7 +5,7 @@ import {
EyeInvisibleFilled,
WarningFilled,
} from "@ant-design/icons";
import { Button, Card, Space, Table } from "antd";
import { Button, Card, Form, Input, Space, Table } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -14,6 +14,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
import { setModalContext } from "../../redux/modals/modals.actions";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import { TemplateList } from "../../utils/TemplateConstants";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
@@ -131,32 +132,42 @@ export function JobNotesComponent({
];
return (
<Card
title={t("jobs.labels.notes")}
extra={
<Button
onClick={() => {
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: jobId,
},
});
}}
<div>
<LayoutFormRow>
<Form.Item
label={t("jobs.fields.invoice_final_note")}
name="invoice_final_note"
>
{t("notes.actions.new")}
</Button>
}
>
<NoteUpsertModal />
<Input.TextArea disabled={jobRO} />
</Form.Item>
</LayoutFormRow>
<Card
title={t("jobs.labels.notes")}
extra={
<Button
onClick={() => {
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: jobId,
},
});
}}
>
{t("notes.actions.new")}
</Button>
}
>
<NoteUpsertModal />
<Table
loading={loading}
columns={columns}
rowKey="id"
dataSource={data}
/>
</Card>
<Table
loading={loading}
columns={columns}
rowKey="id"
dataSource={data}
/>
</Card>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(JobNotesComponent);

6
client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
View File

@@ -10,7 +10,7 @@ import {
PageHeader,
Popconfirm,
Space,
Table
Table,
} from "antd";
import queryString from "query-string";
import React, { useState } from "react";
@@ -168,7 +168,9 @@ export function PartsOrderListTableComponent({
cost_center: pol.jobline?.part_type
? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
? pol.jobline.part_type
? pol.jobline.part_type !== "PAE"
? pol.jobline.part_type
: null
: responsibilityCenters.defaults &&
(responsibilityCenters.defaults.costs[
pol.jobline.part_type

7
client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx
View File

@@ -43,7 +43,8 @@ export function PrintCenterJobsLabels({ bodyshop, jobId }) {
context: restVals,
},
{},
"p"
"p",
jobId
);
setLoading(false);
setIsModalVisible(false);
@@ -61,10 +62,10 @@ export function PrintCenterJobsLabels({ bodyshop, jobId }) {
label={t("printcenter.jobs.labels.position")}
name="position"
>
<InputNumber min={0} precision={0} />
<InputNumber min={1} precision={0} />
</Form.Item>
<Form.Item label={t("printcenter.jobs.labels.count")} name="count">
<InputNumber min={0} precision={0} />
<InputNumber min={1} precision={0} max={99} />
</Form.Item>
<Button type="primary" loading={loading} onClick={handleOk}>
{t("general.actions.print")}

9
client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
View File

@@ -1,4 +1,8 @@
import { CalendarOutlined, EyeFilled } from "@ant-design/icons";
import {
CalendarOutlined,
EyeFilled,
PauseCircleOutlined,
} from "@ant-design/icons";
import { Card, Col, Row, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
@@ -40,6 +44,9 @@ export default function ProductionBoardCard(
title={
<Space>
<ProductionAlert record={card} key="alert" />
{card.suspended && (
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
<span style={{ fontWeight: "bolder" }}>
{card.ro_number || t("general.labels.na")}
</span>

6
client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx
View File

@@ -41,7 +41,11 @@ export default function ProductionListColumnBodyPriority({ record }) {
title={t("production.actions.bodypriority-set")}
>
{new Array(15).fill().map((value, index) => (
<Menu.Item key={index + 1}>{index + 1}</Menu.Item>
<Menu.Item key={index + 1}>
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
</Menu.Item>
))}
</Menu.SubMenu>
</Menu>

14
client/src/components/production-list-columns/production-list-columns.data.js
View File

@@ -1,3 +1,5 @@
import { PauseCircleOutlined } from "@ant-design/icons";
import { Space } from "antd";
import i18n from "i18next";
import moment from "moment";
import React from "react";
@@ -43,9 +45,19 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
technician ? (
<Link to={`/tech/joblookup?selected=${record.id}`}>
{record.ro_number}
{record.suspended && (
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
</Link>
) : (
<Link to={`/manage/jobs/${record.id}`}>{record.ro_number}</Link>
<Link to={`/manage/jobs/${record.id}`}>
<Space>
{record.ro_number}
{record.suspended && (
<PauseCircleOutlined style={{ color: "orangered" }} />
)}
</Space>
</Link>
),
},
{

6
client/src/components/production-list-columns/production-list-columns.detailpriority.component.jsx
View File

@@ -41,7 +41,11 @@ export default function ProductionListColumnDetailPriority({ record }) {
title={t("production.actions.detailpriority-set")}
>
{new Array(15).fill().map((value, index) => (
<Menu.Item key={index + 1}>{index + 1}</Menu.Item>
<Menu.Item key={index + 1}>
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
</Menu.Item>
))}
</Menu.SubMenu>
</Menu>

6
client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx
View File

@@ -41,7 +41,11 @@ export default function ProductionListColumnPaintPriority({ record }) {
title={t("production.actions.paintpriority-set")}
>
{new Array(15).fill().map((value, index) => (
<Menu.Item key={index + 1}>{index + 1}</Menu.Item>
<Menu.Item key={index + 1}>
<div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
{index + 1}
</div>
</Menu.Item>
))}
</Menu.SubMenu>
</Menu>

4
client/src/components/production-list-table/production-list-table.container.jsx
View File

@@ -38,13 +38,11 @@ export default function ProductionListTableContainer() {
updatedJobs.jobs,
(a, b) => a.id === b.id && a.updated_at === b.updated_at
);
console.log(jobDiff);
if (jobDiff.length > 1) {
getUpdatedJobsData(jobDiff.map((j) => j.id));
} else if (jobDiff.length === 1) {
console.log("length was 1");
jobDiff.forEach((job) => {
console.log("Job ", job);
getUpdatedJobData(job.id);
});
}

8
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -12,6 +12,7 @@ import "./schedule-calendar.styles.scss";
import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
import { selectProblemJobs } from "../../redux/application/application.selectors";
import { Alert } from "antd";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -30,7 +31,7 @@ export function ScheduleCalendarWrapperComponent({
}) {
const search = queryString.parse(useLocation().search);
const history = useHistory();
const { t } = useTranslation();
const handleEventPropStyles = (event, start, end, isSelected) => {
return {
...(event.color
@@ -57,7 +58,10 @@ export function ScheduleCalendarWrapperComponent({
<Alert
key={problem.id}
type="error"
message={`${problem.ro_number} has a data consistency issue. It has been exlcuded for scheduling purposes. CODE: ${problem.code}`}
message={t("appointments.labels.dataconsistency", {
ro_number: problem.ro_number,
code: problem.code,
})}
/>
))}

7
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -3,7 +3,7 @@ import { Button, Card, Col, PageHeader, Row, Space } from "antd";
import React from "react";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
//import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
@@ -25,9 +25,8 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
<SyncOutlined />
</Button>
<ScheduleProductionList />
{
// <ScheduleManualEvent />
}
<ScheduleManualEvent />
</Space>
}
/>

41
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -10,6 +10,7 @@ import ScheduleCalendarComponent from "./schedule-calendar.component";
import { calculateScheduleLoad } from "../../redux/application/application.actions";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import moment from "moment";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
});
@@ -26,7 +27,12 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
const { loading, error, data, refetch } = useQuery(
QUERY_ALL_ACTIVE_APPOINTMENTS,
{
variables: { start: range.start.toDate(), end: range.end.toDate() },
variables: {
start: range.start.toDate(),
end: range.end.toDate(),
startd: range.start,
endd: range.end,
},
skip: !!!range.start || !!!range.end,
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
@@ -39,15 +45,30 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
let normalizedData = data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
});
let normalizedData = [
...data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
}),
...data.employee_vacation.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return {
...e,
title: `${
(e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
} ${e.employee.last_name || ""} OUT`,
color: "red",
start: moment(e.start).startOf("day").toDate(),
end: moment(e.end).startOf("day").toDate(),
vacation: true,
};
}),
];
return (
<ScheduleCalendarComponent

36
client/src/components/schedule-day-view/schedule-day-view.container.jsx
View File

@@ -5,11 +5,14 @@ import { QUERY_APPOINTMENT_BY_DATE } from "../../graphql/appointments.queries";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import moment from "moment";
import { useTranslation } from "react-i18next";
export default function ScheduleDayViewContainer({ day }) {
const { loading, error, data } = useQuery(QUERY_APPOINTMENT_BY_DATE, {
variables: {
start: moment(day).startOf("day"),
end: moment(day).endOf("day"),
startd: moment(day).startOf("day").format("YYYY-MM-DD"),
endd: moment(day).add(1, "day").format("YYYY-MM-DD"),
},
skip: !moment(day).isValid(),
fetchPolicy: "network-only",
@@ -22,15 +25,30 @@ export default function ScheduleDayViewContainer({ day }) {
let normalizedData;
if (data) {
normalizedData = data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
});
normalizedData = [
...data.appointments.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return Object.assign(
{},
e,
{ start: new Date(e.start) },
{ end: new Date(e.end) }
);
}),
...data.employee_vacation.map((e) => {
//Required becuase Hasura returns a string instead of a date object.
return {
...e,
title: `${
(e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
} ${e.employee.last_name || ""} OUT`,
color: "red",
start: moment(e.start).startOf("day").toDate(),
end: moment(e.end).startOf("day").toDate(),
vacation: true,
};
}),
];
}
return (

20
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -5,8 +5,9 @@ import {
Input,
Row,
Select,
Space, Switch,
Typography
Space,
Switch,
Typography,
} from "antd";
import axios from "axios";
import moment from "moment";
@@ -75,10 +76,14 @@ export function ScheduleJobModalComponent({
<Row gutter={[16, 16]}>
<Col span={12}>
<Space>
<Typography.Title level={3}>{lbrHrsData?.jobs_by_pk?.ro_number}</Typography.Title>
<Typography.Title
level={4}
>{`B/R Hrs:${lbrHrsData?.jobs_by_pk.labhrs?.aggregate.sum.mod_lb_hrs}/${lbrHrsData?.jobs_by_pk.larhrs?.aggregate.sum.mod_lb_hrs}`}</Typography.Title>
<Typography.Title level={3}>
{lbrHrsData?.jobs_by_pk?.ro_number}
</Typography.Title>
<Typography.Title level={4}>{`B/R Hrs:${
lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
}/${
lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
}`}</Typography.Title>
</Space>
<LayoutFormRow grow>
<Form.Item
@@ -183,10 +188,9 @@ export function ScheduleJobModalComponent({
/>
</Col>
<Col span={12}>
<Form.Item shouldUpdate>
<Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
{() => {
const values = form.getFieldsValue();
return (
<div className="schedule-job-modal">
<ScheduleDayViewContainer day={values.start} />

86
client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
View File

@@ -1,17 +1,32 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Form, Input, Popover, Space } from "antd";
import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
INSERT_APPOINTMENT,
INSERT_MANUAL_APPT,
UPDATE_APPOINTMENT,
} from "../../graphql/appointments.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
export default function ScheduleManualEvent({ event }) {
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScheduleManualEvent);
export function ScheduleManualEvent({ bodyshop, event }) {
const { t } = useTranslation();
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
@@ -22,26 +37,27 @@ export default function ScheduleManualEvent({ event }) {
useEffect(() => {
if (visibility && event) {
form.setFieldsValue({ event });
form.setFieldsValue(event);
}
}, [visibility, form, event]);
useEffect(() => {
// if (entryData && entryData.scoreboard && entryData.scoreboard[0]) {
// console.log("Setting FOrm");
// // form.setFieldsValue(entryData.scoreboard[0]);
// }
}, [form]);
const handleFinish = async (values) => {
logImEXEvent("job_close_add_to_scoreboard");
logImEXEvent("schedule_manual_event");
setLoading(true);
try {
if (event && event.id) {
updateAppointment();
updateAppointment({
variables: { appid: event.id, app: values },
refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
});
} else {
insertAppointment();
insertAppointment({
variables: {
apt: { ...values, isintake: false, bodyshopid: bodyshop.id },
},
refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
});
}
} catch (error) {
console.log(error);
@@ -56,8 +72,8 @@ export default function ScheduleManualEvent({ event }) {
<div>
<Form form={form} layout="vertical" onFinish={handleFinish}>
<Form.Item
label={t("schedule.fields.note")}
name="note"
label={t("appointments.fields.title")}
name="title"
rules={[
{
required: true,
@@ -67,8 +83,11 @@ export default function ScheduleManualEvent({ event }) {
>
<Input />
</Form.Item>
<Form.Item label={t("appointments.fields.note")} name="note">
<Input />
</Form.Item>
<Form.Item
label={t("schedule.fields.start")}
label={t("appointments.fields.start")}
name="start"
rules={[
{
@@ -80,17 +99,42 @@ export default function ScheduleManualEvent({ event }) {
<FormDateTimePickerComponent />
</Form.Item>
<Form.Item
label={t("schedule.fields.end")}
label={t("appointments.fields.end")}
name="end"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
({ getFieldValue }) => ({
async validator(rule, value) {
if (value) {
const { start } = form.getFieldsValue();
if (moment(start).isAfter(moment(value))) {
return Promise.reject(
t("employees.labels.endmustbeafterstart")
);
} else {
return Promise.resolve();
}
} else {
return Promise.resolve();
}
},
}),
]}
>
<FormDateTimePickerComponent />
</Form.Item>
<Form.Item label={t("appointments.fields.color")} name="color">
<Select>
{bodyshop.appt_colors.map((col, idx) => (
<Select.Option key={idx} value={col.color.hex}>
{col.label}
</Select.Option>
))}
</Select>
</Form.Item>
<Space wrap>
<Button type="primary" htmlType="submit">
@@ -112,7 +156,9 @@ export default function ScheduleManualEvent({ event }) {
return (
<Popover content={overlay} visible={visibility}>
<Button loading={loading} onClick={handleClick}>
{t("schedule.labels.manualevent")}
{event
? t("appointments.actions.reschedule")
: t("appointments.labels.manualevent")}
</Button>
</Popover>
);

124
client/src/components/shop-employees/shop-employees-add-vacation.component.jsx Normal file
View File

@@ -0,0 +1,124 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Form, notification, Popover, Space } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_VACATION } from "../../graphql/employees.queries";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
export default function ShopEmployeeAddVacation({ employee }) {
const { t } = useTranslation();
const [insertVacation] = useMutation(INSERT_VACATION);
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
const [visibility, setVisibility] = useState(false);
const handleFinish = async (values) => {
logImEXEvent("employee_add_vacation");
setLoading(true);
let result;
result = await insertVacation({
variables: { vacation: { ...values, employeeid: employee.id } },
update(cache, { data }) {
cache.modify({
id: cache.identify({ id: employee.id, __typename: "employees" }),
fields: {
employee_vacations(ex) {
return [data.insert_employee_vacation_one, ...ex];
},
},
});
},
});
if (!!result.errors) {
notification["error"]({
message: t("employees.errors.adding", {
message: JSON.stringify(result.errors),
}),
});
} else {
notification["success"]({
message: t("employees.successes.added"),
});
}
setLoading(false);
setVisibility(false);
};
const overlay = (
<Card>
<Form form={form} layout="vertical" onFinish={handleFinish}>
<Form.Item
label={t("employees.fields.vacation.start")}
name="start"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
]}
>
<FormDatePicker />
</Form.Item>
<Form.Item
label={t("employees.fields.vacation.end")}
name="end"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
({ getFieldValue }) => ({
async validator(rule, value) {
if (value) {
const { start } = form.getFieldsValue();
if (moment(start).isAfter(moment(value))) {
return Promise.reject(
t("employees.labels.endmustbeafterstart")
);
} else {
return Promise.resolve();
}
} else {
return Promise.resolve();
}
},
}),
]}
>
<FormDatePicker />
</Form.Item>
<Space wrap>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
<Button onClick={() => setVisibility(false)}>
{t("general.actions.cancel")}
</Button>
</Space>
</Form>
</Card>
);
const handleClick = (e) => {
setVisibility(true);
};
return (
<Popover content={overlay} visible={visibility}>
<Button
loading={loading}
disabled={!employee?.active}
onClick={handleClick}
>
{t("employees.actions.addvacation")}
</Button>
</Popover>
);
}

172
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -1,20 +1,41 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
import { useApolloClient, useMutation, useQuery } from "@apollo/client";
import {
Button,
Card,
Form,
Input,
InputNumber,
notification,
Select,
Switch,
Table,
} from "antd";
import { useForm } from "antd/es/form/Form";
import moment from "moment";
import querystring from "query-string";
import React, { useEffect } from "react";
import { useApolloClient } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
CHECK_EMPLOYEE_NUMBER,
DELETE_VACATION,
INSERT_EMPLOYEES,
QUERY_EMPLOYEE_BY_ID,
QUERY_USERS_BY_EMAIL,
UPDATE_EMPLOYEE,
} from "../../graphql/employees.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CiecaSelect from "../../utils/Ciecaselect";
import { DateFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import CiecaSelect from "../../utils/Ciecaselect";
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -23,20 +44,129 @@ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ShopEmployeesFormComponent({
bodyshop,
form,
selectedEmployee,
handleFinish,
}) {
export function ShopEmployeesFormComponent({ bodyshop }) {
const { t } = useTranslation();
const [form] = useForm();
const history = useHistory();
const search = querystring.parse(useLocation().search);
const [deleteVacation] = useMutation(DELETE_VACATION);
const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
variables: { id: search.employeeId },
skip: !search.employeeId || search.employeeId === "new",
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
});
const client = useApolloClient();
useEffect(() => {
if (selectedEmployee) form.resetFields();
}, [selectedEmployee, form]);
if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
else {
form.resetFields();
}
}, [form, data, search.employeeId]);
if (!selectedEmployee) return null;
const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
const handleFinish = (values) => {
if (search.employeeId && search.employeeId !== "new") {
//Update a record.
logImEXEvent("shop_employee_update");
updateEmployee({
variables: {
id: search.employeeId,
employee: {
...values,
user_email: values.user_email === "" ? null : values.user_email,
},
},
})
.then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
} else {
//New record, insert it.
logImEXEvent("shop_employee_insert");
insertEmployees({
variables: { employees: [{ ...values, shopid: bodyshop.id }] },
refetchQueries: ["QUERY_EMPLOYEES"],
}).then((r) => {
search.employeeId = r.data.insert_employees.returning[0].id;
history.push({ search: querystring.stringify(search) });
notification["success"]({
message: t("employees.successes.save"),
});
});
}
};
if (!search.employeeId) return null;
if (error) return <AlertComponent message={error.message} type="error" />;
const columns = [
{
title: t("employees.fields.vacation.start"),
dataIndex: "start",
key: "start",
render: (text, record) => <DateFormatter>{text}</DateFormatter>,
},
{
title: t("employees.fields.vacation.end"),
dataIndex: "end",
key: "end",
render: (text, record) => <DateFormatter>{text}</DateFormatter>,
},
{
title: t("employees.fields.vacation.length"),
dataIndex: "length",
key: "length",
render: (text, record) =>
moment(record.end).diff(moment(record.start), "days", true).toFixed(1),
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<Button
onClick={async () => {
await deleteVacation({
variables: { id: record.id },
update(cache) {
cache.modify({
id: cache.identify({
id: data.employees_by_pk.id,
__typename: "employees",
}),
fields: {
employee_vacations(ex, { readField }) {
return ex.filter(
(vacaref) => record.id !== readField("id", vacaref)
);
},
},
});
},
});
}}
>
<DeleteFilled />
</Button>
),
},
];
return (
<Card
@@ -51,15 +181,6 @@ export function ShopEmployeesFormComponent({
autoComplete={"off"}
layout="vertical"
form={form}
initialValues={{
...selectedEmployee,
hire_date: selectedEmployee.hire_date
? moment(selectedEmployee.hire_date)
: null,
termination_date: selectedEmployee.termination_date
? moment(selectedEmployee.termination_date)
: null,
}}
>
<LayoutFormRow>
<Form.Item
@@ -288,6 +409,15 @@ export function ShopEmployeesFormComponent({
}}
</Form.List>
</Form>
<Table
title={() => (
<ShopEmployeeAddVacation employee={data && data.employees_by_pk} />
)}
columns={columns}
rowKey={"id"}
dataSource={data ? data.employees_by_pk.employee_vacations : []}
/>
</Card>
);
}

41
client/src/components/shop-employees/shop-employees-list.component.jsx
View File

@@ -1,19 +1,22 @@
import { Button, Table } from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
export default function ShopEmployeesListComponent({
loading,
employees,
selectedEmployee,
setSelectedEmployee,
handleDelete,
}) {
import { useHistory, useLocation } from "react-router-dom";
export default function ShopEmployeesListComponent({ loading, employees }) {
const { t } = useTranslation();
const history = useHistory();
const search = queryString.parse(useLocation().search);
const handleOnRowClick = (record) => {
if (record) {
setSelectedEmployee(record);
} else setSelectedEmployee({});
search.employeeId = record.id;
history.push({ search: queryString.stringify(search) });
} else {
delete search.employeeId;
history.push({ search: queryString.stringify(search) });
}
};
const columns = [
{
@@ -41,18 +44,6 @@ export default function ShopEmployeesListComponent({
? t("employees.labels.flat_rate")
: t("employees.labels.straight_time"),
},
// {
// title: t("employees.labels.actions"),
// dataIndex: "actions",
// key: "actions",
// render: (text, record) => (
// <div>
// <Button key="delete" onClick={() => handleDelete(record.id)}>
// {t("general.actions.delete")}
// </Button>
// </div>
// )
// }
];
return (
<div>
@@ -62,7 +53,8 @@ export default function ShopEmployeesListComponent({
<Button
type="primary"
onClick={() => {
setSelectedEmployee({});
search.employeeId = "new";
history.push({ search: queryString.stringify(search) });
}}
>
{t("employees.actions.new")}
@@ -76,10 +68,11 @@ export default function ShopEmployeesListComponent({
dataSource={employees}
rowSelection={{
onSelect: (props) => {
setSelectedEmployee(props);
search.employeeId = props.id;
history.push({ search: queryString.stringify(search) });
},
type: "radio",
selectedRowKeys: [(selectedEmployee && selectedEmployee.id) || null],
selectedRowKeys: [search.employeeId],
}}
onRow={(record, rowIndex) => {
return {

29
client/src/components/shop-employees/shop-employees.component.jsx
View File

@@ -1,29 +0,0 @@
import React from "react";
import ShopEmployeesFormComponent from "./shop-employees-form.component";
import ShopEmployeesListComponent from "./shop-employees-list.component";
export default function ShopEmployeeComponent({
form,
loading,
employees,
employeeState,
handleFinish,
handleDelete
}) {
const [selectedEmployee, setSelectedEmployee] = employeeState;
return (
<div>
<ShopEmployeesListComponent
employees={employees}
loading={loading}
selectedEmployee={selectedEmployee}
setSelectedEmployee={setSelectedEmployee}
handleDelete={handleDelete}
/>
<ShopEmployeesFormComponent
handleFinish={handleFinish}
form={form}
selectedEmployee={selectedEmployee}
/>
</div>
);
}

114
client/src/components/shop-employees/shop-employees.container.jsx
View File

@@ -1,120 +1,32 @@
import { useMutation, useQuery } from "@apollo/client";
import { Form, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/client";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
DELETE_EMPLOYEE,
INSERT_EMPLOYEES,
QUERY_EMPLOYEES,
UPDATE_EMPLOYEE,
} from "../../graphql/employees.queries";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import ShopEmployeeComponent from "./shop-employees.component";
import ShopEmployeesFormComponent from "./shop-employees-form.component";
import ShopEmployeesListComponent from "./shop-employees-list.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
function ShopEmployeesContainer({ bodyshop }) {
const [form] = Form.useForm();
const { t } = useTranslation();
const employeeState = useState(null);
const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
});
const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
const [deleteEmployee] = useMutation(DELETE_EMPLOYEE);
const handleDelete = (id) => {
logImEXEvent("shop_employee_delete");
deleteEmployee({ variables: { id: id } })
.then((r) => {
notification["success"]({
message: t("employees.successes.delete"),
});
employeeState[1](null);
refetch().then((r) => form.resetFields());
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.delete", {
message: JSON.stringify(error),
}),
});
});
};
const handleFinish = (values) => {
if (employeeState[0].id) {
//Update a record.
logImEXEvent("shop_employee_update");
updateEmployee({
variables: {
id: employeeState[0].id,
employee: {
...values,
user_email: values.user_email === "" ? null : values.user_email,
},
},
})
.then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
employeeState[1](null);
refetch().then((r) => form.resetFields());
})
.catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
} else {
//New record, insert it.
logImEXEvent("shop_employee_insert");
insertEmployees({
variables: { employees: [{ ...values, shopid: bodyshop.id }] },
}).then((r) => {
notification["success"]({
message: t("employees.successes.save"),
});
employeeState[1](null);
refetch().catch((error) => {
notification["error"]({
message: t("employees.errors.save", {
message: JSON.stringify(error),
}),
});
});
});
}
};
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<ShopEmployeeComponent
handleFinish={handleFinish}
handleDelete={handleDelete}
form={form}
loading={loading}
employeeState={employeeState}
employees={data ? data.employees : []}
/>
<div>
<ShopEmployeesListComponent
employees={data ? data.employees : []}
loading={loading}
/>
<ShopEmployeesFormComponent />
</div>
);
}
export default connect(mapStateToProps, null)(ShopEmployeesContainer);