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

234
components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
View File

@@ -1,7 +1,20 @@
import React, { useCallback, useState } from "react";
import moment from "moment";
import { View, Text, StyleSheet, ScrollView, RefreshControl} from "react-native";
import { Button, Card, Headline, Subheading } from "react-native-paper";
import {
View,
Text,
StyleSheet,
ScrollView,
RefreshControl,
FlatList,
} from "react-native";
import {
ActivityIndicator,
Button,
Card,
Headline,
Subheading,
} from "react-native-paper";
import styles from "../styles";
import axios from "axios";
@@ -9,14 +22,21 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
import { selectCurrentEmployee, selectRates, selectGettingRates, selectSignInError, selectEmployeeFullName,
import {
selectCurrentEmployee,
selectRates,
selectGettingRates,
selectSignInError,
selectEmployeeFullName,
} from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { JobIdSearchSelect } from "../Selects/select-job-id";
import CostCenterSelect from "../Selects/select-cost-center";
import CostCenterSelect from "../Selects/select-cost-center";
import ErrorDisplay from "../error-display/error-display.component";
import { selectCurrentTimeTicketJob, selectCurrentTimeTicketJobId,
import {
selectCurrentTimeTicketJob,
selectCurrentTimeTicketJobId,
} from "../../redux/timetickets/timetickets.selectors";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { useMutation, useQuery } from "@apollo/client";
@@ -26,8 +46,9 @@ import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.
import { logImEXEvent } from "../../firebase/firebase.analytics";
import StyleRepeater from "../style-repeater/style-repeater";
import { useTranslation } from "react-i18next";
// import SignOutButton from "../Buttons/employee-sign-out-button.component";
// import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
import SignOutButton from "../Buttons/employee-sign-out-button.component";
import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
const mapStateToProps = createStructuredSelector({
currentEmployee: selectCurrentEmployee,
@@ -60,6 +81,7 @@ export function ScreenTimeTicketBrowser({
const [currentSCC, setCurrentSCC] = useState(null);
const [currentSJobId, setCurrentSJobId] = useState(null);
const [loading, setLoading] = useState(false);
const [loadingClockIn, setLoadingClockIn] = useState(false);
const [error, setError] = useState(null);
const [refreshing, setRefreshing] = useState(false);
const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
@@ -68,7 +90,7 @@ export function ScreenTimeTicketBrowser({
const handleFinish = async (values) => {
// 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: <ActivityIndicator color="dodgerblue" size="large" />,
}));
return;
}
if (errorATT) {
// console.error("ErrorATT : ",errorATT);
setItemState((itemState) => ({
...itemState,
content: <ErrorDisplay errorMessage={errorATT.message} />,
}));
return;
}
// console.log({ itemState: !!itemState });
return (
<ScrollView
style={styles.cardBackground}
// contentContainerStyle={{ flexGrow: 0 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<StyleRepeater childStyle={{ margin: 4 }}>
<Card>
<Card.Title title={t("timeticketbrowser.labels.loggedinemployee")}
// right={(props) => <SignOutButton />}
/>
<Card.Content>
{currentEmployeeFullName && (
<Subheading>{currentEmployeeFullName}</Subheading>
)}
</Card.Content>
</Card>
<Card>
<Card.Title title={t("timeticketbrowser.labels.clockintojob")}
// right={(props) =>
// <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
// <Button mode="outlined"
// compact={true} loading={loading} onPress={handleFinish}
// style={{margin:4}}
// >
// <Text>Clock In</Text>
// </Button></View>
// }
/>
<Card.Content>
<JobIdSearchSelect
currentValue={currentSJobId}
onJobSelected={setCurrentSJobId}
convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
notExported={!currentBodyshop.tt_allow_post_to_invoiced}
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
/>
<CostCenterSelect
currentValue={currentSCC}
currentRatesNCostCenters={currentRatesNCostCenters}
onValueSelected={setCurrentSCC}
/>
{error && error?.message ? (
<ErrorDisplay errorMessage={error.message} />
) : null}
<Button mode="outlined" loading={loading} onPress={handleFinish}>
<Text>{t("timeticketbrowser.actions.clockin")}</Text>
</Button>
</Card.Content>
</Card>
</StyleRepeater>
<View style={{ flexGrow: 1, flex: 1 }}>
<EmployeeClockedInList
technician={currentEmployee}
isRefresh={refreshing}
/>
</View>
</ScrollView>
<View style={styles.cardBackground}>
<FlatList
ListHeaderComponent={
<Card style={localStyles.localCardStyle}>
<Card.Title
title={t("timeticketbrowser.labels.loggedinemployee")}
// right={(props) => <SignOutButton />}
/>
<Card.Content>
{currentEmployeeFullName && (
<Subheading>{currentEmployeeFullName}</Subheading>
)}
</Card.Content>
</Card>
}
data={!!itemState ? [itemState] : null}
renderItem={({ item }) => (
<MyItem style={localStyles.localCardStyle} itemState={item} />
)}
ListFooterComponent={
<Card style={localStyles.localCardStyle}>
<Card.Title
title={t("timeticketbrowser.labels.clockintojob")}
// right={(props) =>
// <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
// <Button mode="outlined"
// compact={true} loading={loading} onPress={handleFinish}
// style={{margin:4}}
// >
// <Text>Clock In</Text>
// </Button></View>
// }
/>
<Card.Content>
<JobIdSearchSelect
currentValue={currentSJobId}
onJobSelected={setCurrentSJobId}
convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
notExported={!currentBodyshop.tt_allow_post_to_invoiced}
notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
/>
<CostCenterSelect
currentValue={currentSCC}
currentRatesNCostCenters={currentRatesNCostCenters}
onValueSelected={setCurrentSCC}
/>
{error && error?.message ? (
<ErrorDisplay errorMessage={error.message} />
) : null}
<Button
mode="outlined"
style={styles.buttonBasicOutlined}
loading={loadingClockIn}
onPress={handleFinish}
>
<Text>{t("timeticketbrowser.actions.clockin")}</Text>
</Button>
</Card.Content>
</Card>
}
refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
}
/>
</View>
);
}
const MyItem = ({ itemState, style }) => {
const items = itemState?.data;
return (
<Card key={itemState.title} style={style}>
<Card.Title title={itemState.title} />
<Card.Content>
{!!items ? (
items.map((item) => <ClockedinListItem ticket={item} />)
) : !!itemState.content ? (
itemState.content
) : (
<Text>No Data</Text>
)}
</Card.Content>
</Card>
);
};
const localStyles = StyleSheet.create({
content: {
display: "flex",
flex: 2,
},
localCardStyle: {
margin: 4,
},
});
export default connect(