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

updated styling and display jobslist above clockin

Browse Source
This commit is contained in:
jfrye122
2023-06-08 15:28:03 -04:00
parent 851d8bebe4
commit 9828ee3da0
9 changed files with 407 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Selects/select-cost-center.jsx
View File

@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
height: 48, height: 48,
borderColor: "gray", borderColor: "gray",
borderWidth: 0.5, borderWidth: 0.5,
borderRadius: 8, borderRadius: 4,
paddingHorizontal: 8, paddingHorizontal: 8,
}, },
icon: { icon: {

5
components/Selects/select-job-id.jsx
View File

@@ -173,7 +173,8 @@ export default connect(null, null)(JobIdSearchSelect);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 16, marginVertical: 4,
marginHorizontal: 16,
justifyContent: "center", justifyContent: "center",
alignContent: "center", alignContent: "center",
}, },
@@ -181,7 +182,7 @@ const styles = StyleSheet.create({
height: 50, height: 50,
borderColor: "gray", borderColor: "gray",
borderWidth: 0.5, borderWidth: 0.5,
borderRadius: 8, borderRadius: 4,
paddingHorizontal: 8, paddingHorizontal: 8,
}, },
icon: { icon: {

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

@@ -82,12 +82,11 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
// console.log("labor summary is:", summary); // console.log("labor summary is:", summary);
return ( return (
<View style={{ flex: 1}}> <View style={{ flex: 1}}>
{typeof data !== "undefined" ? ( {typeof data !== "undefined" ? (
<Card style={{ flex: 1 }}> <Card style={{ flex: 1 }}>
<Card.Title><Text>Labor Allocations</Text></Card.Title> <Card.Title title={"Labor Allocations"} />
<Card.Content> <Card.Content>
<DataTable>
<View style={localStyles.headerArea}> <View style={localStyles.headerArea}>
<Text style={localStyles.headertext}>Cost Center</Text> <Text style={localStyles.headertext}>Cost Center</Text>
<Text style={localStyles.headertext}>Hours Total</Text> <Text style={localStyles.headertext}>Hours Total</Text>
@@ -97,7 +96,6 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
<Text style={localStyles.headertext}>Difference</Text> <Text style={localStyles.headertext}>Difference</Text>
</View> </View>
<Divider orientation="vertical" /> <Divider orientation="vertical" />
</DataTable>
<DataTable> <DataTable>
<FlatList <FlatList
data={totals} data={totals}

234
components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
View File

@@ -1,7 +1,20 @@
import React, { useCallback, useState } from "react"; import React, { useCallback, useState } from "react";
import moment from "moment"; import moment from "moment";
import { View, Text, StyleSheet, ScrollView, RefreshControl} from "react-native"; import {
import { Button, Card, Headline, Subheading } from "react-native-paper"; View,
Text,
StyleSheet,
ScrollView,
RefreshControl,
FlatList,
} from "react-native";
import {
ActivityIndicator,
Button,
Card,
Headline,
Subheading,
} from "react-native-paper";
import styles from "../styles"; import styles from "../styles";
import axios from "axios"; import axios from "axios";
@@ -9,14 +22,21 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { employeeGetRatesStart } from "../../redux/employee/employee.actions"; import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
import { selectCurrentEmployee, selectRates, selectGettingRates, selectSignInError, selectEmployeeFullName, import {
selectCurrentEmployee,
selectRates,
selectGettingRates,
selectSignInError,
selectEmployeeFullName,
} from "../../redux/employee/employee.selectors"; } from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import { JobIdSearchSelect } from "../Selects/select-job-id"; import { JobIdSearchSelect } from "../Selects/select-job-id";
import CostCenterSelect from "../Selects/select-cost-center"; import CostCenterSelect from "../Selects/select-cost-center";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import { selectCurrentTimeTicketJob, selectCurrentTimeTicketJobId, import {
selectCurrentTimeTicketJob,
selectCurrentTimeTicketJobId,
} from "../../redux/timetickets/timetickets.selectors"; } from "../../redux/timetickets/timetickets.selectors";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries"; import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { useMutation, useQuery } from "@apollo/client"; import { useMutation, useQuery } from "@apollo/client";
@@ -26,8 +46,9 @@ import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.
import { logImEXEvent } from "../../firebase/firebase.analytics"; import { logImEXEvent } from "../../firebase/firebase.analytics";
import StyleRepeater from "../style-repeater/style-repeater"; import StyleRepeater from "../style-repeater/style-repeater";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
// import SignOutButton from "../Buttons/employee-sign-out-button.component"; import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
// import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component"; import SignOutButton from "../Buttons/employee-sign-out-button.component";
import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentEmployee: selectCurrentEmployee, currentEmployee: selectCurrentEmployee,
@@ -60,6 +81,7 @@ export function ScreenTimeTicketBrowser({
const [currentSCC, setCurrentSCC] = useState(null); const [currentSCC, setCurrentSCC] = useState(null);
const [currentSJobId, setCurrentSJobId] = useState(null); const [currentSJobId, setCurrentSJobId] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingClockIn, setLoadingClockIn] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, { const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
@@ -68,7 +90,7 @@ export function ScreenTimeTicketBrowser({
const handleFinish = async (values) => { const handleFinish = async (values) => {
// console.log("handleFinish called in ScreenTimeTicketBrowser"); // console.log("handleFinish called in ScreenTimeTicketBrowser");
setLoading(true); setLoadingClockIn(true);
setError(null); setError(null);
const theTime = (await axios.post("/utils/time")).data; const theTime = (await axios.post("/utils/time")).data;
@@ -78,7 +100,7 @@ export function ScreenTimeTicketBrowser({
// console.log("have all values"); // console.log("have all values");
} else { } else {
// console.log("missing values!"); // console.log("missing values!");
setLoading(false); setLoadingClockIn(false);
setError({ message: t("timeticketbrowser.errors.missingvalues") }); setError({ message: t("timeticketbrowser.errors.missingvalues") });
return; return;
} }
@@ -112,7 +134,7 @@ export function ScreenTimeTicketBrowser({
// console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] ); // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] );
const result = await insertTimeTicket(tempVariablesObj); const result = await insertTimeTicket(tempVariablesObj);
// console.log("insertTimeTicket, result :", result); // console.log("insertTimeTicket, result :", result);
setLoading(false); setLoadingClockIn(false);
if (!!result.errors) { if (!!result.errors) {
// console.log("insertTimeTicket, result.error :", result.errors); // console.log("insertTimeTicket, result.error :", result.errors);
setError(JSON.stringify(result.errors)); setError(JSON.stringify(result.errors));
@@ -122,81 +144,153 @@ export function ScreenTimeTicketBrowser({
setCurrentSCC(null); setCurrentSCC(null);
} }
}; };
const onRefresh = useCallback(() => { const onRefresh = useCallback(() => {
setRefreshing(true); setRefreshing(true);
refetch();
setTimeout(() => { setTimeout(() => {
setRefreshing(false); setRefreshing(false);
}, 2000); }, 1000);
}, []); }, []);
const [itemState, setItemState] = useState({
title: t("employeeclockedinlist.labels.alreadyclockedon"),
data: null,
content: null,
});
const { loadingATT, errorATT, dataATT, refetch } = useQuery(
QUERY_ACTIVE_TIME_TICKETS,
{
variables: {
employeeId: currentEmployee?.technician?.id,
},
skip: !currentEmployee?.technician,
onCompleted: (dataATT) => {
if (!!dataATT && dataATT?.timetickets) {
setItemState((itemState) => ({
...itemState,
data: dataATT?.timetickets,
}));
}
},
onRefresh: { onRefresh },
}
);
if (loadingATT) {
// console.log("loadingATT : ");
setItemState((itemState) => ({
...itemState,
content: <ActivityIndicator color="dodgerblue" size="large" />,
}));
return;
}
if (errorATT) {
// console.error("ErrorATT : ",errorATT);
setItemState((itemState) => ({
...itemState,
content: <ErrorDisplay errorMessage={errorATT.message} />,
}));
return;
}
// console.log({ itemState: !!itemState });
return ( return (
<ScrollView <View style={styles.cardBackground}>
style={styles.cardBackground} <FlatList
// contentContainerStyle={{ flexGrow: 0 }} ListHeaderComponent={
refreshControl={ <Card style={localStyles.localCardStyle}>
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> <Card.Title
} title={t("timeticketbrowser.labels.loggedinemployee")}
> // right={(props) => <SignOutButton />}
<StyleRepeater childStyle={{ margin: 4 }}> />
<Card> <Card.Content>
<Card.Title title={t("timeticketbrowser.labels.loggedinemployee")} {currentEmployeeFullName && (
// right={(props) => <SignOutButton />} <Subheading>{currentEmployeeFullName}</Subheading>
/> )}
<Card.Content> </Card.Content>
{currentEmployeeFullName && ( </Card>
<Subheading>{currentEmployeeFullName}</Subheading> }
)} data={!!itemState ? [itemState] : null}
</Card.Content> renderItem={({ item }) => (
</Card> <MyItem style={localStyles.localCardStyle} itemState={item} />
<Card> )}
<Card.Title title={t("timeticketbrowser.labels.clockintojob")} ListFooterComponent={
// right={(props) => <Card style={localStyles.localCardStyle}>
// <View style={{ flexDirection:"row" }} ><AddTimeTicketButton /> <Card.Title
// <Button mode="outlined" title={t("timeticketbrowser.labels.clockintojob")}
// compact={true} loading={loading} onPress={handleFinish} // right={(props) =>
// style={{margin:4}} // <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
// > // <Button mode="outlined"
// <Text>Clock In</Text> // compact={true} loading={loading} onPress={handleFinish}
// </Button></View> // style={{margin:4}}
// } // >
/> // <Text>Clock In</Text>
<Card.Content> // </Button></View>
<JobIdSearchSelect // }
currentValue={currentSJobId} />
onJobSelected={setCurrentSJobId} <Card.Content>
convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced} <JobIdSearchSelect
notExported={!currentBodyshop.tt_allow_post_to_invoiced} currentValue={currentSJobId}
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced} onJobSelected={setCurrentSJobId}
/> convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
<CostCenterSelect notExported={!currentBodyshop.tt_allow_post_to_invoiced}
currentValue={currentSCC} notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
currentRatesNCostCenters={currentRatesNCostCenters} />
onValueSelected={setCurrentSCC} <CostCenterSelect
/> currentValue={currentSCC}
{error && error?.message ? ( currentRatesNCostCenters={currentRatesNCostCenters}
<ErrorDisplay errorMessage={error.message} /> onValueSelected={setCurrentSCC}
) : null} />
<Button mode="outlined" loading={loading} onPress={handleFinish}> {error && error?.message ? (
<Text>{t("timeticketbrowser.actions.clockin")}</Text> <ErrorDisplay errorMessage={error.message} />
</Button> ) : null}
</Card.Content> <Button
</Card> mode="outlined"
</StyleRepeater> style={styles.buttonBasicOutlined}
<View style={{ flexGrow: 1, flex: 1 }}> loading={loadingClockIn}
<EmployeeClockedInList onPress={handleFinish}
technician={currentEmployee} >
isRefresh={refreshing} <Text>{t("timeticketbrowser.actions.clockin")}</Text>
/> </Button>
</View> </Card.Content>
</ScrollView> </Card>
}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
/>
</View>
); );
} }
const MyItem = ({ itemState, style }) => {
const items = itemState?.data;
return (
<Card key={itemState.title} style={style}>
<Card.Title title={itemState.title} />
<Card.Content>
{!!items ? (
items.map((item) => <ClockedinListItem ticket={item} />)
) : !!itemState.content ? (
itemState.content
) : (
<Text>No Data</Text>
)}
</Card.Content>
</Card>
);
};
const localStyles = StyleSheet.create({ const localStyles = StyleSheet.create({
content: { content: {
display: "flex", display: "flex",
flex: 2, flex: 2,
}, },
localCardStyle: {
margin: 4,
},
}); });
export default connect( export default connect(

19
components/styles.js
View File

@@ -9,4 +9,23 @@ export default StyleSheet.create({
display: "flex", display: "flex",
flex: 1, flex: 1,
}, },
buttonBasicOutlined: {
marginVertical: 4,
marginHorizontal: 16,
justifyContent: "center",
alignContent: "center",
borderColor: "gray",
borderWidth: 0.8,
borderRadius: 4,
},
buttonFatOutlined: {
marginVertical: 4,
marginHorizontal: 16,
height: 48,
justifyContent: "center",
alignContent: "center",
borderColor: "gray",
borderWidth: 0.8,
borderRadius: 4,
}
}); });

10
components/time-ticket-items/clockedin-list-item.component.jsx
View File

@@ -6,13 +6,14 @@ import { connect } from "react-redux";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
import { DateTimeFormatter } from "../../util/DateFormater"; import { DateTimeFormatter } from "../../util/DateFormater";
import { setTmTicketJobId } from "../../redux/app/app.actions"; import { setTmTicketJobId } from "../../redux/app/app.actions";
import styles from "../styles";
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)), setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
}); });
export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) { export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
// console.log("makeNavToTimeTicketClockOff, handleRefresh:"); // console.log("ClockedinListItem, ticket:",ticket);
const { t } = useTranslation(); const { t } = useTranslation();
const navigation = useNavigation(); const navigation = useNavigation();
@@ -28,7 +29,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
); );
return ( return (
<Card style={{ margin: 8 }}> <Card key={ticket.id} style={{ margin: 8 }}>
<Card.Title <Card.Title
title={`${ title={`${
ticket.job.ro_number || t("general.labels.na") ticket.job.ro_number || t("general.labels.na")
@@ -51,8 +52,9 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
: ticket.cost_center} : ticket.cost_center}
</Text> </Text>
</Card.Content> </Card.Content>
<Card.Actions> <Card.Actions style={{
<Button mode="outlined" onPress={makeNavToTimeTicketClockOff} > justifyContent: 'center'}}>
<Button mode="outlined" style={styles.buttonBasicOutlined} onPress={makeNavToTimeTicketClockOff} >
{t("clockedinlistitem.actions.clockout")} {t("clockedinlistitem.actions.clockout")}
</Button> </Button>
</Card.Actions> </Card.Actions>

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

@@ -4,13 +4,22 @@ import { StyleSheet, Text, View, ScrollView } 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";
import { Button, TextInput, Card, Headline, Subheading } from "react-native-paper"; import {
import CostCenterSelect from "../Selects/select-cost-center"; Button,
TextInput,
Card,
Headline,
Subheading,
} from "react-native-paper";
import CostCenterSelect from "../Selects/select-cost-center";
import { import {
selectCurrentEmployee, selectCurrentEmployee,
selectRates, selectRates,
} from "../../redux/employee/employee.selectors"; } from "../../redux/employee/employee.selectors";
import { selectBodyshop,selectRestrictClaimableHoursFlag } from "../../redux/user/user.selectors"; import {
selectBodyshop,
selectRestrictClaimableHoursFlag,
} from "../../redux/user/user.selectors";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component"; import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries"; import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
import { useMutation } from "@apollo/client"; import { useMutation } from "@apollo/client";
@@ -30,7 +39,7 @@ const mapStateToProps = createStructuredSelector({
currentRatesNCostCenters: selectRates, currentRatesNCostCenters: selectRates,
currentBodyshop: selectBodyshop, currentBodyshop: selectBodyshop,
currentTmTicketJobId: selectCurrentTmTicketJobId, currentTmTicketJobId: selectCurrentTmTicketJobId,
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
timeTicketClockOutStart, timeTicketClockOutStart,
@@ -44,14 +53,12 @@ export function TimeTicketClockOff({
currentRestrictClaimableHoursFlag, currentRestrictClaimableHoursFlag,
route, route,
}) { }) {
const costCenterDiff = useRef(0); const costCenterDiff = useRef(0);
// console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff); // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
const setCostCenterDiff = (value) => { const setCostCenterDiff = (value) => {
countRef.current = val; countRef.current = val;
console.log(`Button clicked ${countRef.current} times`); // console.log(`Button clicked ${countRef.current} times`);
}; };
const navigation = useNavigation(); const navigation = useNavigation();
@@ -64,8 +71,9 @@ export function TimeTicketClockOff({
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [currentSCC, setCurrentSCC] = useState(null); const [currentSCC, setCurrentSCC] = useState(null);
const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET, const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET, {
{refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]}); refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
});
const handleFinish = async (values) => { const handleFinish = async (values) => {
logImEXEvent("TimeTicketClockOff_handleFinish"); logImEXEvent("TimeTicketClockOff_handleFinish");
@@ -75,7 +83,7 @@ export function TimeTicketClockOff({
!!values.productivehours && !!values.productivehours &&
!!currentSCC?.value !!currentSCC?.value
) { ) {
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); setLoading(false);
setError({ message: t("timeticketclockoff.errors.nan") }); setError({ message: t("timeticketclockoff.errors.nan") });
@@ -85,16 +93,18 @@ export function TimeTicketClockOff({
// console.log("all have values:"); // console.log("all have values:");
} else { } else {
// console.log("missing values!"); // console.log("missing values!");
setError({ message: t("timeticketclockoff.errors.missingvalues") }); setError({ message: t("timeticketclockoff.errors.missingvalues") });
return; return;
} }
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag :", currentRestrictClaimableHoursFlag); // console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag :", currentRestrictClaimableHoursFlag);
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) {
setError({ message: t("timeticketclockoff.errors.hoursenteredmorethanavailable") }); setError({
message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
});
return; return;
} }
} }
const tempcallobj = { const tempcallobj = {
@@ -140,65 +150,80 @@ export function TimeTicketClockOff({
// console.log("updateTimeticket, result :", result); // console.log("updateTimeticket, result :", result);
setLoading(false); setLoading(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));
} else { } else {
console.log("updateTimeticket, result :", result.data); // console.log("updateTimeticket, result :", result.data);
navigation.goBack(); navigation.goBack();
} }
//if (completedCallback) completedCallback(); //if (completedCallback) completedCallback();
}; };
return ( return (
<View style={styles.cardBackground}> <View style={styles.cardBackground}>
{/* style={localStyles.content}> */} {/* style={localStyles.content}> */}
<StyleRepeater childStyle={{ margin: 4 }}> <StyleRepeater childStyle={{ margin: 4 }}>
<Card> <Card>
<Formik <Card.Content>
initialValues={{ <Formik
costcenter: { currentSCC }, initialValues={{
productivehours: "", costcenter: { currentSCC },
actualhours: "", productivehours: "",
}} actualhours: "",
onSubmit={handleFinish} }}
> onSubmit={handleFinish}
{({ handleChange, handleBlur, handleSubmit, values }) => ( >
<View style={localStyles.topTimeTicketContainer}> {({ handleChange, handleBlur, handleSubmit, values }) => (
<TextInput <View style={localStyles.topTimeTicketContainer}>
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("timeticketclockoff.labels.actualhoursplaceholder")} value={values.actualhours}
keyboardType="numeric" label={t(
/> "timeticketclockoff.labels.actualhoursplaceholder"
<TextInput )}
style={localStyles.inputStyle} keyboardType="numeric"
mode="outlined" />
onChangeText={handleChange("productivehours")} <TextInput
onBlur={handleBlur("productivehours")} style={localStyles.inputStyle}
value={values.productivehours} mode="outlined"
label={t("timeticketclockoff.labels.productivehoursplaceholder")} onChangeText={handleChange("productivehours")}
keyboardType="numeric" onBlur={handleBlur("productivehours")}
/> value={values.productivehours}
<CostCenterSelect label={t(
currentRatesNCostCenters={currentRatesNCostCenters} "timeticketclockoff.labels.productivehoursplaceholder"
currentValue={currentSCC} )}
onValueSelected={setCurrentSCC} keyboardType="numeric"
/> />
{error ? <ErrorDisplay errorMessage={error.message} /> : null} <CostCenterSelect
<Button currentRatesNCostCenters={currentRatesNCostCenters}
style={localStyles.input} currentValue={currentSCC}
onPress={handleSubmit} onValueSelected={setCurrentSCC}
title={t("timeticketclockoff.actions.clockoff")} />
> {error ? <ErrorDisplay errorMessage={error.message} /> : null}
<Text style={{ fontSize: 12 }}>{t("timeticketclockoff.actions.clockoff")}</Text> <Button
</Button> mode="outlined"
</View> style={styles.buttonBasicOutlined}
)} onPress={handleSubmit}
</Formik> title={t("timeticketclockoff.actions.clockoff")}
>
<Text style={{ fontSize: 12 }}>
{t("timeticketclockoff.actions.clockoff")}
</Text>
</Button>
</View>
)}
</Formik>
</Card.Content>
</Card> </Card>
<LaborAllocationsTable jobId={currentTmTicketJobId} costCenterDiff={costCenterDiff} selectedCostCenter={currentSCC}/> <View style={{ flexGrow: 1 }}>
<LaborAllocationsTable
jobId={currentTmTicketJobId}
costCenterDiff={costCenterDiff}
selectedCostCenter={currentSCC}
/>
</View >
</StyleRepeater> </StyleRepeater>
</View> </View>
); );

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

