258 lines
9.2 KiB
JavaScript
258 lines
9.2 KiB
JavaScript
import React, { useEffect, useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
|
|
import _ from "lodash";
|
|
import { Card, DataTable, Divider } from "react-native-paper";
|
|
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs.queries";
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import { useQuery } from "@apollo/client";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
|
|
import { CalculateAllocationsTotals } from "../../util/labor-allocations-table.utility";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
technician: selectCurrentEmployee,
|
|
});
|
|
|
|
export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
|
|
console.log("LaborAllocationsTable, jobId", jobId);
|
|
//, loading, refetch
|
|
//const jobid = jobid !== undefined ? jobid : "";
|
|
const { t } = useTranslation();
|
|
|
|
const onRefresh = async () => {
|
|
|
|
console.log("LaborAllocationsTable refetch");
|
|
return refetch();
|
|
};
|
|
|
|
//maybe use this
|
|
const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
|
|
variables: { id: jobId },
|
|
skip: !!!jobId,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
});
|
|
|
|
// console.log("LaborAllocationsTable, data", data);
|
|
if (error) return <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
// let joblines = [];
|
|
// let timetickets = [];
|
|
// let adjustments = [];
|
|
|
|
const [totals, setTotals] = useState([]);
|
|
const [state, setState] = useState({
|
|
sortedInfo: {
|
|
columnKey: "cost_center",
|
|
field: "cost_center",
|
|
order: "ascend",
|
|
},
|
|
filteredInfo: {},
|
|
});
|
|
|
|
useEffect(() => {
|
|
console.log("LaborAllocationsTable useEffect on data change");
|
|
// joblines = data?.joblines ? data.joblines : [];
|
|
// timetickets = data?.timetickets ? data.timetickets : [];
|
|
// adjustments = data?.adjustments ? data.adjustments : [];
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
console.log(
|
|
"LaborAllocationsTable useEffect on [joblines, timetickets, bodyshop, adjustments, jobId] change",
|
|
data?.joblines,
|
|
data?.adjustments
|
|
);
|
|
if (!!data?.joblines && !!data?.timetickets && !!bodyshop)
|
|
setTotals(
|
|
CalculateAllocationsTotals(
|
|
bodyshop,
|
|
data?.joblines,
|
|
data?.timetickets,
|
|
data?.adjustments
|
|
)
|
|
);
|
|
if (!jobId) setTotals([]);
|
|
}, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId]);
|
|
|
|
// const convertedLines = useMemo(
|
|
// () => data?.joblines && data?.joblines.filter((j) => j.convertedtolbr),
|
|
// [data?.joblines]
|
|
// );
|
|
|
|
const summary =
|
|
totals &&
|
|
totals.reduce(
|
|
(acc, val) => {
|
|
acc.hrs_total += val.total;
|
|
acc.hrs_claimed += val.claimed;
|
|
acc.adjustments += val.adjustments;
|
|
acc.difference += val.difference;
|
|
return acc;
|
|
},
|
|
{ hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
|
|
);
|
|
|
|
console.log("labor summary is:", summary);
|
|
|
|
return (
|
|
<View style={{ flexGrow: 1 }}>
|
|
{typeof data !== "undefined" ? (
|
|
<View style={{ flexGrow: 1 }}>
|
|
<DataTable>
|
|
<View style={localStyles.headerArea}>
|
|
<Text style={localStyles.headertext}>Cost Center</Text>
|
|
<Text style={localStyles.headertext}>Hours Total</Text>
|
|
<Text style={localStyles.headertext}>Hours Claimed</Text>
|
|
{/* <Text numberOfLines={2} style={{ flex: 1, flexWrap:'wrap' }}>Hours Claimed</Text> */}
|
|
<Text style={localStyles.headertextAdjusts}>Adjustments</Text>
|
|
<Text style={localStyles.headertext}>Difference</Text>
|
|
</View>
|
|
<Divider orientation="vertical" />
|
|
</DataTable>
|
|
<DataTable>
|
|
<FlatList
|
|
data={totals}
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
keyExtractor={(item) => item.cost_center}
|
|
ItemSeparatorComponent={<Divider orientation="vertical" />}
|
|
renderItem={(object) => (
|
|
|
|
<DataTable.Row>
|
|
<View style={{ flex: 1, alignItems:'flex-start' }}>
|
|
<Text>
|
|
{object.item.cost_center} {" ("}
|
|
{object.item.mod_lbr_ty}{")"}
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1, alignItems:'center'}} >
|
|
<Text>{object.item.total && object.item.total.toFixed(1)}</Text>
|
|
</View>
|
|
<View style={{ flex: 1, alignItems:'center' }}>
|
|
<Text>{object.item.claimed && object.item.claimed.toFixed(1)}</Text>
|
|
</View>
|
|
<View style={{ flex: 1, alignItems:'center' }}>
|
|
<Text>
|
|
{object.item.adjustments && object.item.adjustments.toFixed(1)}
|
|
{/* {!technician && (
|
|
<LaborAllocationsAdjustmentEdit
|
|
jobId={jobId}
|
|
adjustments={adjustments}
|
|
mod_lbr_ty={record.opcode}
|
|
refetchQueryNames={["GET_LINE_TICKET_BY_PK"]}
|
|
>
|
|
<EditFilled />
|
|
</LaborAllocationsAdjustmentEdit>
|
|
)} */}
|
|
</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems:'center'}}>
|
|
<Text style={{
|
|
color: object.item.difference >= 0 ? "green" : "red",
|
|
}}>
|
|
{/* <strong
|
|
style={{
|
|
color: object.difference >= 0 ? "green" : "red",
|
|
}}
|
|
>
|
|
{_.round(object.difference, 1)}
|
|
</strong> */}
|
|
{_.round(object.item.difference, 1)}
|
|
</Text>
|
|
</View>
|
|
</DataTable.Row>
|
|
)}
|
|
/>
|
|
{summary && (<View style={localStyles.headerArea}>
|
|
<Text style={localStyles.footertext}>Totals</Text>
|
|
<Text style={localStyles.footertext}>{summary.hrs_total.toFixed(1)}</Text>
|
|
<Text style={localStyles.footertext}>{summary.hrs_claimed.toFixed(1)}</Text>
|
|
<Text style={localStyles.footertext}>{summary.adjustments.toFixed(1)}</Text>
|
|
<Text style={localStyles.footertext}>{summary.difference.toFixed(1)}</Text>
|
|
</View>)
|
|
}
|
|
</DataTable>
|
|
</View>
|
|
) : null}
|
|
{/* <DataTable>
|
|
<DataTable.Header>
|
|
<DataTable.Title style={{ flex: 4 }}>
|
|
{t("jobdetail.labels.lines_desc")}
|
|
</DataTable.Title>
|
|
<DataTable.Title style={{ flex: 2 }}>
|
|
{t("jobdetail.labels.lines_lbr_ty")}
|
|
</DataTable.Title>
|
|
<DataTable.Title style={{ flex: 1 }}>
|
|
{t("jobdetail.labels.lines_lb_hrs")}
|
|
</DataTable.Title>
|
|
<DataTable.Title style={{ flex: 2 }}>
|
|
{t("jobdetail.labels.lines_part_type")}
|
|
</DataTable.Title>
|
|
<DataTable.Title style={{ flex: 1 }}>
|
|
{t("jobdetail.labels.lines_qty")}
|
|
</DataTable.Title>
|
|
</DataTable.Header>
|
|
</DataTable> */}
|
|
|
|
{/* <FlatList
|
|
data={job.joblines}
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={(object) => (
|
|
<DataTable.Row>
|
|
<DataTable.Cell style={{ flex: 4 }}>
|
|
{object.item.line_desc}
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ flex: 2 }}>
|
|
{object.item.mod_lbr_ty &&
|
|
t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ flex: 1 }}>
|
|
{object.item.mod_lb_hrs}
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ flex: 2 }}>
|
|
{object.item.part_type &&
|
|
t(`jobdetail.part_types.${object.item.part_type}`)}
|
|
</DataTable.Cell>
|
|
<DataTable.Cell style={{ flex: 1 }}>
|
|
{object.item.part_qty}
|
|
</DataTable.Cell>
|
|
</DataTable.Row>
|
|
)}
|
|
/> */}
|
|
|
|
{/* use "totals" for the rows in the table */}
|
|
{/* use "summary" for the totals at the bottom */}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const localStyles = StyleSheet.create({
|
|
headerArea:{
|
|
flexDirection:"row",
|
|
justifyContent:"center",
|
|
alignItems:"center",
|
|
margin:1
|
|
},
|
|
footertext:{
|
|
flex:1, textAlign:'center', textAlignVertical:'center',margin:1
|
|
},
|
|
headertext:{
|
|
flex:1, textAlign:'center', textAlignVertical:'center',backgroundColor:'blue',margin:1
|
|
},
|
|
headertextAdjusts:{
|
|
flex:1, textAlign:'center', textAlignVertical:'center',backgroundColor:'green',margin:1
|
|
},
|
|
|
|
|
|
});
|
|
export default connect(mapStateToProps, null)(LaborAllocationsTable);
|