updated styling and display jobslist above clockin
This commit is contained in:
jfrye122
@@ -4,13 +4,22 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { Button, TextInput, Card, Headline, Subheading } from "react-native-paper";
|
||||
import CostCenterSelect from "../Selects/select-cost-center";
|
||||
import {
|
||||
Button,
|
||||
TextInput,
|
||||
Card,
|
||||
Headline,
|
||||
Subheading,
|
||||
} from "react-native-paper";
|
||||
import CostCenterSelect from "../Selects/select-cost-center";
|
||||
import {
|
||||
selectCurrentEmployee,
|
||||
selectRates,
|
||||
} 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 { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
|
||||
import { useMutation } from "@apollo/client";
|
||||
@@ -30,7 +39,7 @@ const mapStateToProps = createStructuredSelector({
|
||||
currentRatesNCostCenters: selectRates,
|
||||
currentBodyshop: selectBodyshop,
|
||||
currentTmTicketJobId: selectCurrentTmTicketJobId,
|
||||
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag
|
||||
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
timeTicketClockOutStart,
|
||||
@@ -44,14 +53,12 @@ export function TimeTicketClockOff({
|
||||
currentRestrictClaimableHoursFlag,
|
||||
route,
|
||||
}) {
|
||||
|
||||
const costCenterDiff = useRef(0);
|
||||
// console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
|
||||
|
||||
|
||||
const setCostCenterDiff = (value) => {
|
||||
countRef.current = val;
|
||||
console.log(`Button clicked ${countRef.current} times`);
|
||||
// console.log(`Button clicked ${countRef.current} times`);
|
||||
};
|
||||
|
||||
const navigation = useNavigation();
|
||||
@@ -64,8 +71,9 @@ export function TimeTicketClockOff({
|
||||
const [error, setError] = useState(null);
|
||||
const [currentSCC, setCurrentSCC] = useState(null);
|
||||
|
||||
const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET,
|
||||
{refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]});
|
||||
const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET, {
|
||||
refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
|
||||
});
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
logImEXEvent("TimeTicketClockOff_handleFinish");
|
||||
@@ -75,7 +83,7 @@ export function TimeTicketClockOff({
|
||||
!!values.productivehours &&
|
||||
!!currentSCC?.value
|
||||
) {
|
||||
if (isNaN(values.actualhours)|isNaN(values.productivehours)) {
|
||||
if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
|
||||
// console.log("actual hours is NAN!");
|
||||
setLoading(false);
|
||||
setError({ message: t("timeticketclockoff.errors.nan") });
|
||||
@@ -85,16 +93,18 @@ export function TimeTicketClockOff({
|
||||
// console.log("all have values:");
|
||||
} else {
|
||||
// console.log("missing values!");
|
||||
setError({ message: t("timeticketclockoff.errors.missingvalues") });
|
||||
setError({ message: t("timeticketclockoff.errors.missingvalues") });
|
||||
return;
|
||||
}
|
||||
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag :", currentRestrictClaimableHoursFlag);
|
||||
if(!!currentRestrictClaimableHoursFlag){
|
||||
if (!!currentRestrictClaimableHoursFlag) {
|
||||
// console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
|
||||
if (values.productivehours > costCenterDiff.current){
|
||||
setError({ message: t("timeticketclockoff.errors.hoursenteredmorethanavailable") });
|
||||
if (values.productivehours > costCenterDiff.current) {
|
||||
setError({
|
||||
message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tempcallobj = {
|
||||
@@ -140,65 +150,80 @@ export function TimeTicketClockOff({
|
||||
// console.log("updateTimeticket, result :", result);
|
||||
setLoading(false);
|
||||
if (!!result.errors) {
|
||||
console.log("updateTimeticket, result.error :", result.errors);
|
||||
// console.log("updateTimeticket, result.error :", result.errors);
|
||||
setError(JSON.stringify(result.errors));
|
||||
} else {
|
||||
console.log("updateTimeticket, result :", result.data);
|
||||
// console.log("updateTimeticket, result :", result.data);
|
||||
navigation.goBack();
|
||||
}
|
||||
//if (completedCallback) completedCallback();
|
||||
};
|
||||
return (
|
||||
<View style={styles.cardBackground}>
|
||||
{/* style={localStyles.content}> */}
|
||||
<View style={styles.cardBackground}>
|
||||
{/* style={localStyles.content}> */}
|
||||
<StyleRepeater childStyle={{ margin: 4 }}>
|
||||
<Card>
|
||||
<Formik
|
||||
initialValues={{
|
||||
costcenter: { currentSCC },
|
||||
productivehours: "",
|
||||
actualhours: "",
|
||||
}}
|
||||
onSubmit={handleFinish}
|
||||
>
|
||||
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
||||
<View style={localStyles.topTimeTicketContainer}>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("actualhours")}
|
||||
onBlur={handleBlur("actualhours")}
|
||||
value={values.actualhours}
|
||||
label={t("timeticketclockoff.labels.actualhoursplaceholder")}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("productivehours")}
|
||||
onBlur={handleBlur("productivehours")}
|
||||
value={values.productivehours}
|
||||
label={t("timeticketclockoff.labels.productivehoursplaceholder")}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<CostCenterSelect
|
||||
currentRatesNCostCenters={currentRatesNCostCenters}
|
||||
currentValue={currentSCC}
|
||||
onValueSelected={setCurrentSCC}
|
||||
/>
|
||||
{error ? <ErrorDisplay errorMessage={error.message} /> : null}
|
||||
<Button
|
||||
style={localStyles.input}
|
||||
onPress={handleSubmit}
|
||||
title={t("timeticketclockoff.actions.clockoff")}
|
||||
>
|
||||
<Text style={{ fontSize: 12 }}>{t("timeticketclockoff.actions.clockoff")}</Text>
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</Formik>
|
||||
<Card>
|
||||
<Card.Content>
|
||||
<Formik
|
||||
initialValues={{
|
||||
costcenter: { currentSCC },
|
||||
productivehours: "",
|
||||
actualhours: "",
|
||||
}}
|
||||
onSubmit={handleFinish}
|
||||
>
|
||||
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
||||
<View style={localStyles.topTimeTicketContainer}>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("actualhours")}
|
||||
onBlur={handleBlur("actualhours")}
|
||||
value={values.actualhours}
|
||||
label={t(
|
||||
"timeticketclockoff.labels.actualhoursplaceholder"
|
||||
)}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("productivehours")}
|
||||
onBlur={handleBlur("productivehours")}
|
||||
value={values.productivehours}
|
||||
label={t(
|
||||
"timeticketclockoff.labels.productivehoursplaceholder"
|
||||
)}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<CostCenterSelect
|
||||
currentRatesNCostCenters={currentRatesNCostCenters}
|
||||
currentValue={currentSCC}
|
||||
onValueSelected={setCurrentSCC}
|
||||
/>
|
||||
{error ? <ErrorDisplay errorMessage={error.message} /> : null}
|
||||
<Button
|
||||
mode="outlined"
|
||||
style={styles.buttonBasicOutlined}
|
||||
onPress={handleSubmit}
|
||||
title={t("timeticketclockoff.actions.clockoff")}
|
||||
>
|
||||
<Text style={{ fontSize: 12 }}>
|
||||
{t("timeticketclockoff.actions.clockoff")}
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</Formik>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<LaborAllocationsTable jobId={currentTmTicketJobId} costCenterDiff={costCenterDiff} selectedCostCenter={currentSCC}/>
|
||||
<View style={{ flexGrow: 1 }}>
|
||||
<LaborAllocationsTable
|
||||
jobId={currentTmTicketJobId}
|
||||
costCenterDiff={costCenterDiff}
|
||||
selectedCostCenter={currentSCC}
|
||||
/>
|
||||
</View >
|
||||
</StyleRepeater>
|
||||
</View>
|
||||
);
|
||||
|
||||
@@ -4,14 +4,14 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { Button, Dialog, TextInput } from "react-native-paper";
|
||||
import CostCenterSelect from "../Selects/select-cost-center";
|
||||
import { Button, TextInput, Card } from "react-native-paper";
|
||||
import CostCenterSelect from "../Selects/select-cost-center";
|
||||
import { JobIdSearchSelect } from "../Selects/select-job-id";
|
||||
import DateTimePickerModal from "react-native-modal-datetime-picker";
|
||||
import {
|
||||
selectCurrentEmployee,
|
||||
selectRates,
|
||||
selectEmployeeFullName
|
||||
selectEmployeeFullName,
|
||||
} from "../../redux/employee/employee.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { useCallback } from "react";
|
||||
@@ -26,11 +26,14 @@ import { logImEXEvent } from "../../firebase/firebase.analytics";
|
||||
import moment from "moment";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
|
||||
import styles from "../styles";
|
||||
import StyleRepeater from "../style-repeater/style-repeater";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentEmployee: selectCurrentEmployee,
|
||||
currentRatesNCostCenters: selectRates,
|
||||
currentBodyshop: selectBodyshop,
|
||||
currentEmployeeFullName: selectEmployeeFullName
|
||||
currentEmployeeFullName: selectEmployeeFullName,
|
||||
});
|
||||
// const mapDispatchToProps = (dispatch) => ({});
|
||||
|
||||
@@ -38,7 +41,7 @@ export function TimeTicketCreate({
|
||||
currentEmployee,
|
||||
currentRatesNCostCenters,
|
||||
currentBodyshop,
|
||||
currentEmployeeFullName
|
||||
currentEmployeeFullName,
|
||||
}) {
|
||||
const navigation = useNavigation();
|
||||
const { t } = useTranslation();
|
||||
@@ -95,7 +98,7 @@ export function TimeTicketCreate({
|
||||
} else {
|
||||
// console.log("missing values!");
|
||||
setLoading(false);
|
||||
setError({ message: t("createtimeticket.errors.missingvalues")});
|
||||
setError({ message: t("createtimeticket.errors.missingvalues") });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -172,95 +175,110 @@ export function TimeTicketCreate({
|
||||
setLoading(false);
|
||||
};
|
||||
return (
|
||||
<View style={localStyles.content}>
|
||||
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
||||
<Formik
|
||||
initialValues={{
|
||||
jobid: { currentSJobId },
|
||||
ticketdate: date2.toLocaleDateString(),
|
||||
employee: {currentEmployeeFullName},
|
||||
costcenter: { currentSCC },
|
||||
productivehours: "",
|
||||
actualhours: "",
|
||||
}}
|
||||
onSubmit={handleFinish}
|
||||
>
|
||||
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
||||
<View style={localStyles.topTimeTicketContainer}>
|
||||
<JobIdSearchSelect
|
||||
currentValue={currentSJobId}
|
||||
onJobSelected={setCurrentSJobId}
|
||||
convertedOnly={true}
|
||||
notExported={!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
|
||||
mode="outlined"
|
||||
title="TicketDatePickerButton"
|
||||
onPress={showDatePicker}
|
||||
style={localStyles.dateButton}
|
||||
>
|
||||
<Text style={localStyles.textForButton}>
|
||||
{t("createtimeticket.actions.ticketdate")}{date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' })}
|
||||
</Text>
|
||||
</Button>
|
||||
<DateTimePickerModal
|
||||
isVisible={isDatePickerVisible}
|
||||
mode="date"
|
||||
date={date2}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={hideDatePicker}
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
disabled={true}
|
||||
value={currentEmployeeFullName}
|
||||
label={t("createtimeticket.labels.employeeplaceholder")}
|
||||
/>
|
||||
<CostCenterSelect
|
||||
currentRatesNCostCenters={currentRatesNCostCenters}
|
||||
currentValue={currentSCC}
|
||||
onValueSelected={setCurrentSCC}
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("productivehours")}
|
||||
onBlur={handleBlur("productivehours")}
|
||||
value={values.productivehours}
|
||||
label={t("createtimeticket.labels.productivehoursplaceholder")}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("actualhours")}
|
||||
onBlur={handleBlur("actualhours")}
|
||||
value={values.actualhours}
|
||||
label={t("createtimeticket.labels.actualhoursplaceholder")}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
{error ? <ErrorDisplay errorMessage={error.message} /> : null}
|
||||
<Button
|
||||
style={localStyles.input}
|
||||
onPress={handleSubmit}
|
||||
loading={loading}
|
||||
title="Submit"
|
||||
>
|
||||
<Text style={{ fontSize: 12 }}>{t("createtimeticket.actions.createticket")}</Text>
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
<View style={styles.cardBackground}>
|
||||
<StyleRepeater childStyle={{ margin: 4 }}>
|
||||
{/* <ScrollView contentContainerStyle={{ flexGrow: 1 }}> */}
|
||||
<Card>
|
||||
<Card.Content>
|
||||
<Formik
|
||||
initialValues={{
|
||||
jobid: { currentSJobId },
|
||||
ticketdate: date2.toLocaleDateString(),
|
||||
employee: { currentEmployeeFullName },
|
||||
costcenter: { currentSCC },
|
||||
productivehours: "",
|
||||
actualhours: "",
|
||||
}}
|
||||
onSubmit={handleFinish}
|
||||
>
|
||||
{({ handleChange, handleBlur, handleSubmit, values }) => (
|
||||
<View style={localStyles.topTimeTicketContainer}>
|
||||
<JobIdSearchSelect
|
||||
currentValue={currentSJobId}
|
||||
onJobSelected={setCurrentSJobId}
|
||||
convertedOnly={true}
|
||||
notExported={!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
|
||||
mode="outlined"
|
||||
title="TicketDatePickerButton"
|
||||
onPress={showDatePicker}
|
||||
style={localStyles.dateButton}
|
||||
>
|
||||
<Text style={localStyles.textForButton}>
|
||||
{t("createtimeticket.actions.ticketdate")}
|
||||
{date2.toLocaleDateString("en-US", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</Text>
|
||||
</Button>
|
||||
<DateTimePickerModal
|
||||
isVisible={isDatePickerVisible}
|
||||
mode="date"
|
||||
date={date2}
|
||||
onConfirm={handleConfirm}
|
||||
onCancel={hideDatePicker}
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
disabled={true}
|
||||
value={currentEmployeeFullName}
|
||||
label={t("createtimeticket.labels.employeeplaceholder")}
|
||||
/>
|
||||
<CostCenterSelect
|
||||
currentRatesNCostCenters={currentRatesNCostCenters}
|
||||
currentValue={currentSCC}
|
||||
onValueSelected={setCurrentSCC}
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("productivehours")}
|
||||
onBlur={handleBlur("productivehours")}
|
||||
value={values.productivehours}
|
||||
label={t(
|
||||
"createtimeticket.labels.productivehoursplaceholder"
|
||||
)}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<TextInput
|
||||
style={localStyles.inputStyle}
|
||||
mode="outlined"
|
||||
onChangeText={handleChange("actualhours")}
|
||||
onBlur={handleBlur("actualhours")}
|
||||
value={values.actualhours}
|
||||
label={t("createtimeticket.labels.actualhoursplaceholder")}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
{error ? <ErrorDisplay errorMessage={error.message} /> : null}
|
||||
<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 */}
|
||||
</ScrollView>
|
||||
<View style={{ flexGrow: 1 }}>
|
||||
<LaborAllocationsTable jobId={currentSJobId?.value} />
|
||||
</View>
|
||||
{/* </ScrollView> */}
|
||||
<View style={{ flexGrow: 1 }}>
|
||||
<LaborAllocationsTable jobId={currentSJobId?.value} />
|
||||
</View>
|
||||
</StyleRepeater>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -274,16 +292,22 @@ const localStyles = StyleSheet.create({
|
||||
},
|
||||
topContainer: {},
|
||||
bottomContainer: {},
|
||||
input: {},
|
||||
input: {
|
||||
marginVertical: 4,
|
||||
marginHorizontal: 16,
|
||||
height: 48,
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
borderWidth: 0.8,
|
||||
},
|
||||
dateButton: {
|
||||
marginVertical: 4,
|
||||
marginHorizontal: 16,
|
||||
height: 48,
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
borderColor: "blue",
|
||||
borderColor: "gray",
|
||||
borderWidth: 0.8,
|
||||
flex: 1,
|
||||
},
|
||||
textForButton: {
|
||||
flex: 1,
|
||||
|
||||
Reference in New Issue
Block a user