updated styling and display jobslist above clockin
This commit is contained in:
jfrye122
@@ -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