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

added styling for allocation table

Browse Source
This commit is contained in:
jfrye122
2023-06-09 17:19:09 -04:00
parent 7512377cbc
commit 576855c3b3
3 changed files with 277 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native"; import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import _ from "lodash"; import _ from "lodash";
import { Card, DataTable, Divider } from "react-native-paper"; import { ActivityIndicator, Card, DataTable, Divider } from "react-native-paper";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs.queries"; import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
@@ -17,7 +17,7 @@ const mapStateToProps = createStructuredSelector({
technician: selectCurrentEmployee, technician: selectCurrentEmployee,
}); });
export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDiff,selectedCostCenter}) { export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDiff,selectedCostCenter, style, shouldRefresh}) {
// console.log("LaborAllocationsTable, costCenterDiff", costCenterDiff); // console.log("LaborAllocationsTable, costCenterDiff", costCenterDiff);
// console.log("LaborAllocationsTable, selectedCostCenter", selectedCostCenter); // console.log("LaborAllocationsTable, selectedCostCenter", selectedCostCenter);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -33,14 +33,16 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
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} />;
// if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
const [totals, setTotals] = useState([]); const [totals, setTotals] = useState([]);
useEffect(() => { // useEffect(() => {
// console.log("LaborAllocationsTable useEffect on data change"); // // console.log("LaborAllocationsTable useEffect on data change");
}, [data]); // }, [data]);
useEffect(() => { useEffect(() => {
// console.log("LaborAllocationsTable useEffect on [all inputs] change",data?.joblines,data?.adjustments); // console.log("LaborAllocationsTable useEffect on [all inputs] change",data?.joblines,data?.adjustments);
@@ -67,6 +69,11 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
if (!jobId) setTotals([]); if (!jobId) setTotals([]);
}, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId, selectedCostCenter]); }, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId, selectedCostCenter]);
useEffect(() => {
// console.log("made it here, shouldRefresh is :", shouldRefresh );
!!shouldRefresh && shouldRefresh ? onRefresh() : null
},[shouldRefresh]);
const summary = const summary =
totals && totals &&
totals.reduce( totals.reduce(
@@ -81,8 +88,9 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
); );
// console.log("labor summary is:", summary); // console.log("labor summary is:", summary);
if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
return ( return (
<View style={{ flex: 1}}> <View style={style}>
{typeof data !== "undefined" ? ( {typeof data !== "undefined" ? (
<Card style={{ flex: 1 }}> <Card style={{ flex: 1 }}>
<Card.Title title={"Labor Allocations"} /> <Card.Title title={"Labor Allocations"} />

54
components/time-ticket/screen-time-ticket-clockoff.component.jsx
View File

@@ -1,6 +1,6 @@
import { Formik } from "formik"; import { Formik } from "formik";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef, useCallback } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native"; import { StyleSheet, Text, View, ScrollView, FlatList } from "react-native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -34,6 +34,9 @@ import StyleRepeater from "../style-repeater/style-repeater";
// import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors"; // import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries"; import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
import { RefreshControl } from "react-native";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentEmployee: selectCurrentEmployee, currentEmployee: selectCurrentEmployee,
currentRatesNCostCenters: selectRates, currentRatesNCostCenters: selectRates,
@@ -54,7 +57,6 @@ export function TimeTicketClockOff({
route, route,
}) { }) {
const costCenterDiff = useRef(0); const costCenterDiff = useRef(0);
// console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
const setCostCenterDiff = (value) => { const setCostCenterDiff = (value) => {
countRef.current = val; countRef.current = val;
@@ -67,6 +69,7 @@ export function TimeTicketClockOff({
// console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone ); // console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone );
const { t } = useTranslation(); const { t } = useTranslation();
const [loadingClockOut, setLoadingClockOut] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [currentSCC, setCurrentSCC] = useState(null); const [currentSCC, setCurrentSCC] = useState(null);
@@ -85,7 +88,7 @@ export function TimeTicketClockOff({
) { ) {
if (isNaN(values.actualhours) | isNaN(values.productivehours)) { if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
// console.log("actual hours is NAN!"); // console.log("actual hours is NAN!");
setLoading(false); setLoadingClockOut(false);
setError({ message: t("timeticketclockoff.errors.nan") }); setError({ message: t("timeticketclockoff.errors.nan") });
return; return;
} }
@@ -93,6 +96,7 @@ export function TimeTicketClockOff({
// console.log("all have values:"); // console.log("all have values:");
} else { } else {
// console.log("missing values!"); // console.log("missing values!");
setLoadingClockOut(false);
setError({ message: t("timeticketclockoff.errors.missingvalues") }); setError({ message: t("timeticketclockoff.errors.missingvalues") });
return; return;
} }
@@ -100,6 +104,7 @@ export function TimeTicketClockOff({
if (!!currentRestrictClaimableHoursFlag) { if (!!currentRestrictClaimableHoursFlag) {
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag); // console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
if (values.productivehours > costCenterDiff.current) { if (values.productivehours > costCenterDiff.current) {
setLoadingClockOut(false);
setError({ setError({
message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"), message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
}); });
@@ -143,12 +148,12 @@ export function TimeTicketClockOff({
// console.log("TimeTicketClockOff, tempcallobj :", tempcallobj); // console.log("TimeTicketClockOff, tempcallobj :", tempcallobj);
//after obj is good add below to make call //after obj is good add below to make call
setLoading(true); setLoadingClockOut(true);
const result = await updateTimeticket(tempcallobj); const result = await updateTimeticket(tempcallobj);
//after call results are retuning add handling below for cases //after call results are retuning add handling below for cases
// console.log("updateTimeticket, result :", result); // console.log("updateTimeticket, result :", result);
setLoading(false); setLoadingClockOut(false);
if (!!result.errors) { if (!!result.errors) {
// console.log("updateTimeticket, result.error :", result.errors); // console.log("updateTimeticket, result.error :", result.errors);
setError(JSON.stringify(result.errors)); setError(JSON.stringify(result.errors));
@@ -158,11 +163,20 @@ export function TimeTicketClockOff({
} }
//if (completedCallback) completedCallback(); //if (completedCallback) completedCallback();
}; };
const onRefresh = useCallback(() => {
setLoading(true);
// refetch();
setTimeout(() => {
setLoading(false);
}, 1000);
}, []);
return ( return (
<View style={styles.cardBackground}> <View style={styles.cardBackground}>
{/* style={localStyles.content}> */} <FlatList
<StyleRepeater childStyle={{ margin: 4 }}> ListHeaderComponent={
<Card> <Card style={localStyles.localCardStyle}>
<Card.Content> <Card.Content>
<Formik <Formik
initialValues={{ initialValues={{
@@ -201,12 +215,15 @@ export function TimeTicketClockOff({
currentValue={currentSCC} currentValue={currentSCC}
onValueSelected={setCurrentSCC} onValueSelected={setCurrentSCC}
/> />
{error ? <ErrorDisplay errorMessage={error.message} /> : null} {error ? (
<ErrorDisplay errorMessage={error.message} />
) : null}
<Button <Button
mode="outlined" mode="outlined"
style={styles.buttonBasicOutlined} style={styles.buttonBasicOutlined}
onPress={handleSubmit} onPress={handleSubmit}
title={t("timeticketclockoff.actions.clockoff")} title={t("timeticketclockoff.actions.clockoff")}
loading={loadingClockOut}
> >
<Text style={{ fontSize: 12 }}> <Text style={{ fontSize: 12 }}>
{t("timeticketclockoff.actions.clockoff")} {t("timeticketclockoff.actions.clockoff")}
@@ -217,14 +234,22 @@ export function TimeTicketClockOff({
</Formik> </Formik>
</Card.Content> </Card.Content>
</Card> </Card>
<View style={{ flexGrow: 1 }}> }
data={null}
renderItem={null}
ListFooterComponent={
<LaborAllocationsTable <LaborAllocationsTable
jobId={currentTmTicketJobId} jobId={currentTmTicketJobId}
costCenterDiff={costCenterDiff} costCenterDiff={costCenterDiff}
selectedCostCenter={currentSCC} selectedCostCenter={currentSCC}
style={localStyles.localCardStyle}
shouldRefresh={loading}
/>
}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
/> />
</View >
</StyleRepeater>
</View> </View>
); );
} }
@@ -260,4 +285,7 @@ const localStyles = StyleSheet.create({
height: 48, height: 48,
fontSize: 16, fontSize: 16,
}, },
localCardStyle: {
margin: 4,
},
}); });

99
components/time-ticket/screen-time-ticket-create.component.jsx
View File

@@ -1,6 +1,6 @@
import { Formik } from "formik"; import { Formik } from "formik";
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native"; import { StyleSheet, Text, View, ScrollView, RefreshControl } from "react-native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -13,7 +13,10 @@ import {
selectRates, selectRates,
selectEmployeeFullName, selectEmployeeFullName,
} from "../../redux/employee/employee.selectors"; } from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import {
selectBodyshop,
selectRestrictClaimableHoursFlag,
} from "../../redux/user/user.selectors";
import { useCallback } from "react"; import { useCallback } from "react";
// import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component"; // import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component"; import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
@@ -28,12 +31,14 @@ import { useNavigation } from "@react-navigation/native";
import styles from "../styles"; import styles from "../styles";
import StyleRepeater from "../style-repeater/style-repeater"; import StyleRepeater from "../style-repeater/style-repeater";
import { FlatList } from "react-native";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentEmployee: selectCurrentEmployee, currentEmployee: selectCurrentEmployee,
currentRatesNCostCenters: selectRates, currentRatesNCostCenters: selectRates,
currentBodyshop: selectBodyshop, currentBodyshop: selectBodyshop,
currentEmployeeFullName: selectEmployeeFullName, currentEmployeeFullName: selectEmployeeFullName,
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
}); });
// const mapDispatchToProps = (dispatch) => ({}); // const mapDispatchToProps = (dispatch) => ({});
@@ -42,10 +47,13 @@ export function TimeTicketCreate({
currentRatesNCostCenters, currentRatesNCostCenters,
currentBodyshop, currentBodyshop,
currentEmployeeFullName, currentEmployeeFullName,
currentRestrictClaimableHoursFlag,
}) { }) {
const costCenterDiff = useRef(0);
const navigation = useNavigation(); const navigation = useNavigation();
const { t } = useTranslation(); const { t } = useTranslation();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingCreate, setLoadingCreate] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
@@ -72,7 +80,7 @@ export function TimeTicketCreate({
logImEXEvent("handleFinish_called_in_TimeTicketCreate"); logImEXEvent("handleFinish_called_in_TimeTicketCreate");
// console.log("handleFinish called in TimeTicketCreate"); // console.log("handleFinish called in TimeTicketCreate");
setError(null); setError(null);
setLoading(true); setLoadingCreate(true);
// console.log("insertTicket, currentSCC :", currentSCC); // console.log("insertTicket, currentSCC :", currentSCC);
// console.log("insertTicket, currentSCC :", currentSJobId); // console.log("insertTicket, currentSCC :", currentSJobId);
@@ -89,7 +97,7 @@ export function TimeTicketCreate({
) { ) {
if (isNaN(values.actualhours) | isNaN(values.productivehours)) { if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
// console.log("actual hours is NAN!"); // console.log("actual hours is NAN!");
setLoading(false); setLoadingCreate(false);
setError({ message: t("createtimeticket.errors.nan") }); setError({ message: t("createtimeticket.errors.nan") });
return; return;
} }
@@ -97,11 +105,22 @@ export function TimeTicketCreate({
// console.log("have all values"); // console.log("have all values");
} else { } else {
// console.log("missing values!"); // console.log("missing values!");
setLoading(false); setLoadingCreate(false);
setError({ message: t("createtimeticket.errors.missingvalues") }); setError({ message: t("createtimeticket.errors.missingvalues") });
return; return;
} }
if (!!currentRestrictClaimableHoursFlag) {
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
if (values.productivehours > costCenterDiff.current) {
setLoadingCreate(false);
setError({
message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
});
return;
}
}
// if (date2) console.log("rate :", currentRatesNCostCenters && currentSCC?.value ? currentRatesNCostCenters.filter((r) => r.cost_center === currentSCC?.value)[0].rate : null);//2023-05-16T16:45:27.154Z // if (date2) console.log("rate :", currentRatesNCostCenters && currentSCC?.value ? currentRatesNCostCenters.filter((r) => r.cost_center === currentSCC?.value)[0].rate : null);//2023-05-16T16:45:27.154Z
// if (date2) console.log("bodyshopid : ", currentBodyshop.id); // if (date2) console.log("bodyshopid : ", currentBodyshop.id);
// if (date2) console.log("moment(date2).format(YYYY-MM-DD)", moment(date2).format("YYYY-MM-DD")); // if (date2) console.log("moment(date2).format(YYYY-MM-DD)", moment(date2).format("YYYY-MM-DD"));
@@ -155,7 +174,7 @@ export function TimeTicketCreate({
// console.log(" result : ", result); // console.log(" result : ", result);
// //after call results are retuning add handling below for cases // //after call results are retuning add handling below for cases
// console.log("insertTicket, result :", result?.data?.insert_timetickets?.returning[0]); // console.log("insertTicket, result :", result?.data?.insert_timetickets?.returning[0]);
setLoading(false); setLoadingCreate(false);
if (!!result.errors) { if (!!result.errors) {
// console.log("insertTicket, result.error :", result.errors); // console.log("insertTicket, result.error :", result.errors);
setError(JSON.stringify(result.errors)); setError(JSON.stringify(result.errors));
@@ -166,19 +185,28 @@ export function TimeTicketCreate({
// if (completedCallback) completedCallback(); // if (completedCallback) completedCallback();
}; };
const handleMutationError = (error) => { // const handleMutationError = (error) => {
// setEnterAgain(false); // // setEnterAgain(false);
console.log("insertTicket, result.error :", error); // console.log("insertTicket, result.error :", error);
setError( // setError(
error?.message ? JSON.stringify(error?.message) : JSON.stringify(error) // error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
); // );
// setLoading(false);
// };
const onRefresh = useCallback(() => {
setLoading(true);
// refetch();
setTimeout(() => {
setLoading(false); setLoading(false);
}; }, 1000);
}, []);
return ( return (
<View style={styles.cardBackground}> <View style={styles.cardBackground}>
<StyleRepeater childStyle={{ margin: 4 }}> <FlatList
{/* <ScrollView contentContainerStyle={{ flexGrow: 1 }}> */} ListHeaderComponent={
<Card> <Card style={localStyles.localCardStyle}>
<Card.Content> <Card.Content>
<Formik <Formik
initialValues={{ initialValues={{
@@ -200,8 +228,6 @@ export function TimeTicketCreate({
notExported={!currentBodyshop.tt_allow_post_to_invoiced} notExported={!currentBodyshop.tt_allow_post_to_invoiced}
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced} notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
/> />
{/* Below will be replaced with a Date Picker*/}
{/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
<Button <Button
mode="outlined" mode="outlined"
title="TicketDatePickerButton" title="TicketDatePickerButton"
@@ -253,15 +279,19 @@ export function TimeTicketCreate({
onChangeText={handleChange("actualhours")} onChangeText={handleChange("actualhours")}
onBlur={handleBlur("actualhours")} onBlur={handleBlur("actualhours")}
value={values.actualhours} value={values.actualhours}
label={t("createtimeticket.labels.actualhoursplaceholder")} label={t(
"createtimeticket.labels.actualhoursplaceholder"
)}
keyboardType="numeric" keyboardType="numeric"
/> />
{error ? <ErrorDisplay errorMessage={error.message} /> : null} {error ? (
<ErrorDisplay errorMessage={error.message} />
) : null}
<Button <Button
mode="outlined" mode="outlined"
style={styles.buttonBasicOutlined} style={styles.buttonBasicOutlined}
onPress={handleSubmit} onPress={handleSubmit}
loading={loading} loading={loadingCreate}
title="Submit" title="Submit"
> >
<Text style={{ fontSize: 12 }}> <Text style={{ fontSize: 12 }}>
@@ -273,12 +303,22 @@ export function TimeTicketCreate({
</Formik> </Formik>
</Card.Content> </Card.Content>
</Card> </Card>
{/* Below is for list of jobs/tickets */} }
{/* </ScrollView> */} data={null}
<View style={{ flexGrow: 1 }}> renderItem={null}
<LaborAllocationsTable jobId={currentSJobId?.value} /> ListFooterComponent={
</View> <LaborAllocationsTable
</StyleRepeater> jobId={currentSJobId?.value}
costCenterDiff={costCenterDiff}
selectedCostCenter={currentSCC}
style={localStyles.localCardStyle}
shouldRefresh={loading}
/>
}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
/>
</View> </View>
); );
} }
@@ -320,4 +360,7 @@ const localStyles = StyleSheet.create({
height: 48, height: 48,
fontSize: 16, fontSize: 16,
}, },
localCardStyle: {
margin: 4,
},
}); });