112 lines
4.1 KiB
JavaScript
112 lines
4.1 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,Button, List, Modal, Portal, Searchbar } 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";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
technician: selectTechnician,
|
|
//currentEmployee: selectCurrentEmployee,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({});
|
|
|
|
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} />;
|
|
//if (error) return <AlertComponent message={error.message} type="error" />;
|
|
console.log("QUERY_ACTIVE_TIME_TICKETS data",data)
|
|
|
|
const onRefresh = async () => {
|
|
return refetch();
|
|
};
|
|
return (
|
|
<View>
|
|
{data.timetickets.length > 0 ? (
|
|
<View>
|
|
<Text>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} />} />
|
|
</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,
|
|
mapDispatchToProps
|
|
)(EmployeeClockedInList);
|