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

Added additional stats and ticket printing to all time tickets screen BOD-191

Browse Source
This commit is contained in:
Patrick Fic
2020-07-20 11:29:06 -07:00
parent f187a2106c
commit e6865a4bfc
19 changed files with 324 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
View File

@@ -3,8 +3,28 @@ import { Statistic, Space, List, Button, Typography } from "antd";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { useTranslation } from "react-i18next";
import moment from "moment";
import RenderTemplate, {
displayTemplateInWindow,
} from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function TimeTicketsSummaryEmployees({
bodyshop,
loading,
timetickets,
startDate,
endDate,
}) {
const { t } = useTranslation();
//Group everything by employee
@@ -19,6 +39,7 @@ export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
jobTicketsByEmployee[tt.employeeid] = [];
}
jobTicketsByEmployee[tt.employeeid].push(tt);
return null;
});
const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
return {
@@ -36,6 +57,7 @@ export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
shiftTicketsByEmployee[tt.employeeid] = [];
}
shiftTicketsByEmployee[tt.employeeid].push(tt);
return null;
});
const shiftTickets = Object.keys(shiftTicketsByEmployee).map(function (key) {
return {
@@ -44,6 +66,17 @@ export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
};
});
const handlePrintEmployeeTicket = async (empId) => {
const html = await RenderTemplate(
{
name: TemplateList.time_tickets_by_employee.key,
variables: { id: empId, start: startDate, end: endDate },
},
bodyshop
);
displayTemplateInWindow(html);
};
return (
<div>
<List
@@ -54,39 +87,65 @@ export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
}
itemLayout='horizontal'
dataSource={jobTickets}
renderItem={(item) => (
<List.Item
actions={[
<Button>{t("timetickets.actions.printemployee")}</Button>,
]}>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={
<a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
}
// description='Ant Design, a design language for background applications, is refined by Ant UED Team'
/>
<Space>
<Statistic
title={t("timetickets.fields.actualhrs")}
precision={1}
value={item.tickets.reduce(
(acc, val) => acc + val.actualhrs,
0
)}
renderItem={(item) => {
const actHrs = item.tickets.reduce(
(acc, val) => acc + val.actualhrs,
0
);
const prodHrs = item.tickets.reduce(
(acc, val) => acc + val.productivehrs,
0
);
const clockHrs = item.tickets.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc +
moment(val.clockoff).diff(moment(val.clockon), "hours", true)
);
return acc;
}, 0);
return (
<List.Item
actions={[
<Button
onClick={() => handlePrintEmployeeTicket(item.employee.id)}>
{t("timetickets.actions.printemployee")}
</Button>,
]}>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={`${item.employee.first_name} ${item.employee.last_name}`}
/>
<Statistic
title={t("timetickets.fields.productivehrs")}
precision={1}
value={item.tickets.reduce(
(acc, val) => acc + val.productivehrs,
0
)}
/>
</Space>
</LoadingSkeleton>
</List.Item>
)}
<Space>
<Statistic
title={t("timetickets.fields.actualhrs")}
precision={1}
value={actHrs}
/>
<Statistic
title={t("timetickets.fields.productivehrs")}
precision={1}
value={prodHrs}
/>
<Statistic
title={t("timetickets.fields.efficiency")}
precision={1}
value={(prodHrs / actHrs) * 100}
suffix={"%"}
/>
<Statistic
title={t("timetickets.fields.clockhours")}
precision={1}
value={clockHrs}
/>
</Space>
</LoadingSkeleton>
</List.Item>
);
}}
/>
<List
header={
@@ -96,36 +155,42 @@ export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
}
itemLayout='horizontal'
dataSource={shiftTickets}
renderItem={(item) => (
<List.Item
actions={[
<Button>{t("timetickets.actions.printemployee")}</Button>,
]}>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={
<a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
}
// description='Ant Design, a design language for background applications, is refined by Ant UED Team'
/>
<Statistic
title={t("timetickets.fields.clockhours")}
precision={2}
value={item.tickets.reduce(
(acc, val) =>
acc +
moment(item.clockoff).diff(
moment(item.clockon),
"hours",
true
),
0
)}
/>
</LoadingSkeleton>
</List.Item>
)}
renderItem={(item) => {
const clockHrs = item.tickets.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc +
moment(val.clockoff).diff(moment(val.clockon), "hours", true)
);
return acc;
}, 0);
return (
<List.Item
actions={[
<Button
onClick={() => handlePrintEmployeeTicket(item.employee.id)}>
{t("timetickets.actions.printemployee")}
</Button>,
]}>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={`${item.employee.first_name} ${item.employee.last_name}`}
/>
<Statistic
title={t("timetickets.fields.clockhours")}
precision={2}
value={clockHrs}
/>
</LoadingSkeleton>
</List.Item>
);
}}
/>
</div>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TimeTicketsSummaryEmployees);