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

26
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,13 +17,13 @@ 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();
const onRefresh = async () => { const onRefresh = async () => {
// console.log("LaborAllocationsTable refetch"); // console.log("LaborAllocationsTable refetch");
return refetch(); return refetch();
}; };
@@ -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);
@@ -65,7 +67,12 @@ 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 &&
@@ -80,9 +87,10 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
{ 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);
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"} />

170
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,73 +163,93 @@ 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={{
costcenter: { currentSCC }, costcenter: { currentSCC },
productivehours: "", productivehours: "",
actualhours: "", actualhours: "",
}} }}
onSubmit={handleFinish} onSubmit={handleFinish}
> >
{({ handleChange, handleBlur, handleSubmit, values }) => ( {({ handleChange, handleBlur, handleSubmit, values }) => (
<View style={localStyles.topTimeTicketContainer}> <View style={localStyles.topTimeTicketContainer}>
<TextInput <TextInput
style={localStyles.inputStyle} style={localStyles.inputStyle}
mode="outlined" mode="outlined"
onChangeText={handleChange("actualhours")} onChangeText={handleChange("actualhours")}
onBlur={handleBlur("actualhours")} onBlur={handleBlur("actualhours")}
value={values.actualhours} value={values.actualhours}
label={t( label={t(
"timeticketclockoff.labels.actualhoursplaceholder" "timeticketclockoff.labels.actualhoursplaceholder"
)} )}
keyboardType="numeric" keyboardType="numeric"
/> />
<TextInput <TextInput
style={localStyles.inputStyle} style={localStyles.inputStyle}
mode="outlined" mode="outlined"
onChangeText={handleChange("productivehours")} onChangeText={handleChange("productivehours")}
onBlur={handleBlur("productivehours")} onBlur={handleBlur("productivehours")}
value={values.productivehours} value={values.productivehours}
label={t( label={t(
"timeticketclockoff.labels.productivehoursplaceholder" "timeticketclockoff.labels.productivehoursplaceholder"
)} )}
keyboardType="numeric" keyboardType="numeric"
/> />
<CostCenterSelect <CostCenterSelect
currentRatesNCostCenters={currentRatesNCostCenters} currentRatesNCostCenters={currentRatesNCostCenters}
currentValue={currentSCC} currentValue={currentSCC}
onValueSelected={setCurrentSCC} onValueSelected={setCurrentSCC}
/> />
{error ? <ErrorDisplay errorMessage={error.message} /> : null} {error ? (
<Button <ErrorDisplay errorMessage={error.message} />
mode="outlined" ) : null}
style={styles.buttonBasicOutlined} <Button
onPress={handleSubmit} mode="outlined"
title={t("timeticketclockoff.actions.clockoff")} style={styles.buttonBasicOutlined}
> onPress={handleSubmit}
<Text style={{ fontSize: 12 }}> title={t("timeticketclockoff.actions.clockoff")}
{t("timeticketclockoff.actions.clockoff")} loading={loadingClockOut}
</Text> >
</Button> <Text style={{ fontSize: 12 }}>
</View> {t("timeticketclockoff.actions.clockoff")}
)} </Text>
</Formik> </Button>
</Card.Content> </View>
</Card> )}
<View style={{ flexGrow: 1 }}> </Formik>
<LaborAllocationsTable </Card.Content>
jobId={currentTmTicketJobId} </Card>
costCenterDiff={costCenterDiff} }
selectedCostCenter={currentSCC} data={null}
/> renderItem={null}
</View > ListFooterComponent={
</StyleRepeater> <LaborAllocationsTable
jobId={currentTmTicketJobId}
costCenterDiff={costCenterDiff}
selectedCostCenter={currentSCC}
style={localStyles.localCardStyle}
shouldRefresh={loading}
/>
}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
/>
</View> </View>
); );
} }
@@ -260,4 +285,7 @@ const localStyles = StyleSheet.create({
height: 48, height: 48,
fontSize: 16, fontSize: 16,
}, },
localCardStyle: {
margin: 4,
},
}); });