@@ -4,14 +4,14 @@ import { StyleSheet, Text, View, ScrollView } 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";
import { Button, Dialog, TextInput } from "react-native-paper"; import { Button, TextInput, Card } from "react-native-paper";
import CostCenterSelect from "../Selects/select-cost-center"; import CostCenterSelect from "../Selects/select-cost-center";
import { JobIdSearchSelect } from "../Selects/select-job-id"; import { JobIdSearchSelect } from "../Selects/select-job-id";
import DateTimePickerModal from "react-native-modal-datetime-picker"; import DateTimePickerModal from "react-native-modal-datetime-picker";
import { import {
selectCurrentEmployee, selectCurrentEmployee,
selectRates, selectRates,
selectEmployeeFullName selectEmployeeFullName,
} from "../../redux/employee/employee.selectors"; } from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import { useCallback } from "react"; import { useCallback } from "react";
@@ -26,11 +26,14 @@ import { logImEXEvent } from "../../firebase/firebase.analytics";
import moment from "moment"; import moment from "moment";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import styles from "../styles";
import StyleRepeater from "../style-repeater/style-repeater";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentEmployee: selectCurrentEmployee, currentEmployee: selectCurrentEmployee,
currentRatesNCostCenters: selectRates, currentRatesNCostCenters: selectRates,
currentBodyshop: selectBodyshop, currentBodyshop: selectBodyshop,
currentEmployeeFullName: selectEmployeeFullName currentEmployeeFullName: selectEmployeeFullName,
}); });
// const mapDispatchToProps = (dispatch) => ({}); // const mapDispatchToProps = (dispatch) => ({});
@@ -38,7 +41,7 @@ export function TimeTicketCreate({
currentEmployee, currentEmployee,
currentRatesNCostCenters, currentRatesNCostCenters,
currentBodyshop, currentBodyshop,
currentEmployeeFullName currentEmployeeFullName,
}) { }) {
const navigation = useNavigation(); const navigation = useNavigation();
const { t } = useTranslation(); const { t } = useTranslation();
@@ -95,7 +98,7 @@ export function TimeTicketCreate({
} else { } else {
// console.log("missing values!"); // console.log("missing values!");
setLoading(false); setLoading(false);
setError({ message: t("createtimeticket.errors.missingvalues")}); setError({ message: t("createtimeticket.errors.missingvalues") });
return; return;
} }
@@ -172,95 +175,110 @@ export function TimeTicketCreate({
setLoading(false); setLoading(false);
}; };
return ( return (
<View style={localStyles.content}> <View style={styles.cardBackground}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}> <StyleRepeater childStyle={{ margin: 4 }}>
<Formik {/* <ScrollView contentContainerStyle={{ flexGrow: 1 }}> */}
initialValues={{ <Card>
jobid: { currentSJobId }, <Card.Content>
ticketdate: date2.toLocaleDateString(), <Formik
employee: {currentEmployeeFullName}, initialValues={{
costcenter: { currentSCC }, jobid: { currentSJobId },
productivehours: "", ticketdate: date2.toLocaleDateString(),
actualhours: "", employee: { currentEmployeeFullName },
}} costcenter: { currentSCC },
onSubmit={handleFinish} productivehours: "",
> actualhours: "",
{({ handleChange, handleBlur, handleSubmit, values }) => ( }}
<View style={localStyles.topTimeTicketContainer}> onSubmit={handleFinish}
<JobIdSearchSelect >
currentValue={currentSJobId} {({ handleChange, handleBlur, handleSubmit, values }) => (
onJobSelected={setCurrentSJobId} <View style={localStyles.topTimeTicketContainer}>
convertedOnly={true} <JobIdSearchSelect
notExported={!currentBodyshop.tt_allow_post_to_invoiced} currentValue={currentSJobId}
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced} onJobSelected={setCurrentSJobId}
/> convertedOnly={true}
{/* Below will be replaced with a Date Picker*/} notExported={!currentBodyshop.tt_allow_post_to_invoiced}
{/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */} notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
<Button />
mode="outlined" {/* Below will be replaced with a Date Picker*/}
title="TicketDatePickerButton" {/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
onPress={showDatePicker} <Button
style={localStyles.dateButton} mode="outlined"
> title="TicketDatePickerButton"
<Text style={localStyles.textForButton}> onPress={showDatePicker}
{t("createtimeticket.actions.ticketdate")}{date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' })} style={localStyles.dateButton}
</Text> >
</Button> <Text style={localStyles.textForButton}>
<DateTimePickerModal {t("createtimeticket.actions.ticketdate")}
isVisible={isDatePickerVisible} {date2.toLocaleDateString("en-US", {
mode="date" day: "2-digit",
date={date2} month: "2-digit",
onConfirm={handleConfirm} year: "numeric",
onCancel={hideDatePicker} })}
/> </Text>
<TextInput </Button>
style={localStyles.inputStyle} <DateTimePickerModal
mode="outlined" isVisible={isDatePickerVisible}
disabled={true} mode="date"
value={currentEmployeeFullName} date={date2}
label={t("createtimeticket.labels.employeeplaceholder")} onConfirm={handleConfirm}
/> onCancel={hideDatePicker}
<CostCenterSelect />
currentRatesNCostCenters={currentRatesNCostCenters} <TextInput
currentValue={currentSCC} style={localStyles.inputStyle}
onValueSelected={setCurrentSCC} mode="outlined"
/> disabled={true}
<TextInput value={currentEmployeeFullName}
style={localStyles.inputStyle} label={t("createtimeticket.labels.employeeplaceholder")}
mode="outlined" />
onChangeText={handleChange("productivehours")} <CostCenterSelect
onBlur={handleBlur("productivehours")} currentRatesNCostCenters={currentRatesNCostCenters}
value={values.productivehours} currentValue={currentSCC}
label={t("createtimeticket.labels.productivehoursplaceholder")} onValueSelected={setCurrentSCC}
keyboardType="numeric" />
/> <TextInput
<TextInput style={localStyles.inputStyle}
style={localStyles.inputStyle} mode="outlined"
mode="outlined" onChangeText={handleChange("productivehours")}
onChangeText={handleChange("actualhours")} onBlur={handleBlur("productivehours")}
onBlur={handleBlur("actualhours")} value={values.productivehours}
value={values.actualhours} label={t(
label={t("createtimeticket.labels.actualhoursplaceholder")} "createtimeticket.labels.productivehoursplaceholder"
keyboardType="numeric" )}
/> keyboardType="numeric"
{error ? <ErrorDisplay errorMessage={error.message} /> : null} />
<Button <TextInput
style={localStyles.input} style={localStyles.inputStyle}
onPress={handleSubmit} mode="outlined"
loading={loading} onChangeText={handleChange("actualhours")}
title="Submit" onBlur={handleBlur("actualhours")}
> value={values.actualhours}
<Text style={{ fontSize: 12 }}>{t("createtimeticket.actions.createticket")}</Text> label={t("createtimeticket.labels.actualhoursplaceholder")}
</Button> keyboardType="numeric"
</View> />
)} {error ? <ErrorDisplay errorMessage={error.message} /> : null}
</Formik> <Button
mode="outlined"
style={styles.buttonBasicOutlined}
onPress={handleSubmit}
loading={loading}
title="Submit"
>
<Text style={{ fontSize: 12 }}>
{t("createtimeticket.actions.createticket")}
</Text>
</Button>
</View>
)}
</Formik>
</Card.Content>
</Card>
{/* Below is for list of jobs/tickets */} {/* Below is for list of jobs/tickets */}
</ScrollView> {/* </ScrollView> */}
<View style={{ flexGrow: 1 }}> <View style={{ flexGrow: 1 }}>
<LaborAllocationsTable jobId={currentSJobId?.value} /> <LaborAllocationsTable jobId={currentSJobId?.value} />
</View> </View>
</StyleRepeater>
</View> </View>
); );
} }
@@ -274,16 +292,22 @@ const localStyles = StyleSheet.create({
}, },
topContainer: {}, topContainer: {},
bottomContainer: {}, bottomContainer: {},
input: {}, input: {
marginVertical: 4,
marginHorizontal: 16,
height: 48,
justifyContent: "center",
alignContent: "center",
borderWidth: 0.8,
},
dateButton: { dateButton: {
marginVertical: 4, marginVertical: 4,
marginHorizontal: 16, marginHorizontal: 16,
height: 48, height: 48,
justifyContent: "center", justifyContent: "center",
alignContent: "center", alignContent: "center",
borderColor: "blue", borderColor: "gray",
borderWidth: 0.8, borderWidth: 0.8,
flex: 1,
}, },
textForButton: { textForButton: {
flex: 1, flex: 1,

2
translations/en-US/common.json
View File

@@ -496,7 +496,7 @@
}, },
"employeeclockedinlist": { "employeeclockedinlist": {
"labels": { "labels": {
"alreadyclockedon": "You are already clocked in to the following job(s):" "alreadyclockedon": "Clocked into job(s)"
} }
}, },
"clockedinlistitem": { "clockedinlistitem": {