From 9828ee3da082d3bc5f029838c411be225354b4fa Mon Sep 17 00:00:00 2001 From: jfrye122 Date: Thu, 8 Jun 2023 15:28:03 -0400 Subject: [PATCH] updated styling and display jobslist above clockin --- components/Selects/select-cost-center.jsx | 2 +- components/Selects/select-job-id.jsx | 5 +- .../labor-allocations-table.component.jsx | 6 +- .../screen-time-ticket-browser.component.jsx | 234 ++++++++++++------ components/styles.js | 19 ++ .../clockedin-list-item.component.jsx | 10 +- .../screen-time-ticket-clockoff.component.jsx | 155 +++++++----- .../screen-time-ticket-create.component.jsx | 218 ++++++++-------- translations/en-US/common.json | 2 +- 9 files changed, 407 insertions(+), 244 deletions(-) diff --git a/components/Selects/select-cost-center.jsx b/components/Selects/select-cost-center.jsx index 581f9a0..7c9b0df 100644 --- a/components/Selects/select-cost-center.jsx +++ b/components/Selects/select-cost-center.jsx @@ -85,7 +85,7 @@ const styles = StyleSheet.create({ height: 48, borderColor: "gray", borderWidth: 0.5, - borderRadius: 8, + borderRadius: 4, paddingHorizontal: 8, }, icon: { diff --git a/components/Selects/select-job-id.jsx b/components/Selects/select-job-id.jsx index efa3e11..7846b04 100644 --- a/components/Selects/select-job-id.jsx +++ b/components/Selects/select-job-id.jsx @@ -173,7 +173,8 @@ export default connect(null, null)(JobIdSearchSelect); const styles = StyleSheet.create({ container: { - padding: 16, + marginVertical: 4, + marginHorizontal: 16, justifyContent: "center", alignContent: "center", }, @@ -181,7 +182,7 @@ const styles = StyleSheet.create({ height: 50, borderColor: "gray", borderWidth: 0.5, - borderRadius: 8, + borderRadius: 4, paddingHorizontal: 8, }, icon: { diff --git a/components/labor-allocations-table/labor-allocations-table.component.jsx b/components/labor-allocations-table/labor-allocations-table.component.jsx index 8a44a75..d26c06f 100644 --- a/components/labor-allocations-table/labor-allocations-table.component.jsx +++ b/components/labor-allocations-table/labor-allocations-table.component.jsx @@ -82,12 +82,11 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi // console.log("labor summary is:", summary); return ( - + {typeof data !== "undefined" ? ( - Labor Allocations + - Cost Center Hours Total @@ -97,7 +96,6 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi Difference - { // console.log("handleFinish called in ScreenTimeTicketBrowser"); - setLoading(true); + setLoadingClockIn(true); setError(null); const theTime = (await axios.post("/utils/time")).data; @@ -78,7 +100,7 @@ export function ScreenTimeTicketBrowser({ // console.log("have all values"); } else { // console.log("missing values!"); - setLoading(false); + setLoadingClockIn(false); setError({ message: t("timeticketbrowser.errors.missingvalues") }); return; } @@ -112,7 +134,7 @@ export function ScreenTimeTicketBrowser({ // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] ); const result = await insertTimeTicket(tempVariablesObj); // console.log("insertTimeTicket, result :", result); - setLoading(false); + setLoadingClockIn(false); if (!!result.errors) { // console.log("insertTimeTicket, result.error :", result.errors); setError(JSON.stringify(result.errors)); @@ -122,81 +144,153 @@ export function ScreenTimeTicketBrowser({ setCurrentSCC(null); } }; + const onRefresh = useCallback(() => { setRefreshing(true); + refetch(); setTimeout(() => { 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: , + })); + return; + } + if (errorATT) { + // console.error("ErrorATT : ",errorATT); + setItemState((itemState) => ({ + ...itemState, + content: , + })); + return; + } + // console.log({ itemState: !!itemState }); + return ( - - } - > - - - } - /> - - {currentEmployeeFullName && ( - {currentEmployeeFullName} - )} - - - - - // - // - // } - /> - - - - {error && error?.message ? ( - - ) : null} - - - - - - - - + + + } + /> + + {currentEmployeeFullName && ( + {currentEmployeeFullName} + )} + + + } + data={!!itemState ? [itemState] : null} + renderItem={({ item }) => ( + + )} + ListFooterComponent={ + + + // + // + // } + /> + + + + {error && error?.message ? ( + + ) : null} + + + + } + refreshControl={ + + } + /> + ); } +const MyItem = ({ itemState, style }) => { + const items = itemState?.data; + return ( + + + + {!!items ? ( + items.map((item) => ) + ) : !!itemState.content ? ( + itemState.content + ) : ( + No Data + )} + + + ); +}; + const localStyles = StyleSheet.create({ content: { display: "flex", flex: 2, }, + localCardStyle: { + margin: 4, + }, }); export default connect( diff --git a/components/styles.js b/components/styles.js index 3ca0bee..6aebb5f 100644 --- a/components/styles.js +++ b/components/styles.js @@ -9,4 +9,23 @@ export default StyleSheet.create({ display: "flex", 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, + } }); diff --git a/components/time-ticket-items/clockedin-list-item.component.jsx b/components/time-ticket-items/clockedin-list-item.component.jsx index 7505208..36b0272 100644 --- a/components/time-ticket-items/clockedin-list-item.component.jsx +++ b/components/time-ticket-items/clockedin-list-item.component.jsx @@ -6,13 +6,14 @@ import { connect } from "react-redux"; import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component"; import { DateTimeFormatter } from "../../util/DateFormater"; import { setTmTicketJobId } from "../../redux/app/app.actions"; +import styles from "../styles"; const mapDispatchToProps = (dispatch) => ({ setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)), }); export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) { - // console.log("makeNavToTimeTicketClockOff, handleRefresh:"); + // console.log("ClockedinListItem, ticket:",ticket); const { t } = useTranslation(); const navigation = useNavigation(); @@ -28,7 +29,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) { ); return ( - + - - diff --git a/components/time-ticket/screen-time-ticket-clockoff.component.jsx b/components/time-ticket/screen-time-ticket-clockoff.component.jsx index 3fcadd6..46ab509 100644 --- a/components/time-ticket/screen-time-ticket-clockoff.component.jsx +++ b/components/time-ticket/screen-time-ticket-clockoff.component.jsx @@ -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 ( - - {/* style={localStyles.content}> */} + + {/* style={localStyles.content}> */} - - - {({ handleChange, handleBlur, handleSubmit, values }) => ( - - - - - {error ? : null} - - - )} - + + + + {({ handleChange, handleBlur, handleSubmit, values }) => ( + + + + + {error ? : null} + + + )} + + - + + + ); diff --git a/components/time-ticket/screen-time-ticket-create.component.jsx b/components/time-ticket/screen-time-ticket-create.component.jsx index cc81872..d2da332 100644 --- a/components/time-ticket/screen-time-ticket-create.component.jsx +++ b/components/time-ticket/screen-time-ticket-create.component.jsx @@ -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 ( - - - - {({ handleChange, handleBlur, handleSubmit, values }) => ( - - - {/* Below will be replaced with a Date Picker*/} - {/* */} - - - - - - - {error ? : null} - - - )} - - + + + {/* */} + + + + {({ handleChange, handleBlur, handleSubmit, values }) => ( + + + {/* Below will be replaced with a Date Picker*/} + {/* */} + + + + + + + {error ? : null} + + + )} + + + {/* Below is for list of jobs/tickets */} - - - - + {/* */} + + + + ); } @@ -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, diff --git a/translations/en-US/common.json b/translations/en-US/common.json index 5aabbc7..40bf6d6 100644 --- a/translations/en-US/common.json +++ b/translations/en-US/common.json @@ -496,7 +496,7 @@ }, "employeeclockedinlist": { "labels": { - "alreadyclockedon": "You are already clocked in to the following job(s):" + "alreadyclockedon": "Clocked into job(s)" } }, "clockedinlistitem": {