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

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 { 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>
);