WIP Time Ticket Summary BOD-191

This commit is contained in:
Patrick Fic
2020-07-20 08:55:01 -07:00
parent a54a85b96c
commit f187a2106c
14 changed files with 544 additions and 18 deletions

View File

@@ -1,4 +1,4 @@
<babeledit_project be_version="2.6.1" version="1.2">
<babeledit_project version="1.2" be_version="2.6.1">
<!--
BabelEdit project file
@@ -17509,6 +17509,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>printemployee</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
@@ -17556,6 +17577,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>creating</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deleting</name>
<definition_loaded>false</definition_loaded>
@@ -17624,6 +17666,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>clockhours</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>clockoff</name>
<definition_loaded>false</definition_loaded>
@@ -17860,6 +17923,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>clockhours</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>clockintojob</name>
<definition_loaded>false</definition_loaded>
@@ -17944,6 +18028,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>jobhours</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>lunch</name>
<definition_loaded>false</definition_loaded>
@@ -18138,6 +18243,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>created</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>deleted</name>
<definition_loaded>false</definition_loaded>
@@ -18799,6 +18925,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>timetickets</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicle-details</name>
<definition_loaded>false</definition_loaded>
@@ -19431,6 +19578,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>timetickets</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>vehicledetail</name>
<definition_loaded>false</definition_loaded>

View File

@@ -0,0 +1,33 @@
import { DatePicker } from "antd";
import moment from "moment";
import queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
export default function TimeTicketsDatesSelector() {
const searchParams = queryString.parse(useLocation().search);
const { start, end } = searchParams;
const history = useHistory();
const handleChange = (dates) => {
const [start, end] = dates;
if (!!start && !!end) {
history.push({
search: queryString.stringify({
start: start.format("YYYY-MM-DD"),
end: end.format("YYYY-MM-DD"),
}),
});
}
};
return (
<div>
<DatePicker.RangePicker
defaultValue={[moment(start), moment(end)]}
onCalendarChange={handleChange}
/>
</div>
);
}

View File

