added styling for allocation table
This commit is contained in:
jfrye122
@@ -1,6 +1,6 @@
|
||||
import { Formik } from "formik";
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet, Text, View, ScrollView } from "react-native";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { StyleSheet, Text, View, ScrollView, RefreshControl } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -13,7 +13,10 @@ import {
|
||||
selectRates,
|
||||
selectEmployeeFullName,
|
||||
} 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 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 StyleRepeater from "../style-repeater/style-repeater";
|
||||
import { FlatList } from "react-native";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentEmployee: selectCurrentEmployee,
|
||||
currentRatesNCostCenters: selectRates,
|
||||
currentBodyshop: selectBodyshop,
|
||||
currentEmployeeFullName: selectEmployeeFullName,
|
||||
currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
|
||||
});
|
||||
// const mapDispatchToProps = (dispatch) => ({});
|
||||
|
||||
@@ -42,10 +47,13 @@ export function TimeTicketCreate({
|
||||
currentRatesNCostCenters,
|
||||
currentBodyshop,
|
||||
currentEmployeeFullName,
|
||||
currentRestrictClaimableHoursFlag,
|
||||
}) {
|
||||
const costCenterDiff = useRef(0);
|
||||
const navigation = useNavigation();
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingCreate, setLoadingCreate] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
|
||||
@@ -72,7 +80,7 @@ export function TimeTicketCreate({
|
||||
logImEXEvent("handleFinish_called_in_TimeTicketCreate");
|
||||
// console.log("handleFinish called in TimeTicketCreate");
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
setLoadingCreate(true);
|
||||
|
||||
// console.log("insertTicket, currentSCC :", currentSCC);
|
||||
// console.log("insertTicket, currentSCC :", currentSJobId);
|
||||
@@ -89,7 +97,7 @@ export function TimeTicketCreate({
|
||||
) {
|
||||
if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
|
||||
// console.log("actual hours is NAN!");
|
||||
setLoading(false);
|
||||
setLoadingCreate(false);
|
||||
setError({ message: t("createtimeticket.errors.nan") });
|
||||
return;
|
||||
}
|
||||
@@ -97,11 +105,22 @@ export function TimeTicketCreate({
|
||||
// console.log("have all values");
|
||||
} else {
|
||||
// console.log("missing values!");
|
||||
setLoading(false);
|
||||
setLoadingCreate(false);
|
||||
setError({ message: t("createtimeticket.errors.missingvalues") });
|
||||
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("bodyshopid : ", currentBodyshop.id);
|
||||
// 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);
|
||||
// //after call results are retuning add handling below for cases
|
||||
// console.log("insertTicket, result :", result?.data?.insert_timetickets?.returning[0]);
|
||||
setLoading(false);
|
||||
setLoadingCreate(false);
|
||||
if (!!result.errors) {
|
||||
// console.log("insertTicket, result.error :", result.errors);
|
||||
setError(JSON.stringify(result.errors));
|
||||
@@ -166,119 +185,140 @@ export function TimeTicketCreate({
|
||||
// if (completedCallback) completedCallback();
|
||||
};
|
||||
|
||||
const handleMutationError = (error) => {
|
||||
// setEnterAgain(false);
|
||||
console.log("insertTicket, result.error :", error);
|
||||
setError(
|
||||
error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
|
||||
);
|
||||
setLoading(false);
|
||||
};
|
||||
// const handleMutationError = (error) => {
|
||||
// // setEnterAgain(false);
|
||||
// console.log("insertTicket, result.error :", error);
|
||||
// setError(
|
||||
// error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
|
||||
// );
|
||||
// setLoading(false);
|
||||
// };
|
||||
|
||||
const onRefresh = useCallback(() => {
|
||||
setLoading(true);
|
||||
// refetch();
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<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>
|
||||
</StyleRepeater>
|
||||
<FlatList
|
||||
ListHeaderComponent={
|
||||
<Card style={localStyles.localCardStyle}>
|
||||
<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}
|
||||
/>
|
||||
<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={loadingCreate}
|
||||
title="Submit"
|
||||
>
|
||||
<Text style={{ fontSize: 12 }}>
|
||||
{t("createtimeticket.actions.createticket")}
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
)}
|
||||
</Formik>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
}
|
||||
data={null}
|
||||
renderItem={null}
|
||||
ListFooterComponent={
|
||||
<LaborAllocationsTable
|
||||
jobId={currentSJobId?.value}
|
||||
costCenterDiff={costCenterDiff}
|
||||
selectedCostCenter={currentSCC}
|
||||
style={localStyles.localCardStyle}
|
||||
shouldRefresh={loading}
|
||||
/>
|
||||
}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -320,4 +360,7 @@ const localStyles = StyleSheet.create({
|
||||
height: 48,
|
||||
fontSize: 16,
|
||||
},
|
||||
localCardStyle: {
|
||||
margin: 4,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user