127 lines
4.4 KiB
JavaScript
127 lines
4.4 KiB
JavaScript
import { connect } from "react-redux";
|
|
import {
|
|
selectCurrentEmployee,
|
|
selectTechnician,
|
|
} from "../../redux/employee/employee.selectors";
|
|
import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
|
|
import { ActivityIndicator } from "react-native-paper";
|
|
import ErrorDisplay from "../error-display/error-display.component";
|
|
import { View, Text, FlatList, RefreshControl } from "react-native";
|
|
import { useQuery } from "@apollo/client";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { useTranslation } from "react-i18next";
|
|
import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
|
|
|
|
// import { setTmTicketJobId } from "../../redux/app/app.actions";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
technician: selectTechnician,
|
|
//currentEmployee: selectCurrentEmployee,
|
|
});
|
|
// const mapDispatchToProps = (dispatch) => ({
|
|
// setTmTicketJobId: (jobId) => dispatch(setTmTicketJobId(jobId)),
|
|
// });
|
|
|
|
export function EmployeeClockedInList({ technician }) {
|
|
const { t } = useTranslation();
|
|
|
|
const { loading, error, data, refetch } = useQuery(
|
|
QUERY_ACTIVE_TIME_TICKETS,
|
|
{
|
|
variables: {
|
|
employeeId: technician?.id,
|
|
},
|
|
skip: !technician,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
}
|
|
);
|
|
if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
|
|
if (error) return <ErrorDisplay errorMessage={error.message} />;
|
|
|
|
console.log("EmployeeClockedInList, QUERY_ACTIVE_TIME_TICKETS data:", data);
|
|
// if (data) () => {setTmTicketJobId(data)}
|
|
|
|
const onRefresh = async () => {
|
|
return refetch();
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
{data.timetickets.length > 0 ? (
|
|
<View>
|
|
<Text style={{ paddingLeft: 12, paddingTop: 14 }}>
|
|
You are already clocked in to the following job(s):
|
|
</Text>
|
|
<FlatList
|
|
data={data.timetickets}
|
|
refreshControl={
|
|
<RefreshControl refreshing={loading} onRefresh={onRefresh} />
|
|
}
|
|
renderItem={(object) => <ClockedinListItem ticket={object.item} />}
|
|
// setTmTicketJobId={setTmTicketJobId}
|
|
/>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
// <div>
|
|
// {data.timetickets.length > 0 ? (
|
|
// <div>
|
|
// <Typography.Title level={2}>
|
|
// {t("timetickets.labels.alreadyclockedon")}
|
|
// </Typography.Title>
|
|
// <List
|
|
// grid={{
|
|
// gutter: 32,
|
|
// xs: 1,
|
|
// sm: 2,
|
|
// md: 3,
|
|
// lg: 4,
|
|
// xl: 5,
|
|
// xxl: 6,
|
|
// }}
|
|
// dataSource={data.timetickets || []}
|
|
// renderItem={(ticket) => (
|
|
// <List.Item>
|
|
// <Card
|
|
// title={
|
|
// <Link to={`/tech/joblookup?selected=${ticket.job.id}`}>
|
|
// {`${
|
|
// ticket.job.ro_number || t("general.labels.na")
|
|
// } ${OwnerNameDisplayFunction(ticket.job)}`}
|
|
// </Link>
|
|
// }
|
|
// actions={[
|
|
// <TechClockOffButton
|
|
// jobId={ticket.jobid}
|
|
// timeTicketId={ticket.id}
|
|
// completedCallback={refetch}
|
|
// />,
|
|
// ]}
|
|
// >
|
|
// <div>
|
|
// {`
|
|
// ${ticket.job.v_model_yr || ""} ${
|
|
// ticket.job.v_make_desc || ""
|
|
// } ${ticket.job.v_model_desc || ""}`}
|
|
// </div>
|
|
// <DataLabel label={t("timetickets.fields.clockon")}>
|
|
// <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
|
|
// </DataLabel>
|
|
// <DataLabel label={t("timetickets.fields.cost_center")}>
|
|
// {ticket.cost_center === "timetickets.labels.shift"
|
|
// ? t(ticket.cost_center)
|
|
// : ticket.cost_center}
|
|
// </DataLabel>
|
|
// </Card>
|
|
// </List.Item>
|
|
// )}
|
|
// ></List>
|
|
// </div>
|
|
// ) : null}
|
|
// </div>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(EmployeeClockedInList);
|