279
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,119 +185,140 @@ 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); // setLoading(false);
}; // };
const onRefresh = useCallback(() => {
setLoading(true);
// refetch();
setTimeout(() => {
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={{
jobid: { currentSJobId }, jobid: { currentSJobId },
ticketdate: date2.toLocaleDateString(), ticketdate: date2.toLocaleDateString(),
employee: { currentEmployeeFullName }, employee: { currentEmployeeFullName },
costcenter: { currentSCC }, costcenter: { currentSCC },
productivehours: "", productivehours: "",
actualhours: "", actualhours: "",
}} }}
onSubmit={handleFinish} onSubmit={handleFinish}
> >
{({ handleChange, handleBlur, handleSubmit, values }) => ( {({ handleChange, handleBlur, handleSubmit, values }) => (
<View style={localStyles.topTimeTicketContainer}> <View style={localStyles.topTimeTicketContainer}>
<JobIdSearchSelect <JobIdSearchSelect
currentValue={currentSJobId} currentValue={currentSJobId}
onJobSelected={setCurrentSJobId} onJobSelected={setCurrentSJobId}
convertedOnly={true} convertedOnly={true}
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*/} <Button
{/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */} mode="outlined"
<Button title="TicketDatePickerButton"
mode="outlined" onPress={showDatePicker}
title="TicketDatePickerButton" style={localStyles.dateButton}
onPress={showDatePicker} >
style={localStyles.dateButton} <Text style={localStyles.textForButton}>
> {t("createtimeticket.actions.ticketdate")}
<Text style={localStyles.textForButton}> {date2.toLocaleDateString("en-US", {
{t("createtimeticket.actions.ticketdate")} day: "2-digit",
{date2.toLocaleDateString("en-US", { month: "2-digit",
day: "2-digit", year: "numeric",
month: "2-digit", })}
year: "numeric", </Text>
})} </Button>
</Text> <DateTimePickerModal
</Button> isVisible={isDatePickerVisible}
<DateTimePickerModal mode="date"
isVisible={isDatePickerVisible} date={date2}
mode="date" onConfirm={handleConfirm}
date={date2} onCancel={hideDatePicker}
onConfirm={handleConfirm} />
onCancel={hideDatePicker} <TextInput
/> style={localStyles.inputStyle}
<TextInput mode="outlined"
style={localStyles.inputStyle} disabled={true}
mode="outlined" value={currentEmployeeFullName}
disabled={true} label={t("createtimeticket.labels.employeeplaceholder")}
value={currentEmployeeFullName} />
label={t("createtimeticket.labels.employeeplaceholder")} <CostCenterSelect
/> currentRatesNCostCenters={currentRatesNCostCenters}
<CostCenterSelect currentValue={currentSCC}
currentRatesNCostCenters={currentRatesNCostCenters} onValueSelected={setCurrentSCC}
currentValue={currentSCC} />
onValueSelected={setCurrentSCC} <TextInput
/> style={localStyles.inputStyle}
<TextInput mode="outlined"
style={localStyles.inputStyle} onChangeText={handleChange("productivehours")}
mode="outlined" onBlur={handleBlur("productivehours")}
onChangeText={handleChange("productivehours")} value={values.productivehours}
onBlur={handleBlur("productivehours")} label={t(
value={values.productivehours} "createtimeticket.labels.productivehoursplaceholder"
label={t( )}
"createtimeticket.labels.productivehoursplaceholder" keyboardType="numeric"
)} />
keyboardType="numeric" <TextInput
/> style={localStyles.inputStyle}
<TextInput mode="outlined"
style={localStyles.inputStyle} onChangeText={handleChange("actualhours")}
mode="outlined" onBlur={handleBlur("actualhours")}
onChangeText={handleChange("actualhours")} value={values.actualhours}
onBlur={handleBlur("actualhours")} label={t(
value={values.actualhours} "createtimeticket.labels.actualhoursplaceholder"
label={t("createtimeticket.labels.actualhoursplaceholder")} )}
keyboardType="numeric" keyboardType="numeric"
/> />
{error ? <ErrorDisplay errorMessage={error.message} /> : null} {error ? (
<Button <ErrorDisplay errorMessage={error.message} />
mode="outlined" ) : null}
style={styles.buttonBasicOutlined} <Button
onPress={handleSubmit} mode="outlined"
loading={loading} style={styles.buttonBasicOutlined}
title="Submit" onPress={handleSubmit}
> loading={loadingCreate}
<Text style={{ fontSize: 12 }}> title="Submit"
{t("createtimeticket.actions.createticket")} >
</Text> <Text style={{ fontSize: 12 }}>
</Button> {t("createtimeticket.actions.createticket")}
</View> </Text>
)} </Button>
</Formik> </View>
</Card.Content> )}
</Card> </Formik>
{/* Below is for list of jobs/tickets */} </Card.Content>
{/* </ScrollView> */} </Card>
<View style={{ flexGrow: 1 }}> }
<LaborAllocationsTable jobId={currentSJobId?.value} /> data={null}
</View> renderItem={null}
</StyleRepeater> ListFooterComponent={
<LaborAllocationsTable
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,
},
}); });