@@ -5,6 +5,9 @@ import { Link } from "react-router-dom";
import { alphaSort } from "../../utils/sorters";
import { DateFormatter } from "../../utils/DateFormatter";
import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import moment from "moment";
import { onlyUnique } from "../../utils/arrayHelper";
export default function TimeTicketList({
loading,
@@ -37,8 +40,7 @@ export default function TimeTicketList({
sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
render: (text, record) => (
<Link
to={`/manage/employees/${record.employee.id}`}
>{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
to={`/manage/employees/${record.employee.id}`}>{`${record.employee.first_name} ${record.employee.last_name}`}</Link>
),
},
{
@@ -48,6 +50,17 @@ export default function TimeTicketList({
sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
filters:
timetickets
.map((l) => l.cost_center)
.filter(onlyUnique)
.map((s) => {
return {
text: s, //|| "No Status*",
value: [s],
};
}) || [],
onFilter: (value, record) => value.includes(record.cost_center),
},
{
title: t("timetickets.fields.productivehrs"),
@@ -66,6 +79,49 @@ export default function TimeTicketList({
sortOrder:
state.sortedInfo.columnKey === "actualhrs" && state.sortedInfo.order,
},
{
title: t("timetickets.fields.clockon"),
dataIndex: "clockon",
key: "clockon",
sorter: (a, b) => a.clockon - b.clockon,
sortOrder:
state.sortedInfo.columnKey === "clockon" && state.sortedInfo.order,
render: (text, record) => (
<DateTimeFormatter>{record.clockon}</DateTimeFormatter>
),
},
{
title: t("timetickets.fields.clockoff"),
dataIndex: "clockoff",
key: "clockoff",
sorter: (a, b) => a.clockoff - b.clockoff,
sortOrder:
state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
render: (text, record) => (
<DateTimeFormatter>{record.clockoff}</DateTimeFormatter>
),
},
{
title: t("timetickets.fields.clockhours"),
dataIndex: "clockoff",
key: "clockoff",
sorter: (a, b) => a.clockoff - b.clockoff,
sortOrder:
state.sortedInfo.columnKey === "clockoff" && state.sortedInfo.order,
render: (text, record) => {
if (record.clockoff && record.clockon)
return (
<div>
{moment(record.clockoff)
.diff(moment(record.clockon), "hours", true)
.toFixed(2)}
</div>
);
else {
return null;
}
},
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
@@ -75,8 +131,7 @@ export default function TimeTicketList({
return (
<TimeTicketEnterButton
actions={{ refetch }}
context={{ id: record.id, timeticket: record }}
>
context={{ id: record.id, timeticket: record }}>
{t("general.actions.edit")}
</TimeTicketEnterButton>
);
@@ -91,10 +146,10 @@ export default function TimeTicketList({
return (
<Table
loading={loading}
size="small"
size='small'
pagination={{ position: "top" }}
columns={columns.map((item) => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={timetickets}
onChange={handleTableChange}
/>

View File

@@ -59,7 +59,7 @@ export function TimeTicketModalContainer({
} else {
insertTicket({
variables: {
timeTicketInput: [{ ...values, bodyshop: bodyshop.id }],
timeTicketInput: [{ ...values, bodyshopid: bodyshop.id }],
},
})
.then(handleMutationSuccess)

View File

@@ -0,0 +1,131 @@
import React from "react";
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";
export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
const { t } = useTranslation();
//Group everything by employee
//Then sum the individual time TimeTicketsSummary.
//Calculate job based tickets.
const jobTicketsByEmployee = {};
timetickets
.filter((i) => i.cost_center !== "timetickets.labels.shift")
.map((tt) => {
if (!!!jobTicketsByEmployee[tt.employeeid]) {
jobTicketsByEmployee[tt.employeeid] = [];
}
jobTicketsByEmployee[tt.employeeid].push(tt);
});
const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
return {
employee: jobTicketsByEmployee[key][0].employee,
tickets: jobTicketsByEmployee[key],
};
});
//Calculate shift based tickets.
const shiftTicketsByEmployee = {};
timetickets
.filter((i) => i.cost_center === "timetickets.labels.shift")
.map((tt) => {
if (!!!shiftTicketsByEmployee[tt.employeeid]) {
shiftTicketsByEmployee[tt.employeeid] = [];
}
shiftTicketsByEmployee[tt.employeeid].push(tt);
});
const shiftTickets = Object.keys(shiftTicketsByEmployee).map(function (key) {
return {
employee: shiftTicketsByEmployee[key][0].employee,
tickets: shiftTicketsByEmployee[key],
};
});
return (
<div>
<List
header={
<Typography.Title level={3}>
{t("timetickets.labels.jobhours")}
</Typography.Title>
}
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
)}
/>
<Statistic
title={t("timetickets.fields.productivehrs")}
precision={1}
value={item.tickets.reduce(
(acc, val) => acc + val.productivehrs,
0
)}
/>
</Space>
</LoadingSkeleton>
</List.Item>
)}
/>
<List
header={
<Typography.Title level={3}>
{t("timetickets.labels.clockhours")}
</Typography.Title>
}
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>
)}
/>
</div>
);
}

View File

@@ -0,0 +1,14 @@
import React from "react";
import TimeTicketsSummaryEmployees from "../time-tickets-summary-employees/time-tickets-summary-employees.component";
export default function TimeTicketsSummary({ loading, timetickets }) {
console.log("ordera ds");
return (
<div>
<TimeTicketsSummaryEmployees
loading={loading}
timetickets={timetickets}
/>
</div>
);
}

View File

@@ -47,8 +47,8 @@ try {
export { messaging };
export const logImEXEvent = (eventName, additionalParams) => {
const state = store.getState();
export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
const state = stateProp || store.getState();
const eventParams = {
shop:
(state.user && state.user.bodyshop && state.user.bodyshop.shopname) ||

View File

@@ -19,6 +19,36 @@ export const QUERY_TICKETS_BY_JOBID = gql`
}
`;
export const QUERY_TIME_TICKETS_IN_RANGE = gql`
query QUERY_TIME_TICKETS_IN_RANGE($start: date!, $end: date!) {
timetickets(where: { date: { _gte: $start, _lte: $end } }) {
actualhrs
ciecacode
clockoff
clockon
cost_center
created_at
date
id
rate
productivehrs
memo
job {
id
ro_number
}
employeeid
employee {
id
employee_number
first_name
cost_center
last_name
}
}
}
`;
export const INSERT_NEW_TIME_TICKET = gql`
mutation INSERT_NEW_TIME_TICKET(
$timeTicketInput: [timetickets_insert_input!]!
@@ -72,7 +102,7 @@ export const QUERY_ACTIVE_TIME_TICKETS = gql`
clockoff: { _is_null: true }
employeeid: { _eq: $employeeId }
clockon: { _is_null: false }
jobid: {_is_null: false}
jobid: { _is_null: false }
}
}
) {
@@ -102,7 +132,7 @@ export const QUERY_ACTIVE_SHIFT_TIME_TICKETS = gql`
clockoff: { _is_null: true }
employeeid: { _eq: $employeeId }
clockon: { _is_null: false }
jobid: {_is_null: true}
jobid: { _is_null: true }
}
}
) {

View File

@@ -118,7 +118,10 @@ const PaymentsAll = lazy(() =>
);
const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
const Scoreboard = lazy(() =>
import("../scoreboard/scoreboard.page.container.jsx")
import("../scoreboard/scoreboard.page.container")
);
const TimeTicketsAll = lazy(() =>
import("../time-tickets/time-tickets.container")
);
const { Content } = Layout;
@@ -329,6 +332,12 @@ export function Manage({ match, conflict }) {
path={`${match.path}/scoreboard`}
component={Scoreboard}
/>
<Route
exact
path={`${match.path}/timetickets`}
component={TimeTicketsAll}
/>
</Suspense>
)}
</ErrorBoundary>

View File

@@ -0,0 +1,62 @@
import { useQuery } from "@apollo/react-hooks";
import moment from "moment";
import queryString from "query-string";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
import TimeTicketsSummary from "../../components/time-tickets-summary/time-tickets-summary.component";
import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
const mapStateToProps = createStructuredSelector({});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function TimeTicketsContainer({ bodyshop, setBreadcrumbs }) {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.timetickets");
setBreadcrumbs([
{
link: "/manage/timetickets",
label: t("titles.bc.timetickets"),
},
]);
}, [t, setBreadcrumbs]);
const searchParams = queryString.parse(useLocation().search);
const { start, end } = searchParams;
const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
variables: {
start: start ? moment(start) : moment().startOf("week").subtract(7),
end: end ? moment(end) : moment().endOf("week"),
},
});
return (
<div>
<TimeTicketsDatesSelector />
<TimeTicketList
loading={loading}
timetickets={data ? data.timetickets : []}
/>
<TimeTicketsSummary
loading={loading}
timetickets={data ? data.timetickets : []}
/>
</div>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TimeTicketsContainer);

View File

@@ -25,7 +25,7 @@ const INITIAL_STATE = {
const modalsReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case ModalsActionTypes.TOGGLE_MODAL_VISIBLE:
logImEXEvent("redux_toggle_modal_visible", { modal: action.payload });
//logImEXEvent("redux_toggle_modal_visible", { modal: action.payload });
return {
...state,
[action.payload]: {
@@ -34,7 +34,7 @@ const modalsReducer = (state = INITIAL_STATE, action) => {
},
};
case ModalsActionTypes.SET_MODAL_CONTEXT:
logImEXEvent("redux_set_modal_context", { modal: action.payload.modal });
// logImEXEvent("redux_set_modal_context", { modal: action.payload.modal });
return {
...state,

View File

@@ -1112,16 +1112,19 @@
"actions": {
"clockin": "Clock In",
"clockout": "Clock Out",
"enter": "Enter New Time Ticket"
"enter": "Enter New Time Ticket",
"printemployee": "Print Time Tickets"
},
"errors": {
"clockingin": "Error while clocking in. {{message}}",
"clockingout": "Error while clocking out. {{message}}",
"creating": "Error creating time ticket. {{message}}",
"deleting": "Error deleting time ticket. {{message}}"
},
"fields": {
"actualhrs": "Actual Hours",
"ciecacode": "CIECA Code",
"clockhours": "Clock Hours",
"clockoff": "Clock Off",
"clockon": "Clocked In",
"cost_center": "Cost Center",
@@ -1135,10 +1138,12 @@
"alreadyclockedon": "You are already clocked in to the following job(s):",
"ambreak": "AM Break",
"amshift": "AM Shift",
"clockhours": "Clock Hours",
"clockintojob": "Clock In to Job",
"deleteconfirm": "Are you sure you want to delete this time ticket? This cannot be undone.",
"edit": "Edit Time Ticket",
"flat_rate": "Flat Rate",
"jobhours": "Job Related Time Tickets",
"lunch": "Lunch",
"new": "New Time Ticket",
"pmbreak": "PM Break",
@@ -1150,6 +1155,7 @@
"successes": {
"clockedin": "Clocked in successfully.",
"clockedout": "Clocked out successfully.",
"created": "Time ticket entered successfully.",
"deleted": "Time ticket deleted successfully."
}
},
@@ -1185,6 +1191,7 @@
"shop": "Manage my Shop ({{shopname}})",
"shop-csi": "CSI Responses",
"shop-templates": "Shop Templates",
"timetickets": "Time Tickets",
"vehicle-details": "Vehicle: {{vehicle}}",
"vehicles": "Vehicles"
},
@@ -1216,6 +1223,7 @@
"shop-csi": "CSI Responses | $t(titles.app)",
"shop-templates": "Shop Templates | $t(titles.app)",
"shop_vendors": "Vendors | $t(titles.app)",
"timetickets": "Time Tickets | $t(titles.app)",
"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)",
"vehicles": "All Vehicles | $t(titles.app)"
},

View File

@@ -1112,16 +1112,19 @@
"actions": {
"clockin": "",
"clockout": "",
"enter": ""
"enter": "",
"printemployee": ""
},
"errors": {
"clockingin": "",
"clockingout": "",
"creating": "",
"deleting": ""
},
"fields": {
"actualhrs": "",
"ciecacode": "",
"clockhours": "",
"clockoff": "",
"clockon": "",
"cost_center": "",
@@ -1135,10 +1138,12 @@
"alreadyclockedon": "",
"ambreak": "",
"amshift": "",
"clockhours": "",
"clockintojob": "",
"deleteconfirm": "",
"edit": "",
"flat_rate": "",
"jobhours": "",
"lunch": "",
"new": "",
"pmbreak": "",
@@ -1150,6 +1155,7 @@
"successes": {
"clockedin": "",
"clockedout": "",
"created": "",
"deleted": ""
}
},
@@ -1185,6 +1191,7 @@
"shop": "",
"shop-csi": "",
"shop-templates": "",
"timetickets": "",
"vehicle-details": "",
"vehicles": ""
},
@@ -1216,6 +1223,7 @@
"shop-csi": "",
"shop-templates": "",
"shop_vendors": "Vendedores | $t(titles.app)",
"timetickets": "",
"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)",
"vehicles": "Todos los vehiculos | $t(titles.app)"
},

View File

@@ -1112,16 +1112,19 @@
"actions": {
"clockin": "",
"clockout": "",
"enter": ""
"enter": "",
"printemployee": ""
},
"errors": {
"clockingin": "",
"clockingout": "",
"creating": "",
"deleting": ""
},
"fields": {
"actualhrs": "",
"ciecacode": "",
"clockhours": "",
"clockoff": "",
"clockon": "",
"cost_center": "",
@@ -1135,10 +1138,12 @@
"alreadyclockedon": "",
"ambreak": "",
"amshift": "",
"clockhours": "",
"clockintojob": "",
"deleteconfirm": "",
"edit": "",
"flat_rate": "",
"jobhours": "",
"lunch": "",
"new": "",
"pmbreak": "",
@@ -1150,6 +1155,7 @@
"successes": {
"clockedin": "",
"clockedout": "",
"created": "",
"deleted": ""
}
},
@@ -1185,6 +1191,7 @@
"shop": "",
"shop-csi": "",
"shop-templates": "",
"timetickets": "",
"vehicle-details": "",
"vehicles": ""
},
@@ -1216,6 +1223,7 @@
"shop-csi": "",
"shop-templates": "",
"shop_vendors": "Vendeurs | $t(titles.app)",
"timetickets": "",
"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)",
"vehicles": "Tous les véhicules | $t(titles.app)"
},