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

cleaned up labor allocations component

Browse Source
This commit is contained in:
jfrye122
2023-05-15 10:48:05 -04:00
parent 668d371fb8
commit ccaa0fd450
1 changed files with 88 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
components/labor-allocations-table/labor-allocations-table.component.jsx
View File

@@ -18,55 +18,31 @@ const mapStateToProps = createStructuredSelector({
}); });
export function LaborAllocationsTable({ jobId, bodyshop, technician }) { export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
console.log("LaborAllocationsTable, jobId", jobId); // console.log("LaborAllocationsTable, jobId", jobId);
//, loading, refetch
//const jobid = jobid !== undefined ? jobid : "";
const { t } = useTranslation(); const { t } = useTranslation();
const onRefresh = async () => { const onRefresh = async () => {
console.log("LaborAllocationsTable refetch"); console.log("LaborAllocationsTable refetch");
return refetch(); return refetch();
}; };
//maybe use this
const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, { const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
variables: { id: jobId }, variables: { id: jobId },
skip: !!!jobId, skip: !!!jobId,
fetchPolicy: "network-only", fetchPolicy: "network-only",
nextFetchPolicy: "network-only", nextFetchPolicy: "network-only",
}); });
// console.log("LaborAllocationsTable, data", data); // console.log("LaborAllocationsTable, data", data);
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
// let joblines = [];
// let timetickets = [];
// let adjustments = [];
const [totals, setTotals] = useState([]); const [totals, setTotals] = useState([]);
const [state, setState] = useState({
sortedInfo: {
columnKey: "cost_center",
field: "cost_center",
order: "ascend",
},
filteredInfo: {},
});
useEffect(() => { useEffect(() => {
console.log("LaborAllocationsTable useEffect on data change"); console.log("LaborAllocationsTable useEffect on data change");
// joblines = data?.joblines ? data.joblines : [];
// timetickets = data?.timetickets ? data.timetickets : [];
// adjustments = data?.adjustments ? data.adjustments : [];
}, [data]); }, [data]);
useEffect(() => { useEffect(() => {
console.log( // console.log("LaborAllocationsTable useEffect on [all inputs] change",data?.joblines,data?.adjustments);
"LaborAllocationsTable useEffect on [joblines, timetickets, bodyshop, adjustments, jobId] change",
data?.joblines,
data?.adjustments
);
if (!!data?.joblines && !!data?.timetickets && !!bodyshop) if (!!data?.joblines && !!data?.timetickets && !!bodyshop)
setTotals( setTotals(
CalculateAllocationsTotals( CalculateAllocationsTotals(
@@ -79,11 +55,6 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
if (!jobId) setTotals([]); if (!jobId) setTotals([]);
}, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId]); }, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId]);
// const convertedLines = useMemo(
// () => data?.joblines && data?.joblines.filter((j) => j.convertedtolbr),
// [data?.joblines]
// );
const summary = const summary =
totals && totals &&
totals.reduce( totals.reduce(
@@ -96,8 +67,7 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
}, },
{ hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 } { hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
); );
// console.log("labor summary is:", summary);
console.log("labor summary is:", summary);
return ( return (
<View style={{ flexGrow: 1 }}> <View style={{ flexGrow: 1 }}>
@@ -115,120 +85,70 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
<Divider orientation="vertical" /> <Divider orientation="vertical" />
</DataTable> </DataTable>
<DataTable> <DataTable>
<FlatList <FlatList
data={totals} data={totals}
refreshControl={ refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <RefreshControl refreshing={loading} onRefresh={onRefresh} />
} }
keyExtractor={(item) => item.cost_center} keyExtractor={(item) => item.cost_center}
ItemSeparatorComponent={<Divider orientation="vertical" />} ItemSeparatorComponent={<Divider orientation="vertical" />}
renderItem={(object) => ( renderItem={(object) => (
<DataTable.Row>
<DataTable.Row> <View style={{ flex: 1, alignItems: "flex-start" }}>
<View style={{ flex: 1, alignItems:'flex-start' }}> <Text>
<Text> {object.item.cost_center} {" ("}
{object.item.cost_center} {" ("} {object.item.mod_lbr_ty}
{object.item.mod_lbr_ty}{")"} {")"}
</Text> </Text>
</View> </View>
<View style={{ flex: 1, alignItems:'center'}} > <View style={{ flex: 1, alignItems: "center" }}>
<Text>{object.item.total && object.item.total.toFixed(1)}</Text> <Text>
</View> {object.item.total && object.item.total.toFixed(1)}
<View style={{ flex: 1, alignItems:'center' }}> </Text>
<Text>{object.item.claimed && object.item.claimed.toFixed(1)}</Text> </View>
</View> <View style={{ flex: 1, alignItems: "center" }}>
<View style={{ flex: 1, alignItems:'center' }}> <Text>
<Text> {object.item.claimed && object.item.claimed.toFixed(1)}
{object.item.adjustments && object.item.adjustments.toFixed(1)} </Text>
{/* {!technician && ( </View>
<LaborAllocationsAdjustmentEdit <View style={{ flex: 1, alignItems: "center" }}>
jobId={jobId} <Text>
adjustments={adjustments} {object.item.adjustments &&
mod_lbr_ty={record.opcode} object.item.adjustments.toFixed(1)}
refetchQueryNames={["GET_LINE_TICKET_BY_PK"]} </Text>
> </View>
<EditFilled /> <View style={{ flex: 1, alignItems: "center" }}>
</LaborAllocationsAdjustmentEdit> <Text
)} */}
</Text>
</View>
<View style={{flex: 1, alignItems:'center'}}>
<Text style={{
color: object.item.difference >= 0 ? "green" : "red",
}}>
{/* <strong
style={{ style={{
color: object.difference >= 0 ? "green" : "red", color: object.item.difference >= 0 ? "green" : "red",
}} }}
> >
{_.round(object.difference, 1)} {_.round(object.item.difference, 1)}
</strong> */} </Text>
{_.round(object.item.difference, 1)} </View>
</Text> </DataTable.Row>
</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>
)} )}
/>
{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> </DataTable>
</View> </View>
) : null} ) : 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 "totals" for the rows in the table */}
{/* use "summary" for the totals at the bottom */} {/* use "summary" for the totals at the bottom */}
</View> </View>
@@ -236,22 +156,33 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
} }
const localStyles = StyleSheet.create({ const localStyles = StyleSheet.create({
headerArea:{ headerArea: {
flexDirection:"row", flexDirection: "row",
justifyContent:"center", justifyContent: "center",
alignItems:"center", alignItems: "center",
margin:1 margin: 1,
}, },
footertext:{ footertext: {
flex:1, textAlign:'center', textAlignVertical:'center',margin:1,paddingBottom:8 flex: 1,
}, textAlign: "center",
headertext:{ textAlignVertical: "center",
flex:1, textAlign:'center', textAlignVertical:'center',margin:1,paddingBottom:8 margin: 1,
}, paddingBottom: 8,
headertextAdjusts:{ },
flex:1, textAlign:'center', textAlignVertical:'center',margin:1,paddingBottom:8 headertext: {
}, flex: 1,
textAlign: "center",
textAlignVertical: "center",
margin: 1,
paddingBottom: 8,
},
headertextAdjusts: {
flex: 1,
textAlign: "center",
textAlignVertical: "center",
margin: 1,
paddingBottom: 8,
},
}); });
export default connect(mapStateToProps, null)(LaborAllocationsTable); export default connect(mapStateToProps, null)(LaborAllocationsTable);